hscc

Soure code of <https://hugo.soucy.cc>.
git clone git://soucy.cc/hscc.git
Log | Files | Refs

commit af13b54439ece1b92841bf5b37e5f11382285084
parent cfefab129ac547783fbbf230ca8924840e5587f0
Author: hs0ucy <hugo@soucy.cc>
Date:   Sun, 21 Feb 2021 08:27:46 -0500

Convert scss in css

Diffstat:
Rsrc/scss/README.md -> src/css/README.md | 0
Asrc/css/atoms/buttons/button.css | 38++++++++++++++++++++++++++++++++++++++
Asrc/css/atoms/typography/quotes.css | 13+++++++++++++
Asrc/css/atoms/typography/titles.css | 45+++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/css.sh | 31+++++++++++++++++++++++++++++++
Asrc/css/global/a11y.css | 24++++++++++++++++++++++++
Asrc/css/global/base.css | 108+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/global/tokens/colors.css | 26++++++++++++++++++++++++++
Asrc/css/global/tokens/grid.css | 12++++++++++++
Asrc/css/global/tokens/typography.css | 20++++++++++++++++++++
Asrc/css/modules/footer-banner.css | 29+++++++++++++++++++++++++++++
Asrc/css/modules/go-to.css | 57+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/modules/hcard.css | 27+++++++++++++++++++++++++++
Asrc/css/modules/hentry.css | 97+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/modules/hfeed.css | 11+++++++++++
Asrc/css/modules/hresume.css | 53+++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/modules/layout.css | 32++++++++++++++++++++++++++++++++
Asrc/css/modules/nav.css | 102+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/css/modules/webmentions.css | 31+++++++++++++++++++++++++++++++
Dsrc/scss/atoms/_logo.scss | 13-------------
Dsrc/scss/atoms/buttons/_button.scss | 34----------------------------------
Dsrc/scss/atoms/icons/_icons.scss | 1-
Dsrc/scss/atoms/typography/_quotes.scss | 11-----------
Dsrc/scss/atoms/typography/_titles.scss | 19-------------------
Dsrc/scss/global/_a11y.scss | 51---------------------------------------------------
Dsrc/scss/global/_base.scss | 108-------------------------------------------------------------------------------
Dsrc/scss/global/functions/_em-calc.scss | 7-------
Dsrc/scss/global/functions/_rem-calc.scss | 7-------
Dsrc/scss/global/functions/_strip-unit.scss | 10----------
Dsrc/scss/global/mixins/_mq-from.scss | 25-------------------------
Dsrc/scss/global/mixins/_mq-to.scss | 25-------------------------
Dsrc/scss/global/tokens/_colors.scss | 34----------------------------------
Dsrc/scss/global/tokens/_grid.scss | 6------
Dsrc/scss/global/tokens/_typography.scss | 34----------------------------------
Dsrc/scss/index.scss | 38--------------------------------------
Dsrc/scss/modules/_footer-banner.scss | 27---------------------------
Dsrc/scss/modules/_go-to.scss | 40----------------------------------------
Dsrc/scss/modules/_hcard.scss | 28----------------------------
Dsrc/scss/modules/_hcite.scss | 18------------------
Dsrc/scss/modules/_hentry.scss | 101-------------------------------------------------------------------------------
Dsrc/scss/modules/_hfeed.scss | 13-------------
Dsrc/scss/modules/_hresume.scss | 56--------------------------------------------------------
Dsrc/scss/modules/_index.scss | 3---
Dsrc/scss/modules/_layout.scss | 31-------------------------------
Dsrc/scss/modules/_main.scss | 2--
Dsrc/scss/modules/_nav.scss | 92-------------------------------------------------------------------------------
Dsrc/scss/modules/_webmentions.scss | 31-------------------------------
47 files changed, 756 insertions(+), 865 deletions(-)

diff --git a/src/scss/README.md b/src/css/README.md diff --git a/src/css/atoms/buttons/button.css b/src/css/atoms/buttons/button.css @@ -0,0 +1,38 @@ +/* @atom button */ +.button, +[role="button"], +[type="button"], +[type="submit"], +[type="reset"] { + appearance: none; + display: inline-flex; + font-weight: 700; + line-height: 1; + text-align: center; + text-decoration: none; + user-select: none; + vertical-align: middle; + align-items: center; + background: var(--base-darkest); + color: var(--base-brightest); + justify-content: center; + margin-bottom: var(--base-space); + margin-right: var(--base-space); + padding: calc(var(--base-space) * 2); +} + +.button:last-child:not(:first-child), +[role="button"]:last-child:not(:first-child), +[type="button"]:last-child:not(:first-child), +[type="submit"]:last-child:not(:first-child), +[type="reset"]:last-child:not(:first-child) { + margin-right: 0; +} + +.button svg:first-child:not(:last-child), +[role="button"] svg:first-child:not(:last-child), +[type="button"] svg:first-child:not(:last-child), +[type="submit"] svg:first-child:not(:last-child), +[type="reset"] svg:first-child:not(:last-child){ + margin-right: var(--base-space); +} diff --git a/src/css/atoms/typography/quotes.css b/src/css/atoms/typography/quotes.css @@ -0,0 +1,13 @@ +/* @atom quotes */ +blockquote { + border-left: 1rem solid var(--base-br); + display: block; + margin: 0; + padding: 1em 1em 1em 1rem; +} + +@media screen and (min-width: 48rem) { + blockquote { + font-size: calc(var(--base-font-size) + 2px); + } +} diff --git a/src/css/atoms/typography/titles.css b/src/css/atoms/typography/titles.css @@ -0,0 +1,45 @@ +/* @atom titles */ + +.title-h1, h1, +.title-h2, h2, +.title-h3, h3, +.title-h4, h4, +.title-h5, h5, +.title-h6, h6 { + hyphens: auto; + line-height: var(--hn-line-height); + margin-bottom: 0; +} + +.title-h1:first-child, h1:first-child, +.title-h2:first-child, h2:first-child, +.title-h3:first-child, h3:first-child, +.title-h4:first-child, h4:first-child, +.title-h5:first-child, h5:first-child, +.title-h6:first-child, h6:first-child { + margin-top: 0; +} + +.title-h1, h1 { + font-size: var(--base-h1); +} + +.title-h2, h2 { + font-size: var(--base-h2); +} + +.title-h3, h3 { + font-size: var(--base-h3); +} + +.title-h4, h4 { + font-size: var(--base-h4); +} + +.title-h5, h5 { + font-size: var(--base-h5); +} + +.title-h6, h6 { + font-size: var(--base-h6); +} diff --git a/src/css/css.sh b/src/css/css.sh @@ -0,0 +1,31 @@ +#!/bin/sh + +dst="../../public_html/css/" + +while read line; do + [ ! -z "$line" ] && cat "./$line" +done <<-EOF | tr -d '\n\r' > "${dst}index.min.css" + +global/tokens/typography.css +global/tokens/colors.css +global/tokens/grid.css + +global/base.css +global/a11y.css + +atoms/typography/titles.css +atoms/typography/quotes.css +atoms/buttons/button.css + +modules/layout.css +modules/go-to.css +modules/nav.css +modules/footer-banner.css +modules/hcard.css +modules/hentry.css +modules/hfeed.css +modules/hresume.css +modules/webmentions.css +EOF + +echo "CSS builded! @ $(date +"%Y-%m-%d %T")" diff --git a/src/css/global/a11y.css b/src/css/global/a11y.css @@ -0,0 +1,24 @@ +/* @global a11y */ +.visuallyhidden { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + margin: -1px; + overflow: hidden; + padding:0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.visuallyhidden.focusable:focus, +.visuallyhidden.hoverable:hover { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + padding: 0; + position: static; + white-space: inherit; + width: auto; +} diff --git a/src/css/global/base.css b/src/css/global/base.css @@ -0,0 +1,108 @@ +/* @global base */ +:root { + font-size: var(--base-font-size); + + @media screen and (min-width: 20rem) { + font-size: calc(var(--base-font-size) + 2px); + } + + @media screen and (min-width: 48rem) { + font-size: calc(var(--base-font-size) + 6px); + } +} + +html, +body { + height: 100%; + min-height: 100%; + position: relative; +} + +body { + background: var(--base-bg) url("/images/noise.png") repeat; + margin: 0; + padding: 0; +} + +[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); + overflow-wrap: break-word; + text-decoration: none; +} + +a:focus, +a: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; +} + +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%; +} + +ol, +ul { + padding-left: 1rem; +} + +svg:not(:root) { + overflow: hidden; +} + +abbr { + cursor: help; +} diff --git a/src/css/global/tokens/colors.css b/src/css/global/tokens/colors.css @@ -0,0 +1,26 @@ +/* @tokens colors */ +: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/css/global/tokens/grid.css b/src/css/global/tokens/grid.css @@ -0,0 +1,12 @@ +/* @tokens grid */ +:root { + --grid-max-width: 1024px; + + --grid-xs: 320px; + --grid-xsm: 360px; + --grid-sm: 480px; + --grid-md: 768px; + --grid-lg: 1024px; + --grid-xl: 1280px; + --grid-xxl: 1440px; +} diff --git a/src/css/global/tokens/typography.css b/src/css/global/tokens/typography.css @@ -0,0 +1,20 @@ +/* @tokens typography */ +:root { + --base-val: 14; + --base-font-family: "Ubuntu mono", monospace; + --base-font-size: calc(var(--base-val) * 1px); + --base-line-height: 1.6; + + /* titles */ + --base-h1: 2.25rem; + --base-h2: 1.75rem; + --base-h3: 1.25rem; + --base-h4: 1.125rem; + --base-h5: 1rem; + --base-h6: 0.875rem; + + --hn-line-height: 1.25; + + /* a space is equal 4px in rem units */ + --base-space: calc(calc(4 / var(--base-val)) * 1rem); +} diff --git a/src/css/modules/footer-banner.css b/src/css/modules/footer-banner.css @@ -0,0 +1,29 @@ +/* @module footer-banner */ +.footer-banner { + background: var(--base-darkest); + color: var(--base-brightest); + margin-top: 0; +} + +.footer-banner a { + background: linear-gradient(180deg,transparent 70%, var(--base-link-fg) 0); + color: var(--base-brightest); +} + +.footer-banner a:focus, +.footer-banner a:hover { + background: linear-gradient(180deg,transparent 0%, var(--base-link-fg) 0); +} + +.footer-banner__wrapper { + padding-bottom: 2rem; + padding-top: 2rem; +} + +@media screen and (min-width: 48rem) { + .footer-banner__wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } +} diff --git a/src/css/modules/go-to.css b/src/css/modules/go-to.css @@ -0,0 +1,57 @@ +/* @module go-to */ + +.go-to-nav, +.go-to-content { + display: block; + margin-bottom: 0; + margin-top: 0; + order: -2; +} + +@media screen and (min-width: 64rem) { + .go-to-nav { + align-items: center; + background: var(--base-darkest); + color: var(--base-brightest); + display: flex; + justify-content: flex-start; + padding-right: 2rem; + text-transform: capitalize; + } +} + +.go-to-nav::before { + background: var(--base-darkest); + color: var(--base-br-light); + content: '://hscc'; + display: inline-block; + font-weight: 700; + padding-right: 2rem; + text-transform: lowercase; +} + +@media screen and (min-width: 48rem) { + .go-to-nav::before { + border-right: 1px solid var(--base-br-light); + margin-right: 2rem; + padding: 0.5rem 2rem 0.5rem 2rem; + } +} + +@media screen and (min-width: 64rem) { + .go-to-nav::before { + content: '://hugo.soucy.cc'; + } +} + +.go-to-nav > svg { + display: none; + margin-right: calc(var(--base-space) * 1); + padding: 0; +} + +@media screen and (min-width: 20rem) and (max-width: 64rem) { + .go-to-nav > svg { + display: block; + } +} diff --git a/src/css/modules/hcard.css b/src/css/modules/hcard.css @@ -0,0 +1,27 @@ +/* @module hcard */ + +#hs.hcard h1 { + font-size: 1rem; + font-weight: 400; +} + +#hs.hcard .p-name { + font-size: 1.25rem; +} + +#hs.hcard .u-photo { + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); + height: auto; + margin: 1rem auto 0; + mix-blend-mode: hard-light; + shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); +} + + +@media screen and (min-width: 22.5rem) { + #hs.hcard .u-photo { + float: right; + margin: 1rem; + max-width: 240px; + } +} diff --git a/src/css/modules/hentry.css b/src/css/modules/hentry.css @@ -0,0 +1,97 @@ +/* @module hentry */ + +.hentry > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 6); +} + +.hentry .p-content :last-child { + margin-bottom: 0; +} + +.hentry .u-in-reply-to { + word-break: break-all; +} + + /* hentry in feed */ +.hfeed .hentry { + border-top: 1px solid var(--base-br); + padding-bottom: calc(var(--base-space) * 10); + padding-top: calc(var(--base-space) * 10); + position: relative; +} + +.hfeed .hentry:focus-within, +.hfeed .hentry:hover { + background: white; + box-shadow: 0 0 0 rem-calc(10) white; +} + +.hfeed .hentry:first-child { + margin-top: calc(var(--base-space) * 10); +} + +.hfeed .hentry a:not(.u-url) { + position: relative; + z-index: 1; +} + +/* to spread the click zone */ +.hfeed .hentry .u-url::after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.hentry__posttype { + align-items: center; + color: var(--base-darkest-grey); + display: flex; + flex-wrap: wrap; + font-size: 14px; +} + +.hentry__posttype > svg { + margin-right: calc(var(--base-space) * 1); +} + +.hentry__posttype > cite { + margin-left: calc(var(--base-space) * 1); +} + +.hentry__categories { + align-items: center; + display: inline-flex; + flex-wrap: wrap; + list-style-type: none; + padding: 0; +} + +.hentry__categories li { + display: inline-block; + margin-bottom: calc(var(--base-space) * 2); + margin-right: calc(var(--base-space) * 2); +} + +.hentry__categories .p-category { + border: 1px dotted var(--base-br); + color: var(--base-darkest-grey); + padding: 0.25rem; +} + +.hentry__footer { + font-size: calc(1rem * calc(13 / 16)); +} + +.hentry__footer > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 4); +} + +article.hentry > .hentry__footer { + border-top: 1px solid var(--base-grey); + padding-top: calc(var(--base-space) * 4); +} diff --git a/src/css/modules/hfeed.css b/src/css/modules/hfeed.css @@ -0,0 +1,11 @@ +/* @module hfeed */ +.hfeed > * + * { + margin-bottom: 0; + margin-top: calc(var(--base-space) * 6); +} + +.hfeed__entries { + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/src/css/modules/hresume.css b/src/css/modules/hresume.css @@ -0,0 +1,53 @@ +/* @module hresume */ + +.hresume > * + *:not(.h-card) { + border-top: 1px solid var(--base-br); + padding-bottom: calc(var(--base-space) * 10); + padding-top: calc(var(--base-space) * 10); +} + +.hresume :last-child { + margin-bottom: 0; +} + +.hresume .h-card { + margin-bottom: calc(var(--base-space) * 10); +} + +.hresume .h-card > h2 { + font-size: var(--base-h3); +} + +.hresume .h-card > dl { + display: table; + margin-top: calc(var(--base-space) * 6); +} + +.hresume .h-card > dl div { + display: table-row; +} + +.hresume .h-card dt, +.hresume .h-card dd { + display: table-cell; + padding-top: calc(var(--base-space) * 2); +} + +.hresume .h-card dt::after { + content: ':\00A0'; + display: inline; +} + +.hresume .h-card .u-uid { + hyphens: auto; + overflow-wrap: break-word; + word-break: break-word; +} + +.hresume .h-event { + margin-top: calc(var(--base-space) * 6); +} + +.hresume .h-event dd { + margin-left: 0; +} diff --git a/src/css/modules/layout.css b/src/css/modules/layout.css @@ -0,0 +1,32 @@ +/* @module layout */ + +.layout { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.layout > * { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.layout > * > * { + margin-left: auto; + margin-right: auto; + max-width: var(--grid-max-width); + padding: 4rem 2rem; +} + +.layout > :first-child:not(main) { + margin-top: 0; +} + +.layout > :last-child:not(main) { + margin-bottom: 0; +} + +.layout > main { + margin-bottom: auto; + margin-top: auto; +} diff --git a/src/css/modules/nav.css b/src/css/modules/nav.css @@ -0,0 +1,102 @@ +/* @module navigation */ + +.nav { + background: var(--base-fg); + margin-bottom: 0; +} + +@media screen and (min-width: 64rem) { + .nav { + border: solid var(--base-br-light); + border-width: 1px 0; + display: flex; + margin-top: 0; + order: -1; + } +} + +.nav__title { + color: var(--base-brightest); + padding-bottom: 1em; + padding-top: 1em; +} + +@media screen and (min-width: 64rem) { + :target > .nav__title { + @include unvisuallyhidden; + font-size: 0.75rem; + font-weight: 400; + padding: 0.75rem 2rem; + } +} + +.nav__list { + list-style-type: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +@media screen and (min-width: 64rem) { + .nav__list { + align-items: center; + flex: 1 100%; + display: flex; + padding: 0 2rem; + } + + .nav__list::before { + background: var(--base-darkest); + color: var(--base-br-light); + content: '://hugo.soucy.cc'; + display: inline-block; + font-weight: 700; + padding-right: 2rem; + text-transform: lowercase; + } +} + +.nav__item { + border: solid var(--base-br-light); + border-width: 1px 0 0; +} + +@media screen and (min-width: 64rem) { + .nav__item { + border-width: 0 0 0 1px; + } + + .nav__item:last-child { + border-bottom: 0; + border-right: 1px solid var(--base-br-light); + } +} + +.nav__item:last-child { + border-bottom: 1px solid var(--base-br-light); +} + +.nav__link { + background: inherit; + color: var(--base-brightest); + display: block; + line-height: 1; + padding: 0.75rem 2rem; + text-decoration: none; +} + +.nav__link[aria-current] { + background: var(--base-link-bg); + color: var(--base-fg); +} + +.nav__link:focus, +.nav__link:hover { + background: var(--base-link-fg); + color: var(--base-brightest); +} + +.nav__link:focus { + outline: 2px solid var(--base-brightest); + outline-offset: -2px; +} diff --git a/src/css/modules/webmentions.css b/src/css/modules/webmentions.css @@ -0,0 +1,31 @@ +/* @module 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/atoms/_logo.scss b/src/scss/atoms/_logo.scss @@ -1,13 +0,0 @@ -@mixin logo { - background: var(--base-darkest); - color: var(--base-br-light); - content: '://hscc'; - display: inline-block; - font-weight: 700; - padding-right: 2rem; - text-transform: lowercase; - - @include mq-from(md) { - content: '://hugo.soucy.cc'; - } -} diff --git a/src/scss/atoms/buttons/_button.scss b/src/scss/atoms/buttons/_button.scss @@ -1,34 +0,0 @@ -// -%button { - appearance: none; - display: inline-flex; - font-weight: 700; - line-height: 1; - text-align: center; - text-decoration: none; - user-select: none; - vertical-align: middle; - - &:last-child:not(:first-child) { - margin-right: 0; - } -} - -.button, -[role="button"], -[type="button"], -[type="submit"], -[type="reset"] { - @extend %button; - align-items: center; - background: var(--base-darkest); - color: var(--base-brightest); - justify-content: center; - margin-bottom: var(--base-space); - margin-right: var(--base-space); - padding: calc(var(--base-space) * 2); - - 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 +0,0 @@ -// Icons Atoms diff --git a/src/scss/atoms/typography/_quotes.scss b/src/scss/atoms/typography/_quotes.scss @@ -1,11 +0,0 @@ -// Quotes Atom -blockquote { - border-left: rem-calc(16) solid var(--base-br); - 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/atoms/typography/_titles.scss b/src/scss/atoms/typography/_titles.scss @@ -1,19 +0,0 @@ -// Atoms for titles -// Set the title style from h6 to h1 -$i: 6; - -@while $i > 0 { - h#{$i}, - .title-h#{$i} { - font-size: var(--base-h#{$i}); - hyphens: auto; - line-height: var(--hn-line-height); - margin-bottom: 0; - - &:first-child { - margin-top: 0; - } - } - - $i: $i - 1; -} diff --git a/src/scss/global/_a11y.scss b/src/scss/global/_a11y.scss @@ -1,51 +0,0 @@ -// Accessibility Helpers -@mixin unvisuallyhidden { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - padding: 0; - position: static; - white-space: inherit; - width: auto; -} - - -// Visible by "machines" only. -@mixin visuallyhidden { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - margin: -1px; - overflow: hidden; - padding:0; - position: absolute; - white-space: nowrap; - width: 1px; - - &.focusable:focus, - &.hoverable:hover { - @include unvisuallyhidden; - } -} - -.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 @@ -1,108 +0,0 @@ -/* BASE STYLES */ -:root { - font-size: #{$base-font-size}px; - - @include mq-from(xs) { - font-size: #{($base-font-size + 2)}px; - } - - @include mq-from(md) { - font-size: #{($base-font-size + 6)}px; - } -} - -html, -body { - height: 100%; - min-height: 100%; - position: relative; -} - -body { - background: var(--base-bg) url("/images/noise.png") repeat; - margin: 0; - padding: 0; -} - -[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); - 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; -} - -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%; -} - -ol, -ul { - padding-left: 1rem; -} - -svg:not(:root) { - overflow: hidden; -} - -abbr { - cursor: help; -} diff --git a/src/scss/global/functions/_em-calc.scss b/src/scss/global/functions/_em-calc.scss @@ -1,7 +0,0 @@ -// 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 @@ -1,7 +0,0 @@ -// 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 @@ -1,10 +0,0 @@ -/// 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 @@ -1,25 +0,0 @@ -// 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 @@ -1,25 +0,0 @@ -// 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 @@ -1,34 +0,0 @@ -// Color Tokens -$colors: ( - aqua: #7FFFD4, - blue: #0000ff, - grey: #cccccc, - indigo: #8000ff, - brightest: #f9f9f9, - darkest: #111111, - darkest-grey: #333333 -); - -:root { - @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); - - // 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 @@ -1,6 +0,0 @@ -// Grid tokens -$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px); - -:root { - --grid-max-width: 780px; -} diff --git a/src/scss/global/tokens/_typography.scss b/src/scss/global/tokens/_typography.scss @@ -1,34 +0,0 @@ -// Typography tokens -$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 { - @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 - @each $key, $val in $hn { - --base-#{$key}: #{$val}rem; - } - - --hn-line-height: 1.25; - - // Spaces - --base-space: #{$base-space / $base-font-size}rem; - } -} diff --git a/src/scss/index.scss b/src/scss/index.scss @@ -1,38 +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/_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/_footer-banner.scss b/src/scss/modules/_footer-banner.scss @@ -1,27 +0,0 @@ -// Footer banner module -.footer-banner { - background: var(--base-darkest); - color: var(--base-brightest); - margin-top: 0; - - 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); - } - } - - &__wrapper { - padding-bottom: 2rem; - padding-top: 2rem; - - @include mq-from(md) { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - } -} diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss @@ -1,40 +0,0 @@ -// Go to module -.go-to { - &-content, - &-nav { - margin-bottom: 0; - margin-top: 0; - order: -2; - } - - &-nav { - @include mq-to(lg) { - align-items: center; - background: var(--base-darkest); - color: var(--base-brightest); - display: flex; - justify-content: flex-start; - padding-right: 2rem; - text-transform: capitalize; - - &::before { - @include logo; - border-right: 1px solid var(--base-br-light); - margin-right: 2rem; - padding: 0.5rem 2rem 0.5rem 2rem; - } - } - - & > svg { - display: none; - margin-right: calc(var(--base-space) * 1); - 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 @@ -1,28 +0,0 @@ -// HCARD µFORMAT -#hs.hcard { - h1 { - font-size: 1rem; - font-weight: 400; - } - - .p-name { - font-size: 1.25rem; - } - - .u-photo { - height: auto; - margin: 1rem auto 0; - mix-blend-mode: hard-light; - - @include mq-from(sm) { - float: right; - margin: 1rem; - max-width: 240px; - } - } - - .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 @@ -1,18 +0,0 @@ -// -.hcite {} - -blockquote.hcite { - 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 @@ -1,101 +0,0 @@ -// HENTRY µFORMAT -.hentry { - & > * + * { - margin-bottom: 0; - margin-top: calc(var(--base-space) * 6); - } - - .p-content { - :last-child { - margin-bottom: 0; - } - } - - .u-in-reply-to { - word-break: break-all; - } - - // 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; - } - - // To spread the click zone - .u-url::after { - bottom: 0; - content: ''; - left: 0; - position: absolute; - right: 0; - top: 0; - } - } - - &__posttype { - 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); - } - } - - - &__categories { - align-items: center; - display: inline-flex; - flex-wrap: wrap; - 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); - 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 @@ -1,13 +0,0 @@ -// 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 @@ -1,56 +0,0 @@ -// H-RESUME µFORMAT -.hresume { - & > * + *:not(.h-card) { - border-top: 1px solid var(--base-br); - padding-bottom: calc(var(--base-space) * 10); - padding-top: calc(var(--base-space) * 10); - - :last-child { - margin-bottom: 0; - } - } - - .h-card { - margin-bottom: calc(var(--base-space) * 10); - - & > h2 { - @extend .title-h3; - } - - & > dl { - display: table; - margin-top: calc(var(--base-space) * 6); - - div { - display: table-row; - } - } - - dt, - dd { - display: table-cell; - padding-top: calc(var(--base-space) * 2); - } - - dt { - &::after { - content: ':\00A0'; - display: inline; - } - } - - .u-uid { - hyphens: auto; - overflow-wrap: break-word; - word-break: break-word; - } - } - - .h-event { - margin-top: calc(var(--base-space) * 6); - - dd { - margin-left: 0; - } - } -} diff --git a/src/scss/modules/_index.scss b/src/scss/modules/_index.scss @@ -1,3 +0,0 @@ -// Home/Index -.index { -} diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss @@ -1,31 +0,0 @@ -// Layout module -.layout { - display: flex; - flex-direction: column; - min-height: 100vh; - - & > * { - 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; - } - - & > main { - margin-bottom: auto; - margin-top: auto; - } -} diff --git a/src/scss/modules/_main.scss b/src/scss/modules/_main.scss @@ -1,2 +0,0 @@ -// Main module -.main {} diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss @@ -1,92 +0,0 @@ -// Navigation -.nav { - background: var(--base-fg); - margin-bottom: 0; - - @include mq-from(lg) { - border: solid var(--base-br-light); - border-width: 1px 0; - display: flex; - order: -1; - - & { - margin-top: 0; - } - } - - &__title { - color: var(--base-brightest); - padding-bottom: 1em; - padding-top: 1em; - - :target > & { - @include mq-to(lg) { - @include unvisuallyhidden; - font-size: 0.75rem; - font-weight: 400; - padding: 0.75rem 2rem; - } - } - } - - &__list { - list-style-type: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; - - @include mq-from(lg) { - align-items: center; - flex: 1 100%; - display: flex; - padding: 0 2rem; - - &::before { - @include logo; - } - } - } - - &__item { - border: solid var(--base-br-light); - border-width: 1px 0 0; - - &:last-child { - border-bottom: 1px solid var(--base-br-light); - } - - @include mq-from(lg) { - 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/_webmentions.scss b/src/scss/modules/_webmentions.scss @@ -1,31 +0,0 @@ -// 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; -}