hscc

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

commit 69859eac08455ea2e41c189fbfdb0b07ab88eda9
parent 30c5e1e9b1a8aff0eb5996f7005357b37e919ed7
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Tue, 10 Nov 2020 18:19:17 -0500

Add or modify scss

Diffstat:
Asrc/scss/atoms/_logo.scss | 10++++++++++
Asrc/scss/atoms/buttons/_button.scss | 32++++++++++++++++++++++++++++++++
Msrc/scss/atoms/icons/_icons.scss | 27+--------------------------
Asrc/scss/atoms/typography/_quotes.scss | 7+++++++
Msrc/scss/atoms/typography/_titles.scss | 26++++++++++++--------------
Msrc/scss/global/_base.scss | 70++++++++++++++++++++++++++++++++++++++++++++--------------------------
Msrc/scss/global/tokens/_typography.scss | 7+++++--
Dsrc/scss/modules/_as-note.scss | 14--------------
Dsrc/scss/modules/_cv.scss | 35-----------------------------------
Msrc/scss/modules/_footer-banner.scss | 11+++++++----
Msrc/scss/modules/_go-to.scss | 7+------
Dsrc/scss/modules/_grid.scss | 7-------
Dsrc/scss/modules/_h-card.scss | 24------------------------
Dsrc/scss/modules/_h-entry.scss | 10----------
Dsrc/scss/modules/_h-feed.scss | 4----
Asrc/scss/modules/_hcard.scss | 24++++++++++++++++++++++++
Asrc/scss/modules/_hcite.scss | 12++++++++++++
Asrc/scss/modules/_hentry.scss | 76++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/scss/modules/_hfeed.scss | 13+++++++++++++
Asrc/scss/modules/_hresume.scss | 20++++++++++++++++++++
Msrc/scss/modules/_main.scss | 7++++++-
Msrc/scss/modules/_nav.scss | 13++++---------
Dsrc/scss/modules/_note.scss | 4----
Msrc/scss/ux.scss | 16+++++++++-------
24 files changed, 283 insertions(+), 193 deletions(-)

diff --git a/src/scss/atoms/_logo.scss b/src/scss/atoms/_logo.scss @@ -0,0 +1,10 @@ +@mixin logo { + background: var(--base-darkest); + color: var(--base-br-light); + content: '://hugo.soucy.cc'; + display: inline-block; + font-size: 1.25rem; + font-weight: 700; + padding-right: 2rem; + text-transform: lowercase; +} diff --git a/src/scss/atoms/buttons/_button.scss b/src/scss/atoms/buttons/_button.scss @@ -0,0 +1,32 @@ +// +%button, +[role="button"], +[type="submit"], +[type="reset"] { + appearance: none; + display: inline-flex; + font-weight: 700; + line-height: 1; + text-align: center; + text-decoration: none; + //transition: all 250ms ease-in-out; + user-select: none; + vertical-align: middle; + + &:last-child:not(:first-child) { + margin-right: 0; + } +} + +.button { + @extend %button; + align-items: center; + background: var(--base-darkest); + color: var(--base-brightest); + justify-content: center; + padding: 0.75em; + + svg:first-child:not(:last-child) { + margin-right: var(--base-space); + } +} diff --git a/src/scss/atoms/icons/_icons.scss b/src/scss/atoms/icons/_icons.scss @@ -1,26 +1 @@ -.ico-menu { - transform: scale(var(--ggs,1)) -} - -.ico-menu, -.ico-menu::after, -.ico-menu::before { - box-sizing: border-box; - position: relative; - display: block; - width: 20px; - height: 2px; - border-radius: 3px; - background: currentColor -} - -.ico-menu::after, -.ico-menu::before { - content: ""; - position: absolute; - top: -6px -} - -.ico-menu::after { - top: 6px -} +// Icons Atoms diff --git a/src/scss/atoms/typography/_quotes.scss b/src/scss/atoms/typography/_quotes.scss @@ -0,0 +1,7 @@ +// Quotes Atom +blockquote { + border-left: rem-calc(16) solid var(--base-br); + display:block; + 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 @@ -1,22 +1,20 @@ // Atoms for titles -h1, -h2, -h3, -h4, -h5, -h6 { - hyphens: auto; - line-height: var(--hn-line-height); -} - // Set the title style from h6 to h1 $i: 6; @while $i > 0 { - h#{$i}, - .title-h#{$i} { - font-size: var(--base-h#{$i}); - } + h#{$i}, + .title-h#{$i} { + font-size: var(--base-h#{$i}); + hyphens: auto; + line-height: var(--hn-line-height); + margin-bottom: 0; + overflow-wrap: break-word; + + &:first-child { + margin-top: 0; + } + } $i: $i - 1; } diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss @@ -1,10 +1,25 @@ /* BASE STYLES */ :root { - @media screen and (min-width: 60rem) { - font-size: var(--base-font-size); + @include mq-from(md) { + --base-font-size: calc(1rem * calc(#{$base-font-size + 4} / 16)); } + + font-size: var(--base-font-size); } +// *, +// :after, +// :before { +// background-color: inherit; +// border: 0 solid; +// box-sizing: border-box; +// color: inherit; +// font-family: inherit; +// margin: 0; +// overflow-wrap: break-word; +// padding: 0; +// } + html, body { height: 100%; @@ -12,17 +27,6 @@ body { position: relative; } -body, -button, -input, -select, -textarea { - color: var(--base-fg); - font-family: var(--base-font-family); - font-size: 1rem; - line-height: var(--base-line-height); -} - body { background: var(--base-bg) url("//assets.soucy.cc/images/noise.png") repeat; margin: 0; @@ -40,7 +44,7 @@ body { margin-left: auto; margin-right: auto; max-width: var(--grid-max-width); - padding: 2rem; + padding: 4rem 2rem; } & > :first-child:not(main) { @@ -52,6 +56,32 @@ body { } } +[hidden] { + display: none; +} + +[hidden]+* { + margin-top: 0 !important; +} + +footer, +header, +main, +nav { + display: block +} + +body, +button, +input, +select, +textarea { + 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); @@ -73,11 +103,6 @@ hr { height: 1px; } -p, -pre { - margin: 1.25rem 0 1.25rem; -} - pre { background: var(--base-snippet-bg); border: 1px dotted var(--base-snippet-fg); @@ -100,11 +125,4 @@ img { height: auto; max-width: 100%; } - -blockquote { - border-left: 0.75rem solid var(--base-br); - display:block; - margin: 1rem 0; - padding-left: 1.5rem; -} // diff --git a/src/scss/global/tokens/_typography.scss b/src/scss/global/tokens/_typography.scss @@ -1,7 +1,10 @@ // Typography tokens +$base-font-size: 16; +$base-space: 4; + :root { --base-font-family: monospace; - --base-font-size: calc(1rem * calc(20 / 16)); + --base-font-size: calc(1rem * calc(#{$base-font-size} / 16)); --base-line-height: 1.6; // Titles @@ -15,5 +18,5 @@ --hn-line-height: 1.25; // Spaces - --base-space: 4px; + --base-space: #{$base-space / $base-font-size}rem; } diff --git a/src/scss/modules/_as-note.scss b/src/scss/modules/_as-note.scss @@ -1,14 +0,0 @@ -// AS-NOTE -.as-note { - overflow: hidden; - - .note-index & { - border-bottom: 1px solid var(--base-br); - margin-bottom: calc(var(--base-space) * 20); - padding-bottom: calc(var(--base-space) * 20); - } - - :first-child { - margin-top: 0; - } -} diff --git a/src/scss/modules/_cv.scss b/src/scss/modules/_cv.scss @@ -1,35 +0,0 @@ -// CV -.cv {} -.cv__hr { - margin-top: 2.5rem; -} - -.cv__contactinfos { - overflow: hidden; -} - -.cv__contactinfos__key, -.cv__contactinfos__value { - float: left; -} - -.cv__contactinfos__value + .cv__contactinfos__key { - clear: left; -} - -.cv__contactinfos__key::after { - content: "\00a0:\00a0"; - display: inline; -} - -.cv__experience, -.cv__education, -.cv__course { - margin-bottom: 1.5rem; -} - -.cv__experience__name, -.cv__education__name, -.cv__course__name { - font-size: 1.3125rem; -} diff --git a/src/scss/modules/_footer-banner.scss b/src/scss/modules/_footer-banner.scss @@ -4,10 +4,6 @@ color: var(--base-brightest); margin-top: 0; - @media screen and (min-width: 60rem) { - margin-top: 1rem; - } - a { background: linear-gradient(180deg,transparent 70%, var(--base-link-fg) 0); color: var(--base-brightest); @@ -17,4 +13,11 @@ background: linear-gradient(180deg,transparent 0%, var(--base-link-fg) 0); } } + + &__wrapper { + display: flex; + justify-content: space-between; + padding-bottom: 2rem; + padding-top: 2rem; + } } diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss @@ -15,15 +15,10 @@ text-transform: capitalize; &::before { - background: var(--base-darkest); + @include logo; border-right: 1px solid var(--base-br-light); - color: var(--base-br-light); - content: '://hugo.soucy.cc'; - display: inline-block; - font-weight: 700; margin-right: 1rem; padding: 0.5rem 1rem 0.5rem 2rem; - text-transform: lowercase; } } } diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss @@ -1,7 +0,0 @@ -// Grid module -.grid { - // margin-left: auto; - // margin-right: auto; - // max-width: var(--grid-max-width); - // padding: 2rem; -} diff --git a/src/scss/modules/_h-card.scss b/src/scss/modules/_h-card.scss @@ -1,24 +0,0 @@ -// H-CARD µFORMAT -#hs.h-card { - h1 { - font-size: 1rem; - font-weight: 400; - } - - .p-name { - font-size: 1.35rem; - } - - .u-photo { - float: right; - height: auto; - margin: 1rem; - mix-blend-mode: hard-light; - width: 15rem; - } - - .u-photo { - clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - } -} diff --git a/src/scss/modules/_h-entry.scss b/src/scss/modules/_h-entry.scss @@ -1,10 +0,0 @@ -// H-ENTRY µFORMAT -.h-entry { - footer { - font-size: calc(1rem * calc(14 / 16)); - } -} - -main.h-entry { - padding: 2rem; -} diff --git a/src/scss/modules/_h-feed.scss b/src/scss/modules/_h-feed.scss @@ -1,4 +0,0 @@ -// H-FEED µFORMAT -.h-feed { - padding: 2rem; -} diff --git a/src/scss/modules/_hcard.scss b/src/scss/modules/_hcard.scss @@ -0,0 +1,24 @@ +// HCARD µFORMAT +#hs.hcard { + h1 { + font-size: 1rem; + font-weight: 400; + } + + .p-name { + font-size: 1.25rem; + } + + .u-photo { + float: right; + height: auto; + margin: 1rem; + mix-blend-mode: hard-light; + width: 15rem; + } + + .u-photo { + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); + shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); + } +} diff --git a/src/scss/modules/_hcite.scss b/src/scss/modules/_hcite.scss @@ -0,0 +1,12 @@ +// +.hcite { + .emojione.custom-emoji { + height: auto; + width: 1.5rem; + } +} + +blockquote.hcite { + background: white; + font-style: italic; +} diff --git a/src/scss/modules/_hentry.scss b/src/scss/modules/_hentry.scss @@ -0,0 +1,76 @@ +// HENTRY µFORMAT +.hentry { + & > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 6); + } + + // & > h1 a { + // all: inherit; + // } + + // In feed + .hfeed & { + border-top: 1px solid var(--base-br); + padding-bottom: calc(var(--base-space) * 10); + padding-top: calc(var(--base-space) * 10); + position: relative; + + &:focus-within, + &:hover { + background: white; + box-shadow: 0 0 0 rem-calc(10) white; + } + + &:first-child { + margin-top: calc(var(--base-space) * 10); + } + + a:not(.u-url) { + position: relative; + z-index: 1; + } + + .p-name a { + all: inherit; + } + + // To spread the click zone + .u-url::after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + } + } + + &__categories { + display: inline-flex; + flex-wrap: wrap; + gap: calc(var(--base-space) * 2); + list-style-type: none; + padding: 0; + + .p-category { + border: 1px dotted var(--base-br); + color: var(--base-darkest-grey); + padding: 0.25rem; + } + } + + &__footer { + font-size: calc(1rem * calc(13 / 16)); + + article.hentry > & { + border-top: 1px solid var(--base-grey); + padding-top: calc(var(--base-space) * 4); + } + + & > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 4); + } + } +} diff --git a/src/scss/modules/_hfeed.scss b/src/scss/modules/_hfeed.scss @@ -0,0 +1,13 @@ +// H-FEED µFORMAT +.hfeed { + & > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 6); + } + + &__entries { + list-style-type: none; + margin: 0; + padding: 0; + } +} diff --git a/src/scss/modules/_hresume.scss b/src/scss/modules/_hresume.scss @@ -0,0 +1,20 @@ +// H-RESUME µFORMAT +.h-resume { + & > * + *:not(.h-card) { + border-top: 1px solid var(--base-br); + margin-top: calc(var(--base-space) * 20); + padding-top: calc(var(--base-space) * 20); + } + + hr { + display: none; + } + + section, + section > .p-summary { + & > * + * { + margin-top: calc(var(--base-space) * 6); + } + } +} +// diff --git a/src/scss/modules/_main.scss b/src/scss/modules/_main.scss @@ -1,6 +1,11 @@ // Main module .main { - body > & { + body:not(.index) > & { + margin-bottom: auto; + margin-top: 0; + } + + body.index > & { margin-bottom: auto; margin-top: auto; } diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss @@ -3,14 +3,13 @@ background: var(--base-fg); margin-bottom: 0; - @media screen and (min-width: 60rem) { + @include mq-from(lg) { border: solid var(--base-br-light); border-width: 1px 0; display: flex; order: -1; body > & { - margin-bottom: 1rem; margin-top: 0; } } @@ -21,18 +20,14 @@ margin-top: 0; padding: 0; - @media screen and (min-width: 60rem) { + @include mq-from(lg) { align-items: center; flex: 1 100%; display: flex; padding: 0 2rem; &::before { - color: var(--base-br-light); - content: '://hugo.soucy.cc'; - display: block; - font-weight: 700; - padding-right: 2rem; + @include logo; } } } @@ -45,7 +40,7 @@ border-bottom: 1px solid var(--base-br-light); } - @media screen and (min-width: 60rem) { + @include mq-from(lg) { border-width: 0 0 0 1px; &:last-child { diff --git a/src/scss/modules/_note.scss b/src/scss/modules/_note.scss @@ -1,4 +0,0 @@ -// NOTE -.note { - -} diff --git a/src/scss/ux.scss b/src/scss/ux.scss @@ -16,8 +16,11 @@ @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"; @@ -25,11 +28,10 @@ @import "modules/_nav.scss"; @import "modules/_main.scss"; @import "modules/_footer-banner.scss"; -@import "modules/_h-card.scss"; -@import "modules/_h-entry.scss"; -@import "modules/_h-feed.scss"; -@import "modules/_as-note.scss"; -@import "modules/_cv.scss"; -@import "modules/_note.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"; -//