diff options
Diffstat (limited to 'themes/twentynineteen/sass/site')
8 files changed, 1361 insertions, 0 deletions
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 |