hscc

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

commit 70f001bf363d98eb07b8d91feb969266f917135a
parent d2646b92d344c9bed78a8554dd249bd44da8eb16
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Wed,  9 Dec 2020 21:58:30 -0500

Change CSS

Diffstat:
Msrc/scss/atoms/typography/_quotes.scss | 10+++++++---
Msrc/scss/global/_base.scss | 102++++++++++++++++++++++++++++++++++++++++++-------------------------------------
Msrc/scss/global/tokens/_grid.scss | 2+-
Msrc/scss/modules/_go-to.scss | 4+++-
Msrc/scss/modules/_hcard.scss | 10+++++++---
Msrc/scss/modules/_hcite.scss | 22++++++++++++++--------
Msrc/scss/modules/_hentry.scss | 5+++++
Msrc/scss/modules/_layout.scss | 44++++++++++++++++++++++++--------------------
Msrc/scss/modules/_main.scss | 12+-----------
Msrc/scss/modules/_nav.scss | 4++--
10 files changed, 118 insertions(+), 97 deletions(-)

diff --git a/src/scss/atoms/typography/_quotes.scss b/src/scss/atoms/typography/_quotes.scss @@ -1,7 +1,11 @@ // Quotes Atom blockquote { border-left: rem-calc(16) solid var(--base-br); - display:block; - //margin: 0; - padding: 1em 1em 1em rem-calc(30); + display: block; + margin: 0; + padding: 1em 1em 1em rem-calc(16); + + @include mq-from(md) { + margin-left: calc(var(--base-space) * 6); + } } diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss @@ -1,14 +1,14 @@ /* BASE STYLES */ :root { - font-size: #{$base-font-size}px; + font-size: #{$base-font-size}px; - @include mq-from(xs) { - font-size: #{($base-font-size + 2)}px; - } + @include mq-from(xs) { + font-size: #{($base-font-size + 2)}px; + } - @include mq-from(md) { - font-size: #{($base-font-size + 6)}px; - } + @include mq-from(md) { + font-size: #{($base-font-size + 6)}px; + } } // *, @@ -26,28 +26,30 @@ html, body { - height: 100%; - min-height: 100%; - position: relative; + height: 100%; + min-height: 100%; + position: relative; } body { - background: var(--base-bg) url("/images/noise.png") repeat; + background: var(--base-bg) url("/images/noise.png") repeat; + margin: 0; + padding: 0; } [hidden] { - display: none; + display: none; } [hidden] + * { - margin-top: 0 !important; + margin-top: 0 !important; } footer, header, main, nav { - display: block + display: block } body, @@ -55,61 +57,65 @@ button, input, select, textarea { - color: var(--base-fg); - font-family: var(--base-font-family); - font-size: 1rem; - line-height: var(--base-line-height); + color: var(--base-fg); + font-family: var(--base-font-family); + font-size: 1rem; + line-height: var(--base-line-height); } a { - background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0); - color: var(--base-link-fg); - overflow-wrap: break-word; - text-decoration: none; - - &:focus, - &:hover { - background: linear-gradient(180deg,transparent 0%, var(--base-link-bg) 0); - color: var(--base-fg); - } + background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0); + color: var(--base-link-fg); + overflow-wrap: break-word; + text-decoration: none; + + &:focus, + &:hover { + background: linear-gradient(180deg,transparent 0%, var(--base-link-bg) 0); + color: var(--base-fg); + } } hr { - background: transparent; - border: dotted var(--base-br); - border-width: 1px 0 0; - display: block; - height: 1px; + background: transparent; + border: dotted var(--base-br); + border-width: 1px 0 0; + display: block; + height: 1px; } pre { - background: var(--base-snippet-bg); - border: 1px dotted var(--base-snippet-fg); - font-size: .85rem; - overflow: auto; - padding: 1rem; - - code { - background: transparent; - } + background: var(--base-snippet-bg); + border: 1px dotted var(--base-snippet-fg); + font-size: .85rem; + overflow: auto; + padding: 1rem; + + code { + background: transparent; + } } code { - background: var(--base-snippet-bg); - color: var(--base-snippet-fg); + background: var(--base-snippet-bg); + color: var(--base-snippet-fg); } iframe, img { - height: auto; - max-width: 100%; + height: auto; + max-width: 100%; } ol, ul { - padding-left: 1rem; + padding-left: 1rem; } svg:not(:root) { - overflow: hidden; + overflow: hidden; +} + +abbr { + cursor: help; } diff --git a/src/scss/global/tokens/_grid.scss b/src/scss/global/tokens/_grid.scss @@ -1,5 +1,5 @@ // Grid tokens -$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 512px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px); +$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px); :root { --grid-max-width: calc(1rem * calc(1100 / 16)); diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss @@ -12,7 +12,7 @@ align-items: center; background: var(--base-darkest); color: var(--base-brightest); - display: inline-flex; + display: flex; justify-content: flex-start; padding-right: 2rem; text-transform: capitalize; @@ -31,7 +31,9 @@ padding: 0; @include mq-from(xs) { + @include mq-to(lg) { display: block; + } } } } diff --git a/src/scss/modules/_hcard.scss b/src/scss/modules/_hcard.scss @@ -10,11 +10,15 @@ } .u-photo { - float: right; height: auto; - margin: 1rem; + margin: 1rem auto 0; mix-blend-mode: hard-light; - width: 15rem; + + @include mq-from(sm) { + float: right; + margin: 1rem; + max-width: 240px; + } } .u-photo { diff --git a/src/scss/modules/_hcite.scss b/src/scss/modules/_hcite.scss @@ -1,12 +1,18 @@ // -.hcite { - .emojione.custom-emoji { - height: auto; - width: 1.5rem; - } -} +.hcite {} blockquote.hcite { - //background: white; - font-style: italic; + font-size: 0.85em; + + .emojione.custom-emoji { + height: auto; + width: 1rem; + } + + .detailed-status__display-avatar, + .detailed-status__meta, + .status__content ~ *, + .button.logo-button.modal-button { + display: none; + } } diff --git a/src/scss/modules/_hentry.scss b/src/scss/modules/_hentry.scss @@ -52,11 +52,16 @@ align-items: center; color: var(--base-darkest-grey); display: flex; + flex-wrap: wrap; font-size: 14px; & > svg { margin-right: calc(var(--base-space) * 1); } + + & > cite { + margin-left: calc(var(--base-space) * 1); + } } diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss @@ -1,27 +1,31 @@ // Layout module .layout { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; - & > * { - margin-top: 1rem; - margin-bottom: 1rem; - } + & > * { + margin-top: 1rem; + margin-bottom: 1rem; + } - & > * > * { - margin-left: auto; - margin-right: auto; - max-width: var(--grid-max-width); - padding: 4rem 2rem; - } + & > * > * { + margin-left: auto; + margin-right: auto; + max-width: var(--grid-max-width); + padding: 4rem 2rem; + } - & > :first-child:not(main) { - margin-top: 0; - } + & > :first-child:not(main) { + margin-top: 0; + } - & > :last-child:not(main) { - margin-bottom: 0; - } + & > :last-child:not(main) { + margin-bottom: 0; + } + + & > main { + margin-bottom: auto; + margin-top: auto; + } } diff --git a/src/scss/modules/_main.scss b/src/scss/modules/_main.scss @@ -1,12 +1,2 @@ // Main module -.main { - body:not(.index) > & { - margin-bottom: auto; - margin-top: 0; - } - - body.index > & { - margin-bottom: auto; - margin-top: auto; - } -} +.main {} diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss @@ -9,8 +9,8 @@ display: flex; order: -1; - body > & { - margin-top: 0; + & { + margin-top: 0; } }