hscc

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

commit b3c6083598905153c47dda984f2d85b38c851a37
parent 68405ea52b5c0268a9273fd70d7a4602ba14570e
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat,  7 Nov 2020 09:33:49 -0500

Add scss files

Diffstat:
Asrc/scss/README.md | 2++
Asrc/scss/atoms/icons/_icons.scss | 26++++++++++++++++++++++++++
Asrc/scss/atoms/typography/_titles.scss | 22++++++++++++++++++++++
Asrc/scss/global/_a11y.scss | 46++++++++++++++++++++++++++++++++++++++++++++++
Asrc/scss/global/_base.scss | 110+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/scss/global/functions/_em-calc.scss | 7+++++++
Asrc/scss/global/functions/_rem-calc.scss | 7+++++++
Asrc/scss/global/functions/_strip-unit.scss | 10++++++++++
Asrc/scss/global/mixins/_mq-from.scss | 25+++++++++++++++++++++++++
Asrc/scss/global/mixins/_mq-to.scss | 25+++++++++++++++++++++++++
Asrc/scss/global/tokens/_colors.scss | 26++++++++++++++++++++++++++
Asrc/scss/global/tokens/_grid.scss | 6++++++
Asrc/scss/global/tokens/_typography.scss | 19+++++++++++++++++++
Asrc/scss/modules/_as-note.scss | 14++++++++++++++
Asrc/scss/modules/_cv.scss | 35+++++++++++++++++++++++++++++++++++
Asrc/scss/modules/_footer-banner.scss | 20++++++++++++++++++++
Asrc/scss/modules/_go-to.scss | 30++++++++++++++++++++++++++++++
Asrc/scss/modules/_grid.scss | 7+++++++
Asrc/scss/modules/_h-card.scss | 24++++++++++++++++++++++++
Asrc/scss/modules/_h-entry.scss | 10++++++++++
Asrc/scss/modules/_h-feed.scss | 4++++
Asrc/scss/modules/_index.scss | 3+++
Asrc/scss/modules/_main.scss | 7+++++++
Asrc/scss/modules/_nav.scss | 82+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/scss/modules/_note.scss | 4++++
Asrc/scss/modules/_webmentions.scss | 31+++++++++++++++++++++++++++++++
Asrc/scss/ui.scss | 1+
Asrc/scss/ux.scss | 35+++++++++++++++++++++++++++++++++++
28 files changed, 638 insertions(+), 0 deletions(-)

diff --git a/src/scss/README.md b/src/scss/README.md @@ -0,0 +1,2 @@ +<!-- README --> +`find . -type f -name "*.scss" | entr -r sassc src/scss/ux.scss public_html/css/ux.min.css --style compressed` diff --git a/src/scss/atoms/icons/_icons.scss b/src/scss/atoms/icons/_icons.scss @@ -0,0 +1,26 @@ +.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 +} diff --git a/src/scss/atoms/typography/_titles.scss b/src/scss/atoms/typography/_titles.scss @@ -0,0 +1,22 @@ +// 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}); + } + + $i: $i - 1; +} diff --git a/src/scss/global/_a11y.scss b/src/scss/global/_a11y.scss @@ -0,0 +1,46 @@ +// Accessibility Helpers +// Visible by "machines" only. +@mixin visuallyhidden { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px); + height: 1px !important; + margin: -1px !important; + overflow: hidden; + padding:0 !important; + position: absolute !important; + white-space: nowrap; + width: 1px !important; + + &.focusable:focus, + &.hoverable:hover { + clip: auto; + height: auto !important; + margin: 0 !important; + overflow: visible; + padding: 0 !important; + position: static !important; + white-space: inherit; + width: auto !important; + } +} + +.visuallyhidden { + @include visuallyhidden; +} + +// A visuallyhidden for each breakpoints values +@each $key, $val in $grid-breakpoints { + // Visible until $key + @include mq-from(#{$key}) { + .visuallyhidden--#{$key} { + @include visuallyhidden; + } + } + + // Hidden until $key + @include mq-to(#{$key}) { + .visuallyhidden--to-#{$key} { + @include visuallyhidden; + } + } +} diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss @@ -0,0 +1,110 @@ +/* BASE STYLES */ +:root { + @media screen and (min-width: 60rem) { + font-size: var(--base-font-size); + } +} + +html, +body { + height: 100%; + min-height: 100%; + 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; + padding: 0; + + display: flex; + flex-direction: column; + + & > * { + margin-top: 1rem; + margin-bottom: 1rem; + } + + & > * > * { + margin-left: auto; + margin-right: auto; + max-width: var(--grid-max-width); + padding: 2rem; + } + + & > :first-child:not(main) { + margin-top: 0; + } + + & > :last-child:not(main) { + margin-bottom: 0; + } +} + +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); + } +} + +hr { + background: transparent; + border: dotted var(--base-br); + border-width: 1px 0 0; + display: block; + height: 1px; +} + +p, +pre { + margin: 1.25rem 0 1.25rem; +} + +pre { + 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); +} + +iframe, +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/functions/_em-calc.scss b/src/scss/global/functions/_em-calc.scss @@ -0,0 +1,7 @@ +// Convert PX to EM unit +// `$size` must be in pixels +@function em-calc($size, $context: $base-font-size) { + $emSize: $size / $base-font-size; + + @return #{$emSize}em; +} diff --git a/src/scss/global/functions/_rem-calc.scss b/src/scss/global/functions/_rem-calc.scss @@ -0,0 +1,7 @@ +// Convert PX to REM unit +// `$size` must be in pixels +@function rem-calc($size) { + $remSize: $size / $base-font-size; + + @return #{$remSize}rem; +} diff --git a/src/scss/global/functions/_strip-unit.scss b/src/scss/global/functions/_strip-unit.scss @@ -0,0 +1,10 @@ +/// Remove the unit of a length +/// @param {Number} $number - Number to remove unit from +/// @return {Number} - Unitless number +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; +} diff --git a/src/scss/global/mixins/_mq-from.scss b/src/scss/global/mixins/_mq-from.scss @@ -0,0 +1,25 @@ +// Set a @media query *mobile first* rule from the `$grid-breakpoints` map +// @Usage: +// @include mq-from(sm) { +// .element { +// width: 50%; +// } +// } + +@mixin mq-from($breakpoint) { + // If the breakpoint exists in the map. + @if map-has-key($grid-breakpoints, $breakpoint) { + // Get the breakpoint value. + $breakpoint-value: map-get($grid-breakpoints, $breakpoint); + $remSize: $breakpoint-value / 16px; + + // Write the media query. + @media (min-width: #{$remSize}rem) { + @content; + } + } @else { + // If the breakpoint doesn't exist in the map. + // Log a warning. + @warn 'Invalid breakpoint: #{$breakpoint}.'; + } +} diff --git a/src/scss/global/mixins/_mq-to.scss b/src/scss/global/mixins/_mq-to.scss @@ -0,0 +1,25 @@ +// Set a @media query *mobile first* rule from the `$grid-breakpoints` map +// @Usage: +// @include mq-to(lg) { +// .element { +// width: 50%; +// } +// } + +@mixin mq-to($breakpoint) { + // If the breakpoint exists in the map. + @if map-has-key($grid-breakpoints, $breakpoint) { + // Get the breakpoint value. + $breakpoint-value: map-get($grid-breakpoints, $breakpoint); + $remSize: ($breakpoint-value - 1) / 16px; + + // Write the media query. + @media (max-width: #{$remSize}rem) { + @content; + } + } @else { + // If the breakpoint doesn't exist in the map. + // Log a warning. + @warn 'Invalid breakpoint: #{$breakpoint}.'; + } +} diff --git a/src/scss/global/tokens/_colors.scss b/src/scss/global/tokens/_colors.scss @@ -0,0 +1,26 @@ +// Color Tokens +:root { + // Palette + --base-aqua: #7FFFD4; + --base-blue: #0000ff; + --base-grey: #cccccc; + --base-indigo: #8000ff; + --base-brightest: #f9f9f9; + --base-darkest: #111111; + --base-darkest-grey: #333333; + + // 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); + + --base-br: var(--base-grey); + --base-br-light: var(--base-aqua); + + --base-snippet-fg: var(--base-indigo); + --base-snippet-bg: white; +} diff --git a/src/scss/global/tokens/_grid.scss b/src/scss/global/tokens/_grid.scss @@ -0,0 +1,6 @@ +// Grid tokens +$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 512px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px); + +:root { + --grid-max-width: calc(1rem * calc(1100 / 16)); +} diff --git a/src/scss/global/tokens/_typography.scss b/src/scss/global/tokens/_typography.scss @@ -0,0 +1,19 @@ +// Typography tokens +:root { + --base-font-family: monospace; + --base-font-size: calc(1rem * calc(20 / 16)); + --base-line-height: 1.6; + + // 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)); + + --hn-line-height: 1.25; + + // Spaces + --base-space: 4px; +} diff --git a/src/scss/modules/_as-note.scss b/src/scss/modules/_as-note.scss @@ -0,0 +1,14 @@ +// 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 @@ -0,0 +1,35 @@ +// 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 @@ -0,0 +1,20 @@ +// Footer banner module +.footer-banner { + background: var(--base-darkest); + 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); + + &:focus, + &:hover { + background: linear-gradient(180deg,transparent 0%, var(--base-link-fg) 0); + } + } +} diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss @@ -0,0 +1,30 @@ +// Go to module +.go-to { + &-content, + &-nav { + order: -2; + } + + &-nav { + @include mq-to(lg) { + align-items: center; + background: var(--base-darkest); + color: var(--base-brightest); + display: inline-flex; + padding-right: 2rem; + text-transform: capitalize; + + &::before { + background: var(--base-darkest); + 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 @@ -0,0 +1,7 @@ +// 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 @@ -0,0 +1,24 @@ +// 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 @@ -0,0 +1,10 @@ +// 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 @@ -0,0 +1,4 @@ +// H-FEED µFORMAT +.h-feed { + padding: 2rem; +} diff --git a/src/scss/modules/_index.scss b/src/scss/modules/_index.scss @@ -0,0 +1,3 @@ +// Home/Index +.index { +} diff --git a/src/scss/modules/_main.scss b/src/scss/modules/_main.scss @@ -0,0 +1,7 @@ +// Main module +.main { + body > & { + margin-bottom: auto; + margin-top: auto; + } +} diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss @@ -0,0 +1,82 @@ +// Navigation +.nav { + background: var(--base-fg); + margin-bottom: 0; + + @media screen and (min-width: 60rem) { + border: solid var(--base-br-light); + border-width: 1px 0; + display: flex; + order: -1; + + body > & { + margin-bottom: 1rem; + margin-top: 0; + } + } + + &__list { + list-style-type: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; + + @media screen and (min-width: 60rem) { + 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; + } + } + } + + &__item { + border: solid var(--base-br-light); + border-width: 1px 0 0; + + &:last-child { + border-bottom: 1px solid var(--base-br-light); + } + + @media screen and (min-width: 60rem) { + border-width: 0 0 0 1px; + + &:last-child { + border-bottom: 0; + border-right: 1px solid var(--base-br-light); + } + } + } + + &__link { + background: inherit; + color: var(--base-brightest); + display: block; + line-height: 1; + padding: 0.75rem 2rem; + text-decoration: none; + + &[aria-current] { + background: var(--base-link-bg); + color: var(--base-fg); + } + + &:focus, + &:hover { + background: var(--base-link-fg); + color: var(--base-brightest); + } + + &:focus { + outline: 2px solid var(--base-brightest); + outline-offset: -2px; + } + } +} diff --git a/src/scss/modules/_note.scss b/src/scss/modules/_note.scss @@ -0,0 +1,4 @@ +// NOTE +.note { + +} diff --git a/src/scss/modules/_webmentions.scss b/src/scss/modules/_webmentions.scss @@ -0,0 +1,31 @@ +// Webmentions + +.webmention-container { + background: rgba(9,9,9,0.1); + font-size: 0.75rem; + margin-top: 1.5rem; + padding: 1rem; +} + +.webmention-mention { + margin-bottom: 1rem; +} + +.webmention-mention:last-child { + margin-bottom: 0; +} + +.webmention-author a { + display: inline; +} + +.webmention-author img { + display: inline-block; + margin-right: 0.5rem; + max-width: 2rem; + height: auto; +} + +.webmention-summary { + margin: 0.5rem 0 0; +} diff --git a/src/scss/ui.scss b/src/scss/ui.scss @@ -0,0 +1 @@ +// UI CSS diff --git a/src/scss/ux.scss b/src/scss/ux.scss @@ -0,0 +1,35 @@ +/* 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/icons/_icons.scss"; +@import "atoms/typography/_titles.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/_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/_webmentions.scss"; +//