diff options
Diffstat (limited to 'src/styles')
25 files changed, 980 insertions, 620 deletions
diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss index d1c0a7a..18b1c03 100644 --- a/src/styles/abstracts/_placeholders.scss +++ b/src/styles/abstracts/_placeholders.scss @@ -1,3 +1,4 @@ @forward "./placeholders/animations"; @forward "./placeholders/clearfix"; +@forward "./placeholders/layout"; @forward "./placeholders/list"; diff --git a/src/styles/abstracts/placeholders/_layout.scss b/src/styles/abstracts/placeholders/_layout.scss new file mode 100644 index 0000000..1a28acb --- /dev/null +++ b/src/styles/abstracts/placeholders/_layout.scss @@ -0,0 +1,25 @@ +@use "@styles/abstracts/mixins" as mix; + +%grid { + display: grid; + align-items: center; + grid-template-columns: + minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch) + var(--column-3, minmax(0, 1fr)); + column-gap: var(--grid-gap, var(--spacing-md)); + + @include mix.media("screen") { + @include mix.dimensions("md") { + grid-template-columns: + minmax(0, 1fr) clamp(60ch, 60vw, 80ch) + var(--column-3, minmax(0, 3fr)); + column-gap: var(--grid-gap, var(--spacing-xl)); + } + + @include mix.dimensions("lg") { + grid-template-columns: + minmax(0, 1fr) clamp(47ch, 47vw, 80ch) + var(--column-3, minmax(0, 1fr)); + } + } +} diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss index 25ef393..1ec5494 100644 --- a/src/styles/base/_base.scss +++ b/src/styles/base/_base.scss @@ -70,14 +70,6 @@ body { flex-flow: column nowrap; min-height: 100vh; background: var(--color-bg); - border-top: max(0.4vw, fun.convert-px(6)) solid; - border-bottom: max(0.4vw, fun.convert-px(6)) solid; - border-image: radial-gradient( - ellipse at center, - var(--color-primary-lighter) 20%, - var(--color-primary) 100% - ) - 1; color: var(--color-fg); font-family: var(--font-family-primary); font-size: var(--font-size-md); @@ -89,4 +81,12 @@ body { display: flex; flex-flow: column nowrap; height: 100%; + border-top: max(0.4vw, fun.convert-px(6)) solid; + border-bottom: max(0.4vw, fun.convert-px(6)) solid; + border-image: radial-gradient( + ellipse at center, + var(--color-primary-lighter) 20%, + var(--color-primary) 100% + ) + 1; } diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss index 88850bb..c8695d4 100644 --- a/src/styles/base/_fonts.scss +++ b/src/styles/base/_fonts.scss @@ -139,32 +139,32 @@ --font-family-mono: #{var.$font-family_mono}; --font-size-sm: clamp( #{math.div(var.font-size("sm"), 1.2)}, - 1ex + 1vw, + 2ex + 1vmin, #{var.font-size("sm")} ); --font-size-md: clamp( #{var.font-size("sm")}, - 1ex + 2vw, + 2ex + 2vmin, #{var.font-size("md")} ); --font-size-lg: clamp( #{var.font-size("md")}, - 1ex + 3vw, + 2ex + 3vmin, #{var.font-size("lg")} ); --font-size-xl: clamp( #{var.font-size("lg")}, - 1ex + 4vw, + 2ex + 4vmin, #{var.font-size("xl")} ); --font-size-2xl: clamp( #{var.font-size("xl")}, - 1ex + 5vw, + 2ex + 5vmin, #{var.font-size("2xl")} ); --font-size-3xl: clamp( #{var.font-size("2xl")}, - 1ex + 6vw, + 2ex + 6vmin, #{var.font-size("3xl")} ); --line-height: #{var.$line-height}; diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss index d28811c..3879643 100644 --- a/src/styles/base/_helpers.scss +++ b/src/styles/base/_helpers.scss @@ -28,17 +28,11 @@ display: block; width: auto; height: auto; - padding: var(--spacing-xs) var(--spacing-sm); left: var(--spacing-2xs); top: var(--spacing-xs); z-index: 100000; - background: var(--color-primary); - box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-dark); clip: auto !important; color: var(--color-fg-inverted); - font-size: var(--font-size-md); - font-weight: 600; } } diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss index 08c3c3f..7c8b210 100644 --- a/src/styles/base/_spacings.scss +++ b/src/styles/base/_spacings.scss @@ -24,13 +24,5 @@ --spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")}); --spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")}); --spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")}); - --toolbar-size: #{fun.convert-px(65)}; -} - -@include mix.media("screen") { - @include mix.dimensions("sm") { - :root { - --toolbar-size: 0px; - } - } + --toolbar-size: #{fun.convert-px(80)}; } diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index f1cb38a..2c3c8cc 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -1,5 +1,4 @@ @use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/variables" as var; h1 { font-size: var(--font-size-3xl); @@ -116,34 +115,28 @@ dl { ul, ol, dl { - margin: var(--spacing-md) 0; + margin: var(--spacing-sm) 0; & & { margin: var(--spacing-2xs) 0 0; } -} - -dt { - flex: 0 0 max-content; - font-weight: 600; -} -dd { - flex: 0 0 auto; - margin: 0; + ::marker { + color: var(--color-primary-dark); + } } a { background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%) - 0 0 / 100% 200% no-repeat; + 0 0 / 100% 201% no-repeat; color: var(--color-primary); - text-decoration-thickness: 13%; + text-decoration-thickness: 0.15em; text-underline-offset: 20%; transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s; &:hover { color: var(--color-primary-light); - text-decoration-thickness: 23%; + text-decoration-thickness: 0.25em; } &:focus { @@ -156,39 +149,6 @@ a { color: var(--color-primary-dark); text-decoration-thickness: 18%; } - - &.external { - &::after { - display: inline-block; - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); - } - - &:focus:not(:active)::after { - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); - } - } - - &[hreflang] { - &::after { - display: inline-block; - content: "\0000a0["attr(hreflang) "]"; - font-size: var(--font-size-sm); - } - - &.external { - &::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( - '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' - )); - } - - &:focus:not(:active)::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( - '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' - )); - } - } - } } button, @@ -233,13 +193,3 @@ pre { word-break: normal; word-wrap: normal; } - -figure { - margin: var(--spacing-md) 0; -} - -figcaption { - margin-top: var(--spacing-xs); - font-size: var(--font-size-sm); - text-align: center; -} diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss deleted file mode 100644 index efd6db5..0000000 --- a/src/styles/components/_wp-blocks.scss +++ /dev/null @@ -1,166 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.wp-block-quote { - margin: var(--spacing-sm) 0; - padding: var(--spacing-sm); - position: relative; - border: fun.convert-px(1) solid var(--color-primary-lighter); - border-left: fun.convert-px(5) solid var(--color-primary-lighter); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - font-style: italic; - - > *:last-child { - margin: 0; - } - - cite { - font-size: var(--font-size-sm); - font-style: normal; - font-weight: 600; - } -} - -.wp-block-code, -.wp-block-preformatted { - margin: 0 auto var(--spacing-md); - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); - color: var(--color-fg); -} - -.wp-block-columns { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: var(--spacing-md); - margin: var(--spacing-md) 0; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - &.are-vertically-aligned-center { - align-items: center; - } -} - -.wp-block-column { - > *:first-child { - margin-top: 0; - } - - > *:last-child { - margin-bottom: 0; - } -} - -.wp-block-gallery { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: var(--spacing-sm); - - .blocks-gallery-grid { - @extend %reset-list; - - grid-column: 1 / -1; - grid-row: 1 / -1; - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: var(--spacing-sm); - } - - .blocks-gallery-item { - figure { - margin: 0; - } - - a { - display: block; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - - &:hover, - &:focus { - transform: scale(1.05); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 - var(--color-shadow-light); - } - - &:focus { - outline: solid var(--color-primary-light); - } - - &:active { - transform: scale(0.95); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - 0 0 0 0 var(--color-shadow-light); - outline: none; - } - } - } - - &.aligncenter { - .blocks-gallery-grid { - align-items: center; - } - } - - @for $i from 0 to 6 { - &.columns-#{$i} { - @include mix.media("screen") { - @include mix.dimensions("xs") { - grid-template-columns: repeat(2, minmax(0, 1fr)); - - .blocks-gallery-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - @include mix.dimensions("sm") { - grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); - - .blocks-gallery-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - } - } - } -} - -.wp-block-image { - img { - display: block; - margin: auto; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - text-align: center; - } -} - -.wp-block-video { - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); -} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index f9a1281..8ece909 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -6,7 +6,6 @@ * Import each files separately to define vendors styles order. */ @use "modern-normalize"; -@use "vendors/prism"; /** * 2.0. Base @@ -22,14 +21,7 @@ @use "base/typography"; /** - * 3.0. Components - * - * Define styles for external components (like WordPress blocks). - */ -@use "components/wp-blocks"; - -/** - * 4.0. Themes + * 3.0. Themes * * Define themes specific styles. */ diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss deleted file mode 100644 index 8225a57..0000000 --- a/src/styles/pages/Home.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/placeholders"; - -.links-list { - @extend %flex-list; - - gap: var(--spacing-md); - margin: 0 0 var(--spacing-md); -} - -.icon--feed { - width: fun.convert-px(20); -} - -:global { - [data-theme="dark"] { - :local { - .icon--feed { - filter: brightness(0.8) contrast(1.1); - } - } - } -} - -.section { - --icon-size: #{fun.convert-px(20)}; - - composes: grid from "@styles/layout/_grid.scss"; - padding: var(--spacing-md) 0; - background: var(--color-bg-secondary); - - &:not(:last-child) { - border-bottom: fun.convert-px(1) solid var(--color-border); - } - - &:nth-child(2n) { - background: var(--color-bg); - } - - > * { - grid-column: 2; - } - - :global { - .wp-block-columns { - margin: 0 0 var(--spacing-md); - } - } -} diff --git a/src/styles/pages/Projects.module.scss b/src/styles/pages/Projects.module.scss deleted file mode 100644 index 3fd74cb..0000000 --- a/src/styles/pages/Projects.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.article { - composes: grid from "@styles/layout/_grid.scss"; - align-items: start; - - > header { - grid-column: 1 / -1; - } -} - -.body { - grid-column: 1 / -1; - margin-bottom: var(--spacing-xl); -} diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss new file mode 100644 index 0000000..a5299fe --- /dev/null +++ b/src/styles/pages/article.module.scss @@ -0,0 +1,37 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/variables" as var; +@use "partials/article-links"; +@use "partials/article-lists"; +@use "partials/article-media"; +@use "partials/article-prism"; +@use "partials/article-wp-blocks"; + +.btn { + margin-right: var(--spacing-2xs); + padding: var(--spacing-2xs) var(--spacing-xs); + + figure { + max-width: fun.convert-px(22); + margin-right: var(--spacing-2xs); + } +} + +.body { + :global { + @include article-links.styles; + @include article-lists.styles; + @include article-media.styles; + @include article-prism.styles; + @include article-wp-blocks.styles; + } +} + +.widget { + @include mix.media("screen") { + @include mix.dimensions("md") { + width: min-content; + gap: var(--spacing-2xs); + } + } +} diff --git a/src/styles/pages/contact.module.scss b/src/styles/pages/contact.module.scss new file mode 100644 index 0000000..65fb0d6 --- /dev/null +++ b/src/styles/pages/contact.module.scss @@ -0,0 +1,3 @@ +.notice { + margin-top: var(--spacing-md); +} diff --git a/src/styles/pages/cv.module.scss b/src/styles/pages/cv.module.scss new file mode 100644 index 0000000..615c50d --- /dev/null +++ b/src/styles/pages/cv.module.scss @@ -0,0 +1,3 @@ +.image { + max-width: min(100%, 25ch); +} diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss new file mode 100644 index 0000000..873a5a9 --- /dev/null +++ b/src/styles/pages/home.module.scss @@ -0,0 +1,36 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.section { + --card-width: 25ch; + + &:last-of-type { + border-bottom: none; + } +} + +.columns { + margin: 0 0 var(--spacing-sm); +} + +.list { + margin: 0 0 var(--spacing-sm); + + &--cards { + @include mix.media("screen") { + @include mix.dimensions("md") { + margin: 0 calc(var(--spacing-sm) * -1) var(--spacing-sm); + } + } + } +} + +.icon { + --icon-size: #{fun.convert-px(20)}; + + margin-right: var(--spacing-2xs); + + &--feed { + width: var(--icon-size); + } +} diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss new file mode 100644 index 0000000..c0c3519 --- /dev/null +++ b/src/styles/pages/partials/_article-headings.scss @@ -0,0 +1,57 @@ +@use "@styles/abstracts/functions" as fun; + +@mixin styles { + h1 { + font-size: var(--font-size-3xl); + font-weight: 500; + } + + h2 { + padding-bottom: fun.convert-px(3); + background: linear-gradient( + to top, + var(--color-primary-dark) 0.3rem, + transparent 0.3rem + ) + 0 0 / 3rem 100% no-repeat; + font-size: var(--font-size-2xl); + font-weight: 500; + text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light); + } + + h3 { + font-size: var(--font-size-xl); + font-weight: 500; + } + + h4 { + font-size: var(--font-size-lg); + font-weight: 500; + } + + h5 { + font-size: var(--font-size-md); + font-weight: 600; + } + + h6 { + font-size: var(--font-size-md); + font-weight: 500; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--color-primary-dark); + font-family: var(--font-family-secondary); + letter-spacing: 0.01ex; + margin: 0 0 var(--spacing-sm); + + & + & { + margin-top: var(--spacing-md); + } + } +} diff --git a/src/styles/pages/partials/_article-links.scss b/src/styles/pages/partials/_article-links.scss new file mode 100644 index 0000000..543337a --- /dev/null +++ b/src/styles/pages/partials/_article-links.scss @@ -0,0 +1,204 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/variables" as var; + +@mixin styles { + a { + &[hreflang] { + &::after { + display: inline-block; + + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]"; + font-size: var(--font-size-sm); + } + } + } + + /* stylelint-disable no-descending-specificity */ + a.download { + &::after { + display: inline-block; + + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + } + } + + a.external { + &::after { + display: inline-block; + + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + } + } + + a.external.download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + } + } + + [data-theme="dark"] { + a.download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')); + } + } + } + + a.external { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + } + } + + a.external.download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + } + } + } +} +/* stylelint-enable no-descending-specificity */ diff --git a/src/styles/pages/partials/_article-lists.scss b/src/styles/pages/partials/_article-lists.scss new file mode 100644 index 0000000..c0084b0 --- /dev/null +++ b/src/styles/pages/partials/_article-lists.scss @@ -0,0 +1,65 @@ +@mixin styles { + ol { + padding: 0; + list-style-type: none; + counter-reset: li; + + > li { + display: table; + counter-increment: li; + + &::before { + content: counters(li, ".") ". "; + display: table-cell; + padding-right: var(--spacing-2xs); + color: var(--color-secondary); + } + } + + li ol > li::before { + content: counters(li, ".") ". "; + } + } + + ul, + ol { + li:not(:last-child) { + margin-bottom: var(--spacing-2xs); + } + + ::marker { + color: var(--color-primary-dark); + } + } + + ul { + padding-left: var(--spacing-sm); + } + + dl { + display: flex; + flex-flow: row wrap; + gap: var(--spacing-2xs); + width: fit-content; + } + + ul, + ol, + dl { + margin: var(--spacing-sm) 0; + + & & { + margin: var(--spacing-2xs) 0 0; + } + } + + dt { + color: var(--color-fg-light); + font-weight: 600; + } + + dd { + margin: 0; + word-break: break-all; + } +} diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss new file mode 100644 index 0000000..0cd3654 --- /dev/null +++ b/src/styles/pages/partials/_article-media.scss @@ -0,0 +1,20 @@ +@use "@styles/abstracts/functions" as fun; + +@mixin styles { + figure { + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + position: relative; + text-align: center; + } + + figcaption { + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + font-weight: 500; + } +} diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss new file mode 100644 index 0000000..a714eb6 --- /dev/null +++ b/src/styles/pages/partials/_article-prism.scss @@ -0,0 +1,302 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +@mixin styles { + .code-toolbar { + --toolbar-height: #{fun.convert-px(100)}; + + position: relative; + margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + --toolbar-height: #{fun.convert-px(60)}; + } + } + + .toolbar { + display: flex; + flex-flow: row wrap; + justify-content: center; + width: 100%; + height: var(--toolbar-height); + position: absolute; + top: calc(var(--toolbar-height) * -1); + left: 0; + right: 0; + background: var(--color-bg-tertiary); + border: fun.convert-px(1) solid var(--color-border); + } + + .toolbar-item { + display: flex; + align-items: center; + margin: 0 var(--spacing-2xs); + } + + .toolbar-item:nth-child(1) { + flex: 0 0 100%; + justify-content: center; + margin: 0 auto 0 0; + padding: 0 var(--spacing-sm); + background: var(--color-bg-code); + border-bottom: fun.convert-px(1) solid var(--color-border); + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-weight: 600; + + @include mix.media("screen") { + @include mix.dimensions("2xs") { + flex: 0 0 auto; + justify-content: left; + border-bottom: none; + border-right: fun.convert-px(1) solid var(--color-border); + } + } + } + } + + .copy-to-clipboard-button, + .prism-color-scheme-button { + display: block; + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg); + border: 0.4ex solid var(--color-primary); + border-radius: fun.convert-px(30); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow); + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 600; + transition: all 0.35s ease-in-out 0s; + + &:hover, + &:focus { + transform: translateX(#{fun.convert-px(-2)}) + translateY(#{fun.convert-px(-2)}); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) + var(--color-shadow-light); + } + + &:focus { + text-decoration: underline var(--color-primary) fun.convert-px(3); + } + + &:active { + text-decoration: none; + transform: translateY(#{fun.convert-px(2)}); + box-shadow: 0 0 0 0 var(--color-shadow); + } + } + + pre[class*="language-"] { + --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); + + padding: 0; + position: relative; + overflow: auto; + border: fun.convert-px(1) solid var(--color-border-light); + hyphens: none; + tab-size: 4; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + &.command-line { + --gutter-size: 19ch; + padding-left: var(--gutter-size-with-spacing); + } + + &.line-numbers { + --gutter-size: 6ch; + + counter-reset: lineNumber; + padding-left: var(--gutter-size-with-spacing); + } + + code { + display: block; + padding: var(--spacing-xs) 0; + position: relative; + } + + .line-numbers-rows, + .command-line-prompt { + display: block; + width: var(--gutter-size); + padding: var(--spacing-xs) 0; + position: absolute; + top: 0; + left: calc(var(--gutter-size-with-spacing) * -1); + background: var(--color-bg); + border-right: fun.convert-px(1) solid var(--color-border); + font-size: 100%; + letter-spacing: -1px; + text-align: right; + pointer-events: none; + user-select: none; + + > span { + &::before { + display: block; + padding-right: var(--spacing-xs); + color: var(--color-fg-light); + } + } + } + + .command-line-prompt { + > span { + &::before { + content: " "; + } + + &[data-user]::before { + content: "[" attr(data-user) "@" attr(data-host) "] $"; + } + + &[data-user="root"]::before { + content: "[" attr(data-user) "@" attr(data-host) "] #"; + } + + &[data-prompt]::before { + content: attr(data-prompt); + } + + &[data-continuation-prompt]::before { + content: attr(data-continuation-prompt); + } + } + } + + .line-numbers-rows { + > span { + counter-increment: lineNumber; + + &::before { + content: counter(lineNumber); + } + } + } + + .token { + &.comment, + &.doc-comment { + color: var(--color-fg-light); + } + + &.punctuation { + color: var(--color-fg); + } + + &.attr-name, + &.hexcode, + &.inserted, + &.string { + color: var(--color-token-green); + } + + &.class, + &.coord, + &.id, + &.function { + color: var(--color-token-purple); + } + + &.builtin, + &.builtin.class-name, + &.property-access, + &.regex, + &.scope { + color: var(--color-token-magenta); + } + + &.class-name, + &.constant, + &.global, + &.interpolation, + &.key, + &.package, + &.this, + &.title, + &.variable { + color: var(--color-token-blue); + } + + &.combinator, + &.keyword, + &.operator, + &.pseudo-class, + &.pseudo-element, + &.rule, + &.selector, + &.unit { + color: var(--color-token-orange); + } + + &.attr-value, + &.boolean, + &.number { + color: var(--color-token-yellow); + } + + &.delimiter, + &.doctype, + &.parameter, + &.parent, + &.property, + &.shebang, + &.tag { + color: var(--color-token-cyan); + } + + &.deleted { + color: var(--color-token-red); + } + + &.punctuation.brace-hover, + &.punctuation.brace-selected { + background: var(--color-bg); + outline: solid fun.convert-px(1) var(--color-primary-light); + } + } + + span.inline-color-wrapper { + background: url(fun.encode-svg( + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>' + )); + + /* Prevent glitches where 1px from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.1ch; + width: 1.1ch; + margin: 0 0.5ch 0 0; + border: fun.convert-px(1) solid var(--color-bg); + outline: fun.convert-px(1) solid var(--color-border-dark); + overflow: hidden; + } + + span.inline-color { + display: block; + + /* To prevent visual glitches again */ + height: 120%; + width: 120%; + } + } +} diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss new file mode 100644 index 0000000..86be062 --- /dev/null +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -0,0 +1,177 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +@mixin styles { + .wp-block-quote { + margin: var(--spacing-sm) 0; + padding: var(--spacing-sm); + position: relative; + border: fun.convert-px(1) solid var(--color-border-dark); + border-left: fun.convert-px(5) solid var(--color-border-dark); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) 0 + var(--color-shadow); + font-style: italic; + + > *:last-child { + margin: 0; + } + + cite { + color: var(--color-fg-light); + font-size: var(--font-size-sm); + font-style: normal; + font-weight: 600; + } + } + + .wp-block-code, + .wp-block-preformatted { + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + color: var(--color-fg); + } + + .wp-block-columns { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-md); + margin: var(--spacing-md) 0; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + &.are-vertically-aligned-center { + align-items: center; + } + } + + .wp-block-column { + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } + + .wp-block-image, + .wp-block-video { + padding: fun.convert-px(4); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + } + + .wp-block-image { + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + position: relative; + text-align: center; + + img { + margin: auto; + } + + figcaption { + margin-top: fun.convert-px(4); + font-size: var(--font-size-sm); + } + } + + .wp-block-gallery { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-sm); + + .blocks-gallery-grid { + @extend %reset-list; + + grid-column: 1 / -1; + grid-row: 1 / -1; + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--spacing-sm); + } + + .blocks-gallery-item { + figure { + margin: 0; + } + + a { + display: block; + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 + var(--color-shadow-light); + + &:hover, + &:focus { + transform: scale(1.05); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 + var(--color-shadow-light), + fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 + var(--color-shadow-light); + } + + &:focus { + outline: solid var(--color-primary-light); + } + + &:active { + transform: scale(0.95); + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow-light); + outline: none; + } + } + } + + &.aligncenter { + .blocks-gallery-grid { + align-items: center; + } + } + + @for $i from 0 to 6 { + &.columns-#{$i} { + @include mix.media("screen") { + @include mix.dimensions("xs") { + grid-template-columns: repeat(2, minmax(0, 1fr)); + + .blocks-gallery-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @include mix.dimensions("sm") { + grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); + + .blocks-gallery-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + } + } + } + + .wp-block-image img { + height: 100%; + object-fit: cover; + } + } +} diff --git a/src/styles/pages/project.module.scss b/src/styles/pages/project.module.scss new file mode 100644 index 0000000..3b1b5cc --- /dev/null +++ b/src/styles/pages/project.module.scss @@ -0,0 +1,10 @@ +@use "@styles/abstracts/mixins" as mix; + +.widget { + @include mix.media("screen") { + @include mix.dimensions("md") { + width: min-content; + gap: var(--spacing-2xs); + } + } +} diff --git a/src/styles/pages/projects.module.scss b/src/styles/pages/projects.module.scss new file mode 100644 index 0000000..fde1f31 --- /dev/null +++ b/src/styles/pages/projects.module.scss @@ -0,0 +1,11 @@ +@use "@styles/abstracts/mixins" as mix; + +.list { + margin-top: var(--spacing-sm); + + @include mix.media("screen") { + @include mix.dimensions("md") { + margin: var(--spacing-md) calc(var(--spacing-3xl) * -1) var(--spacing-md); + } + } +} diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss new file mode 100644 index 0000000..fd5f742 --- /dev/null +++ b/src/styles/pages/topic.module.scss @@ -0,0 +1,6 @@ +@use "@styles/abstracts/functions" as fun; + +.logo { + max-width: fun.convert-px(50); + margin: 0 var(--spacing-xs) 0 0; +} diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss deleted file mode 100644 index 7c05c9f..0000000 --- a/src/styles/vendors/_prism.scss +++ /dev/null @@ -1,297 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; - -/// Custom theme for Prism - -.code-toolbar { - --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)}); - --toolbar-height: #{fun.convert-px(90)}; - - position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-md)); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - --toolbar-height: #{fun.convert-px(60)}; - } - } - - .toolbar { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - justify-items: end; - width: 100%; - height: var(--toolbar-height); - position: absolute; - top: calc(var(--toolbar-height) * -1); - left: 0; - right: 0; - background: var(--color-bg-tertiary); - border: fun.convert-px(1) solid var(--color-border); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - display: flex; - flex-flow: row wrap; - } - } - } - - .toolbar-item { - display: flex; - align-items: center; - } - - .toolbar-item:nth-child(1) { - grid-column: 1; - grid-row: 1 / 3; - margin-right: auto; - padding: 0 var(--spacing-sm); - background: var(--color-bg-code); - border-right: fun.convert-px(1) solid var(--color-border); - color: var(--color-primary-darker); - font-size: var(--font-size-sm); - font-weight: 600; - } - - .toolbar-item:nth-child(2) { - grid-column: 2; - grid-row: 1; - margin: 0 var(--spacing-2xs); - } - - .toolbar-item:nth-child(3) { - grid-column: 2; - grid-row: 2; - margin: 0 var(--spacing-2xs); - } -} - -pre[class*="language-"] { - max-height: max(30vw, fun.convert-px(300)); - margin: var(--spacing-md) 0; - padding: 0; - position: relative; - background: var(--color-bg-secondary); - color: var(--color-fg); - border: fun.convert-px(1) solid var(--color-border); - - > code { - display: block; - padding: var(--spacing-xs) 0 var(--spacing-xs) - calc(var(--gutter-size) + var(--spacing-xs)); - } - - .line-numbers-rows, - .command-line-prompt { - width: var(--gutter-size); - min-height: 100%; - padding: var(--spacing-xs) var(--spacing-2xs); - position: absolute; - top: 0; - left: 0; - pointer-events: none; - user-select: none; - background: var(--color-bg); - border-right: fun.convert-px(1) solid var(--color-border); - } - - .token { - &.comment, - &.doc-comment { - color: var(--color-fg-light); - } - - &.punctuation { - color: var(--color-fg); - } - - &.attr-name, - &.hexcode, - &.inserted, - &.string { - color: var(--color-token-green); - } - - &.class, - &.coord, - &.id, - &.function { - color: var(--color-token-purple); - } - - &.builtin, - &.builtin.class-name, - &.property-access, - &.regex, - &.scope { - color: var(--color-token-magenta); - } - - &.class-name, - &.constant, - &.global, - &.interpolation, - &.key, - &.package, - &.this, - &.title, - &.variable { - color: var(--color-token-blue); - } - - &.combinator, - &.keyword, - &.operator, - &.pseudo-class, - &.pseudo-element, - &.rule, - &.selector, - &.unit { - color: var(--color-token-orange); - } - - &.attr-value, - &.boolean, - &.number { - color: var(--color-token-yellow); - } - - &.delimiter, - &.doctype, - &.parameter, - &.parent, - &.property, - &.shebang, - &.tag { - color: var(--color-token-cyan); - } - - &.deleted { - color: var(--color-token-red); - } - - &.punctuation.brace-hover, - &.punctuation.brace-selected { - background: var(--color-bg); - outline: solid fun.convert-px(1) var(--color-primary-light); - } - } - - span.inline-color-wrapper { - background: url(fun.encode-svg( - '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>' - )); - - /* Prevent glitches where 1px from the repeating pattern could be seen. */ - background-position: center; - background-size: 110%; - - display: inline-block; - height: 1.1ch; - width: 1.1ch; - margin: 0 0.5ch 0 0; - border: fun.convert-px(1) solid var(--color-bg); - outline: fun.convert-px(1) solid var(--color-border-dark); - overflow: hidden; - } - - span.inline-color { - display: block; - - /* To prevent visual glitches again */ - height: 120%; - width: 120%; - } -} - -pre.line-numbers { - counter-reset: lineNumber; - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - display: block; - padding: 0 var(--spacing-xs); - content: counter(lineNumber); - color: var(--color-primary-darker); - text-align: right; - line-height: var(--line-height); - } - } - } -} - -pre.command-line { - --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); - - ~ .toolbar { - --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)}); - } - - .command-line-prompt { - > span { - &::before { - display: block; - content: ""; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - } - } -} - -.copy-to-clipboard-button, -.prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) - var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } -} |