diff --git a/assets/sass/_root.scss b/assets/sass/_root.scss index aa56e00..2aa6faa 100644 --- a/assets/sass/_root.scss +++ b/assets/sass/_root.scss @@ -23,10 +23,6 @@ $max-page-width: $max-content-width !default; --radius-#{$name}: #{$radius}; } - @each $name, $space in $spacing { - --space-#{$name}: #{$space}; - } - --heading-line-height: #{$heading-line-height}; --max-content-width: #{$max-content-width}; --max-page-width: #{$max-page-width}; diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 39708c9..fc94792 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -115,23 +115,24 @@ $breakpoints: ( // Border radius. // Use like this: var(--radius-m) $border-radius: ( - l: 1rem, - m: 0.3rem, - s: 3px, + xl: 1rem, + l: 0.75rem, + m: 0.5rem, + s: 0.3rem, + xs: 0.125rem, ); // Spacing. -// Use like this: var(--space-m) +// Generates mt-m (mt = margin-top) and mb-m (mb = margin-bottom) classes. $spacing: ( - xxxl: 5rem, - xxl: 3rem, - xl: 2rem, - l: 1.5rem, - m: 1rem, - s: 0.75rem, - xs: 0.5rem, - xxs: 0.4rem, - xxxs: 0.3rem, + xxl: 3, + xl: 2, + l: 1.5, + m: 1, + s: 0.75, + xs: 0.5, + xxs: 0.3, + 0: 0, ); // The max content width. (Consider using one of the breakpoints.) @@ -154,3 +155,7 @@ $indent-amount: 2rem; // Control whether RTL styles are added. $include-rtl: false; + +// Show horizontal grid to help with debugging typography +$debug: true; +$debug-color: $grey-extra-light; diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 32090e8..14e87fd 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -10,19 +10,8 @@ body { background-color: var(--color-body-bg); } -.header { - padding-top: var(--gutters); -} - .footer { - @include margin-top(1.5); - @include padding(.3); - text-align: center; border-top: 2px solid var(--color-brand); - - p { - margin: 0; - } } // Apply smaller text to blocks, footer etc. @@ -78,19 +67,13 @@ article { } } - .tags { - ul { - margin: 0; - } - } - code { font-size: var(--fs-xs); overflow-wrap: break-word; } pre { - border-radius: var(--radius-s); + border-radius: var(--radius-xs); padding: 5px; border: 1px solid var(--color-border-light); background-color: var(--color-text-bg); @@ -110,10 +93,6 @@ article { } } -.title-submitted { - margin-bottom: .2rem; -} - .content-dates { text-align: right; } @@ -129,14 +108,14 @@ img { } &.left { - @include padding(0 .5 .5 0); + padding: 0 .75rem .75rem 0; margin: 0; float: left; clear: both; } &.right { - @include padding(0 0 .5 .5); + padding: 0 0 .75rem .75rem; margin: 0; float: right; clear: both; @@ -167,13 +146,13 @@ figure { &.left { figcaption { - @include padding(0 .5 .5 0); + padding: 0 .75rem .75rem 0; } } &.right { figcaption { - @include padding(0 0 .5 .5); + padding: 0 0 .75rem .75rem; } } } @@ -189,11 +168,11 @@ figure { // Navigation .main-menu { - @include margin-top(.5); + margin-top: .75rem; outline: 0; li { - @include margin-bottom(.5); + margin-bottom: .75rem; padding: 0; } @@ -224,6 +203,7 @@ figure { // Search .search-input { + // Add vertical rhythm margins. @include margin-block(1); } @@ -235,18 +215,8 @@ figure { // Form .content { - label:has(+ :required) { - &::after { - content: '*'; - color: var(--color-mark-highlight); - } - } - input, textarea { - @include margin-bottom(.75); - width: 92%; - &:not(:placeholder-shown):valid { background-color: var(--color-status-bg); } diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index 0e87c81..6f446b8 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -15,20 +15,20 @@ button, [type='reset'], [type='submit'] { @extend %button--disabled; - @include margin-right(.75); - @include margin-bottom(.75); - @include padding(.2 1); // Some styles don't apply to links since they are inline elements by default. display: inline-block; font-family: var(--ff-headings); text-decoration: none; text-align: center; + margin-right: 1rem; + margin-bottom: 1rem; + padding: .2rem 1rem; // Improve usability and consistency of cursor style between image-type `input` and others. cursor: pointer; color: var(--color-button-text); background-color: var(--color-button); border: 0; - border-radius: var(--radius-m); + border-radius: var(--radius-s); &:hover, &:focus, @@ -44,10 +44,10 @@ button, .button, %button { &--small { - @include margin-right(.3); - @include margin-bottom(.3); - @include padding(.1 .5); font-size: var(--fs-xs); + margin-right: .5rem; + margin-bottom: .5rem; + padding: .2rem .75rem; } &--alt { diff --git a/assets/sass/components/footer/_footer.scss b/assets/sass/components/footer/_footer.scss new file mode 100644 index 0000000..910c7b5 --- /dev/null +++ b/assets/sass/components/footer/_footer.scss @@ -0,0 +1,12 @@ +// Branding footer + +.footer, +%footer { + padding-block: var(--gutters); + background-color: var(--color-footer-bg); + text-align: center; + + p { + margin: 0; + } +} diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss index f6a0bc9..fb18a5a 100644 --- a/assets/sass/components/header/_header.scss +++ b/assets/sass/components/header/_header.scss @@ -2,6 +2,7 @@ .header, %header { + padding-block: var(--gutters); display: flex; flex-direction: column; gap: var(--gutters); @@ -24,6 +25,7 @@ // The name of the website. &__site-name { margin: 0; + line-height: 1; } // The link around the name of the website. diff --git a/assets/sass/components/spacing/_spacing.scss b/assets/sass/components/spacing/_spacing.scss new file mode 100644 index 0000000..217e8cb --- /dev/null +++ b/assets/sass/components/spacing/_spacing.scss @@ -0,0 +1,9 @@ +@each $name, $space in $spacing { + .mt--#{$name} { + @include margin-top($space); + } + + .mb--#{$name} { + @include margin-bottom($space); + } +} diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss index a01677f..73962b1 100644 --- a/assets/sass/mixins/spacing/_spacing.scss +++ b/assets/sass/mixins/spacing/_spacing.scss @@ -1,8 +1,12 @@ -@mixin spacing($property, $spacing) { +@mixin spacing($property, $spacing, $unit: 'rem') { $converted-list: (); @each $x in $spacing { - $spacing: #{$x * $base-line-height + 'rem'}; + @if $x == 0 { + $unit: ''; + } + + $spacing: #{$x * $base-line-height + $unit}; $converted-list: join($converted-list, $spacing, $separator: space); } diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index 5476296..c3ff229 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -48,13 +48,13 @@ } &__toggle { - @include padding(0 .2); display: flex; align-items: center; position: absolute; top: var(--gutters); right: var(--gutters); margin: 0; + padding: 0 .3rem; font-weight: var(--fw-bold); background-color: var(--color-text-bg); color: var(--color-text); @@ -107,11 +107,11 @@ } &__sheet { - @include padding(1.5); visibility: hidden; background-color: var(--color-mobile-menu); width: 90vw; height: 100vh; + padding: 2.25rem; transform: translateX(100vw); z-index: 21; diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index cebb400..a28e965 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -16,7 +16,11 @@ // Reset browsers to some sane defaults. -@import 'reset/reset'; +@import 'reset'; + +// Base styles. + +@import 'base/base'; // Layouts @@ -37,6 +41,7 @@ @import 'components/disabled/disabled'; @import 'components/flex-group/flex-group'; @import 'components/flex-inline/flex-inline'; +@import 'components/footer/footer'; @import 'components/grid-group/grid-group'; @import 'components/grid-stack/grid-stack'; @import 'components/header/header'; @@ -48,7 +53,9 @@ @import 'components/messages/messages'; @import 'components/meta/meta'; @import 'components/responsive-video/responsive-video'; +@import 'components/spacing/spacing'; @import 'components/stretch/stretch'; +@import 'components/tags/tags'; @import 'components/visually-hidden/visually-hidden'; // Navigation diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9eb4741..9d505e6 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,7 +14,7 @@
-
+
{{ if $.Param "logo" | default true -}}