hscc

The personnal website source code of Hugo Soucy. Creates from an homebrewed static website generator.
Log | Files | Refs

commit 973ec9c74de49c0941d69f83fb48b5ec51885124
parent 97751b7393def7fe2a480dfa07172e70edbfa943
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat, 21 Nov 2020 10:20:09 -0500

Edit styles

Diffstat:
Msrc/scss/atoms/typography/_quotes.scss | 2+-
Msrc/scss/atoms/typography/_titles.scss | 1-
Msrc/scss/global/_base.scss | 46+++++++++++++++++-----------------------------
Msrc/scss/global/tokens/_colors.scss | 46+++++++++++++++++++++++++++-------------------
Msrc/scss/global/tokens/_typography.scss | 40++++++++++++++++++++++++++--------------
Asrc/scss/index.scss | 38++++++++++++++++++++++++++++++++++++++
Msrc/scss/modules/_go-to.scss | 13+++++++++++++
Msrc/scss/modules/_hcite.scss | 2+-
Msrc/scss/modules/_hentry.scss | 20+++++++++++++++++++-
Msrc/scss/modules/_hresume.scss | 6++++++
Asrc/scss/modules/_layout.scss | 27+++++++++++++++++++++++++++
Msrc/scss/modules/_nav.scss | 6++++++
Dsrc/scss/ui.scss | 1-
Dsrc/scss/ux.scss | 37-------------------------------------
14 files changed, 181 insertions(+), 104 deletions(-)

diff --git a/src/scss/atoms/typography/_quotes.scss b/src/scss/atoms/typography/_quotes.scss @@ -2,6 +2,6 @@ blockquote { border-left: rem-calc(16) solid var(--base-br); display:block; - margin: 0; + //margin: 0; padding: 1em 1em 1em rem-calc(30); } diff --git a/src/scss/atoms/typography/_titles.scss b/src/scss/atoms/typography/_titles.scss @@ -9,7 +9,6 @@ $i: 6; hyphens: auto; line-height: var(--hn-line-height); margin-bottom: 0; - overflow-wrap: break-word; &:first-child { margin-top: 0; diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss @@ -1,10 +1,14 @@ /* BASE STYLES */ :root { - @include mq-from(md) { - --base-font-size: calc(1rem * calc(#{$base-font-size + 4} / 16)); + font-size: #{$base-font-size}px; + + @include mq-from(xs) { + font-size: #{($base-font-size + 2)}px; } - font-size: var(--base-font-size); + @include mq-from(md) { + font-size: #{($base-font-size + 6)}px; + } } // *, @@ -29,37 +33,13 @@ body { body { background: var(--base-bg) url("/images/noise.png") repeat; - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - - & > * { - margin-top: 1rem; - margin-bottom: 1rem; - } - - & > * > * { - margin-left: auto; - margin-right: auto; - max-width: var(--grid-max-width); - padding: 4rem 2rem; - } - - & > :first-child:not(main) { - margin-top: 0; - } - - & > :last-child:not(main) { - margin-bottom: 0; - } } [hidden] { display: none; } -[hidden]+* { +[hidden] + * { margin-top: 0 !important; } @@ -124,4 +104,12 @@ img { height: auto; max-width: 100%; } -// + +ol, +ul { + padding-left: 1rem; +} + +svg:not(:root) { + overflow: hidden; +} diff --git a/src/scss/global/tokens/_colors.scss b/src/scss/global/tokens/_colors.scss @@ -1,26 +1,34 @@ // Color Tokens +$colors: ( + aqua: #7FFFD4, + blue: #0000ff, + grey: #cccccc, + indigo: #8000ff, + brightest: #f9f9f9, + darkest: #111111, + darkest-grey: #333333 +); + :root { - // Palette - --base-aqua: #7FFFD4; - --base-blue: #0000ff; - --base-grey: #cccccc; - --base-indigo: #8000ff; - --base-brightest: #f9f9f9; - --base-darkest: #111111; - --base-darkest-grey: #333333; + @supports (color: var(--base-white, white)) { + // Palette + @each $key, $val in $colors { + --base-#{$key}: #{$val}; + } - // Body - --base-bg: var(--base-brightest); - --base-fg: var(--base-darkest); + // Body + --base-bg: var(--base-brightest); + --base-fg: var(--base-darkest); - // Links - --base-link-fg: var(--base-blue); - --base-link-bg: var(--base-aqua); - --base-link-visited: var(--base-indigo); + // Links + --base-link-fg: var(--base-blue); + --base-link-bg: var(--base-aqua); + --base-link-visited: var(--base-indigo); - --base-br: var(--base-grey); - --base-br-light: var(--base-aqua); + --base-br: var(--base-grey); + --base-br-light: var(--base-aqua); - --base-snippet-fg: var(--base-indigo); - --base-snippet-bg: white; + --base-snippet-fg: var(--base-indigo); + --base-snippet-bg: white; + } } diff --git a/src/scss/global/tokens/_typography.scss b/src/scss/global/tokens/_typography.scss @@ -1,22 +1,34 @@ // Typography tokens -$base-font-size: 16; +$base-font-family: "Ubuntu mono", monospace; +$base-font-size: 14; +$base-line: 1.6; +$base-line-title: 1.25; $base-space: 4; +$hn: ( + h1: 2.25, + h2: 1.75, + h3: 1.25, + h4: 1.125, + h5: 1, + h6: 0.875 +); + + :root { - --base-font-family: monospace; - --base-font-size: calc(1rem * calc(#{$base-font-size} / 16)); - --base-line-height: 1.6; + @supports (color: var(--base-ff, Arial)) { + --base-font-family: #{$base-font-family}; + --base-font-size: #{$base-font-size}px; + --base-line-height: #{$base-line}; - // Titles - --base-h1: calc(2.25 * var(--base-font-size)); - --base-h2: calc(1.75 * var(--base-font-size)); - --base-h3: calc(1.25 * var(--base-font-size)); - --base-h4: calc(1.125 * var(--base-font-size)); - --base-h5: var(--base-font-size); - --base-h6: calc(0.875 * var(--base-font-size)); + // Titles + @each $key, $val in $hn { + --base-#{$key}: #{$val}rem; + } - --hn-line-height: 1.25; + --hn-line-height: 1.25; - // Spaces - --base-space: #{$base-space / $base-font-size}rem; + // Spaces + --base-space: #{$base-space / $base-font-size}rem; + } } diff --git a/src/scss/index.scss b/src/scss/index.scss @@ -0,0 +1,38 @@ +/* Globals */ +@import "global/tokens/_typography.scss"; +@import "global/tokens/_colors.scss"; +@import "global/tokens/_grid.scss"; + +// Functions +@import "global/functions/strip-unit"; +@import "global/functions/em-calc"; +@import "global/functions/rem-calc"; + +// Mixins +@import "global/mixins/mq-from"; +@import "global/mixins/mq-to"; + +@import "global/_base.scss"; +@import "global/_a11y.scss"; + +/* Atoms */ +@import "atoms/_logo.scss"; +@import "atoms/icons/_icons.scss"; +@import "atoms/typography/_titles.scss"; +@import "atoms/typography/_quotes.scss"; +@import "atoms/buttons/_button.scss"; + +/* Modules */ +@import "modules/_layout.scss"; +@import "modules/_index.scss"; +@import "modules/_go-to.scss"; +@import "modules/_nav.scss"; +@import "modules/_main.scss"; +@import "modules/_footer-banner.scss"; +@import "modules/_hcard.scss"; +@import "modules/_hcite.scss"; +@import "modules/_hentry.scss"; +@import "modules/_hfeed.scss"; +@import "modules/_hresume.scss"; + +@import "modules/_webmentions.scss"; diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss @@ -2,6 +2,8 @@ .go-to { &-content, &-nav { + margin-bottom: 0; + margin-top: 0; order: -2; } @@ -11,6 +13,7 @@ background: var(--base-darkest); color: var(--base-brightest); display: inline-flex; + justify-content: flex-start; padding-right: 2rem; text-transform: capitalize; @@ -21,5 +24,15 @@ padding: 0.5rem 2rem 0.5rem 2rem; } } + + & > svg { + display: none; + margin-right: calc(var(--base-space) * 1); + padding: 0; + + @include mq-from(xs) { + display: block; + } + } } } diff --git a/src/scss/modules/_hcite.scss b/src/scss/modules/_hcite.scss @@ -7,6 +7,6 @@ } blockquote.hcite { - background: white; + //background: white; font-style: italic; } diff --git a/src/scss/modules/_hentry.scss b/src/scss/modules/_hentry.scss @@ -48,13 +48,31 @@ } } + &__posttype { + align-items: center; + color: var(--base-darkest-grey); + display: flex; + font-size: 14px; + + & > svg { + margin-right: calc(var(--base-space) * 1); + } + } + + &__categories { + align-items: center; display: inline-flex; flex-wrap: wrap; - gap: calc(var(--base-space) * 2); list-style-type: none; padding: 0; + li { + display: inline-block; + margin-bottom: calc(var(--base-space) * 2); + margin-right: calc(var(--base-space) * 2); + } + .p-category { border: 1px dotted var(--base-br); color: var(--base-darkest-grey); diff --git a/src/scss/modules/_hresume.scss b/src/scss/modules/_hresume.scss @@ -38,6 +38,12 @@ display: inline; } } + + .u-uid { + hyphens: auto; + overflow-wrap: break-word; + word-break: break-word; + } } .h-event { diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss @@ -0,0 +1,27 @@ +// Layout module +.layout { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + + & > * { + margin-top: 1rem; + margin-bottom: 1rem; + } + + & > * > * { + margin-left: auto; + margin-right: auto; + max-width: var(--grid-max-width); + padding: 4rem 2rem; + } + + & > :first-child:not(main) { + margin-top: 0; + } + + & > :last-child:not(main) { + margin-bottom: 0; + } +} diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss @@ -14,6 +14,12 @@ } } + &__title { + color: var(--base-brightest); + padding-bottom: 1em; + padding-top: 1em; + } + &__list { list-style-type: none; margin-bottom: 0; diff --git a/src/scss/ui.scss b/src/scss/ui.scss @@ -1 +0,0 @@ -// UI CSS diff --git a/src/scss/ux.scss b/src/scss/ux.scss @@ -1,37 +0,0 @@ -/* Globals */ -@import "global/tokens/_typography.scss"; -@import "global/tokens/_colors.scss"; -@import "global/tokens/_grid.scss"; - -// Functions -@import "global/functions/strip-unit"; -@import "global/functions/em-calc"; -@import "global/functions/rem-calc"; - -// Mixins -@import "global/mixins/mq-from"; -@import "global/mixins/mq-to"; - -@import "global/_base.scss"; -@import "global/_a11y.scss"; - -/* Atoms */ -@import "atoms/_logo.scss"; -@import "atoms/icons/_icons.scss"; -@import "atoms/typography/_titles.scss"; -@import "atoms/typography/_quotes.scss"; -@import "atoms/buttons/_button.scss"; - -/* Modules */ -@import "modules/_index.scss"; -@import "modules/_go-to.scss"; -@import "modules/_nav.scss"; -@import "modules/_main.scss"; -@import "modules/_footer-banner.scss"; -@import "modules/_hcard.scss"; -@import "modules/_hcite.scss"; -@import "modules/_hentry.scss"; -@import "modules/_hfeed.scss"; -@import "modules/_hresume.scss"; - -@import "modules/_webmentions.scss";