From 7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8 Mon Sep 17 00:00:00 2001 From: Charles Date: Tue, 7 Jan 2020 13:06:14 +0100 Subject: Added wordpress --- .../themes/twentynineteen/sass/_normalize.scss | 341 +++++++ .../themes/twentynineteen/sass/blocks/_blocks.scss | 1028 ++++++++++++++++++++ .../twentynineteen/sass/elements/_elements.scss | 92 ++ .../twentynineteen/sass/elements/_lists.scss | 33 + .../twentynineteen/sass/elements/_tables.scss | 13 + .../themes/twentynineteen/sass/forms/_buttons.scss | 37 + .../themes/twentynineteen/sass/forms/_fields.scss | 58 ++ .../themes/twentynineteen/sass/forms/_forms.scss | 3 + .../themes/twentynineteen/sass/layout/_layout.scss | 11 + .../twentynineteen/sass/media/_captions.scss | 32 + .../twentynineteen/sass/media/_galleries.scss | 52 + .../themes/twentynineteen/sass/media/_media.scss | 41 + .../twentynineteen/sass/mixins/_mixins-master.scss | 132 +++ .../twentynineteen/sass/mixins/_utilities.scss | 51 + .../sass/modules/_accessibility.scss | 38 + .../twentynineteen/sass/modules/_alignments.scss | 28 + .../twentynineteen/sass/modules/_clearings.scss | 23 + .../twentynineteen/sass/navigation/_links.scss | 21 + .../sass/navigation/_menu-footer-navigation.scss | 22 + .../sass/navigation/_menu-main-navigation.scss | 506 ++++++++++ .../sass/navigation/_menu-social-navigation.scss | 66 ++ .../sass/navigation/_navigation.scss | 16 + .../sass/navigation/_next-previous.scss | 201 ++++ .../themes/twentynineteen/sass/site/_site.scss | 27 + .../sass/site/footer/_site-footer.scss | 53 + .../sass/site/header/_site-featured-image.scss | 301 ++++++ .../sass/site/header/_site-header.scss | 139 +++ .../sass/site/primary/_archives.scss | 65 ++ .../sass/site/primary/_comments.scss | 405 ++++++++ .../sass/site/primary/_posts-and-pages.scss | 304 ++++++ .../sass/site/secondary/_widgets.scss | 81 ++ .../twentynineteen/sass/typography/_copy.scss | 62 ++ .../twentynineteen/sass/typography/_headings.scss | 164 ++++ .../sass/typography/_typography.scss | 32 + .../sass/variables-site/_colors.scss | 34 + .../sass/variables-site/_columns.scss | 16 + .../twentynineteen/sass/variables-site/_fonts.scss | 83 ++ .../sass/variables-site/_structure.scss | 16 + .../sass/variables-site/_transitions.scss | 6 + .../sass/variables-site/_variables-site.scss | 5 + 40 files changed, 4638 insertions(+) create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/_normalize.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_elements.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_lists.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_tables.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_buttons.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_fields.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_forms.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/layout/_layout.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_galleries.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_alignments.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_clearings.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_links.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/_site.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/typography/_copy.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/typography/_headings.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/typography/_typography.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_colors.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_columns.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_transitions.scss create mode 100644 srcs/wordpress/wp-content/themes/twentynineteen/sass/variables-site/_variables-site.scss (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/sass') diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/_normalize.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/_normalize.scss new file mode 100644 index 0000000..c5ad67a --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss new file mode 100644 index 0000000..0a5920f --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss @@ -0,0 +1,1028 @@ +/* !Block styles */ + + +// Default block margin and alignment rules. +// These are replicated inside of the Group block +// so that child blocks in there appear the same way. +.entry .entry-content > *, +.entry .entry-summary > *, +.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *, +.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * { + margin: 32px 0; + max-width: 100%; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 32px 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; + } + } +} + +.entry .entry-content > *, +.entry .entry-summary > * { + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 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 > a { + @include font-family( $font__heading ); + font-size: calc(#{$font__size_base} * #{$font__size-ratio}); + font-weight: bold; + line-height: $font__line-height-heading; + 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 + .wp-block-latest-posts { + + .wp-block-latest-posts__post-date { + @include font-family( $font__heading ); + font-size: $font__size-xs; + color: $color__text-light; + line-height: 1.2; + } + + .wp-block-latest-posts__post-full-content, + .wp-block-latest-posts__post-excerpt { + margin-top: $size__spacing-unit; + margin-bottom: $size__spacing-unit; + } + + li { + padding-bottom: ( .5 * $size__spacing-unit ); + + &.menu-item-has-children, + &:last-child { + padding-bottom: 0; + } + + :not(:last-child) .wp-block-latest-posts__post-excerpt { + padding-bottom: ( .5 * $size__spacing-unit ); + } + } + + &.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; + } + + // If an image does not have a left/center/right alignment, + // it's a direct child of .wp-block-img. If it has no other + // alignment added, we want to make sure the image does not + // extend beyond the width of the text column. + &:not(.alignwide):not(.alignfull) > img { + @include postContentMaxWidth(); + } + + .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; + + // Only apply the default dot color if there's no separator color specified. + &:not(.has-text-color):not(.has-background) { + color: $color__text-light; + } + + &:before { + 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 { + + .wp-block-column > * { + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Ensure images do not expand beyond the column. + .wp-block-image > img:not(.alignwide):not(.alignfull), + .wp-block-image > figure { + + @include media(tablet) { + max-width: 100%; + } + + @include media(desktop) { + max-width: 100%; + } + } + + @include media(tablet) { + flex-wrap: nowrap; + + .wp-block-column:not(:first-child) { + margin-left: 32px; + } + } + } + + //! Group + .wp-block-group { + + // When the Group block is standard/wide, we need to prevent full-aligned + // child blocks from expanding out of their container. + &:not(.alignfull) > .wp-block-group__inner-container > .alignfull, + &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img { + + @include media(tablet) { + left: 0; + max-width: 100%; + } + } + + // The full-width Group block's inner container should mimic .entry-content styles. + &.alignfull > .wp-block-group__inner-container { + 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; + } + } + + // Group block with a colored background. + &.has-background { + padding: $size__spacing-unit; + margin-top: 0; + margin-bottom: 0; + + // Remove the top and bottom margins of inner blocks. + .wp-block-group__inner-container { + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } + + // If the Group block is full-width, it does not need this extra padding. + &.alignfull { + padding-left: 0; + padding-right: 0; + + @include media(tablet) { + padding-top: $size__spacing-unit; + padding-bottom: $size__spacing-unit; + } + } + + // Full-aligned child blocks should take up the maximum width available in their container. + &:not(.alignfull) > .wp-block-group__inner-container > .alignfull { + width: 100%; + max-width: 100%; + + @include media(tablet) { + width: calc( 100% + #{$size__spacing-unit * 2} ); + max-width: calc( 100% + #{$size__spacing-unit * 2} ); + margin-left: -#{$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/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_elements.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_elements.scss new file mode 100644 index 0000000..b1fad05 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_lists.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_lists.scss new file mode 100644 index 0000000..1db7633 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_tables.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/elements/_tables.scss new file mode 100644 index 0000000..0f653a5 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_buttons.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_buttons.scss new file mode 100644 index 0000000..f527a08 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_fields.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_fields.scss new file mode 100644 index 0000000..448b707 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_forms.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_forms.scss new file mode 100644 index 0000000..2036ef9 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/forms/_forms.scss @@ -0,0 +1,3 @@ +@import "buttons"; + +@import "fields"; diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/layout/_layout.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/layout/_layout.scss new file mode 100644 index 0000000..e0e2c76 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/layout/_layout.scss @@ -0,0 +1,11 @@ + +/** === Layout === */ + +#page { + width: 100%; +} + +.site-content { + overflow: hidden; +} + diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss new file mode 100644 index 0000000..761eb2f --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_galleries.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_galleries.scss new file mode 100644 index 0000000..fbc0bb1 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss new file mode 100644 index 0000000..3fba8c6 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss new file mode 100644 index 0000000..16065f9 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss new file mode 100644 index 0000000..c753fe2 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss new file mode 100644 index 0000000..469887c --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_alignments.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_alignments.scss new file mode 100644 index 0000000..2fb584a --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_clearings.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/modules/_clearings.scss new file mode 100644 index 0000000..444b6b6 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_links.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_links.scss new file mode 100644 index 0000000..cbee457 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss new file mode 100644 index 0000000..afe6971 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss new file mode 100644 index 0000000..4bbd9cf --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss @@ -0,0 +1,506 @@ +/** === 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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss new file mode 100644 index 0000000..00724b5 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss new file mode 100644 index 0000000..a4cf515 --- /dev/null +++ b/srcs/wordpress/wp-content/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/srcs/wordpress/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss b/srcs/word