From 5a3412317ac720ff9adc244369b42b992f39691c Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:14:11 +0000 Subject: [PATCH 01/11] Add sticky post indicator --- notebook-ph/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/notebook-ph/index.php b/notebook-ph/index.php index 08c9670..a30800e 100644 --- a/notebook-ph/index.php +++ b/notebook-ph/index.php @@ -25,6 +25,7 @@ + 📌 %3$s', esc_url( get_author_posts_url( get_the_author_meta('ID'), get_the_author_meta('user_nicename') ) ), From 6f32bc1f8aadc48251a4456822825c93adcdbfee Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:21:20 +0000 Subject: [PATCH 02/11] Add border around dates --- css/_post.scss | 1 + css/_rainbow.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/css/_post.scss b/css/_post.scss index 3cfab89..3612d39 100644 --- a/css/_post.scss +++ b/css/_post.scss @@ -9,6 +9,7 @@ } .post__time a { + border: 1px solid $black; display: inline-block; height: 2.5rem; padding: 0.5rem; diff --git a/css/_rainbow.scss b/css/_rainbow.scss index 2d5d91b..d6c111e 100644 --- a/css/_rainbow.scss +++ b/css/_rainbow.scss @@ -5,6 +5,9 @@ .comments input[type="submit"] { background: var(--color); } + .post__time .has-bg { + border: 1px solid var(--color); + } .post-item__link:hover { background: $white; color: $black; From 1bc618a99305afe7b07b3c1bd74318668888ed06 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:23:32 +0000 Subject: [PATCH 03/11] Tidying in line with linter --- css/_media.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/css/_media.scss b/css/_media.scss index 3c59caf..25ce3c2 100644 --- a/css/_media.scss +++ b/css/_media.scss @@ -26,8 +26,8 @@ $max-aligned-img: 16em; .prose .alignleft.wp-caption, .prose .alignright.wp-caption { - margin-right: 0; margin-left: 0; + margin-right: 0; } @media (min-width: 600px) { @@ -113,9 +113,9 @@ $max-aligned-img: 16em; } .prose div.aligncenter .wp-caption-text { - max-width: 608px; - margin-right: auto; margin-left: auto; + margin-right: auto; + max-width: 608px; } .prose img.aligncenter { @@ -139,8 +139,8 @@ $max-aligned-img: 16em; flex-wrap: wrap; justify-content: center; max-width: 100%; - padding-right: calc(var(--gutter) / 2); padding-left: calc(var(--gutter) / 2); + padding-right: calc(var(--gutter) / 2); } .prose .gallery br { @@ -157,8 +157,8 @@ $max-aligned-img: 16em; .prose .gallery-item { margin-bottom: var(--gutter); - padding-right: calc(var(--gutter) / 2); padding-left: calc(var(--gutter) / 2); + padding-right: calc(var(--gutter) / 2); } .prose .gallery-columns-2 .gallery-item { @@ -191,9 +191,6 @@ $max-aligned-img: 16em; @media (min-width: 900px) { max-width: calc((100vw - var(--gutter)) / 5); } - - @media (min-width: 1200px) { - } } .prose .gallery-columns-6 .gallery-item { @@ -263,7 +260,7 @@ $max-aligned-img: 16em; } .prose > iframe.instagram-media { - margin-right: auto !important; margin-left: auto !important; + margin-right: auto !important; width: calc(100vw - (var(--gutter) * 2)) !important; } From fe7f25c8890527ee706d5b378dff188325f05b23 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:36:23 +0000 Subject: [PATCH 04/11] Add block media styles --- css/_media.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/css/_media.scss b/css/_media.scss index 25ce3c2..0b1cd91 100644 --- a/css/_media.scss +++ b/css/_media.scss @@ -105,7 +105,8 @@ $max-aligned-img: 16em; } } -.prose div.aligncenter { +.prose div.aligncenter, +.prose div.alignwide { max-width: 100%; @media (min-width: 1200px) { max-width: 1200px; @@ -118,6 +119,17 @@ $max-aligned-img: 16em; max-width: 608px; } +.prose .alignwide img, +.prose .alignfull img { + display: block; + margin-left: auto; + margin-right: auto; +} + +.prose .alignwide img { + max-width: 40rem; +} + .prose img.aligncenter { @media (min-width: 640px) { margin-left: calc((100vw - #{$container-width}) / 2 * -1); @@ -264,3 +276,10 @@ $max-aligned-img: 16em; margin-right: auto !important; width: calc(100vw - (var(--gutter) * 2)) !important; } + +// Blocks + +.wp-block-image figcaption { + color: $grey; + font-size: inherit; +} From 08fd9f50b439ce77ddd7813efc148e0096f1f0ff Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:36:36 +0000 Subject: [PATCH 05/11] Add button styles --- css/_post.scss | 20 ++++++++++++++++++++ css/_rainbow.scss | 10 ++++++++++ css/_typography.scss | 2 +- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/css/_post.scss b/css/_post.scss index 3612d39..54bbd7a 100644 --- a/css/_post.scss +++ b/css/_post.scss @@ -37,3 +37,23 @@ .post__author a:hover { text-decoration: underline; } + +.wp-block-button__link { + background-color: $black; + border: 1px solid $black; + text-decoration: none; +} + +.wp-block-button__link:hover { + background-color: $white; + color: $black; +} + +.is-style-outline .wp-block-button__link { + border: 1px solid $black; +} + +.is-style-outline .wp-block-button__link:hover { + background-color: $black; + color: $white; +} diff --git a/css/_rainbow.scss b/css/_rainbow.scss index d6c111e..d77bab4 100644 --- a/css/_rainbow.scss +++ b/css/_rainbow.scss @@ -29,6 +29,16 @@ input[type="url"] { border: 1px solid var(--color); } + .wp-block-button__link { + background-color: var(--color); + border: 1px solid var(--color); + } + .is-style-outline .wp-block-button__link { + border: 1px solid var(--color); + } + .is-style-outline .wp-block-button__link:hover { + background-color: var(--color); + } @supports (text-decoration-color: var(--color)) { .prose s, .prose del, diff --git a/css/_typography.scss b/css/_typography.scss index 6d2795c..1bd9d6d 100644 --- a/css/_typography.scss +++ b/css/_typography.scss @@ -35,7 +35,7 @@ label a, .comment-content a, -.prose a { +.prose a:not(.wp-block-button__link) { text-decoration: underline; } From 9d9a584610ecb7e889ff0c2b28539c89e8873e11 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Sat, 2 Nov 2019 14:36:43 +0000 Subject: [PATCH 06/11] Change asset enqueue order --- notebook-ph/library/enqueue.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/notebook-ph/library/enqueue.php b/notebook-ph/library/enqueue.php index 2d0a32c..c6ecdaa 100644 --- a/notebook-ph/library/enqueue.php +++ b/notebook-ph/library/enqueue.php @@ -6,7 +6,7 @@ add_action('wp_footer', 'wp_print_footer_scripts', 9); } -add_action('wp_enqueue_scripts', 'nph_assets', 0); +add_action('wp_enqueue_scripts', 'nph_assets', 10); function nph_assets() { $version = nph_get_theme_version(); From a7eea8512342e48c95558c1c9f11532591bb661e Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Thu, 7 Nov 2019 14:04:49 +0000 Subject: [PATCH 07/11] Improve styles in preparation for Gutenberg --- css/_base.scss | 9 + css/_blocks.button.scss | 29 ++ css/_blocks.columns.scss | 68 +++++ css/_blocks.cover.scss | 61 ++++ css/_blocks.embeds.scss | 13 + css/_blocks.gallery.scss | 16 ++ css/_blocks.image.scss | 112 ++++++++ css/_blocks.quotes.scss | 27 ++ css/_blocks.scss | 46 +++ css/_blocks.widgets.scss | 105 +++++++ css/_components.comments.scss | 150 ++++------ css/_layout.scss | 2 + css/_media.scss | 489 +++++++++++++++---------------- css/_mixins.scss | 27 ++ css/_post.scss | 34 +-- css/_rainbow.scss | 29 +- css/_typography.scss | 527 +++++++++++++++++----------------- css/_variables.scss | 6 +- css/main.scss | 11 +- 19 files changed, 1129 insertions(+), 632 deletions(-) create mode 100644 css/_blocks.button.scss create mode 100644 css/_blocks.columns.scss create mode 100644 css/_blocks.cover.scss create mode 100644 css/_blocks.embeds.scss create mode 100644 css/_blocks.gallery.scss create mode 100644 css/_blocks.image.scss create mode 100644 css/_blocks.quotes.scss create mode 100644 css/_blocks.scss create mode 100644 css/_blocks.widgets.scss diff --git a/css/_base.scss b/css/_base.scss index 4e926c7..c7c1df0 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -108,3 +108,12 @@ hr { color: black; height: 1px; } + +label { + a { + text-decoration: underline; + } + a:hover { + text-decoration: underline; + } +} diff --git a/css/_blocks.button.scss b/css/_blocks.button.scss new file mode 100644 index 0000000..6ade580 --- /dev/null +++ b/css/_blocks.button.scss @@ -0,0 +1,29 @@ +.wp-block-button { + @include container; +} + +.wp-block-button__link, +.wp-block-file .wp-block-file__button { + background-color: $black; + border: 1px solid $black; + font-size: inherit; + padding: 0.5rem 1.25rem; + text-decoration: none; + &:hover, + &:focus { + background-color: $white !important; + color: $black; + } +} + +.is-style-outline { + .wp-block-button__link { + background-color: $white !important; + border: 1px solid $black; + &:hover, + &:focus { + background-color: $black; + color: $white; + } + } +} diff --git a/css/_blocks.columns.scss b/css/_blocks.columns.scss new file mode 100644 index 0000000..664f178 --- /dev/null +++ b/css/_blocks.columns.scss @@ -0,0 +1,68 @@ +@mixin columns($cols) { + &.has-#{$cols}-columns { + max-width: calc(#{$container-width} * #{$cols}); + } +} + +// See typography file for text styles + +.wp-block-columns { + margin-bottom: 0 !important; + margin-left: auto; + margin-right: auto; + margin-top: 0 !important; + max-width: $container-width; + padding: 0 var(--gutter); + &.alignwide { + @include columns(2); + @include columns(3); + @include columns(4); + @include columns(5); + @include columns(6); + } + &.alignfull { + max-width: none; + } + + .wp-block-image { + padding: 0; + } + + ~ p, + ~ ul, + ~ ol { + margin-top: 0 !important; + } +} + +.wp-block-column { + margin-bottom: 1.5rem; +} + +.wp-block-media-text { + align-items: start; + margin-left: auto; + margin-right: auto; + max-width: $container-width; + &.small { + grid-template-columns: 8rem auto; + .wp-block-media-text__media { + padding-right: calc(var(--gutter) / 2); + } + .wp-block-media-text__content { + padding-left: calc(var(--gutter) / 2); + } + } + &.alignfull { + max-width: none; + } + .wp-block-media-text__content { + padding: var(--gutter); + > *:first-child { + margin-top: 0; + } + } + .wp-block-media-text__media { + padding: var(--gutter); + } +} diff --git a/css/_blocks.cover.scss b/css/_blocks.cover.scss new file mode 100644 index 0000000..2bc854e --- /dev/null +++ b/css/_blocks.cover.scss @@ -0,0 +1,61 @@ +.wp-block-cover, +.wp-block-cover-image { + clear: both; + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + font-size: inherit; + } + &.aligncenter { + margin-left: auto; + margin-right: auto; + max-width: calc(40rem - (var(--gutter) * 2)); + } + &.alignleft, + &.alignright { + margin-left: var(--gutter); + margin-right: var(--gutter); + max-width: calc(100vw - (var(--gutter) * 2)); + width: 100%; + } + &.alignleft { + @media (min-width: 540px) { + float: left; + max-width: $max-aligned-width; + } + @media (min-width: 640px) { + margin-left: calc(((100vw - #{$container-width}) / 2) + var(--gutter)); + } + @media (min-width: 900px) { + margin-left: calc( + ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) + + var(--gutter) + ); + } + @media (min-width: 1180px) { + margin-left: calc( + ((100vw - #{$container-width}) / 2) - #{$max-aligned-width} + ); + } + } + &.alignright { + @media (min-width: 540px) { + float: right; + max-width: $max-aligned-width; + } + @media (min-width: 640px) { + margin-right: calc(((100vw - #{$container-width}) / 2) + var(--gutter)); + } + @media (min-width: 900px) { + margin-right: calc( + ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) + + var(--gutter) + ); + } + @media (min-width: 1180px) { + margin-right: calc( + ((100vw - #{$container-width}) / 2) - #{$max-aligned-width} + ); + } + } +} diff --git a/css/_blocks.embeds.scss b/css/_blocks.embeds.scss new file mode 100644 index 0000000..a0e80b0 --- /dev/null +++ b/css/_blocks.embeds.scss @@ -0,0 +1,13 @@ +.wp-block-embed { + @include container; + figcaption { + color: $grey; + font-size: inherit; + text-align: left; + } + &.alignfull { + iframe { + width: 100%; + } + } +} diff --git a/css/_blocks.gallery.scss b/css/_blocks.gallery.scss new file mode 100644 index 0000000..ae65ab7 --- /dev/null +++ b/css/_blocks.gallery.scss @@ -0,0 +1,16 @@ +.wp-block-gallery { + margin-bottom: 0; + &.alignfull, + &.alignwide { + max-width: none !important; + } + &.alignleft, + &.alignright { + max-width: 40rem; + } + ~ p, + ~ ul, + ~ ol { + margin-top: 0.5rem !important; + } +} diff --git a/css/_blocks.image.scss b/css/_blocks.image.scss new file mode 100644 index 0000000..7a9c93a --- /dev/null +++ b/css/_blocks.image.scss @@ -0,0 +1,112 @@ +.wp-block-image { + @include container; + &.is-resized { + @include container; + } + figcaption { + color: $grey; // WP override + font-size: inherit; // WP override + text-align: left; + } + + > img { + display: block; + } + + &.alignfull img { + padding: 0; + } + + .aligncenter, + .alignleft, + .alignright &.is-resized { + display: block; + > figcaption { + display: block; // WP override + } + } + + .aligncenter { + img { + display: block; + margin-left: auto; + margin-right: auto; + } + figcaption { + @include container; + text-align: center; + } + } + + .alignleft, + .alignright { + float: none; + margin: 0; + width: 100%; + figcaption { + text-align: left; + } + img { + min-width: $max-aligned-width; + } + } + + .alignleft { + margin-right: var(--gutter); + } + + .alignright { + margin-left: var(--gutter); + } + + &.alignwide { + max-width: none; + } + + &.alignfull { + max-width: none; + padding: 0; + } +} + +@media (min-width: 640px) { + .wp-block-image .alignleft, + .wp-block-image .alignright { + max-width: $max-aligned-width; + width: auto; + } + .wp-block-image .alignleft { + float: left; + } + .wp-block-image .alignright { + float: right; + } +} +@media (min-width: 940px) { + .wp-block-image .alignleft { + margin-left: calc(((#{$max-aligned-width} / 2) + var(--gutter)) * -1); + } + .wp-block-image .alignright { + margin-right: calc(((#{$max-aligned-width} / 2) + var(--gutter)) * -1); + } +} +@media (min-width: 1200px) { + .wp-block-image .alignleft, + .wp-block-image .alignright { + img { + padding: 0; + } + } + .wp-block-image .alignleft { + margin-left: calc((#{$max-aligned-width} + var(--gutter)) * -1); + figcaption { + padding: 0; + } + } + .wp-block-image .alignright { + margin-right: calc((#{$max-aligned-width} + var(--gutter)) * -1); + figcaption { + padding: 0; + } + } +} diff --git a/css/_blocks.quotes.scss b/css/_blocks.quotes.scss new file mode 100644 index 0000000..4747377 --- /dev/null +++ b/css/_blocks.quotes.scss @@ -0,0 +1,27 @@ +.wp-block-quote { + padding: var(--gutter); + &.is-large, + &.is-style-large { + padding: var(--gutter); + p { + font-style: normal; + } + footer, + cite { + font-size: inherit; + } + } +} + +.wp-block-pullquote { + blockquote { + border: none !important; + text-align: center !important; + } + p { + margin-bottom: 1rem !important; + } + cite { + font-style: italic !important; + } +} diff --git a/css/_blocks.scss b/css/_blocks.scss new file mode 100644 index 0000000..f076d16 --- /dev/null +++ b/css/_blocks.scss @@ -0,0 +1,46 @@ +.has-large-font-size { + line-height: 1.3; +} + +.wp-block-audio { + @include container; +} + +.wp-block-video { + @include container; + figcaption { + color: $grey; + font-size: inherit; + text-align: left; + } +} + +.wp-block-file { + @include container; + a.wp-block-file__button { + font-size: inherit; + &:hover, + &:focus { + color: $black; + } + } +} + +.wp-block-archives { + @include container; +} + +.wp-block-separator { + &.is-style-wide { + max-width: none; + } +} + +.wp-block-table { + &.is-style-stripes { + td { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + } +} diff --git a/css/_blocks.widgets.scss b/css/_blocks.widgets.scss new file mode 100644 index 0000000..3b7c222 --- /dev/null +++ b/css/_blocks.widgets.scss @@ -0,0 +1,105 @@ +.wp-block-latest-comments__comment { + border: 1px solid $black; + font-size: inherit; + line-height: inherit; + padding: var(--gutter); +} + +.wp-block-latest-comments__comment-excerpt { + p { + font-size: inherit; + line-height: inherit; + } +} + +.wp-block-latest-comments__comment-date { + color: $grey; + font-size: inherit; +} + +.wp-block-latest-comments a { + &:hover, + &:focus { + text-decoration: none !important; + } +} + +.wp-block-latest-posts { + &.is-grid { + max-width: none !important; + li { + border: 1px solid $black; + padding: var(--gutter); + } + } + &.has-dates { + time:before { + content: "\00a0—"; + margin-right: 1ch; + } + } +} + +.wp-block-latest-posts__post-date { + color: inherit; + display: inline; + font-size: inherit; + line-height: inherit; +} + +.prose .wp-block-tag-cloud { + a { + text-decoration: none; + &:hover, + &:focus { + text-decoration: underline; + } + } +} + +.wp-block-calendar { + @include container; + table { + font-family: inherit; + margin-left: 0; + margin-right: 0; + caption { + margin-bottom: 0.25rem; + text-align: left; + @include style-h4; + } + caption, + tbody { + color: inherit; + } + th { + font-weight: normal; + text-align: center; + } + } + tr > * { + border-bottom: none; + min-width: 4ch; + } + tfoot { + text-align: left; + a { + color: inherit; + text-decoration: none; + @include style-h4; + &:hover, + &:focus { + text-decoration: underline; + } + } + } +} + +.wp-block-search .wp-block-search__button { + margin-left: 0; + margin-top: 1rem; +} + +.wp-block-search__label { + margin-bottom: 0.25rem; +} diff --git a/css/_components.comments.scss b/css/_components.comments.scss index f35d09a..f87fa02 100644 --- a/css/_components.comments.scss +++ b/css/_components.comments.scss @@ -26,36 +26,14 @@ textarea, input[type="text"], input[type="url"] { - border: 1px solid $black; - display: block; - max-width: 100%; - padding: $container-padding 0 $container-padding $container-padding; - width: 100%; - /* stylelint-disable */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - /* stylelint-enable */ + @include input-text; } input[type="text"] { padding: $container-padding 0 $container-padding $container-padding; } input[type="submit"] { - background: $black; - color: $white; - display: inline-block; - height: 1.75rem; - padding: 0.5rem; - @include style-h4; + @include input-submit; } - input[type="submit"]:hover { - background: $white !important; - color: $black; - } -} - -.comments--has-comments details { - color: $black; } .comment-reply-title { @@ -72,42 +50,46 @@ .comment-form-cookies-consent { display: flex; -} - -.comment-form-cookies-consent input[type="checkbox"] { - margin-top: 0.25rem; + input[type="checkbox"] { + margin-top: 0.25rem; + } } .comments--has-comments { margin-top: 3rem; + details { + color: $black; + } } .comment-list { list-style-type: none; padding-left: 0; -} - -.comment-list ol.children { - list-style-type: none; - padding-left: 0; -} - -.comment-author a:hover, -.comment-author a:focus { - text-decoration: underline; + ol.children { + list-style-type: none; + padding-left: 0; + } } .comment-author { @include style-h4; margin-bottom: 1.5rem; -} - -.comment-author cite { - font-style: normal; + a:hover, + a:focus { + text-decoration: underline; + } + cite { + font-style: normal; + } } .comment-avatar { display: none; + img { + display: block; + margin-bottom: 0.5rem; + max-width: 3rem; + } } .comment { @@ -116,40 +98,43 @@ padding: $container-padding; } -.comment-avatar img { - display: block; - margin-bottom: 0.5rem; - max-width: 3rem; -} +.comment-content { + > h1, + > h2, + > h3, + > h4, + > h5, + > h6, + > p, + > table { + margin-bottom: 1.5rem; + margin-top: 1.5rem; + padding-left: 0 !important; + padding-right: 0 !important; + } -.comment-content > h1, -.comment-content > h2, -.comment-content > h3, -.comment-content > h4, -.comment-content > h5, -.comment-content > h6, -.comment-content > p, -.comment-content > table { - margin-bottom: 1.5rem; - margin-top: 1.5rem; - padding-left: 0 !important; - padding-right: 0 !important; -} + a { + text-decoration: underline; + } + a:hover { + text-decoration: underline; + } -.comment-content img { - display: block; - margin-bottom: 0.5rem; - margin-top: 0.5rem; -} + img { + display: block; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } -.comment-content > blockquote, -.comment-content > ul { - margin-left: 0 !important; - margin-right: 0 !important; -} + > blockquote, + > ul { + margin-left: 0 !important; + margin-right: 0 !important; + } -.comment-content > ul { - padding-left: 1rem; + > ul { + padding-left: 1rem; + } } .comment-body .prose pre { @@ -162,22 +147,13 @@ } .comment-reply-link { - background: $black; - color: $white; - display: inline-block; - height: 2.5rem; margin-top: 1.5rem; - padding: 0.5rem; - @include style-h4; - /* stylelint-disable */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - /* stylelint-enable */ + @include input-submit; } -.comment-reply-link:hover, -.comment-reply-link:focus { - background: $white !important; - color: $black; +.comment-respond p, +#webmention-form p, +.link_description > * { + margin-bottom: 1.5em; + margin-top: 1.5em; } diff --git a/css/_layout.scss b/css/_layout.scss index 55f181b..c71756d 100644 --- a/css/_layout.scss +++ b/css/_layout.scss @@ -9,6 +9,8 @@ body { .articles, .article { padding-top: 3rem; + -ms-word-wrap: break-word; + word-wrap: break-word; } .header__inner, diff --git a/css/_media.scss b/css/_media.scss index 0b1cd91..64fa07c 100644 --- a/css/_media.scss +++ b/css/_media.scss @@ -1,285 +1,258 @@ -.prose img.alignnone { - padding: 0; -} - -.prose img[srcset] { - width: auto; -} - -.prose .alignnone.wp-caption { - width: auto !important; // NOTE override undesirable inlined WP styles -} - -// LEFT / RIGHT - -$max-aligned-img: 16em; - -.prose .alignleft, -.prose .alignright { - max-width: $max-aligned-img !important; // NOTE override undesirable inlined WP styles -} - -.prose .alignleft img, -.prose .alignright img { - max-width: 100% !important; // NOTE override undesirable WP behaviour -} - -.prose .alignleft.wp-caption, -.prose .alignright.wp-caption { - margin-left: 0; - margin-right: 0; -} - -@media (min-width: 600px) { - .prose .alignleft { - float: left; - margin-top: 0; - } - .prose .alignright { - float: right; +.prose { + // img[srcset] { + // width: auto; + // } + + /* stylelint-disable */ + > twitter-widget { + @include container; + width: 40rem !important; + } + /* stylelint-enable */ + + > iframe.instagram-media { + margin-left: auto !important; + margin-right: auto !important; + width: calc(100vw - (var(--gutter) * 2)) !important; + } + > p { + img { + display: block; + &.alignleft { + margin-bottom: var(--gutter); + width: $max-aligned-width; + @media (min-width: 540px) { + float: left; + margin-right: var(--gutter); + } + @media (min-width: 930px) { + margin-left: calc(((#{$max-aligned-width} / 2) + var(--gutter)) * -1); + } + @media (min-width: 1180px) { + margin-left: calc((#{$max-aligned-width} + var(--gutter)) * -1); + margin-right: 0; + } + } + &.alignright { + margin-bottom: var(--gutter); + width: $max-aligned-width; + @media (min-width: 540px) { + float: right; + margin-left: var(--gutter); + } + @media (min-width: 930px) { + margin-right: calc( + ((#{$max-aligned-width} / 2) + var(--gutter)) * -1 + ); + } + @media (min-width: 1180px) { + margin-left: 0; + margin-right: calc((#{$max-aligned-width} + var(--gutter)) * -1); + } + } + } + } + > div { margin-top: 0; - } - .prose img.alignleft { - margin-bottom: $container-padding; - padding-right: var(--gutter); - } - .prose img.alignright { - margin-bottom: $container-padding; - padding-left: var(--gutter); - } -} - -.prose p .alignright { - margin-right: 0; -} - -.prose p .alignleft { - margin-left: 0; -} - -.prose img.alignleft { - @media (min-width: 864px) { - margin-left: calc(#{$max-aligned-img} / 2 * -1); - padding-left: var(--gutter); - } - @media (min-width: 1120px) { - margin-left: calc(#{$max-aligned-img} * -1); - } -} - -.prose img.alignright { - @media (min-width: 864px) { - margin-right: calc(#{$max-aligned-img} / 2 * -1); - padding-right: var(--gutter); - } - @media (min-width: 1120px) { - margin-right: calc(#{$max-aligned-img} * -1); - } -} - -.prose .alignleft.wp-caption { - margin-left: 0 !important; - @media (min-width: 864px) { - margin-left: calc( - (100vw - #{$container-width}) / 2 - (#{$max-aligned-img} / 2) + #{$container-padding} - ) !important; - } - @media (min-width: 1120px) { - margin-left: calc( - (100vw - #{$container-width}) / 2 - #{$max-aligned-img} + #{$container-padding} - ) !important; - } -} - -.prose .alignright.wp-caption { - margin-right: 0 !important; - @media (min-width: 864px) { - margin-right: calc( - (100vw - #{$container-width}) / 2 - (#{$max-aligned-img} / 2) + #{$container-padding} - ) !important; - } - @media (min-width: 1120px) { - margin-right: calc( - (100vw - #{$container-width}) / 2 - #{$max-aligned-img} + #{$container-padding} - ) !important; - } -} - -.prose div.aligncenter, -.prose div.alignwide { - max-width: 100%; - @media (min-width: 1200px) { - max-width: 1200px; - } -} - -.prose div.aligncenter .wp-caption-text { - margin-left: auto; - margin-right: auto; - max-width: 608px; -} - -.prose .alignwide img, -.prose .alignfull img { - display: block; - margin-left: auto; - margin-right: auto; -} - -.prose .alignwide img { - max-width: 40rem; -} - -.prose img.aligncenter { - @media (min-width: 640px) { - margin-left: calc((100vw - #{$container-width}) / 2 * -1); - margin-right: calc((100vw - #{$container-width}) / 2 * -1); - max-width: calc(100vw - (var(--gutter) * 2)); - } - - @media (min-width: 1200px) { - margin-left: calc((1200px - #{$container-width}) / 2 * -1); - margin-right: calc((1200px - #{$container-width}) / 2 * -1); - max-width: calc(1200px - (var(--gutter) * 2)); - } -} - -// GALLERY - -.prose .gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - max-width: 100%; - padding-left: calc(var(--gutter) / 2); - padding-right: calc(var(--gutter) / 2); -} - -.prose .gallery br { - display: none; -} - -.prose .gallery-columns-1 { - display: block; -} - -.prose .gallery dd { - padding-left: 0; -} - -.prose .gallery-item { - margin-bottom: var(--gutter); - padding-left: calc(var(--gutter) / 2); - padding-right: calc(var(--gutter) / 2); -} - -.prose .gallery-columns-2 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); - } -} - -.prose .gallery-columns-3 .gallery-item { - @media (min-width: 500px) { - max-width: calc((100vw - var(--gutter)) / 3); - } -} - -.prose .gallery-columns-4 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); + &.alignleft, + &.alignright { + &:not(.wp-block-cover):not(.wp-block-button) { + max-width: 100%; + padding: 0 var(--gutter); + width: $max-aligned-width !important; // Override WP inline styles + } + img { + width: 100%; + } + } + &.alignleft:not(.wp-block-cover):not(.wp-block-button) { + @media (min-width: 540px) { + float: left; + } + @media (min-width: 640px) { + margin-left: calc(((100vw - #{$container-width}) / 2)); + } + @media (min-width: 900px) { + margin-left: calc( + ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) + + var(--gutter) + ); + } + @media (min-width: 1120px) { + margin-left: calc( + ((100vw - #{$container-width}) / 2) - #{$max-aligned-width} + var(--gutter) + ); + } + } + &.alignright:not(.wp-block-cover):not(.wp-block-button) { + @media (min-width: 540px) { + float: right; + } + @media (min-width: 640px) { + margin-right: calc(((100vw - #{$container-width}) / 2)); + } + @media (min-width: 900px) { + margin-right: calc( + ((100vw - #{$container-width}) / 2) - (#{$max-aligned-width} / 2) + + var(--gutter) + ); + } + @media (min-width: 1120px) { + margin-right: calc( + ((100vw - #{$container-width}) / 2) - #{$max-aligned-width} + var(--gutter) + ); + } + } + &.alignnone { + @include container; + width: 100% !important; + } + &.aligncenter { + padding: 0 var(--gutter); + width: 100% !important; + img { + width: 100%; + } + .wp-caption-text { + margin-left: auto; + margin-right: auto; + max-width: 40rem; + text-align: center; + } + } + } + + .wp-caption-text { + color: $grey; + margin-top: 0.5rem; + } + + .gallery { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 100%; + padding-left: calc(var(--gutter) / 2); + padding-right: calc(var(--gutter) / 2); + } + + .gallery br { + display: none; + } + + .gallery-columns-1 { + display: block; + } + + .gallery dd { + padding-left: 0; + } + + .gallery-item { + margin-bottom: var(--gutter); + padding-left: calc(var(--gutter) / 2); + padding-right: calc(var(--gutter) / 2); + } + + .gallery-columns-2 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } + } + + .gallery-columns-3 .gallery-item { + @media (min-width: 500px) { + width: calc((100vw - var(--gutter)) / 3); + } + } + + .gallery-columns-4 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } + + @media (min-width: 766px) { + width: calc((100vw - var(--gutter)) / 4); + } } - @media (min-width: 766px) { - max-width: calc((100vw - var(--gutter)) / 4); - } -} + .gallery-columns-5 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 3); + } -.prose .gallery-columns-5 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 3); + @media (min-width: 900px) { + width: calc((100vw - var(--gutter)) / 5); + } } - @media (min-width: 900px) { - max-width: calc((100vw - var(--gutter)) / 5); - } -} + .gallery-columns-6 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } -.prose .gallery-columns-6 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); - } + @media (min-width: 500px) { + width: calc((100vw - var(--gutter)) / 3); + } - @media (min-width: 500px) { - max-width: calc((100vw - var(--gutter)) / 3); + @media (min-width: 1200px) { + width: calc((100vw - var(--gutter)) / 6); + } } - @media (min-width: 1200px) { - max-width: calc((100vw - var(--gutter)) / 6); - } -} + .gallery-columns-7 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } -.prose .gallery-columns-7 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); - } + @media (min-width: 500px) { + width: calc((100vw - var(--gutter)) / 3); + } - @media (min-width: 500px) { - max-width: calc((100vw - var(--gutter)) / 3); + @media (min-width: 1200px) { + width: calc((100vw - var(--gutter)) / 7); + } } - @media (min-width: 1200px) { - max-width: calc((100vw - var(--gutter)) / 7); - } -} + .gallery-columns-8 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } -.prose .gallery-columns-8 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); - } + @media (min-width: 766px) { + width: calc((100vw - var(--gutter)) / 4); + } - @media (min-width: 766px) { - max-width: calc((100vw - var(--gutter)) / 4); + @media (min-width: 1200px) { + width: calc((100vw - var(--gutter)) / 8); + } } - @media (min-width: 1200px) { - max-width: calc((100vw - var(--gutter)) / 8); - } -} + .gallery-columns-9 .gallery-item { + @media (min-width: 410px) { + width: calc((100vw - var(--gutter)) / 2); + } -.prose .gallery-columns-9 .gallery-item { - @media (min-width: 410px) { - max-width: calc((100vw - var(--gutter)) / 2); - } + @media (min-width: 500px) { + width: calc((100vw - var(--gutter)) / 3); + } - @media (min-width: 500px) { - max-width: calc((100vw - var(--gutter)) / 3); - } + @media (min-width: 1200px) { + width: calc((100vw - var(--gutter)) / 6); + } - @media (min-width: 1200px) { - max-width: calc((100vw - var(--gutter)) / 6); + @media (min-width: 1600px) { + width: calc((100vw - var(--gutter)) / 9); + } } - @media (min-width: 1600px) { - max-width: calc((100vw - var(--gutter)) / 9); + .thumbs { + @include container; } } -// OTHER - -.prose [class*="instagram"] { - margin: 0 auto !important; -} - -.prose > iframe.instagram-media { - margin-left: auto !important; - margin-right: auto !important; - width: calc(100vw - (var(--gutter) * 2)) !important; -} - -// Blocks - -.wp-block-image figcaption { - color: $grey; - font-size: inherit; +.wp-audio-shortcode { + @include container; + display: block; + width: 40rem !important; } diff --git a/css/_mixins.scss b/css/_mixins.scss index a57dc7d..c31510e 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -76,3 +76,30 @@ font-size: inherit; padding: 0 0.25em; } + +@mixin input-text { + border: 1px solid $black; + display: block; + max-width: 100%; + padding: $container-padding 0 $container-padding $container-padding; + width: 100%; + /* stylelint-disable */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + /* stylelint-enable */ +} + +@mixin input-submit { + background: $black; + border: 1px solid $black; + color: $white; + display: inline-block; + padding: 0.5rem; + @include style-h4; + &:hover, + &:focus { + background: $white !important; + color: $black; + } +} diff --git a/css/_post.scss b/css/_post.scss index 54bbd7a..6aae93f 100644 --- a/css/_post.scss +++ b/css/_post.scss @@ -11,7 +11,6 @@ .post__time a { border: 1px solid $black; display: inline-block; - height: 2.5rem; padding: 0.5rem; } @@ -38,22 +37,25 @@ text-decoration: underline; } -.wp-block-button__link { - background-color: $black; - border: 1px solid $black; - text-decoration: none; -} - -.wp-block-button__link:hover { - background-color: $white; - color: $black; +.post-nav-links { + align-items: baseline; + display: flex; + flex-wrap: wrap; + margin-bottom: 1.5rem; + > *:first-child { + margin-left: 1ch; + } } -.is-style-outline .wp-block-button__link { - border: 1px solid $black; -} - -.is-style-outline .wp-block-button__link:hover { - background-color: $black; +.post-page-numbers { + background: $black; color: $white; + display: inline-block; + padding: 0.75rem; + &.current, + &:hover, + &:focus { + background: $white !important; + color: $black; + } } diff --git a/css/_rainbow.scss b/css/_rainbow.scss index d77bab4..b041329 100644 --- a/css/_rainbow.scss +++ b/css/_rainbow.scss @@ -2,6 +2,7 @@ .has-bg, .post-item__link, .comment-reply-link, + .prose button, .comments input[type="submit"] { background: var(--color); } @@ -19,25 +20,39 @@ background-color: var(--color); color: var(--color); } - .prose tr > * { + .prose > table tr > * { border-bottom: 1px solid var(--color); } .article .prose blockquote, .comment, textarea, .comments input[type="text"], - input[type="url"] { + input[type="url"], + input[type="password"], + input[type="search"], + .prose button { border: 1px solid var(--color); } + .wp-block-file .wp-block-file__button, .wp-block-button__link { background-color: var(--color); border: 1px solid var(--color); } - .is-style-outline .wp-block-button__link { + .is-style-outline { + .wp-block-button__link { + border: 1px solid var(--color); + &:hover, + &:focus { + background-color: var(--color) !important; + } + } + } + .wp-block-latest-posts.is-grid li, + .wp-block-latest-comments__comment { border: 1px solid var(--color); } - .is-style-outline .wp-block-button__link:hover { - background-color: var(--color); + .post-page-numbers { + background: var(--color); } @supports (text-decoration-color: var(--color)) { .prose s, @@ -54,7 +69,9 @@ .post__tag a:active, .termindex a:hover, .termindex a:focus, - .termindex a:active { + .termindex a:active, + .wp-block-tag-cloud a:focus, + .wp-block-tag-cloud a:hover { text-decoration-color: var(--color); } } diff --git a/css/_typography.scss b/css/_typography.scss index 1bd9d6d..6e88c02 100644 --- a/css/_typography.scss +++ b/css/_typography.scss @@ -1,303 +1,306 @@ -.prose > *:first-child { - margin-top: 0; -} - -.prose > div:not(.container):not(.gallery), -.prose > p, -.prose > ul, -.prose > ol, -.prose > h1, -.prose > h2, -.prose > h3, -.prose > h4, -.prose > h5, -.prose > h6, -.prose > dl, -.prose > details, -.prose > a, -.prose > blockquote, -.prose > address, -.prose > form { - @include container; -} - -.prose > ol { - @media (max-width: 45em) { - margin-left: calc(2ch + 16px); +.prose, +.wp-block-column { + &.e-content, + &.archive-description { + > p, + > ul, + > ol, + > h1, + > h2, + > h3, + > h4, + > h5, + > h6, + > dl, + > details, + > a, + > blockquote, + > address, + > form { + @include container; + } + + > ol { + @media (max-width: 45em) { + margin-left: calc(2ch + 16px); + } + } + + > ul:not([class]) { + @media (max-width: 42em) { + margin-left: 18px; + } + } + + > blockquote { + @media (max-width: 42em) { + margin-left: var(--gutter); + margin-right: var(--gutter); + } + } + + > details, + > a { + @media (min-width: 500px) { + padding-left: 1rem; + padding-right: 1rem; + } + } + + > a { + display: block; + } } -} -.prose > ul:not(.post__tags) { - @media (max-width: 42em) { - margin-left: 18px; + > *:not(.wp-block-gallery):not(h1):not(h2):not(h3), // UGH + > details summary, + > details p { + margin-bottom: 1.5em; + margin-top: 1.5em; } -} -label a, -.comment-content a, -.prose a:not(.wp-block-button__link) { - text-decoration: underline; -} - -label a:hover, -.comment-content a:hover, -.prose a:hover { - text-decoration: none; -} - -.prose > a { - display: block; -} - -.prose h1 { - @include style-h1(700); - margin-bottom: 1.5em; - margin-top: 1.5em; -} - -.prose h2 { - @include style-h2(700); - margin-bottom: 1.5em; - margin-top: 4em; -} - -.prose h3, -.prose h4, -.prose h5, -.prose h6 { - @include style-h4; -} - -.prose > details summary, -.prose > details p { - margin-bottom: 1.5em; - margin-top: 1.5em; -} - -.prose > details pre { - max-width: calc(100vw - (var(--gutter) * 6)); - width: 36rem; -} - -@media (min-width: 500px) { - .prose > details pre { - max-width: calc(100vw - (var(--gutter) * 4)); + > *:first-child { + margin-top: 0 !important; } -} - -.prose small { - font-size: inherit; -} -.comment-respond p, -#webmention-form p, -.link_description > *, -.prose > *, -.prose > details summary, -.prose > details p { - margin-bottom: 1.5em; - margin-top: 1.5em; -} - -@media (min-width: 500px) { - .prose > details, - .prose > a { - padding-left: 1rem; - padding-right: 1rem; + > *:last-child { + margin-bottom: 0 !important; } -} - -.prose .wp-caption.alignleft, -.prose .wp-caption.alignright { - margin-bottom: $container-padding; -} - -.wp-caption { - max-width: 100%; -} - -.prose .wp-caption-text, -.prose p img { - margin-bottom: 0; -} -.prose .wp-caption img { - margin-bottom: 0.5em; -} - -.prose abbr, -.prose acronym { - text-decoration: none; -} + > details pre { + max-width: calc(100vw - (var(--gutter) * 6)); + width: 36rem; + @media (min-width: 500px) { + max-width: calc(100vw - (var(--gutter) * 4)); + } + } -.prose address { - font-style: normal; -} + > blockquote { + blockquote { + margin-bottom: $container-padding; + } + } -.prose hr { - @include container; -} + li > blockquote { + margin-bottom: 1.5rem; + margin-top: 1.5rem; + } -.prose code, -.prose kbd { - @include code; -} + p, + li, + details, + dl, + table, + figcaption { + a { + text-decoration: underline; + } + a:hover { + text-decoration: none; + } + } -.prose pre { - background: #eeeeee; - font-family: inherit; - font-size: inherit; - margin-left: auto; - margin-right: auto; - max-width: calc(100vw - (var(--gutter) * 2)); - overflow: scroll; - padding: $container-padding; - width: $container-width; -} + h1 { + @include style-h1(700); + } -.prose pre h1, -.prose pre h2, -.prose pre h3, -.prose pre h4, -.prose pre h5, -.prose pre h6 { - font-size: inherit; - font-weight: inherit; -} + > h1 { + margin-bottom: 1.5em; + margin-top: 1.5em; + } -.prose pre code { - display: block; - white-space: pre-wrap; -} + h2 { + @include style-h2(700); + } -.prose pre.nowrap code { - white-space: inherit; -} + > h2 { + margin-bottom: 1.5em; + margin-top: 3.5em; + } -.prose table { - border-collapse: collapse; - display: block; - margin-left: auto; - margin-right: auto; - max-width: 100%; - overflow-x: scroll; - padding-bottom: 1.5em; - width: fit-content; -} + > h3 { + margin-top: 3.5em !important; + } -.prose > table { - padding-left: var(--gutter); - padding-right: var(--gutter); -} + h3, + h4, + h5, + h6 { + @include style-h4; + } -.prose th { - font-weight: normal; - text-align: left; -} + small { + font-size: inherit; + } -.prose tr { - vertical-align: top; -} + abbr, + acronym { + text-decoration: none; + } -.prose tr > * { - border-bottom: 1px solid black; - min-width: 9em; - padding-bottom: 0.5em; - padding-right: 0.5em; - padding-top: 0.5em; -} + address { + font-style: normal; + } -.prose tr > *:last-child { - padding-right: 0; -} + hr { + @include container; + } -.prose dd { - padding-left: 1.5em; -} + tt, + code, + kbd { + @include code; + } -.prose ins { - position: relative; -} + pre { + background: #eeeeee; + font-family: inherit; + font-size: inherit; + margin-left: auto; + margin-right: auto; + max-width: calc(100vw - (var(--gutter) * 2)); + overflow: scroll; + padding: $container-padding; + width: $container-width; + } -.prose ins:before { - content: "‸"; - position: absolute; - text-align: center; - top: 2px; - width: 100%; -} + pre h1, + pre h2, + pre h3, + pre h4, + pre h5, + pre h6 { + font-size: inherit; + font-weight: inherit; + } -.article .prose blockquote { - border: 1px solid black; - padding: $container-padding; -} + pre code { + display: block; + white-space: pre-wrap; + } -.prose blockquote p { - margin-bottom: $container-padding; -} + pre.nowrap code { + white-space: inherit; + } -@media (max-width: 42em) { - .article .prose > blockquote { - margin-left: var(--gutter); - margin-right: var(--gutter); + table { + border-collapse: collapse; + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + overflow-x: scroll; + padding-bottom: 1.5em; + width: fit-content; } -} -.prose > blockquote blockquote { - margin-bottom: $container-padding; -} + > table { + padding-left: var(--gutter); + padding-right: var(--gutter); + } -.prose blockquote *:last-child { - margin-bottom: 0; -} + th { + font-weight: normal; + text-align: left; + } -.prose .wp-caption-text { - font-style: italic; -} + tr { + vertical-align: top; + > * { + border-bottom: 1px solid black; + min-width: 9em; + padding-bottom: 0.5em; + padding-right: 0.5em; + padding-top: 0.5em; + } + > *:last-child { + padding-right: 0; + } + } -.prose mark { - background-color: rgba(255, 255, 64, 0.65); -} + dd { + padding-left: 1.5em; + } -.prose .wp-caption-text i, -.prose .wp-caption-text em { - font-style: normal; -} + ins { + position: relative; + &:before { + content: "‸"; + position: absolute; + text-align: center; + top: 2px; + width: 100%; + } + } -.prose > *:last-child { - margin-bottom: 0 !important; -} + blockquote { + border: 1px solid black; + padding: $container-padding; + p { + margin-bottom: $container-padding; + } + *:last-child { + margin-bottom: 0; + } + } -.termindex { - columns: 11rem auto; - margin-bottom: 2rem; - margin-top: 2rem; -} + mark { + background-color: rgba(255, 255, 64, 0.65); + } -.termindex h2 { - font-size: inherit; - font-weight: inherit; - line-height: inherit; - margin: 0; -} + textarea, + input[type="text"], + input[type="url"], + input[type="password"], + input[type="search"] { + @include input-text; + } -.termindex ol { - list-style: none; - margin-bottom: 1.5rem; - padding-left: 0; -} + label { + @include style-h4; + display: block; + margin-top: 1.5rem; + } -.termindex li { - margin-left: 1rem; - text-indent: -1rem; -} + button, + input[type="submit"] { + @include input-submit; + } -.termindex a { - text-decoration: none; -} + input[id*="pwbox"] { + margin-bottom: 1.5rem; + margin-top: 0.25rem; + } -.termindex a:hover, -.termindex a:focus, -.termindex a:active { - text-decoration: underline; + .termindex { + columns: 11rem auto; + margin-bottom: 2rem; + margin-top: 2rem; + h2 { + font-size: inherit; + font-weight: inherit; + line-height: inherit; + margin: 0; + &:first-child { + margin-top: 0; + } + } + ol { + list-style: none; + margin-bottom: 1.5rem; + padding-left: 0; + } + li { + margin-left: 1rem; + text-indent: -1rem; + } + a { + text-decoration: none; + } + a:hover, + a:focus, + a:active { + text-decoration: underline; + } + } } diff --git a/css/_variables.scss b/css/_variables.scss index 131b1fa..b7bd93b 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -2,11 +2,11 @@ $black: #000000; $grey: #949494; $white: #ffffff; -$font-mono: 'IBMPlexMono', monospace; +$font-mono: "IBMPlexMono", monospace; $container-width: 40rem; $container-padding: 1rem; -$container-padding-mobile: .5rem; +$container-padding-mobile: 0.5rem; $header-height: 3.5rem; $sm: 42em; @@ -19,3 +19,5 @@ $size-h1: $size-body; $size-h2: $size-body; $size-h3: $size-body; $size-h4: $size-body; + +$max-aligned-width: 16em; diff --git a/css/main.scss b/css/main.scss index 9deaee4..847e6bc 100644 --- a/css/main.scss +++ b/css/main.scss @@ -3,15 +3,24 @@ @import "fonts"; @import "base"; @import "layout"; +@import "typography"; @import "components.pagination"; @import "components.searchform"; @import "components.tags"; +@import "blocks"; +@import "blocks.image"; +@import "blocks.cover"; +@import "blocks.button"; +@import "blocks.gallery"; +@import "blocks.columns"; +@import "blocks.quotes"; +@import "blocks.embeds"; +@import "blocks.widgets"; @import "components.site-header"; @import "components.site-footer"; @import "post"; @import "prism"; @import "media"; -@import "typography"; @import "components.comments"; @import "utilities"; @import "rainbow"; From 19a2210d74a9a6d042ba014894429bb739a5f5b3 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Thu, 7 Nov 2019 14:05:04 +0000 Subject: [PATCH 08/11] Add missing e-content class --- notebook-ph/404.php | 2 +- notebook-ph/page-templates/no-title.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/notebook-ph/404.php b/notebook-ph/404.php index d9ea311..6171c74 100644 --- a/notebook-ph/404.php +++ b/notebook-ph/404.php @@ -9,7 +9,7 @@ -
+

diff --git a/notebook-ph/page-templates/no-title.php b/notebook-ph/page-templates/no-title.php index 0055d6b..947aa33 100644 --- a/notebook-ph/page-templates/no-title.php +++ b/notebook-ph/page-templates/no-title.php @@ -15,7 +15,7 @@ -
+
From 791e8a6699ed9d4b9f66b6330d73eec8d735cfc8 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Thu, 7 Nov 2019 14:05:15 +0000 Subject: [PATCH 09/11] Remove unnecessary srcset filter --- notebook-ph/library/cleanup.php | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/notebook-ph/library/cleanup.php b/notebook-ph/library/cleanup.php index bdd91aa..3508208 100644 --- a/notebook-ph/library/cleanup.php +++ b/notebook-ph/library/cleanup.php @@ -31,21 +31,6 @@ function nph_alter_wp_ver_css_js($src) { return $src; } -// Generate the appropriate sizes attribute value -add_filter('wp_calculate_image_sizes', 'nph_sizes', 10 , 5); -function nph_sizes($sizes, $size, $image_src, $image_meta, $attachment_id) { - $image_width = $size[0]; - $col_width = 606; - // If the width of the image is greater than double the width of the column - if ($image_width >= ($col_width * 2)) { - $sizes = '(max-width: 638px) 95vw, ' . $col_width . 'px'; - } else { - $image_half = $image_width / 2; - $sizes = '(max-width: ' . $image_half . 'px) 95vw, ' . $image_half . 'px'; - } - return $sizes; -} - // Add loading attribute to images add_filter( 'the_content', 'nph_lazyload_content_images' ); function nph_lazyload_content_images( $content ) { From ebec73f10e2bd02759f9f9c1863ca39c55c2e3e5 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Thu, 7 Nov 2019 14:05:35 +0000 Subject: [PATCH 10/11] Fix default infinite scroll end text --- notebook-ph/footer.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/notebook-ph/footer.php b/notebook-ph/footer.php index 6b3c905..ec2f906 100644 --- a/notebook-ph/footer.php +++ b/notebook-ph/footer.php @@ -42,7 +42,7 @@ - ' . esc_html__('Loading more…', 'notebook-ph') . ''; ?> +


'); ?>

From 03bb1a99a92fa4413335a70d11f8dc1d6e965089 Mon Sep 17 00:00:00 2001 From: Piper Haywood Date: Thu, 7 Nov 2019 14:05:43 +0000 Subject: [PATCH 11/11] Update readme instructions --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c24c86d..43077f7 100644 --- a/README.md +++ b/README.md @@ -36,4 +36,6 @@ The shortcode `[notebooklist]` displays a chronological list of posts. ## Development -I prefer to keep this theme separate from my WordPress installation when working on this locally. To do this, set up a WordPress site locally using this [multi-environment `wp-config.php` gist](https://gist.github.com/piperhaywood/2a7217964335e22574784153eab1d38b) if useful. Once you’ve set up the site, symlink the theme folder `/notebook-ph` within this repo in to your WP site’s `/wp-content/themes` directory. Back in the root of this repo, run `npm i` to install dependencies. Run `gulp` to build the theme or `gulp dev` for development. The command `gulp dev` will compile the files and then use BrowserSync for live reloading. To set a BrowserSync proxy other than the default `localhost:8888`, run `gulp dev --proxy custom-proxy` (replace `custom-proxy`). +To set this repo up, install WordPress in a separate directory using this [multi-environment `wp-config.php` gist](https://gist.github.com/piperhaywood/2a7217964335e22574784153eab1d38b) if useful, then symlink the theme folder `/notebook-ph` within this repo in to your WP site’s `/wp-content/themes` directory. You can do this with multiple WordPress installations, which can be useful for testing styles against different content. I use this with one WordPress installation that reflects [piperhaywood.com](https://piperhaywood.com) and another that uses WordPress’s theme testing database. + +Once you have the WordPress installation set up and the theme symlinked, run `npm i` from the root of this repo to install dependencies. Run `gulp` to build the theme or `gulp dev` for development. The command `gulp dev` will compile the files and then use BrowserSync for live reloading. To set a BrowserSync proxy other than the default `localhost:8888`, run `gulp dev --proxy custom-proxy` (replace `custom-proxy`).