summaryrefslogtreecommitdiff
path: root/www/src/scss
diff options
context:
space:
mode:
Diffstat (limited to 'www/src/scss')
-rw-r--r--www/src/scss/blog.scss322
-rw-r--r--www/src/scss/code.scss80
-rw-r--r--www/src/scss/error.scss162
-rw-r--r--www/src/scss/fonts.scss40
-rw-r--r--www/src/scss/global.scss134
5 files changed, 369 insertions, 369 deletions
diff --git a/www/src/scss/blog.scss b/www/src/scss/blog.scss
index 2f36a76f7..d58401999 100644
--- a/www/src/scss/blog.scss
+++ b/www/src/scss/blog.scss
@@ -2,273 +2,273 @@
@use './code.scss';
:root {
- --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
- --font-body: 'IBM Plex Sans', var(--font-fallback);
- --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
- 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
-
- --color-white: #fff;
- --color-black: #000014;
-
- --color-gray-50: #f9fafb;
- --color-gray-100: #f3f4f6;
- --color-gray-200: #e5e7eb;
- --color-gray-300: #d1d5db;
- --color-gray-400: #9ca3af;
- --color-gray-500: #6b7280;
- --color-gray-600: #4b5563;
- --color-gray-700: #374151;
- --color-gray-800: #1f2937;
- --color-gray-900: #111827;
-
- --color-blue: #3894ff;
- --color-blue-rgb: 56, 148, 255;
- --color-green: #17c083;
- --color-green-rgb: 23, 192, 131;
- --color-orange: #ff5d01;
- --color-orange-rgb: 255, 93, 1;
- --color-purple: #882de7;
- --color-purple-rgb: 136, 45, 231;
- --color-red: #ff1639;
- --color-red-rgb: 255, 22, 57;
- --color-yellow: #ffbe2d;
- --color-yellow-rgb: 255, 190, 45;
+ --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+ --font-body: 'IBM Plex Sans', var(--font-fallback);
+ --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
+ 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+
+ --color-white: #fff;
+ --color-black: #000014;
+
+ --color-gray-50: #f9fafb;
+ --color-gray-100: #f3f4f6;
+ --color-gray-200: #e5e7eb;
+ --color-gray-300: #d1d5db;
+ --color-gray-400: #9ca3af;
+ --color-gray-500: #6b7280;
+ --color-gray-600: #4b5563;
+ --color-gray-700: #374151;
+ --color-gray-800: #1f2937;
+ --color-gray-900: #111827;
+
+ --color-blue: #3894ff;
+ --color-blue-rgb: 56, 148, 255;
+ --color-green: #17c083;
+ --color-green-rgb: 23, 192, 131;
+ --color-orange: #ff5d01;
+ --color-orange-rgb: 255, 93, 1;
+ --color-purple: #882de7;
+ --color-purple-rgb: 136, 45, 231;
+ --color-red: #ff1639;
+ --color-red-rgb: 255, 22, 57;
+ --color-yellow: #ffbe2d;
+ --color-yellow-rgb: 255, 190, 45;
}
:root {
- color-scheme: light;
- --theme-accent: var(--color-orange);
- --theme-accent-rgb: var(--color-orange-rgb);
- --theme-accent-opacity: 0.1;
- --theme-divider: var(--color-gray-100);
- --theme-text: var(--color-gray-800);
- --theme-text-light: var(--color-gray-600);
- --theme-text-lighter: var(--color-gray-400);
- --theme-bg: var(--color-white);
- --theme-bg-offset: var(--color-gray-100);
- --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
- --theme-code-inline-bg: var(--color-gray-100);
- --theme-code-text: var(--color-gray-100);
- --theme-code-bg: var(--color-gray-700);
+ color-scheme: light;
+ --theme-accent: var(--color-orange);
+ --theme-accent-rgb: var(--color-orange-rgb);
+ --theme-accent-opacity: 0.1;
+ --theme-divider: var(--color-gray-100);
+ --theme-text: var(--color-gray-800);
+ --theme-text-light: var(--color-gray-600);
+ --theme-text-lighter: var(--color-gray-400);
+ --theme-bg: var(--color-white);
+ --theme-bg-offset: var(--color-gray-100);
+ --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
+ --theme-code-inline-bg: var(--color-gray-100);
+ --theme-code-text: var(--color-gray-100);
+ --theme-code-bg: var(--color-gray-700);
}
body {
- background: var(--theme-bg);
- color: var(--theme-text);
+ background: var(--theme-bg);
+ color: var(--theme-text);
}
:root.theme-dark {
- color-scheme: dark;
- --theme-accent-opacity: 0.3;
- --theme-divider: var(--color-gray-900);
- --theme-text: var(--color-gray-200);
- --theme-text-light: var(--color-gray-400);
- --theme-text-lighter: var(--color-gray-600);
- --theme-bg: var(--color-black);
- --theme-bg-offset: var(--color-gray-900);
- --theme-code-inline-bg: var(--color-gray-800);
- --theme-code-text: var(--color-gray-200);
- --theme-code-bg: var(--color-gray-900);
+ color-scheme: dark;
+ --theme-accent-opacity: 0.3;
+ --theme-divider: var(--color-gray-900);
+ --theme-text: var(--color-gray-200);
+ --theme-text-light: var(--color-gray-400);
+ --theme-text-lighter: var(--color-gray-600);
+ --theme-bg: var(--color-black);
+ --theme-bg-offset: var(--color-gray-900);
+ --theme-code-inline-bg: var(--color-gray-800);
+ --theme-code-text: var(--color-gray-200);
+ --theme-code-bg: var(--color-gray-900);
}
::selection {
- color: var(--theme-accent);
- background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
+ color: var(--theme-accent);
+ background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
}
* {
- box-sizing: border-box;
- margin: 0;
+ box-sizing: border-box;
+ margin: 0;
}
:root {
- --user-font-scale: 1rem - 16px;
- --max-width: calc(100% - 2rem);
+ --user-font-scale: 1rem - 16px;
+ --max-width: calc(100% - 2rem);
}
@media (min-width: 50em) {
- :root {
- --max-width: 40em;
- }
+ :root {
+ --max-width: 40em;
+ }
}
body {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- font-family: var(--font-body);
- font-size: 1rem;
- font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
- line-height: 1.625;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ font-family: var(--font-body);
+ font-size: 1rem;
+ font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
+ line-height: 1.625;
}
body {
- width: 100%;
- display: grid;
- --gutter: 0.5rem;
- --doc-padding: 2rem;
+ width: 100%;
+ display: grid;
+ --gutter: 0.5rem;
+ --doc-padding: 2rem;
}
.layout {
- display: grid;
- grid-auto-flow: column;
- grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
- gap: 1em;
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
+ gap: 1em;
}
.layout > :is(main, article) {
- grid-column: 2;
+ grid-column: 2;
}
nav ul {
- list-style: none;
- padding: 0;
+ list-style: none;
+ padding: 0;
}
/* Typography */
:is(h1, h2, h3, h4, h5, h6) {
- margin-bottom: 1.38rem;
- font-weight: 400;
- line-height: 1.3;
+ margin-bottom: 1.38rem;
+ font-weight: 400;
+ line-height: 1.3;
}
:is(h1, h2) {
- max-width: 40ch;
+ max-width: 40ch;
}
:is(h2, h3):not(:first-child) {
- margin-top: 3rem;
+ margin-top: 3rem;
}
h1 {
- font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
+ font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
}
h2 {
- font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
+ font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
}
h3 {
- font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
+ font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
}
h4 {
- font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
+ font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
}
h5 {
- font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
+ font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
}
p {
- color: var(--theme-text-light);
+ color: var(--theme-text-light);
}
small,
.text_small {
- font-size: 0.833rem;
+ font-size: 0.833rem;
}
a {
- color: var(--theme-accent);
- text-underline-offset: 0.08em;
- text-decoration: none;
- align-items: center;
- gap: 0.5rem;
+ color: var(--theme-accent);
+ text-underline-offset: 0.08em;
+ text-decoration: none;
+ align-items: center;
+ gap: 0.5rem;
}
a > code:not([class*='language']) {
- position: relative;
- color: var(--theme-accent);
- background: transparent;
- text-underline-offset: var(--padding-block);
+ position: relative;
+ color: var(--theme-accent);
+ background: transparent;
+ text-underline-offset: var(--padding-block);
}
a > code:not([class*='language'])::before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- background: var(--theme-accent);
- opacity: var(--theme-accent-opacity);
- border-radius: var(--border-radius);
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ background: var(--theme-accent);
+ opacity: var(--theme-accent-opacity);
+ border-radius: var(--border-radius);
}
a:hover,
a:focus {
- text-decoration: underline;
+ text-decoration: underline;
}
a:focus {
- outline: 2px solid currentColor;
- outline-offset: 0.25em;
+ outline: 2px solid currentColor;
+ outline-offset: 0.25em;
}
strong {
- font-weight: 600;
- color: inherit;
+ font-weight: 600;
+ color: inherit;
}
/* Supporting Content */
code:not([class*='language']) {
- --border-radius: 3px;
- --padding-block: 0.2rem;
- --padding-inline: 0.33rem;
+ --border-radius: 3px;
+ --padding-block: 0.2rem;
+ --padding-inline: 0.33rem;
- font-family: var(--font-mono);
- font-size: 0.85em;
- color: inherit;
- background-color: var(--theme-code-inline-bg);
- padding: var(--padding-block) var(--padding-inline);
- margin: calc(var(--padding-block) * -1) -0.125em;
- border-radius: var(--border-radius);
- word-break: break-word;
+ font-family: var(--font-mono);
+ font-size: 0.85em;
+ color: inherit;
+ background-color: var(--theme-code-inline-bg);
+ padding: var(--padding-block) var(--padding-inline);
+ margin: calc(var(--padding-block) * -1) -0.125em;
+ border-radius: var(--border-radius);
+ word-break: break-word;
}
pre > code:not([class*='language']) {
- background-color: transparent;
- padding: 0;
- margin: 0;
- border-radius: 0;
- color: inherit;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+ color: inherit;
}
pre {
- position: relative;
- background-color: var(--theme-code-bg);
- color: var(--theme-code-text);
- --padding-block: 1rem;
- --padding-inline: 2rem;
- padding: var(--padding-block) var(--padding-inline);
- padding-right: calc(var(--padding-inline) * 2);
- margin-left: calc(50vw - var(--padding-inline));
- transform: translateX(-50vw);
-
- line-height: 1.414;
- width: calc(100vw + (var(--padding-inline) * 2));
- max-width: calc(100% + (var(--padding-inline) * 2));
- overflow-y: hidden;
- overflow-x: auto;
+ position: relative;
+ background-color: var(--theme-code-bg);
+ color: var(--theme-code-text);
+ --padding-block: 1rem;
+ --padding-inline: 2rem;
+ padding: var(--padding-block) var(--padding-inline);
+ padding-right: calc(var(--padding-inline) * 2);
+ margin-left: calc(50vw - var(--padding-inline));
+ transform: translateX(-50vw);
+
+ line-height: 1.414;
+ width: calc(100vw + (var(--padding-inline) * 2));
+ max-width: calc(100% + (var(--padding-inline) * 2));
+ overflow-y: hidden;
+ overflow-x: auto;
}
@media (min-width: 37.75em) {
- pre {
- --padding-inline: 1.25rem;
- border-radius: 8px;
- }
+ pre {
+ --padding-inline: 1.25rem;
+ border-radius: 8px;
+ }
}
.flex {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
img.cover {
- width: 100%;
- max-height: 50vh;
- object-fit: cover;
+ width: 100%;
+ max-height: 50vh;
+ object-fit: cover;
}
diff --git a/www/src/scss/code.scss b/www/src/scss/code.scss
index ec0e8dea2..835df74f6 100644
--- a/www/src/scss/code.scss
+++ b/www/src/scss/code.scss
@@ -1,155 +1,155 @@
.language-css > code,
.language-sass > code,
.language-scss > code {
- color: #fd9170;
+ color: #fd9170;
}
[class*='language-'] .namespace {
- opacity: 0.7;
+ opacity: 0.7;
}
.token.atrule {
- color: #c792ea;
+ color: #c792ea;
}
.token.attr-name {
- color: #ffcb6b;
+ color: #ffcb6b;
}
.token.attr-value {
- color: #a5e844;
+ color: #a5e844;
}
.token.attribute {
- color: #a5e844;
+ color: #a5e844;
}
.token.boolean {
- color: #c792ea;
+ color: #c792ea;
}
.token.builtin {
- color: #ffcb6b;
+ color: #ffcb6b;
}
.token.cdata {
- color: #80cbc4;
+ color: #80cbc4;
}
.token.char {
- color: #80cbc4;
+ color: #80cbc4;
}
.token.class {
- color: #ffcb6b;
+ color: #ffcb6b;
}
.token.class-name {
- color: #f2ff00;
+ color: #f2ff00;
}
.token.comment {
- color: #888888;
+ color: #888888;
}
.token.constant {
- color: #f2ff00;
+ color: #f2ff00;
}
.token.deleted {
- color: #ff6666;
+ color: #ff6666;
}
.token.doctype {
- color: #616161;
+ color: #616161;
}
.token.entity {
- color: #ff6666;
+ color: #ff6666;
}
.token.function {
- color: #c792ea;
+ color: #c792ea;
}
.token.hexcode {
- color: #f2ff00;
+ color: #f2ff00;
}
.token.id {
- color: #c792ea;
- font-weight: bold;
+ color: #c792ea;
+ font-weight: bold;
}
.token.important {
- color: #c792ea;
- font-weight: bold;
+ color: #c792ea;
+ font-weight: bold;
}
.token.inserted {
- color: #80cbc4;
+ color: #80cbc4;
}
.token.keyword {
- color: #c792ea;
+ color: #c792ea;
}
.token.number {
- color: #fd9170;
+ color: #fd9170;
}
.token.operator {
- color: #89ddff;
+ color: #89ddff;
}
.token.prolog {
- color: #616161;
+ color: #616161;
}
.token.property {
- color: #80cbc4;
+ color: #80cbc4;
}
.token.pseudo-class {
- color: #a5e844;
+ color: #a5e844;
}
.token.pseudo-element {
- color: #a5e844;
+ color: #a5e844;
}
.token.punctuation {
- color: #89ddff;
+ color: #89ddff;
}
.token.regex {
- color: #f2ff00;
+ color: #f2ff00;
}
.token.selector {
- color: #ff6666;
+ color: #ff6666;
}
.token.string {
- color: #a5e844;
+ color: #a5e844;
}
.token.symbol {
- color: #c792ea;
+ color: #c792ea;
}
.token.tag {
- color: #ff6666;
+ color: #ff6666;
}
.token.unit {
- color: #fd9170;
+ color: #fd9170;
}
.token.url {
- color: #ff6666;
+ color: #ff6666;
}
.token.variable {
- color: #ff6666;
+ color: #ff6666;
}
diff --git a/www/src/scss/error.scss b/www/src/scss/error.scss
index c49c42165..d03ecb876 100644
--- a/www/src/scss/error.scss
+++ b/www/src/scss/error.scss
@@ -1,107 +1,107 @@
@use './fonts.scss';
:root {
- --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
- 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
- --color-accent: #ff5d01;
+ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
+ 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+ --color-accent: #ff5d01;
}
* {
- box-sizing: border-box;
- margin: 0;
+ box-sizing: border-box;
+ margin: 0;
}
html {
- background-color: #000014;
+ background-color: #000014;
}
html,
body {
- padding: 0;
- font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
- font-family: var(--font-sans);
- font-weight: 400;
- background-repeat: no-repeat;
- color: #f3f4f6;
+ padding: 0;
+ font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+ font-family: var(--font-sans);
+ font-weight: 400;
+ background-repeat: no-repeat;
+ color: #f3f4f6;
}
.visually-hidden {
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- height: 1px;
- overflow: hidden;
- position: absolute;
- white-space: nowrap;
- width: 1px;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
}
a {
- position: relative;
- text-decoration: none;
- color: var(--color-accent);
- padding: 0.05em 0.125em;
- margin: -0.05em -0.125em;
- transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: 0;
- display: inline-block;
+ position: relative;
+ text-decoration: none;
+ color: var(--color-accent);
+ padding: 0.05em 0.125em;
+ margin: -0.05em -0.125em;
+ transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: 0;
+ display: inline-block;
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
- &::before {
- transform: scaleY(1);
- background: var(--color-accent);
- }
- }
+ &::before {
+ transform: scaleY(1);
+ background: var(--color-accent);
+ }
+ }
- &:visited {
- // color: var(--color-accent);
- color: var(--color-accent);
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
- }
- }
+ &:visited {
+ // color: var(--color-accent);
+ color: var(--color-accent);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
+ }
+ }
- &::before {
- transform-origin: bottom center;
- content: '';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- inset: 0;
- background: var(--color-accent);
- pointer-events: none;
- transform: scaleY(0.05);
- transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: -1;
- }
+ &::before {
+ transform-origin: bottom center;
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ inset: 0;
+ background: var(--color-accent);
+ pointer-events: none;
+ transform: scaleY(0.05);
+ transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: -1;
+ }
}
a + a {
- margin-left: 2px;
+ margin-left: 2px;
}
section.error-content {
- height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- p.error-code {
- color: #ff5d01;
- text-transform: uppercase;
- }
- h1 {
- margin-top: -0.5rem;
- margin-bottom: 1rem;
- font-size: 2rem;
- }
- p {
- margin: 1rem 0;
- }
- a {
- margin: 1rem 0;
- }
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ p.error-code {
+ color: #ff5d01;
+ text-transform: uppercase;
+ }
+ h1 {
+ margin-top: -0.5rem;
+ margin-bottom: 1rem;
+ font-size: 2rem;
+ }
+ p {
+ margin: 1rem 0;
+ }
+ a {
+ margin: 1rem 0;
+ }
}
diff --git a/www/src/scss/fonts.scss b/www/src/scss/fonts.scss
index 0ebce004a..3909773b1 100644
--- a/www/src/scss/fonts.scss
+++ b/www/src/scss/fonts.scss
@@ -1,39 +1,39 @@
/* ibm-plex-sans-regular - latin */
@font-face {
- font-family: 'IBM Plex Sans';
- font-style: normal;
- font-weight: 400;
- src: local('IBM Plex Sans'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2') format('woff2');
+ font-family: 'IBM Plex Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('IBM Plex Sans'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2') format('woff2');
}
/* ibm-plex-sans-600 - latin */
@font-face {
- font-family: 'IBM Plex Sans';
- font-style: normal;
- font-weight: 600;
- src: local('IBM Plex Sans Medium'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2') format('woff2');
+ font-family: 'IBM Plex Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: local('IBM Plex Sans Medium'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2') format('woff2');
}
/* ibm-plex-sans-700 - latin */
@font-face {
- font-family: 'IBM Plex Sans';
- font-style: normal;
- font-weight: 700;
- src: local('IBM Plex Sans Bold'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2') format('woff2');
+ font-family: 'IBM Plex Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: local('IBM Plex Sans Bold'), url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2') format('woff2');
}
/* ibm-plex-mono-regular - latin */
@font-face {
- font-family: 'IBM Plex Mono';
- font-style: normal;
- font-weight: 400;
- src: local('IBM Plex Mono Regular'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2') format('woff2');
+ font-family: 'IBM Plex Mono';
+ font-style: normal;
+ font-weight: 400;
+ src: local('IBM Plex Mono Regular'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2') format('woff2');
}
/* ibm-plex-mono-700 - latin */
@font-face {
- font-family: 'IBM Plex Mono';
- font-style: normal;
- font-weight: 700;
- src: local('IBM Plex Mono Bold'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2') format('woff2');
+ font-family: 'IBM Plex Mono';
+ font-style: normal;
+ font-weight: 700;
+ src: local('IBM Plex Mono Bold'), url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2') format('woff2');
}
diff --git a/www/src/scss/global.scss b/www/src/scss/global.scss
index e27a31a44..7a1e804c6 100644
--- a/www/src/scss/global.scss
+++ b/www/src/scss/global.scss
@@ -1,103 +1,103 @@
@use './fonts.scss';
:root {
- --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
- 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
- --color-accent: #ff5d01;
+ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
+ 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+ --color-accent: #ff5d01;
}
* {
- box-sizing: border-box;
- margin: 0;
+ box-sizing: border-box;
+ margin: 0;
}
html {
- background-color: #000014;
+ background-color: #000014;
}
html,
body {
- padding: 0;
- font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
- font-family: var(--font-sans);
- font-weight: 400;
- background-repeat: no-repeat;
- color: #f3f4f6;
+ padding: 0;
+ font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+ font-family: var(--font-sans);
+ font-weight: 400;
+ background-repeat: no-repeat;
+ color: #f3f4f6;
}
.visually-hidden {
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- height: 1px;
- overflow: hidden;
- position: absolute;
- white-space: nowrap;
- width: 1px;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
}
a {
- position: relative;
- text-decoration: none;
- color: var(--color-accent);
- padding: 0.05em 0.125em;
- margin: -0.05em -0.125em;
- transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: 0;
- display: inline-block;
+ position: relative;
+ text-decoration: none;
+ color: var(--color-accent);
+ padding: 0.05em 0.125em;
+ margin: -0.05em -0.125em;
+ transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: 0;
+ display: inline-block;
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
- &::before {
- transform: scaleY(1);
- background: var(--color-accent);
- }
- }
+ &::before {
+ transform: scaleY(1);
+ background: var(--color-accent);
+ }
+ }
- &:visited {
- // color: var(--color-accent);
- color: var(--color-accent);
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
- }
- }
+ &:visited {
+ // color: var(--color-accent);
+ color: var(--color-accent);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
+ }
+ }
- &::before {
- transform-origin: bottom center;
- content: '';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- inset: 0;
- background: var(--color-accent);
- pointer-events: none;
- transform: scaleY(0.05);
- transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: -1;
- }
+ &::before {
+ transform-origin: bottom center;
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ inset: 0;
+ background: var(--color-accent);
+ pointer-events: none;
+ transform: scaleY(0.05);
+ transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: -1;
+ }
}
a + a {
- margin-left: 2px;
+ margin-left: 2px;
}
header {
- text-align: center;
+ text-align: center;
}
header a {
- color: var(--theme-text-lighter) !important;
- font-weight: bold;
+ color: var(--theme-text-lighter) !important;
+ font-weight: bold;
}
header a::before,
header a:hover::before {
- background: none;
+ background: none;
}
header a:hover {
- background: rgba(255, 255, 255, 0.1);
- text-decoration: underline;
+ background: rgba(255, 255, 255, 0.1);
+ text-decoration: underline;
}
header h1 a:hover {
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-26 01:18:05 +0000