diff options
Diffstat (limited to 'themes/twentynineteen/sass')
40 files changed, 4511 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/_normalize.scss b/themes/twentynineteen/sass/_normalize.scss new file mode 100644 index 00000000..c5ad67a1 --- /dev/null +++ b/themes/twentynineteen/sass/_normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/themes/twentynineteen/sass/blocks/_blocks.scss b/themes/twentynineteen/sass/blocks/_blocks.scss new file mode 100644 index 00000000..479ee33d --- /dev/null +++ b/themes/twentynineteen/sass/blocks/_blocks.scss @@ -0,0 +1,923 @@ +/* !Block styles */ + +.entry .entry-content > *, +.entry .entry-summary > * { + margin: 32px 0; + max-width: 100%; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 32px 0; + } + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + &.alignwide { + margin-left: auto; + margin-right: auto; + clear: both; + + @include media(tablet) { + width: 100%; + max-width: 100%; + } + } + + &.alignfull { + position: relative; + left: -#{$size__spacing-unit }; + width: calc( 100% + (2 * #{$size__spacing-unit})); + max-width: calc( 100% + (2 * #{$size__spacing-unit})); + clear: both; + + @include media(tablet) { + margin-top: calc(2 * #{$size__spacing-unit}); + margin-bottom: calc(2 * #{$size__spacing-unit}); + left: calc( -12.5% - 75px ); + width: calc( 125% + 150px ); + max-width: calc( 125% + 150px ); + } + } + + &.alignleft { + /*rtl:ignore*/ + float: left; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-left: 0; + /*rtl:ignore*/ + margin-right: $size__spacing-unit; + + @include media(tablet) { + max-width: calc(4 * (100vw / 12)); + /*rtl:ignore*/ + margin-right: calc(2 * #{$size__spacing-unit}); + } + } + + &.alignright { + /*rtl:ignore*/ + float: right; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-right: 0; + /*rtl:ignore*/ + margin-left: $size__spacing-unit; + + @include media(tablet) { + max-width: calc(4 * (100vw / 12)); + margin-right: 0; + /*rtl:ignore*/ + margin-left: calc(2 * #{$size__spacing-unit}); + } + } + &.aligncenter { + margin-left: auto; + margin-right: auto; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin-left: 0; + margin-right: 0; + } + } +} + +/* + * Unset nested content selector styles + * - Prevents layout styles from cascading too deeply + * - helps with plugin compatibility + */ +.entry .entry-content, +.entry .entry-summary { + + .entry-content, + .entry-summary, + .entry { + margin: inherit; + max-width: inherit; + padding: inherit; + + @include media(tablet) { + margin: inherit; + max-width: inherit; + padding: inherit; + } + } +} + +.entry .entry-content { + + //! Paragraphs + p.has-background { + padding: 20px 30px; + } + + //! Audio + .wp-block-audio { + + width: 100%; + + audio { + width: 100%; + } + + &.alignleft audio, + &.alignright audio { + + max-width: (0.33 * $mobile_width); + + @include media(tablet) { + max-width: (0.5 * $tablet_width); + } + + @include media(wide) { + max-width: (0.33 * $desktop_width); + } + } + } + + //! Video + .wp-block-video { + + video { + width: 100%; + } + } + + //! Button + .wp-block-button { + + .wp-block-button__link { + @include button-transition; + border: none; + font-size: $font__size-sm; + @include font-family( $font__heading ); + line-height: $font__line-height-heading; + box-sizing: border-box; + font-weight: bold; + text-decoration: none; + padding: ($size__spacing-unit * .76) $size__spacing-unit; + outline: none; + outline: none; + + &:not(.has-background) { + background-color: $color__background-button; + } + + &:not(.has-text-color) { + color: white; + } + + &:hover { + color: white; + background: $color__background-button-hover; + cursor: pointer; + } + + &:focus { + color: white; + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } + } + + &:not(.is-style-squared) .wp-block-button__link { + border-radius: 5px; + } + + &.is-style-outline .wp-block-button__link, + &.is-style-outline .wp-block-button__link:focus, + &.is-style-outline .wp-block-button__link:active { + @include button-all-transition; + border-width: 2px; + border-style: solid; + + &:not(.has-background) { + background: transparent; + } + + &:not(.has-text-color) { + color: $color__background-button; + border-color: currentColor; + } + } + + &.is-style-outline .wp-block-button__link:hover { + color: white; + border-color: $color__background-button-hover; + &:not(.has-background) { + color: $color__background-button-hover; + } + } + } + + //! Latest posts, categories, archives + .wp-block-archives, + .wp-block-categories, + .wp-block-latest-posts { + padding: 0; + list-style: none; + + li { + color: $color__text-light; + @include font-family( $font__heading ); + font-size: calc(#{$font__size_base} * #{$font__size-ratio}); + font-weight: bold; + line-height: $font__line-height-heading; + padding-bottom: ( .75 * $size__spacing-unit ); + + &.menu-item-has-children, + &:last-child { + padding-bottom: 0; + } + + a { + text-decoration: none; + } + } + } + + .wp-block-archives, + .wp-block-categories { + + &.aligncenter { + text-align: center; + } + } + + //! Latest categories + .wp-block-categories { + + ul { + padding-top: ( .75 * $size__spacing-unit ); + } + + li ul { + list-style: none; + padding-left: 0; + } + + @include nestedSubMenuPadding(); + } + + //! Latest posts grid view + .wp-block-latest-posts.is-grid { + li { + border-top: 2px solid $color__border; + padding-top: (1 * $size__spacing-unit); + margin-bottom: (2 * $size__spacing-unit); + a { + &:after { + content: ''; + } + } + &:last-child { + margin-bottom: auto; + a:after { + content: ''; + } + } + } + } + + //! Latest preformatted text + .wp-block-preformatted { + font-size: $font__size-xs; + line-height: 1.8; + padding: $size__spacing-unit; + } + + //! Verse + .wp-block-verse { + @include font-family( $font__body ); + font-size: $font__size_base; + line-height: 1.8; + } + + //! Paragraphs + .has-drop-cap { + &:not(:focus):first-letter { + @include font-family( $font__heading ); + font-size: $font__size-xxxl; + line-height: 1; + font-weight: bold; + margin: 0 0.25em 0 0; + } + } + + //! Pullquote + .wp-block-pullquote { + border-color: transparent; + border-width: 2px; + padding: $size__spacing-unit; + + blockquote { + color: $color__text-main; + border: none; + margin-top: calc(4 * #{ $size__spacing-unit}); + margin-bottom: calc(4.33 * #{ $size__spacing-unit}); + margin-right: 0; + padding-left: 0; + } + + p { + font-size: $font__size-lg; + font-style: italic; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + + em { + font-style: normal; + } + + @include media(tablet) { + font-size: $font__size-xl; + } + } + + cite { + display: inline-block; + @include font-family( $font__heading ); + line-height: 1.6; + text-transform: none; + color: $color__text-light; + + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + &.alignleft, + &.alignright { + width: 100%; + padding: 0; + + blockquote { + margin: $size__spacing-unit 0; + padding: 0; + text-align: left; + max-width: 100%; + + p:first-child { + margin-top: 0; + } + } + } + + &.is-style-solid-color { + background-color: $color__link; + padding-left: 0; + padding-right: 0; + + @include media(tablet) { + padding-left: 10%; + padding-right: 10%; + } + + p { + font-size: $font__size-lg; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + + @include media(tablet) { + font-size: $font__size-xl; + } + } + + a { + color: $color__background-body; + } + + cite { + color: inherit; + } + + blockquote { + max-width: 100%; + color: $color__background-body; + padding-left: 0; + margin-left: $size__spacing-unit; + margin-right: $size__spacing-unit; + + &.has-text-color p, + &.has-text-color a, + &.has-primary-color, + &.has-secondary-color, + &.has-dark-gray-color, + &.has-light-gray-color, + &.has-white-color { + color: inherit; + } + + @include media(tablet) { + margin-left: 0; + margin-right: 0; + } + } + + &.alignright, + &.alignleft { + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + + &.alignfull { + + @include media(tablet) { + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); + } + } + } + } + + //! Blockquote + .wp-block-quote { + + &:not(.is-large), + &:not(.is-style-large) { + border-width: 2px; + border-color: $color__link; + padding-top: 0; + padding-bottom: 0; + } + + p { + font-size: 1em; + font-style: normal; + line-height: 1.8; + } + + cite { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + &.is-large, + &.is-style-large { + margin: $size__spacing-unit 0; + padding: 0; + border-left: none; + + p { + font-size: $font__size-lg; + line-height: 1.4; + font-style: italic; + } + + cite, + footer { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + @include media(tablet) { + margin: $size__spacing-unit 0; + padding: $size__spacing-unit 0; + + p { + font-size: $font__size-lg; + } + } + } + } + + //! Image + .wp-block-image { + max-width: 100%; + + img { + display: block; + } + + .aligncenter { + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 0; + width: $size__site-tablet-content; + + img { + margin: 0 auto; + } + } + + @include media(desktop) { + width: $size__site-desktop-content; + + img { + margin: 0 auto; + } + } + } + + &.alignfull img { + width: 100vw; + max-width: calc( 100% + (2 * #{$size__spacing-unit})); + + @include media(tablet) { + max-width: calc( 125% + 150px ); + margin-left: auto; + margin-right: auto; + } + } + } + + //! Cover Image + .wp-block-cover-image, + .wp-block-cover { + position: relative; + min-height: 430px; + padding: $size__spacing-unit; + + @include media(tablet) { + padding: $size__spacing-unit 10%; + } + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + @include font-family( $font__heading ); + font-size: $font__size-lg; + font-weight: bold; + line-height: 1.25; + padding: 0; + color: #fff; + + @include media(tablet) { + font-size: $font__size-xl; + max-width: 100%; + } + } + + &.alignleft, + &.alignright { + width: 100%; + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + + &.alignfull { + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + @include postContentMaxWidth(); + } + + @include media(tablet) { + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + padding: 0; + } + } + } + } + + //! Galleries + .wp-block-gallery { + list-style-type: none; + padding-left: 0; + + .blocks-gallery-image:last-child, + .blocks-gallery-item:last-child { + margin-bottom: 16px; + } + + figcaption a { + color: #fff; + } + } + + //! Captions + .wp-block-audio figcaption, + .wp-block-video figcaption, + .wp-block-image figcaption, + .wp-block-gallery .blocks-gallery-image figcaption, + .wp-block-gallery .blocks-gallery-item figcaption { + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); + text-align: center; + } + + //! Separator + .wp-block-separator, + hr { + background-color: $color__text-light; + border: 0; + height: 2px; + margin-bottom: (2 * $size__spacing-unit); + margin-top: (2 * $size__spacing-unit); + max-width: 2.25em; + text-align: left; + + &.is-style-wide { + max-width: 100%; + @include postContentMaxWidth(); + } + + &.is-style-dots { + max-width: 100%; + @include postContentMaxWidth(); + background-color: inherit; + border: inherit; + height: inherit; + text-align: center; + + &:before { + color: $color__text-light; + font-size: $font__size-lg; + letter-spacing: $font__size-sm; + padding-left: $font__size-sm; + } + } + + /* Remove duplicate rule-line when a separator + * is followed by an H1, or H2 */ + & + h1, + & + h2 { + + &:before { + display: none; + } + } + } + + //! Twitter Embed + .wp-block-embed-twitter { + word-break: break-word; + } + + //! Table + .wp-block-table { + + th, + td { + border-color: $color__text-light; + } + } + + //! File + .wp-block-file { + @include font-family( $font__heading ); + + .wp-block-file__button { + display: table; + @include button-transition; + border: none; + border-radius: 5px; + background: $color__background-button; + font-size: $font__size-base; + @include font-family( $font__heading ); + line-height: $font__line-height-heading; + text-decoration: none; + font-weight: bold; + padding: ($size__spacing-unit * .75) $size__spacing-unit; + color: #fff; + margin-left: 0; + margin-top: calc(0.75 * #{$size__spacing-unit}); + + @include media(desktop) { + font-size: $font__size-base; + padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5); + } + + &:hover { + background: $color__background-button-hover; + cursor: pointer; + } + + &:focus { + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } + } + } + + //! Code + .wp-block-code { + border-radius: 0; + + code { + font-size: $font__size-md; + white-space: pre-wrap; + word-break: break-word; + } + } + + //! Columns + .wp-block-columns { + + &.alignfull { + padding-left: $size__spacing-unit; + padding-right: $size__spacing-unit; + } + + @include media(mobile) { + flex-wrap: nowrap; + } + + @include media(tablet) { + .wp-block-column > * { + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &[class*='has-'] > * { + margin-right: $size__spacing-unit; + + &:last-child { + margin-right: 0; + } + } + + &.alignfull, + &.alignfull .wp-block-column { + padding-left: calc(2 * #{$size__spacing-unit}); + padding-right: calc(2 * #{$size__spacing-unit}); + } + } + } + + //! Latest Comments + .wp-block-latest-comments { + + .wp-block-latest-comments__comment-meta { + @include font-family( $font__heading ); + font-weight: bold; + + .wp-block-latest-comments__comment-date { + font-weight: normal; + } + } + + .wp-block-latest-comments__comment, + .wp-block-latest-comments__comment-date, + .wp-block-latest-comments__comment-excerpt p { + font-size: inherit; + } + + &.has-avatars { + + } + + &.has-dates { + + .wp-block-latest-comments__comment-date { + font-size: $font__size-xs; + } + } + + &.has-excerpts { + + } + } + + //! Font Sizes + .has-small-font-size { + font-size: $font__size-sm; + } + + .has-normal-font-size { + font-size: $font__size-md; + } + + .has-large-font-size { + font-size: $font__size-lg; + } + + .has-huge-font-size { + font-size: $font__size-xl; + } + + //! Custom background colors + .has-primary-background-color, + .has-secondary-background-color, + .has-dark-gray-background-color, + .has-light-gray-background-color { + + // Use white text against these backgrounds by default. + color: $color__background-body; + + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__background-body; + } + } + + .has-white-background-color { + color: $color__text-main; + + // Use dark gray text against this background by default. + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__text-main; + } + } + + .has-primary-background-color, + .wp-block-pullquote.is-style-solid-color.has-primary-background-color { + background-color: $color__link; + } + + .has-secondary-background-color, + .wp-block-pullquote.is-style-solid-color.has-secondary-background-color { + background-color: $color__border-link-hover; + } + + .has-dark-gray-background-color, + .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color { + background-color: $color__text-main; + } + + .has-light-gray-background-color, + .wp-block-pullquote.is-style-solid-color.has-light-gray-background-color { + background-color: $color__text-light; + } + + .has-white-background-color, + .wp-block-pullquote.is-style-solid-color.has-white-background-color { + background-color: #FFF; + } + + //! Custom foreground colors + .has-primary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color p { + color: $color__link; + } + + .has-secondary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color p { + color: $color__border-link-hover; + } + + .has-dark-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color p { + color: $color__text-main; + } + + .has-light-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color p { + color: $color__text-light; + } + + .has-white-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-white-color { + color: #FFF; + } +} diff --git a/themes/twentynineteen/sass/elements/_elements.scss b/themes/twentynineteen/sass/elements/_elements.scss new file mode 100644 index 00000000..b1fad058 --- /dev/null +++ b/themes/twentynineteen/sass/elements/_elements.scss @@ -0,0 +1,92 @@ +html { + box-sizing: border-box; +} + +::-moz-selection { + background-color: $color__background_selection; +} + +::selection { + background-color: $color__background_selection; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + background-color: $color__background-body; +} + +a { + @include link-transition; + color: $color__link; +} + +a:visited { + +} + +a:hover, +a:active { + color: $color__link-hover; + outline: 0; + text-decoration: none; +} + +a:focus { + outline: thin; + outline-style: dotted; + text-decoration: underline; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; + margin: $size__spacing-unit 0; +} + +h1:not(.site-title), +h2 { + @include post-section-dash; +} + +hr { + background-color: $color__text-light; + border: 0; + height: 2px; +} + +@import "lists"; + +img { + height: auto; + max-width: 100%; + position: relative; +} + +figure { + margin: 0; +} + +blockquote { + border-left: 2px solid $color__link; + margin-left: 0; + padding: 0 0 0 $size__spacing-unit; + + > p { + margin: 0 0 $size__spacing-unit; + } + + cite { + color: $color__text-light; + } +} + +@import "tables"; diff --git a/themes/twentynineteen/sass/elements/_lists.scss b/themes/twentynineteen/sass/elements/_lists.scss new file mode 100644 index 00000000..1db7633e --- /dev/null +++ b/themes/twentynineteen/sass/elements/_lists.scss @@ -0,0 +1,33 @@ +ul, +ol { + padding-left: ( 1 * $size__spacing-unit ); +} + +ul { + list-style: disc; + + ul { + list-style-type: circle; + } +} + +ol { + list-style: decimal; +} + +li { + line-height: $font__line-height-body; +} + +li > ul, +li > ol { + padding-left: ( 2 * $size__spacing-unit ); +} + +dt { + font-weight: bold; +} + +dd { + margin: 0 $size__spacing-unit $size__spacing-unit; +} diff --git a/themes/twentynineteen/sass/elements/_tables.scss b/themes/twentynineteen/sass/elements/_tables.scss new file mode 100644 index 00000000..0f653a58 --- /dev/null +++ b/themes/twentynineteen/sass/elements/_tables.scss @@ -0,0 +1,13 @@ +table { + margin: 0 0 $size__spacing-unit; + border-collapse: collapse; + width: 100%; + @include font-family( $font__heading ); + + td, + th { + padding: 0.5em; + border: 1px solid $color__text-light; + word-break: break-all; + } +} diff --git a/themes/twentynineteen/sass/forms/_buttons.scss b/themes/twentynineteen/sass/forms/_buttons.scss new file mode 100644 index 00000000..f527a088 --- /dev/null +++ b/themes/twentynineteen/sass/forms/_buttons.scss @@ -0,0 +1,37 @@ +.button, +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + + @include button-transition; + background: $color__background-button; + border: none; + border-radius: 5px; + box-sizing: border-box; + color: $color__background-body; + @include font-family( $font__heading ); + font-size: $font__size-sm; + font-weight: 700; + line-height: $font__line-height-heading; + outline: none; + padding: ( $size__spacing-unit * .76 ) $size__spacing-unit; + text-decoration: none; + vertical-align: bottom; + + &:hover { + background: $color__background-button-hover; + cursor: pointer; + } + + &:visited { + color: $color__background-body; + text-decoration: none; + } + + &:focus { + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } +} diff --git a/themes/twentynineteen/sass/forms/_fields.scss b/themes/twentynineteen/sass/forms/_fields.scss new file mode 100644 index 00000000..448b707a --- /dev/null +++ b/themes/twentynineteen/sass/forms/_fields.scss @@ -0,0 +1,58 @@ +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + -webkit-backface-visibility: hidden; + background: $color__background-input; + border: solid 1px $color__border; + box-sizing: border-box; + outline: none; + padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit}; + -webkit-appearance: none; + outline-offset: 0; + border-radius: 0; + + &:focus { + border-color: $color__link; + outline: thin solid rgba( $color__link, 0.15 ); + outline-offset: -4px; + } +} + +input[type="search"] { + &::-webkit-search-decoration { + display: none; + } +} + +select { + +} + +textarea { + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + resize: vertical; +} + +form { + + p { + margin: $size__spacing-unit 0; + } + +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/forms/_forms.scss b/themes/twentynineteen/sass/forms/_forms.scss new file mode 100644 index 00000000..2036ef92 --- /dev/null +++ b/themes/twentynineteen/sass/forms/_forms.scss @@ -0,0 +1,3 @@ +@import "buttons"; + +@import "fields"; diff --git a/themes/twentynineteen/sass/layout/_layout.scss b/themes/twentynineteen/sass/layout/_layout.scss new file mode 100644 index 00000000..e0e2c761 --- /dev/null +++ b/themes/twentynineteen/sass/layout/_layout.scss @@ -0,0 +1,11 @@ + +/** === Layout === */ + +#page { + width: 100%; +} + +.site-content { + overflow: hidden; +} + diff --git a/themes/twentynineteen/sass/media/_captions.scss b/themes/twentynineteen/sass/media/_captions.scss new file mode 100644 index 00000000..761eb2f5 --- /dev/null +++ b/themes/twentynineteen/sass/media/_captions.scss @@ -0,0 +1,32 @@ +.wp-caption { + margin-bottom: calc(1.5 * #{$size__spacing-unit}); + + &.aligncenter { + + @include media(tablet) { + position: relative; + left: calc( #{$size__site-tablet-content} / 2 ); + transform: translateX( -50% ); + } + + @include media(desktop) { + left: calc( #{$size__site-desktop-content} / 2 ); + } + } +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-left: auto; + margin-right: auto; +} + +.wp-caption-text { + color: $color__text-light; + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); + text-align: center; +} diff --git a/themes/twentynineteen/sass/media/_galleries.scss b/themes/twentynineteen/sass/media/_galleries.scss new file mode 100644 index 00000000..fbc0bb18 --- /dev/null +++ b/themes/twentynineteen/sass/media/_galleries.scss @@ -0,0 +1,52 @@ +.gallery { + display: flex; + flex-flow: row wrap; + justify-content: center; + margin-bottom: calc(1.5 * #{$size__spacing-unit}); +} + +.gallery-item { + display: inline-block; + margin-right: 16px; + margin-bottom: 16px; + text-align: center; + vertical-align: top; + width: 100%; + + // Loops to enumerate the classes for gallery columns. + @for $i from 2 through 9 { + .gallery-columns-#{$i} & { + max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i }); + + &:nth-of-type(#{$i}n+#{$i}) { + margin-right: 0; + } + } + } + + &:last-of-type { + padding-right: 0; + } +} + +.gallery-caption { + display: block; + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); +} + +.gallery-item > div > a { + display: block; + line-height: 0; + + // Accessibility + box-shadow: 0 0 0 0 transparent; + + &:focus { + box-shadow: 0 0 0 2px rgba( $color__link, 1 ); + } +} + diff --git a/themes/twentynineteen/sass/media/_media.scss b/themes/twentynineteen/sass/media/_media.scss new file mode 100644 index 00000000..3fba8c64 --- /dev/null +++ b/themes/twentynineteen/sass/media/_media.scss @@ -0,0 +1,41 @@ +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +embed, +iframe, +object { + max-width: 100%; +} + +.custom-logo-link { + display: inline-block; +} + +.avatar { + border-radius: 100%; + display: block; + height: calc(2.25 * #{$size__spacing-unit}); + min-height: inherit; + width: calc(2.25 * #{$size__spacing-unit}); +} + +svg { + transition: fill $icon_transition ease-in-out; + fill: currentColor; +} + +/*-------------------------------------------------------------- +## Captions +--------------------------------------------------------------*/ +@import "captions"; + +/*-------------------------------------------------------------- +## Galleries +--------------------------------------------------------------*/ +@import "galleries"; diff --git a/themes/twentynineteen/sass/mixins/_mixins-master.scss b/themes/twentynineteen/sass/mixins/_mixins-master.scss new file mode 100644 index 00000000..71ca4f68 --- /dev/null +++ b/themes/twentynineteen/sass/mixins/_mixins-master.scss @@ -0,0 +1,132 @@ +// Rem output with px fallback +@mixin font-size($sizeValue: 1) { + font-size: ($sizeValue * 16) * 1px; + font-size: $sizeValue * 1rem; +} + +// Center block +@mixin center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Clearfix +@mixin clearfix() { + content: ""; + display: table; + table-layout: fixed; +} + +// Clear after (not all clearfix need this also) +@mixin clearfix-after() { + clear: both; +} + +// Column width with margin +@mixin column-width($numberColumns: 3) { + width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns); +} + +@mixin filter-duotone { + + &:before { + background: $color__link; + mix-blend-mode: screen; + opacity: 0.1; + z-index: 2; + } + + &:after { + background: $color__link; + mix-blend-mode: multiply; + opacity: .8; + z-index: 3; + + /* Browsers supporting mix-blend-mode don't need opacity < 1 */ + @supports (mix-blend-mode: multiply) { + opacity: 1; + } + } +} + +@mixin filter-grayscale { + + position: relative; + filter: grayscale(100%); + z-index: 1; + + &:after { + display: block; + width: 100%; + height: 100%; + z-index: 10; + } +} + +@mixin post-section-dash { + + &:before { + background: $color__text-light; + content: "\020"; + display: block; + height: 2px; + margin: $size__spacing-unit 0; + width: 1em; + } +} + +/* If we add the border using a regular CSS border, it won't look good on non-retina devices, + * since its edges can look jagged due to lack of antialiasing. In this case, we are several + * layers of box-shadow to add the border visually, which will render the border smoother. */ + +@mixin box-shadow( $size ) { + box-shadow: + 0 0 0 $size $color__text-light inset, // Original border. + 0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge. + 0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge. +} + +/* Calculates maximum width for post content */ +@mixin postContentMaxWidth() { + + @include media(tablet) { + max-width: $size__site-tablet-content; + } + + @include media(desktop) { + max-width: $size__site-desktop-content; + } +} + +/* Nested sub-menu padding: 10 levels deep */ +@mixin nestedSubMenuPadding() { + + ul { + counter-reset: submenu; + } + + ul > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } +} + +/* Ensure all font family declarations come with non-latin fallbacks */ +@mixin font-family( $font_family: $font__body ) { + font-family: $font_family; + @extend %non-latin-fonts; +} + +/* Build our non-latin font styles */ +%non-latin-fonts { + @each $lang, $font__fallback in $font__fallbacks { + &:lang(#{$lang}) { + font-family: unquote( $font__fallback ); + } + } +} + +@import "utilities"; diff --git a/themes/twentynineteen/sass/mixins/_utilities.scss b/themes/twentynineteen/sass/mixins/_utilities.scss new file mode 100644 index 00000000..c753fe27 --- /dev/null +++ b/themes/twentynineteen/sass/mixins/_utilities.scss @@ -0,0 +1,51 @@ + +@mixin media( $res ) { + @if mobile == $res { + @media only screen and (min-width: $mobile_width) { + @content; + } + } + + @if tablet == $res { + @media only screen and (min-width: $tablet_width) { + @content; + } + } + + @if desktop == $res { + @media only screen and (min-width: $desktop_width) { + @content; + } + } + + @if wide == $res { + @media only screen and (min-width: $wide_width) { + @content; + } + } +} + +@mixin link-transition( $attr: color ) { + transition: $attr $link_transition ease-in-out; +} + +@mixin button-transition() { + transition: background $button_transition ease-in-out; +} + +@mixin button-all-transition() { + transition: all $button_transition ease-in-out; +} + +@mixin background-transition() { + transition: background $background_transition ease-in-out; +} + +@mixin selection { + ::-moz-selection { + @content; + } + ::selection { + @content; + } +} diff --git a/themes/twentynineteen/sass/modules/_accessibility.scss b/themes/twentynineteen/sass/modules/_accessibility.scss new file mode 100644 index 00000000..469887cc --- /dev/null +++ b/themes/twentynineteen/sass/modules/_accessibility.scss @@ -0,0 +1,38 @@ +/* Text meant only for screen readers. */ +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ + + &:focus { + background-color: $color__background-screen; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: $color__text-screen; + display: block; + @include font-size(0.875); + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; /* Above WP toolbar. */ + } +} + +/* Do not show the outline on the skip link target. */ +#content[tabindex="-1"]:focus { + outline: 0; +} diff --git a/themes/twentynineteen/sass/modules/_alignments.scss b/themes/twentynineteen/sass/modules/_alignments.scss new file mode 100644 index 00000000..2fb584ad --- /dev/null +++ b/themes/twentynineteen/sass/modules/_alignments.scss @@ -0,0 +1,28 @@ +.alignleft { + /*rtl:ignore*/ + float: left; + /*rtl:ignore*/ + margin-right: $size__spacing-unit; + + @include media(tablet) { + /*rtl:ignore*/ + margin-right: calc(2 * #{$size__spacing-unit}); + } +} + +.alignright { + /*rtl:ignore*/ + float: right; + /*rtl:ignore*/ + margin-left: $size__spacing-unit; + + @include media(tablet) { + /*rtl:ignore*/ + margin-left: calc(2 * #{$size__spacing-unit}); + } +} + +.aligncenter { + clear: both; + @include center-block; +} diff --git a/themes/twentynineteen/sass/modules/_clearings.scss b/themes/twentynineteen/sass/modules/_clearings.scss new file mode 100644 index 00000000..444b6b60 --- /dev/null +++ b/themes/twentynineteen/sass/modules/_clearings.scss @@ -0,0 +1,23 @@ +.clear:before, +.clear:after, +.entry-content:before, +.entry-content:after, +.comment-content:before, +.comment-content:after, +.site-header:before, +.site-header:after, +.site-content:before, +.site-content:after, +.site-footer:before, +.site-footer:after { + @include clearfix; +} + +.clear:after, +.entry-content:after, +.comment-content:after, +.site-header:after, +.site-content:after, +.site-footer:after { + @include clearfix-after; +} diff --git a/themes/twentynineteen/sass/navigation/_links.scss b/themes/twentynineteen/sass/navigation/_links.scss new file mode 100644 index 00000000..cbee4579 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_links.scss @@ -0,0 +1,21 @@ +a { + + @include link-transition; + color: $color__link; + + &:visited { + color: $color__link-visited; + } + + &:hover, + &:active { + color: $color__link-hover; + outline: 0; + text-decoration: none; + } + + &:focus { + outline: thin dotted; + text-decoration: underline; + } +} diff --git a/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss new file mode 100644 index 00000000..afe69717 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss @@ -0,0 +1,22 @@ +/** === Footer menu === */ + +.footer-navigation { + + display: inline; + + & > div { + display: inline; + } + + .footer-menu { + + display: inline; + padding-left: 0; + + li { + display: inline; + margin-right: 1rem; + } + } + +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss new file mode 100644 index 00000000..61d943a7 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss @@ -0,0 +1,505 @@ +/** === Main menu === */ + +.main-navigation { + + display: block; + margin-top: #{0.25 * $size__spacing-unit}; + + body.page & { + display: block; + } + + > div { + display: inline; + } + + /* Un-style buttons */ + button { + display: inline-block; + border: none; + padding: 0; + margin: 0; + font-family: $font__heading; + font-weight: 700; + line-height: $font__line-height-heading; + text-decoration: none; + background: transparent; + color: inherit; + cursor: pointer; + transition: background 250ms ease-in-out, + transform 150ms ease; + -webkit-appearance: none; + -moz-appearance: none; + + &:hover, + &:focus { + background: transparent; + } + + &:focus { + outline: 1px solid transparent; + outline-offset: -4px; + } + + &:active { + transform: scale(0.99); + } + } + + .main-menu { + + display: inline-block; + margin: 0; + padding: 0; + + > li { + + color: $color__link; + display: inline; + position: relative; + + > a { + + font-weight: 700; + color: $color__link; + margin-right: #{0.5 * $size__spacing-unit}; + + + svg { + margin-right: #{0.5 * $size__spacing-unit}; + } + + &:hover, + &:hover + svg { + color: $color__link-hover; + } + } + + &.menu-item-has-children { + + display: inline-block; + position: inherit; + + @include media(tablet) { + position: relative; + } + + > a { + margin-right: #{0.125 * $size__spacing-unit}; + } + + & > a, + .menu-item-has-children > a { + + &:after { + content: ""; + display: none; + } + } + + .submenu-expand { + + display: inline-block; + margin-right: #{0.25 * $size__spacing-unit}; + + /* Priority+ Menu */ + &.main-menu-more-toggle { + + position: relative; + height: 24px; + line-height: $font__line-height-heading; + width: 24px; + padding: 0; + margin-left: #{0.5 * $size__spacing-unit}; + + svg { + height: 24px; + width: 24px; + top: #{-0.125 * $size__spacing-unit}; + vertical-align: text-bottom; + } + } + + .wp-customizer-unloading &, + &.is-empty { + display: none; + } + + svg { + position: relative; + top: 0.2rem; + } + } + } + + &:last-child > a, + &:last-child.menu-item-has-children .submenu-expand { + margin-right: 0; + } + } + } + + .sub-menu { + + background-color: $color__link; + color: $color__background-body; + list-style: none; + padding-left: 0; + + position: absolute; + opacity: 0; + left: -9999px; + z-index: 99999; + + @include media(tablet) { + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + } + + > li { + + display: block; + float: none; + position: relative; + + &.menu-item-has-children { + + .submenu-expand { + display: inline-block; + position: absolute; + width: calc( 24px + #{$size__spacing-unit} ); + right: 0; + top: calc( .125 * #{$size__spacing-unit} ); + bottom: 0; + color: white; + line-height: 1; + padding: calc( .5 * #{$size__spacing-unit} ); + + svg { + top: 0; + } + } + + .submenu-expand { + margin-right: 0; + } + + @include media(tablet) { + + .menu-item-has-children > a { + + &:after { + content: "\203a"; + } + } + } + } + + > a, + > .menu-item-link-return { + + color: $color__background-body; + display: block; + line-height: $font__line-height-heading; + text-shadow: none; + padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit; + white-space: nowrap; + + &:hover, + &:focus { + background: $color__link-hover; + + &:after { + background: $color__link-hover; + } + } + } + + > .menu-item-link-return { + width: 100%; + font-size: $font__size_base; + font-weight: normal; + text-align: left; + } + + > a:empty { + display: none; + } + + &.mobile-parent-nav-menu-item { + + display: none; + font-size: $font__size-sm; + font-weight: normal; + + svg { + position: relative; + top: 0.2rem; + margin-right: calc( .25 * #{$size__spacing-unit} ); + } + } + } + } + + /* + * Sub-menu styles + * + * :focus-within needs its own selector so other similar + * selectors don’t get ignored if a browser doesn’t recognize it + */ + .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + + + /* Non-mobile position */ + @include media(tablet) { + display: block; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; + + @include media(tablet) { + right: 0; + left: auto; + display: block; + width: max-content; + } + } + + .submenu-expand { + display: none; + } + + .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu dashes */ + .sub-menu { + counter-reset: submenu; + } + + .sub-menu > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } + } + + .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + + + /* Non-mobile position */ + @include media(tablet) { + display: block; + float: none; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; + + @include media(tablet) { + right: 0; + left: auto; + display: table; + width: max-content; + } + } + + .submenu-expand { + display: none; + } + + .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu dashes */ + .sub-menu { + counter-reset: submenu; + } + + .sub-menu > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } + } + + /** + * Fade-in animation for top-level submenus + */ + .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu { + animation: fade_in 0.1s forwards; + } + + /** + * Off-canvas touch device styles + */ + .main-menu .menu-item-has-children.off-canvas .sub-menu { + + .submenu-expand .svg-icon { + transform: rotate(270deg); + } + + .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(-100%); + } + + li:hover, + li:focus, + li > a:hover, + li > a:focus { + background-color: transparent; + } + + > li > a, + > li > .menu-item-link-return { + white-space: inherit; + } + + &.expanded-true { + + display: table; + margin-top: 0; + opacity: 1; + padding-left: 0; + + /* Mobile position */ + left: 0; + top: 0; + right: 0; + bottom: 0; + position: fixed; + z-index: 100000; /* Make sure appears above mobile admin bar */ + width: 100vw; + height: 100vh; + max-width: 100vw; + transform: translateX(+100%); + animation: slide_in_right 0.3s forwards; + + > .mobile-parent-nav-menu-item { + display: block; + } + + /* Prevent menu from being blocked by admin bar */ + .admin-bar & { + top: 46px; + height: calc( 100vh - 46px ); + + .sub-menu.expanded-true { + top: 0; + } + + /* WP core breakpoint */ + @media only screen and ( min-width: 782px ) { + top: 32px; + height: calc( 100vh - 32px ); + + .sub-menu.expanded-true { + top: 0; + } + } + } + } + } + + // Hide duplicate menu-more-link when re-loading a menu in the customizer + .main-menu-more { + &:nth-child(n+3) { + display: none; + } + } + +} + +/* Menu animation */ + +@keyframes slide_in_right { + 100% { + transform: translateX(0%); + } +} + +@keyframes fade_in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss new file mode 100644 index 00000000..00724b5e --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss @@ -0,0 +1,66 @@ +/* Social menu */ + +.social-navigation { + margin-top: calc(#{$size__spacing-unit} / 2 ); + text-align: left; + + ul.social-links-menu { + @include clearfix; + + display: inline-block; + margin: 0; + padding: 0; + + li { + display: inline-block; + vertical-align: bottom; + vertical-align: -webkit-baseline-middle; + list-style: none; + + &:nth-child(n+2) { + margin-left: 0.1em; + } + + a { + border-bottom: 1px solid transparent; + display: block; + color: $color__text-main; + margin-bottom: -1px; + transition: opacity $link_transition ease-in-out; + + &:hover, + &:active { + color: $color__text-main; + opacity: 0.6; + } + + &:focus { + color: $color__text-main; + opacity: 1; + border-bottom: 1px solid $color__text-main; + } + + svg { + display: block; + width: 32px; + height: 32px; + + // Prevent icons from jumping in Safari using hardware acceleration. + transform: translateZ(0); + + &#ui-icon-link { + transform: rotate(-45deg); + } + } + } + } + } +} + +.site-title + .social-navigation, +.site-description + .social-navigation { + + @include media(tablet) { + margin-top: calc(#{$size__spacing-unit} / 5 ); + } +} diff --git a/themes/twentynineteen/sass/navigation/_navigation.scss b/themes/twentynineteen/sass/navigation/_navigation.scss new file mode 100644 index 00000000..a4cf5154 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_navigation.scss @@ -0,0 +1,16 @@ +/*-------------------------------------------------------------- +## Links +--------------------------------------------------------------*/ +@import "links"; + +/*-------------------------------------------------------------- +## Menus +--------------------------------------------------------------*/ +@import "menu-main-navigation"; +@import "menu-social-navigation"; +@import "menu-footer-navigation"; + +/*-------------------------------------------------------------- +## Next / Previous +--------------------------------------------------------------*/ +@import "next-previous"; diff --git a/themes/twentynineteen/sass/navigation/_next-previous.scss b/themes/twentynineteen/sass/navigation/_next-previous.scss new file mode 100644 index 00000000..b2a4c1db --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_next-previous.scss @@ -0,0 +1,201 @@ +/* Next/Previous navigation */ + +// Singular navigation +.post-navigation { + + margin: calc(3 * 1rem) 0; + + @include media(tablet) { + margin: calc(3 * 1rem) $size__site-margins; + max-width: calc(6 * (100vw / 12)); + } + + @include media(desktop) { + margin: calc(3 * 1rem) 0; + max-width: 100%; + } + + .nav-links { + + margin: 0 $size__spacing-unit; + max-width: 100%; + display: flex; + flex-direction: column; + + @include media(tablet) { + margin: 0; + } + + @include media(desktop) { + flex-direction: row; + margin: 0 $size__site-margins; + max-width: $size__site-desktop-content; + } + + a { + .meta-nav { + color: $color__text-light; + user-select: none; + + &:before, + &:after { + display: none; + content: "—"; + width: 2em; + color: $color__text-light; + height: 1em; + } + } + + .post-title { + hyphens: auto; + } + + &:hover { + color: $color__link-hover; + } + } + + .nav-previous, + .nav-next { + + @include media(desktop) { + min-width: calc(50% - 2 * #{$size__spacing-unit}); + } + } + + .nav-previous { + order: 2; + + @include media(desktop) { + order: 1; + } + + + .nav-next { + margin-bottom: $size__spacing-unit; + } + + .meta-nav { + &:before { + display: inline; + } + } + } + + .nav-next { + order: 1; + + @include media(desktop) { + order: 2; + padding-left: $size__spacing-unit; + } + + .meta-nav { + &:after { + display: inline; + } + } + } + } +} + +// Index/archive navigation +.pagination { + + .nav-links { + + display: flex; + flex-wrap: wrap; + padding: 0 calc(.5 * #{$size__spacing-unit}); + + + & > * { + padding: calc(.5 * #{$size__spacing-unit}); + + &.dots, + &.prev { + padding-left: 0; + } + + &.dots, + &.next { + padding-right: 0; + } + } + + a:focus { + text-decoration: underline; + outline-offset: -1px; + + &.prev, + &.next { + text-decoration: none; + + .nav-prev-text, + .nav-next-text { + text-decoration: underline; + } + } + } + + .nav-next-text, + .nav-prev-text { + display: none; + } + + @include media(tablet) { + + margin-left: $size__site-margins; + padding: 0; + + .prev, + .next { + + & > * { + display: inline-block; + vertical-align: text-bottom; + } + } + + & > * { + padding: $size__spacing-unit; + } + } + } +} + +// Comments navigation +.comment-navigation { + + .nav-links { + display: flex; + flex-direction: row; + } + + .nav-previous, + .nav-next { + min-width: 50%; + width: 100%; + @include font-family( $font__heading ); + font-weight: bold; + + .secondary-text { + display: none; + + @include media(tablet) { + display: inline; + } + } + + svg { + vertical-align: middle; + position: relative; + margin: 0 -0.35em; + top: -1px; + } + } + + .nav-next { + text-align: right; + } +} diff --git a/themes/twentynineteen/sass/site/_site.scss b/themes/twentynineteen/sass/site/_site.scss new file mode 100644 index 00000000..692244f5 --- /dev/null +++ b/themes/twentynineteen/sass/site/_site.scss @@ -0,0 +1,27 @@ + +/*-------------------------------------------------------------- +## Header +--------------------------------------------------------------*/ +@import "header/site-header"; +@import "header/site-featured-image"; + +/*-------------------------------------------------------------- +## Posts and pages +--------------------------------------------------------------*/ +@import "primary/posts-and-pages"; + +/*-------------------------------------------------------------- +## Comments +--------------------------------------------------------------*/ +@import "primary/comments"; + +/*-------------------------------------------------------------- +## Archives +--------------------------------------------------------------*/ +@import "primary/archives"; + +/*-------------------------------------------------------------- +## Footer +--------------------------------------------------------------*/ +@import "footer/site-footer"; + diff --git a/themes/twentynineteen/sass/site/footer/_site-footer.scss b/themes/twentynineteen/sass/site/footer/_site-footer.scss new file mode 100644 index 00000000..1f0f3789 --- /dev/null +++ b/themes/twentynineteen/sass/site/footer/_site-footer.scss @@ -0,0 +1,43 @@ +/* Site footer */ + +#colophon { + + .widget-area, + .site-info { + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + } + + .widget-column { + display: flex; + flex-wrap: wrap; + .widget { + width: 100%; + @include media(desktop) { + margin-right: calc(3 * #{$size__spacing-unit}); + width: calc(50% - (3 * #{$size__spacing-unit})); + } + } + } + + .site-info { + color: $color__text-light; + + a { + color: inherit; + + &:hover { + text-decoration: none; + color: $color__link; + } + } + + .imprint, + .privacy-policy-link { + margin-right: $size__spacing-unit; + } + } +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/site/header/_site-featured-image.scss b/themes/twentynineteen/sass/site/header/_site-featured-image.scss new file mode 100644 index 00000000..12599438 --- /dev/null +++ b/themes/twentynineteen/sass/site/header/_site-featured-image.scss @@ -0,0 +1,301 @@ +// Featured image styles + +.site-header.featured-image { + + /* Hide overflow for overflowing featured image */ + overflow: hidden; + + /* Need relative positioning to properly align layers. */ + position: relative; + + /* Add text shadow to text, to increase readability. */ + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + + /* Set white text color when featured image is set. */ + .site-branding .site-title, + .site-branding .site-description, + .main-navigation a:after, + .main-navigation .main-menu > li.menu-item-has-children:after, + .main-navigation li, + .social-navigation li, + .entry-meta, + .entry-title { + color: $color__background-body; + } + + .main-navigation a, + .main-navigation a + svg, + .social-navigation a, + .site-title a, + .site-featured-image a { + color: $color__background-body; + transition: opacity $link_transition ease-in-out; + + &:hover, + &:active, + &:hover + svg, + &:active + svg { + color: $color__background-body; + opacity: 0.6; + } + + &:focus, + &:focus + svg { + color: $color__background-body; + } + } + + .main-navigation .sub-menu a { + opacity: inherit; + } + + /* add focus state to social media icons */ + .social-navigation a { + &:focus { + color: $color__background-body; + opacity: 1; + border-bottom: 1px solid $color__background-body; + } + } + + .social-navigation svg, + .site-featured-image svg { + /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ + -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); + } + + /* Entry header */ + .site-featured-image { + + /* First layer: grayscale. */ + .post-thumbnail img { + height: auto; + left: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100vw; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: auto; + z-index: 1; + + @supports ( object-fit: cover ) { + height: 100%; + left: 0; + object-fit: cover; + top: 0; + transform: none; + width: 100%; + } + + /* When image filters are active, make it grayscale to colorize it blue. */ + .image-filters-enabled & { + filter: grayscale(100%); + } + } + + .entry-header { + + margin-top: calc( 4 * #{$size__spacing-unit}); + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + + @include media (tablet) { + + margin-left: $size__site-margins; + margin-right: $size__site-margins; + } + + .entry-title { + + &:before { + background: $color__background-body; + } + } + + /* Entry meta */ + + .entry-meta { + + font-weight: 500; + + > span { + + margin-right: $size__spacing-unit; + display: inline-block; + + &:last-child { + margin-right: 0; + } + } + + a { + + @include link-transition; + color: currentColor; + + &:hover { + text-decoration: none; + } + } + + .svg-icon { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; + } + + .discussion-avatar-list { + display: none; + } + } + + &.has-discussion { + + @include media (tablet) { + + .entry-meta { + display: flex; + position: relative; + } + + .entry-title { + padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); + } + + .entry-meta .comment-count { + position: absolute; + right: 0; + } + + .entry-meta .discussion-avatar-list { + display: block; + position: absolute; + bottom: 100%; + } + } + } + } + } + + /* Custom Logo Link */ + + .custom-logo-link { + + background: $color__background-body; + box-shadow: 0 0 0 0 rgba($color__background-body, 0); + + &:hover, + &:active, + &:focus { + box-shadow: 0 0 0 2px rgba($color__background-body, 1); + } + } + + /* Make sure important elements are above pseudo elements used for effects. */ + .site-branding { + position: relative; + z-index: 10; + } + + .site-featured-image .entry-header { + position: relative; + z-index: 9; + } + + /* Set up image filter layer positioning */ + .site-branding-container:after, + .site-featured-image:before, + .site-featured-image:after, + &:after { + display: block; + position: absolute; + top: 0; left: 0; + content: "\020"; + width: 100%; + height: 100%; + } + + /* Background & Effects */ + /* Shared background settings between pseudo elements. */ + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + /* The intensity of each blend mode is controlled via layer opacity. */ + + /* Second layer: screen. */ + .image-filters-enabled & .site-featured-image:before { + background: $color__link; + mix-blend-mode: screen; + opacity: 0.1; + } + + /* Third layer: multiply. */ + /* When image filters are inactive, a black overlay is added. */ + .site-featured-image:after { + background: #000; + mix-blend-mode: multiply; + opacity: .7; + + /* When image filters are active, a blue overlay is added. */ + .image-filters-enabled & { + background: $color__link; + opacity: .8; + z-index: 3; + + /* Browsers supporting mix-blend-mode don't need opacity < 1 */ + @supports (mix-blend-mode: multiply) { + opacity: 1; + } + } + } + + /* Fourth layer: overlay. */ + .image-filters-enabled & .site-branding-container:after { + background: rgba(0, 0, 0, 0.35); + mix-blend-mode: overlay; + opacity: 0.5; + z-index: 4; + + /* Browsers supporting mix-blend-mode can have a light overlay */ + @supports (mix-blend-mode: overlay) { + background: rgba($color__background-body, 0.35); + } + } + + /* Fifth layer: readability overlay */ + &:after { + background: #000; + /** + * Add a transition to the readability overlay, to add a subtle + * but smooth effect when resizing the screen. + */ + transition: opacity 1200ms ease-in-out; + opacity: 0.7; + z-index: 5; + + /* When image filters are active, a blue overlay is added. */ + .image-filters-enabled & { + background: mix($color__link, black, 12%); + opacity: 0.38; + + @include media(tablet) { + opacity: 0.18; + } + } + } + + + ::-moz-selection { + background: rgba($color__background-body, 0.17); + } + + ::selection { + background: rgba($color__background-body, 0.17); + } +} diff --git a/themes/twentynineteen/sass/site/header/_site-header.scss b/themes/twentynineteen/sass/site/header/_site-header.scss new file mode 100644 index 00000000..22ab1034 --- /dev/null +++ b/themes/twentynineteen/sass/site/header/_site-header.scss @@ -0,0 +1,134 @@ +// Site header + +.site-header { + padding: 1em; + + &.featured-image { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 90vh; + + .site-branding-container { + margin-bottom: auto; + } + } + + @include media(tablet) { + margin: 0; + padding: 3rem 0; + + &.featured-image { + min-height: 100vh; + margin-bottom: 3rem; + } + } +} + +// Site branding + +.site-branding { + + color: $color__text-light; + position: relative; + + @include media(tablet) { + margin: 0 $size__site-margins; + } +} + +// Site logo + +.site-logo { + + position: relative; + z-index: 999; + margin-bottom: calc(.66 * #{$size__spacing-unit}); + + @include media(tablet) { + margin-bottom: 0; + position: absolute; + right: calc(100% + (1.25 * #{$size__spacing-unit})); + top: 4px; // Accounts for box-shadow widths + z-index: 999; + } + + .custom-logo-link { + border-radius: 100%; + box-sizing: content-box; + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + display: block; + width: 50px; + height: 50px; + overflow: hidden; + transition: box-shadow $background_transition ease-in-out; + + .custom-logo { + min-height: inherit; + } + + &:hover, + &:active, + &:focus { + box-shadow: 0 0 0 2px rgba(0, 0, 0, 1); + } + + @include media(tablet) { + width: 64px; + height: 64px; + } + } +} + +// Site title + +.site-title { + margin: auto; + display: inline; + color: $color__text-main; + + a { + color: $color__text-main; + + &:link, + &:visited { + color: $color__text-main; + } + + &:hover { + color: $color__text-hover; + } + } + + .featured-image & { + margin: 0; + + @include media(tablet) { + display: inline-block; + } + } + + /* When there is no description set, make sure navigation appears below title. */ + + .main-navigation { + display: block; + } + + @include media(tablet) { + display: inline; + } + + &:not(:empty) + .site-description:not(:empty):before { + content: "\2014"; + margin: 0 .2em; + } +} + +// Site description + +.site-description { + + display: inline; + color: $color__text-light; + font-weight: normal; + margin: 0; +} diff --git a/themes/twentynineteen/sass/site/primary/_archives.scss b/themes/twentynineteen/sass/site/primary/_archives.scss new file mode 100644 index 00000000..c040c27b --- /dev/null +++ b/themes/twentynineteen/sass/site/primary/_archives.scss @@ -0,0 +1,71 @@ +.archive .page-header, +.search .page-header, +.error404 .page-header { + + margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit}); + + @include media(tablet) { + margin: 0 $size__site-margins $size__site-margins; + } + + .page-title { + + color: $color__text-light; + display: inline; + letter-spacing: normal; + + &:before { + display: none; + } + } + + .search-term, + .page-description { + display: inherit; + clear: both; + + &:after { + content: "."; + font-weight: bold; + color: $color__text-light; + } + } +} + +.archive .page-header .page-description { + display: block; + color: $color__text-main; + font-size: 1em; +} + +.hfeed .entry .entry-header { + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); + } +} + +/* 404 & Not found */ + +.error-404.not-found, +.no-results.not-found { + + .page-title, + .page-content { + + margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit}; + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); + } + } + + .search-submit { + vertical-align: middle; + margin: $size__spacing-unit 0; + } + + .search-field { + width: 100%; + } +} diff --git a/themes/twentynineteen/sass/site/primary/_comments.scss b/themes/twentynineteen/sass/site/primary/_comments.scss new file mode 100644 index 00000000..411db449 --- /dev/null +++ b/themes/twentynineteen/sass/site/primary/_comments.scss @@ -0,0 +1,400 @@ +.comment-content a { + word-wrap: break-word; +} + +.bypostauthor { + display: block; +} + +.comments-area { + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; + @include postContentMaxWidth(); + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + + & > * { + margin-top: calc(2 * #{$size__spacing-unit}); + margin-bottom: calc(2 * #{$size__spacing-unit}); + + @include media(tablet) { + margin-top: calc(3 * #{$size__spacing-unit}); + margin-bottom: calc(3 * #{$size__spacing-unit}); + } + } + + /* Add extra margin when the comments section is located immediately after the + * post itself (this happens on pages). + */ + .entry + & { + margin-top: calc(3 * #{$size__spacing-unit}); + } + + .comments-title-wrap { + + @include media(tablet) { + align-items: baseline; + display: flex; + justify-content: space-between; + } + + .comments-title { + @include post-section-dash; + margin: 0; + + @include media(tablet) { + flex: 1 0 calc(3 * (100vw / 12)); + } + } + + .discussion-meta { + @include media(tablet) { + flex: 0 0 calc(2 * (100vw / 12)); + margin-left: #{$size__spacing-unit}; + } + } + } +} + +#comment { + max-width: 100%; + box-sizing: border-box; +} + +#respond { + position: relative; + + .comment-user-avatar { + margin: $size__spacing-unit 0 -#{$size__spacing-unit}; + } + + .comment .comment-form { + padding-left: 0; + } + + > small { + display: block; + font-size: $font__size_base; + position: absolute; + left: calc(#{$size__spacing-unit} + 100%); + top: calc(-3.5 * #{$size__spacing-unit}); + width: calc(100vw / 12 ); + } +} + +#comments { + + > .comments-title:last-child { + display: none; + } +} + +.comment-form-flex { + display: flex; + flex-direction: column; + + .comments-title { + display: none; + margin: 0; + order: 1; + } + + #respond { + order: 2; + + + .comments-title { + display: block; + } + } +} + +.comment-list { + list-style: none; + padding: 0; + + .children { + margin: 0; + padding: 0 0 0 $size__spacing-unit; + } + + > .comment:first-child { + margin-top: 0; + } + + .pingback, + .trackback { + + .comment-body { + color: $color__text-light; + @include font-family( $font__heading ); + font-size: $font__size-xs; + font-weight: 500; + margin-top: $size__spacing-unit; + margin-bottom: $size__spacing-unit; + + a:not(.comment-edit-link) { + font-weight: bold; + font-size: $font__size-base / (1 * $font__size-ratio); + line-height: 1.5; + padding-right: #{0.5 * $size__spacing-unit}; + display: block; + } + + .comment-edit-link { + color: $color__text-light; + @include font-family( $font__heading ); + font-weight: 500; + } + } + } +} + +.comment-reply { + + #respond + & { + display: none; + } + + .comment-reply-link { + display: inline-block; + } +} + +.comment { + list-style: none; + position: relative; + + @include media(tablet) { + padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 ))); + + &.depth-1, + .children { + padding-left: 0; + } + + &.depth-1 { + margin-left: calc(3.25 * #{$size__spacing-unit}); + } + } + + .comment-body { + margin: calc(2 * #{$size__spacing-unit}) 0 0; + } + + + .comment-meta { + position: relative; + } + + .comment-author { + + .avatar { + float: left; + margin-right: $size__spacing-unit; + position: relative; + + @include media(tablet) { + float: inherit; + margin-right: inherit; + position: absolute; + top: 0; + right: calc(100% + #{$size__spacing-unit}); + } + } + + .fn { + position: relative; + display: block; + + a { + color: inherit; + + &:hover { + color: $color__link-hover; + } + } + } + + .post-author-badge { + border-radius: 100%; + display: block; + height: 18px; + position: absolute; + background: lighten( $color__link, 8% ); + right: calc(100% - #{$size__spacing-unit * 2.5}); + top: -3px; + width: 18px; + + @include media(tablet) { + right: calc(100% + #{$size__spacing-unit * .75}); + } + + svg { + width: inherit; + height: inherit; + display: block; + fill: white; + transform: scale(0.875); + } + } + } + + .comment-metadata { + + > a, + .comment-edit-link { + display: inline; + font-weight: 500; + color: $color__text-light; + vertical-align: baseline; + + time { + vertical-align: baseline; + } + + &:hover { + color: $color__link-hover; + text-decoration: none; + } + } + + > * { + display: inline-block; + } + + .edit-link-sep { + color: $color__text-light; + margin: 0 0.2em; + vertical-align: baseline; + } + + .edit-link { + color: $color__text-light; + + svg { + transform: scale(0.8); + vertical-align: baseline; + margin-right: 0.1em; + } + } + + .comment-edit-link { + position: relative; + padding-left: $size__spacing-unit; + margin-left: -#{$size__spacing-unit}; + z-index: 1; + + &:hover { + color: $color__link; + } + } + } + + .comment-content { + + margin: $size__spacing-unit 0; + + @include media(desktop) { + padding-right: $size__spacing-unit; + } + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + blockquote { + margin-left: 0; + } + + a { + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + } +} + +.comment-reply-link, +#cancel-comment-reply-link { + font-weight: 500; + + &:hover { + color: $color__link-hover; + } +} + +.discussion-avatar-list { + @include clearfix; + + margin: 0; + padding: 0; + + li { + position: relative; + list-style: none; + margin: 0 -8px 0 0; + padding: 0; + float: left; + } + + .comment-user-avatar { + + img { + height: calc(1.5 * #{$size__spacing-unit}); + width: calc(1.5 * #{$size__spacing-unit}); + } + } +} + +.discussion-meta { + + .discussion-meta-info { + margin: 0; + + .svg-icon { + vertical-align: middle; + fill: currentColor; + transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em); + margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above. + } + } + +} + +.comment-form { + + .comment-notes, + label { + @include font-family( $font__heading ); + font-size: $font__size-xs; + color: $color__text-light; + } + + .comment-form-author, + .comment-form-email { + @include media(tablet) { + width: calc(50% - #{$size__spacing-unit / 2}); + float: left; + } + } + + .comment-form-email { + @include media(tablet) { + margin-left: $size__spacing-unit; + } + } + + input[name="author"], + input[name="email"], + input[name="url"] { + display: block; + width: 100%; + } +} diff --git a/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss b/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss new file mode 100644 index 00000000..8f65b9c2 --- /dev/null +++ b/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss @@ -0,0 +1,304 @@ +.sticky { + display: block; +} + +.sticky-post { + background: $color__background-button; + color: #fff; + display: inline-block; + font-weight: bold; + line-height: 1; + padding: .25rem; + position: absolute; + text-transform: uppercase; + top: -$size__spacing-unit; + z-index: 1; +} + +.updated:not(.published) { + display: none; +} + +.page-links { + clear: both; + margin: 0 0 calc(1.5 * #{$size__spacing-unit}); +} + +.entry { + + margin-top: calc(6 * #{$size__spacing-unit}); + + &:first-of-type { + margin-top: 0; + } + + .entry-header { + + margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit; + position: relative; + + @include media(tablet) { + margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit; + } + } + + .entry-title { + + @include post-section-dash; + margin: 0; + + a { + color: inherit; + + &:hover { + color: $color__text-hover; + } + } + } + + .entry-meta, + .entry-footer { + + color: $color__text-light; + font-weight: 500; + + > span { + + margin-right: $size__spacing-unit; + display: inline-block; + + &:last-child { + margin-right: 0; + } + } + + a { + + @include link-transition; + color: currentColor; + + &:hover { + text-decoration: none; + color: $color__link; + } + } + + .svg-icon { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; + } + } + + .entry-meta { + margin: $size__spacing-unit 0; + } + + .entry-footer { + + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; + + @include media(tablet) { + margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit}); + max-width: $size__site-tablet-content; + } + + @include media(tablet) { + max-width: $size__site-desktop-content; + } + } + + .post-thumbnail { + + margin: $size__spacing-unit; + + @include media(tablet) { + margin: $size__spacing-unit $size__site-margins; + } + + &:focus { + outline: none; + } + + .post-thumbnail-inner { + display: block; + + img { + position: relative; + display: block; + width: 100%; + } + } + } + + .image-filters-enabled & { + + .post-thumbnail { + position: relative; + display: block; + + .post-thumbnail-inner { + filter: grayscale(100%); + + &:after { + background: rgba(0, 0, 0, 0.35); + content: ""; + display: block; + height: 100%; + opacity: .5; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: 4; + + @supports (mix-blend-mode: multiply) { + display: none; + } + } + } + + &:before, + &:after, { + position: absolute; + display: block; + width: 100%; + height: 100%; + top: 0; left: 0; + content: "\020"; + pointer-events: none; + } + + @include filter-duotone; + + } + } + + .entry-content, + .entry-summary { + max-width: calc(100% - (2 * #{ $size__spacing-unit })); + margin: 0 $size__spacing-unit; + + @include media(tablet) { + max-width: 80%; + margin: 0 10%; + padding: 0 60px; + } + } + + .entry-content { + + p { + word-wrap: break-word; + } + + .more-link { + @include link-transition; + display: inline; + color: inherit; + + &:after { + content: "\02192"; + display: inline-block; + margin-left: 0.5em; + } + + &:hover { + color: $color__link; + text-decoration: none; + } + } + + a { + text-decoration: underline; + + &.button, + &:hover { + text-decoration: none; + } + + &.button { + display: inline-block; + } + + &.button:hover { + background: $color__background-button-hover; + color: $color__background-body; + cursor: pointer; + } + } + + // Overwrite iframe embeds that have inline styles. + > iframe[style] { + + margin: 32px 0 !important; + max-width: 100% !important; + + @include media(tablet) { + max-width: $size__site-tablet-content !important; + } + + @include media(desktop) { + max-width: $size__site-desktop-content !important; + } + } + + // Page links + .page-links a { + margin: calc(0.5 * #{$size__spacing-unit}); + text-decoration: none; + } + + // Classic editor audio embeds. + .wp-audio-shortcode { + max-width: calc(100vw - (2 * #{ $size__spacing-unit })); + + @include media(tablet) { + max-width: $size__site-tablet-content; + } + + @include media(desktop) { + max-width: $size__site-desktop-content; + } + } + } +} + +/* Author description */ + +.author-bio { + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + + @include media(desktop) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + + .author-title { + @include post-section-dash; + display: inline; + } + + .author-description { + + display: inline; + color: $color__text-light; + font-size: $font__size-md; + line-height: $font__line-height-heading; + + .author-link { + display: inline-block; + + &:hover { + color: $color__link-hover; + text-decoration: none; + } + } + } +} diff --git a/themes/twentynineteen/sass/site/secondary/_widgets.scss b/themes/twentynineteen/sass/site/secondary/_widgets.scss new file mode 100644 index 00000000..3156a8e2 --- /dev/null +++ b/themes/twentynineteen/sass/site/secondary/_widgets.scss @@ -0,0 +1,81 @@ +.widget { + margin: 0 0 #{$size__spacing-unit}; + + /* Make sure select elements fit in widgets. */ + select { + max-width: 100%; + } + + a { + color: $color__link; + + &:hover { + color: $color__link-hover; + } + } +} + +.widget_archive, +.widget_categories, +.widget_meta, +.widget_nav_menu, +.widget_pages, +.widget_recent_comments, +.widget_recent_entries, +.widget_rss { + + ul { + padding: 0; + list-style: none; + + li { + color: $color__text-light; + @include font-family( $font__heading ); + font-size: calc(#{$font__size_base} * #{$font__size-ratio}); + font-weight: 700; + line-height: $font__line-height-heading; + margin-top: #{0.5 * $size__spacing-unit}; + margin-bottom: #{0.5 * $size__spacing-unit}; + } + + @include nestedSubMenuPadding(); + } +} + +.widget_tag_cloud { + + .tagcloud { + @include font-family( $font__heading ); + font-weight: 700; + } +} + + +.widget_search { + + .search-field { + width: 100%; + + @include media(mobile) { + width: auto; + } + } + + .search-submit { + display: block; + margin-top: $size__spacing-unit; + } +} + +.widget_calendar .calendar_wrap { + text-align: center; + + table td, + table th { + border: none; + } + + a { + text-decoration: underline; + } +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/typography/_copy.scss b/themes/twentynineteen/sass/typography/_copy.scss new file mode 100644 index 00000000..bfbd0feb --- /dev/null +++ b/themes/twentynineteen/sass/typography/_copy.scss @@ -0,0 +1,62 @@ +p { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +blockquote { + + cite { + font-size: $font__size-xs; + font-style: normal; + @include font-family( $font__heading ); + } +} + +pre { + font-size: $font__size-sm; + font-family: $font__pre; + line-height: $font__line-height-body; + overflow: auto; +} + +code, +kbd, +tt, +var { + font-size: $font__size-sm; + font-family: $font__code; +} + +abbr, acronym { + border-bottom: 1px dotted #666; + cursor: help; +} + +mark, +ins { + background: #fff9c0; + text-decoration: none; +} + +big { + font-size: 125%; +} + +a { + text-decoration: none; + + &:hover { + text-decoration: none; + } + + &:focus { + text-decoration: underline; + } +} diff --git a/themes/twentynineteen/sass/typography/_headings.scss b/themes/twentynineteen/sass/typography/_headings.scss new file mode 100644 index 00000000..b0f737f9 --- /dev/null +++ b/themes/twentynineteen/sass/typography/_headings.scss @@ -0,0 +1,157 @@ +.author-description .author-link, +.comment-metadata, +.comment-reply-link, +.comments-title, +.comment-author .fn, +.discussion-meta-info, +.entry-meta, +.entry-footer, +.main-navigation, +.no-comments, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.page-links, +.page-description, +.pagination .nav-links, +.sticky-post, +.site-title, +.site-info, +#cancel-comment-reply-link, +h1, +h2, +h3, +h4, +h5, +h6 { + @include font-family( $font__heading ); +} + +.main-navigation, +.page-description, +.author-description .author-link, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.pagination .nav-links, +.comments-title, +.comment-author .fn, +.no-comments, +.site-title, +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; + letter-spacing: -0.02em; + line-height: $font__line-height-heading; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.page-title { + @include font-family( $font__body ); +} + +.site-branding, +.main-navigation ul.main-menu > li, +.social-navigation, +.author-description .author-bio, +.nav-links { + line-height: 1.25; +} + +h1 { + font-size: $font__size-xl; + + @include media(tablet) { + font-size: $font__size-xxl; + } +} + +.entry-title, +.not-found .page-title, +.error-404 .page-title, +.has-larger-font-size, +h2 { + font-size: $font__size-lg; + + @include media(tablet) { + font-size: $font__size-xl; + } +} + +.has-regular-font-size, +.has-large-font-size, +.comments-title, +h3 { + font-size: $font__size-lg; +} + +.site-title, +.site-description, +.main-navigation, +.nav-links, +.page-title, +.page-description, +.comment-author .fn, +.no-comments, +h2.author-title, +p.author-bio, +h4 { + font-size: $font__size-md; +} + +.pagination .nav-links, +.comment-content, +h5 { + font-size: $font__size-sm; +} + +.entry-meta, +.entry-footer, +.discussion-meta-info, +.site-info, +.has-small-font-size, +.comment-reply-link, +.comment-metadata, +.comment-notes, +.sticky-post, +#cancel-comment-reply-link, +img:after, +h6 { + font-size: $font__size-xs; +} + +.site-title, +.page-title { + font-weight: normal; +} + +.page-description, +.page-links a { + font-weight: bold; +} + +.site-description { + letter-spacing: -0.01em; +} + +.post-navigation .post-title, +.entry-title, +.not-found .page-title, +.error-404 .page-title, +.comments-title, +blockquote { + hyphens: auto; + word-break: break-word; +} + +/* Do not hyphenate entry title on tablet view and bigger. */ +.entry-title { + @include media(tablet) { + hyphens: none; + } +} diff --git a/themes/twentynineteen/sass/typography/_typography.scss b/themes/twentynineteen/sass/typography/_typography.scss new file mode 100644 index 00000000..055b7a63 --- /dev/null +++ b/themes/twentynineteen/sass/typography/_typography.scss @@ -0,0 +1,32 @@ + +html { + font-size: $font__size_base; +} + +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: $color__text-main; + @include font-family( $font__body ); + font-weight: 400; + font-size: 1em; + line-height: $font__line-height-body; + margin: 0; + text-rendering: optimizeLegibility; +} + +button, +input, +select, +optgroup, +textarea { + color: $color__text-main; + @include font-family( $font__body ); + font-weight: 400; + line-height: $font__line-height-body; + text-rendering: optimizeLegibility; +} + +@import "headings"; + +@import "copy"; diff --git a/themes/twentynineteen/sass/variables-site/_colors.scss b/themes/twentynineteen/sass/variables-site/_colors.scss new file mode 100644 index 00000000..989daa0c --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_colors.scss @@ -0,0 +1,34 @@ + +// Backgrounds +$color__background-body: #fff; +$color__background-input: #fff; +$color__background-screen: #f1f1f1; +$color__background-hr: #ccc; +$color__background-button: #0073aa; +$color__background-button-hover: #111; +$color__background-pre: #eee; +$color__background-ins: #fff9c0; +$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% ); + +// Text +$color__text-main: #111; +$color__text-light: #767676; +$color__text-hover: lighten( #111, 22.5% ); +$color__text-screen: #21759b; +$color__text-input: #666; +$color__text-input-focus: #111; + +// Links +$color__link: #0073aa; +$color__link-visited: #0073aa; +$color__link-hover: darken( $color__link, 10% ); + +// Borders +$color__border: #ccc; +$color__border-link: #0073aa; +$color__border-link-hover: darken( $color__link, 10% ); +$color__border-button: #ccc #ccc #bbb; +$color__border-button-hover: #ccc #bbb #aaa; +$color__border-button-focus: #aaa #bbb #bbb; +$color__border-input: $color__border; +$color__border-abbr: #666; diff --git a/themes/twentynineteen/sass/variables-site/_columns.scss b/themes/twentynineteen/sass/variables-site/_columns.scss new file mode 100644 index 00000000..6bd29bcc --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_columns.scss @@ -0,0 +1,16 @@ +$columns: ( + 1: calc(1 * (100vw / 12)), + 2: calc(2 * (100vw / 12)), + 3: calc(3 * (100vw / 12)), + 4: calc(4 * (100vw / 12)), + 5: calc(5 * (100vw / 12)), + 6: calc(6 * (100vw / 12)), + 7: calc(7 * (100vw / 12)), + 8: calc(8 * (100vw / 12)), + 9: calc(9 * (100vw / 12)), + 10: calc(10 * (100vw / 12)), + 11: calc(11 * (100vw / 12)), + 12: calc(12 * (100vw / 12)) +); + +$columns__margin: $size__spacing-unit; diff --git a/themes/twentynineteen/sass/variables-site/_fonts.scss b/themes/twentynineteen/sass/variables-site/_fonts.scss new file mode 100644 index 00000000..1003f4e3 --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_fonts.scss @@ -0,0 +1,83 @@ +/* + * Chrome renders extra-wide characters for the Hoefler Text font. + * This results in a jumping cursor when typing in both the Classic and block + * editors. The following font-face override fixes the issue by manually inserting + * a custom font that includes just a Hoefler Text space replacement for that + * character instead. + */ +@font-face { + font-family: 'NonBreakingSpaceOverride'; + src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff'); + +} + +// Font and typographic variables + +$font__body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; +$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +$font__fallbacks: ( + /* Arabic */ + ar: 'Tahoma, Arial, sans-serif', + ary: 'Tahoma, Arial, sans-serif', + azb: 'Tahoma, Arial, sans-serif', + ckb: 'Tahoma, Arial, sans-serif', + fa-IR: 'Tahoma, Arial, sans-serif', + haz: 'Tahoma, Arial, sans-serif', + ps: 'Tahoma, Arial, sans-serif', + /* Cyrillic */ + be: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + bg-BG: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + kk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + mk-MK: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + mn: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + ru-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + sah: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + sr-RS: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + tt-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + /* Chinese (Hong Kong) */ + zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Chinese (Taiwan) */ + zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Chinese (China) */ + zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Devanagari */ + bn-BD: 'Arial, sans-serif', + hi-IN: 'Arial, sans-serif', + mr: 'Arial, sans-serif', + ne-NP: 'Arial, sans-serif', + /* Greek */ + el: '"Helvetica Neue", Helvetica, Arial, sans-serif', + /* Gujarati */ + gu: 'Arial, sans-serif', + /* Hebrew */ + he-IL: '"Arial Hebrew", Arial, sans-serif', + /* Japanese */ + ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif', + /* Korean */ + ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif', + /* Thai */ + th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif', + /* Vietnamese */ + vi: '"Libre Franklin", sans-serif', +); +$font__code: Menlo, monaco, Consolas, Lucida Console, monospace; +$font__pre: "Courier 10 Pitch", Courier, monospace; + +$font__size_base: 22px; +$font__size-ratio: 1.125; + +$font__size-xxs: 1em / (1.5 * $font__size-ratio); +$font__size-xs: 1em / (1.25 * $font__size-ratio); +$font__size-sm: 1em / (1 * $font__size-ratio); +$font__size-md: 1em * (1 * $font__size-ratio); +$font__size-lg: 1em * (1.5 * $font__size-ratio); +$font__size-xl: 1em * (2 * $font__size-ratio); +$font__size-xxl: 1em * (2.5 * $font__size-ratio); +$font__size-xxxl: 1em * (3 * $font__size-ratio); + +$font__line-height-body: 1.8; +$font__line-height-pre: 1.6; +$font__line-height-heading: 1.2; +$font__line-height-double: 2 * $font__line-height-heading;
\ No newline at end of file diff --git a/themes/twentynineteen/sass/variables-site/_structure.scss b/themes/twentynineteen/sass/variables-site/_structure.scss new file mode 100644 index 00000000..dc62145b --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_structure.scss @@ -0,0 +1,16 @@ +// Responsive widths. + +$size__spacing-unit: 1rem; +$size__site-main: 100%; +$size__site-sidebar: 25%; +$size__site-margins: calc(10% + 60px); +$size__site-tablet-content: calc(8 * (100vw / 12) - 28px); +$size__site-desktop-content: calc(6 * (100vw / 12) - 28px); + +// Responsive widths. + +$mobile_width: 600px; +$tablet_width: 768px; +$desktop_width: 1168px; +$wide_width: 1379px; + diff --git a/themes/twentynineteen/sass/variables-site/_transitions.scss b/themes/twentynineteen/sass/variables-site/_transitions.scss new file mode 100644 index 00000000..f0eebbd2 --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_transitions.scss @@ -0,0 +1,6 @@ +// Transition timeouts. + +$link_transition: 110ms; +$icon_transition: 120ms; +$button_transition: 150ms; +$background_transition: 200ms;
\ No newline at end of file diff --git a/themes/twentynineteen/sass/variables-site/_variables-site.scss b/themes/twentynineteen/sass/variables-site/_variables-site.scss new file mode 100644 index 00000000..9d527f9f --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_variables-site.scss @@ -0,0 +1,5 @@ +@import "colors"; +@import "fonts"; +@import "structure"; +@import "columns"; +@import "transitions"; |