From 5b30cc7424fde91accb380955c28793fdb8a8637 Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Wed, 11 Dec 2024 18:21:20 -0500 Subject: [PATCH] Fix formatting --- src/_includes/styles/base.scss | 7 +- src/_includes/styles/color-palette.scss | 127 ++++++++++++++------ src/_includes/styles/components/header.scss | 6 +- src/_includes/styles/fonts.scss | 40 +++--- src/_includes/styles/normalize.scss | 6 +- src/_includes/styles/variables.scss | 6 +- 6 files changed, 131 insertions(+), 61 deletions(-) diff --git a/src/_includes/styles/base.scss b/src/_includes/styles/base.scss index 421e7f5..e7e1001 100644 --- a/src/_includes/styles/base.scss +++ b/src/_includes/styles/base.scss @@ -68,8 +68,7 @@ a { &.footnote-ref::after { content: "]"; } - &.footnote-backref { - } + &.footnote-backref {} } img { @@ -316,7 +315,7 @@ nav.toc { padding-left: 1rem; } ul { - margin: .5rem; + margin: 0.5rem; padding-left: 1rem; } } @@ -341,7 +340,7 @@ ol.footnotes { kbd { font-family: var(--font--mono); - font-size: .9em; + font-size: 0.9em; font-weight: bold; padding: 0.2rem 0.4rem; border-radius: 3px; diff --git a/src/_includes/styles/color-palette.scss b/src/_includes/styles/color-palette.scss index 34be85a..b8de298 100644 --- a/src/_includes/styles/color-palette.scss +++ b/src/_includes/styles/color-palette.scss @@ -1,6 +1,7 @@ /* Tokyo Night styles for highlight.js */ @import "https://minio.fosterhangdaan.com/public/releases/js/highlightjs/11.10.0/styles/tokyo-night-dark.css"; -@import "https://minio.fosterhangdaan.com/public/releases/js/highlightjs/11.10.0/styles/tokyo-night-light.css" (prefers-color-scheme: light); +@import "https://minio.fosterhangdaan.com/public/releases/js/highlightjs/11.10.0/styles/tokyo-night-light.css" + (prefers-color-scheme: light); /* Tokyo night color palette */ :root { @@ -23,24 +24,48 @@ :root { --tn-dark--16: #414868; --tn-dark--17: #24283b; --tn-dark--18: #1a1b26; - --tn-dark--filter-01: invert(67%) sepia(81%) saturate(2461%) hue-rotate(306deg) brightness(102%) contrast(94%); - --tn-dark--filter-02: invert(89%) sepia(27%) saturate(6632%) hue-rotate(317deg) brightness(107%) contrast(101%); - --tn-dark--filter-03: invert(75%) sepia(29%) saturate(664%) hue-rotate(353deg) brightness(93%) contrast(88%); - --tn-dark--filter-04: invert(84%) sepia(24%) saturate(802%) hue-rotate(38deg) brightness(91%) contrast(85%); - --tn-dark--filter-05: invert(78%) sepia(48%) saturate(333%) hue-rotate(118deg) brightness(93%) contrast(91%); - --tn-dark--filter-06: invert(86%) sepia(15%) saturate(513%) hue-rotate(130deg) brightness(101%) contrast(104%); - --tn-dark--filter-07: invert(65%) sepia(54%) saturate(670%) hue-rotate(143deg) brightness(95%) contrast(83%); - --tn-dark--filter-08: invert(71%) sepia(55%) saturate(771%) hue-rotate(177deg) brightness(106%) contrast(101%); - --tn-dark--filter-09: invert(61%) sepia(12%) saturate(1879%) hue-rotate(184deg) brightness(102%) contrast(94%); - --tn-dark--filter-10: invert(78%) sepia(35%) saturate(4827%) hue-rotate(207deg) brightness(101%) contrast(94%); - --tn-dark--filter-11: invert(79%) sepia(11%) saturate(1033%) hue-rotate(195deg) brightness(103%) contrast(92%); - --tn-dark--filter-12: invert(79%) sepia(20%) saturate(404%) hue-rotate(193deg) brightness(87%) contrast(92%); - --tn-dark--filter-13: invert(78%) sepia(9%) saturate(1774%) hue-rotate(194deg) brightness(87%) contrast(83%); - --tn-dark--filter-14: invert(88%) sepia(13%) saturate(136%) hue-rotate(352deg) brightness(94%) contrast(83%); - --tn-dark--filter-15: invert(38%) sepia(9%) saturate(1910%) hue-rotate(192deg) brightness(94%) contrast(87%); - --tn-dark--filter-16: invert(25%) sepia(12%) saturate(1580%) hue-rotate(192deg) brightness(99%) contrast(86%); - --tn-dark--filter-17: invert(12%) sepia(8%) saturate(2849%) hue-rotate(192deg) brightness(96%) contrast(89%); - --tn-dark--filter-18: invert(7%) sepia(27%) saturate(776%) hue-rotate(197deg) brightness(95%) contrast(92%); + --tn-dark--filter-01: invert(67%) sepia(81%) saturate(2461%) hue-rotate( + 306deg + ) brightness(102%) contrast(94%); + --tn-dark--filter-02: invert(89%) sepia(27%) saturate(6632%) hue-rotate( + 317deg + ) brightness(107%) contrast(101%); + --tn-dark--filter-03: invert(75%) sepia(29%) saturate(664%) hue-rotate(353deg) + brightness(93%) contrast(88%); + --tn-dark--filter-04: invert(84%) sepia(24%) saturate(802%) hue-rotate(38deg) + brightness(91%) contrast(85%); + --tn-dark--filter-05: invert(78%) sepia(48%) saturate(333%) hue-rotate(118deg) + brightness(93%) contrast(91%); + --tn-dark--filter-06: invert(86%) sepia(15%) saturate(513%) hue-rotate(130deg) + brightness(101%) contrast(104%); + --tn-dark--filter-07: invert(65%) sepia(54%) saturate(670%) hue-rotate(143deg) + brightness(95%) contrast(83%); + --tn-dark--filter-08: invert(71%) sepia(55%) saturate(771%) hue-rotate(177deg) + brightness(106%) contrast(101%); + --tn-dark--filter-09: invert(61%) sepia(12%) saturate(1879%) hue-rotate( + 184deg + ) brightness(102%) contrast(94%); + --tn-dark--filter-10: invert(78%) sepia(35%) saturate(4827%) hue-rotate( + 207deg + ) brightness(101%) contrast(94%); + --tn-dark--filter-11: invert(79%) sepia(11%) saturate(1033%) hue-rotate( + 195deg + ) brightness(103%) contrast(92%); + --tn-dark--filter-12: invert(79%) sepia(20%) saturate(404%) hue-rotate(193deg) + brightness(87%) contrast(92%); + --tn-dark--filter-13: invert(78%) sepia(9%) saturate(1774%) hue-rotate(194deg) + brightness(87%) contrast(83%); + --tn-dark--filter-14: invert(88%) sepia(13%) saturate(136%) hue-rotate(352deg) + brightness(94%) contrast(83%); + --tn-dark--filter-15: invert(38%) sepia(9%) saturate(1910%) hue-rotate(192deg) + brightness(94%) contrast(87%); + --tn-dark--filter-16: invert(25%) sepia(12%) saturate(1580%) hue-rotate( + 192deg + ) brightness(99%) contrast(86%); + --tn-dark--filter-17: invert(12%) sepia(8%) saturate(2849%) hue-rotate(192deg) + brightness(96%) contrast(89%); + --tn-dark--filter-18: invert(7%) sepia(27%) saturate(776%) hue-rotate(197deg) + brightness(95%) contrast(92%); --tn-dark--black-10: #6973a1; --tn-dark--black-20: #5d6795; --tn-dark--black-30: #545d86; @@ -67,10 +92,10 @@ :root { --tn-storm--background-40: #30354e; --tn-storm--background-50: var(--tn-dark--17); --tn-storm--background: var(--tn-storm--background-50); - --tn-night--background-10: #4E5173; + --tn-night--background-10: #4e5173; --tn-night--background-20: #414460; - --tn-night--background-30: #35374D; - --tn-night--background-40: #28293A; + --tn-night--background-30: #35374d; + --tn-night--background-40: #28293a; --tn-night--background-50: var(--tn-dark--18); --tn-night--background: var(--tn-night--background-50); --tn-night--foreground: var(--tn-dark--12); @@ -91,21 +116,49 @@ :root { --tn-light--13: #0f0f14; --tn-light--14: #9699a3; --tn-light--15: #d5d6db; - --tn-light--filter-01: invert(30%) sepia(13%) saturate(2258%) hue-rotate(299deg) brightness(94%) contrast(83%); - --tn-light--filter-02: invert(33%) sepia(15%) saturate(2400%) hue-rotate(338deg) brightness(99%) contrast(86%); - --tn-light--filter-03: invert(34%) sepia(27%) saturate(2987%) hue-rotate(15deg) brightness(92%) contrast(84%); - --tn-light--filter-04: invert(32%) sepia(10%) saturate(2061%) hue-rotate(46deg) brightness(91%) contrast(83%); - --tn-light--filter-05: invert(32%) sepia(51%) saturate(367%) hue-rotate(122deg) brightness(91%) contrast(88%); - --tn-light--filter-06: invert(28%) sepia(100%) saturate(369%) hue-rotate(141deg) brightness(95%) contrast(92%); - --tn-light--filter-07: invert(17%) sepia(95%) saturate(1240%) hue-rotate(178deg) brightness(96%) contrast(88%); - --tn-light--filter-08: invert(27%) sepia(58%) saturate(655%) hue-rotate(179deg) brightness(93%) contrast(84%); - --tn-light--filter-09: invert(28%) sepia(11%) saturate(2096%) hue-rotate(219deg) brightness(96%) contrast(82%); - --tn-light--filter-10: invert(23%) sepia(11%) saturate(1791%) hue-rotate(191deg) brightness(88%) contrast(92%); - --tn-light--filter-11: invert(36%) sepia(7%) saturate(1186%) hue-rotate(193deg) brightness(92%) contrast(89%); - --tn-light--filter-12: invert(29%) sepia(53%) saturate(348%) hue-rotate(357deg) brightness(96%) contrast(94%); - --tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%); - --tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%); - --tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%); + --tn-light--filter-01: invert(30%) sepia(13%) saturate(2258%) hue-rotate( + 299deg + ) brightness(94%) contrast(83%); + --tn-light--filter-02: invert(33%) sepia(15%) saturate(2400%) hue-rotate( + 338deg + ) brightness(99%) contrast(86%); + --tn-light--filter-03: invert(34%) sepia(27%) saturate(2987%) hue-rotate( + 15deg + ) brightness(92%) contrast(84%); + --tn-light--filter-04: invert(32%) sepia(10%) saturate(2061%) hue-rotate( + 46deg + ) brightness(91%) contrast(83%); + --tn-light--filter-05: invert(32%) sepia(51%) saturate(367%) hue-rotate( + 122deg + ) brightness(91%) contrast(88%); + --tn-light--filter-06: invert(28%) sepia(100%) saturate(369%) hue-rotate( + 141deg + ) brightness(95%) contrast(92%); + --tn-light--filter-07: invert(17%) sepia(95%) saturate(1240%) hue-rotate( + 178deg + ) brightness(96%) contrast(88%); + --tn-light--filter-08: invert(27%) sepia(58%) saturate(655%) hue-rotate( + 179deg + ) brightness(93%) contrast(84%); + --tn-light--filter-09: invert(28%) sepia(11%) saturate(2096%) hue-rotate( + 219deg + ) brightness(96%) contrast(82%); + --tn-light--filter-10: invert(23%) sepia(11%) saturate(1791%) hue-rotate( + 191deg + ) brightness(88%) contrast(92%); + --tn-light--filter-11: invert(36%) sepia(7%) saturate(1186%) hue-rotate( + 193deg + ) brightness(92%) contrast(89%); + --tn-light--filter-12: invert(29%) sepia(53%) saturate(348%) hue-rotate( + 357deg + ) brightness(96%) contrast(94%); + --tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) + brightness(93%) contrast(94%); + --tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate( + 189deg + ) brightness(92%) contrast(87%); + --tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) + brightness(92%) contrast(90%); --tn-light--background-10: #e1e2e6; --tn-light--background-20: #dfdfe3; --tn-light--background-30: #dcdce1; diff --git a/src/_includes/styles/components/header.scss b/src/_includes/styles/components/header.scss index 41b1c16..af75ba0 100644 --- a/src/_includes/styles/components/header.scss +++ b/src/_includes/styles/components/header.scss @@ -6,7 +6,11 @@ .page-header { text-align: center; h1 { margin: 0; - background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue)); + background: -webkit-linear-gradient( + 45deg, + var(--color-red), + var(--color-blue) + ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; diff --git a/src/_includes/styles/fonts.scss b/src/_includes/styles/fonts.scss index 2142c2f..4812c35 100644 --- a/src/_includes/styles/fonts.scss +++ b/src/_includes/styles/fonts.scss @@ -1,48 +1,58 @@ @font-face { - font-family: 'Mona Sans'; + font-family: "Mona Sans"; src: - url('https://minio.fosterhangdaan.com/public/fonts/mona-sans/1.0.1/MonaSans%5Bslnt,wdth,wght%5D.woff2') format('woff2 supports variations'), - url('https://minio.fosterhangdaan.com/public/fonts/mona-sans/1.0.1/MonaSans%5Bslnt,wdth,wght%5D.woff2') format('woff2-variations'); + url("https://minio.fosterhangdaan.com/public/fonts/mona-sans/1.0.1/MonaSans%5Bslnt,wdth,wght%5D.woff2") + format("woff2 supports variations"), + url("https://minio.fosterhangdaan.com/public/fonts/mona-sans/1.0.1/MonaSans%5Bslnt,wdth,wght%5D.woff2") + format("woff2-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; } @font-face { - font-family: 'Hubot Sans'; + font-family: "Hubot Sans"; src: - url('https://minio.fosterhangdaan.com/public/fonts/hubot-sans/1.0.1/HubotSans%5Bslnt,wdth,wght%5D.woff2') format('woff2 supports variations'), - url('https://minio.fosterhangdaan.com/public/fonts/hubot-sans/1.0.1/HubotSans%5Bslnt,wdth,wght%5D.woff2') format('woff2-variations'); + url("https://minio.fosterhangdaan.com/public/fonts/hubot-sans/1.0.1/HubotSans%5Bslnt,wdth,wght%5D.woff2") + format("woff2 supports variations"), + url("https://minio.fosterhangdaan.com/public/fonts/hubot-sans/1.0.1/HubotSans%5Bslnt,wdth,wght%5D.woff2") + format("woff2-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; } @font-face { - font-family: 'Monaspace Neon'; + font-family: "Monaspace Neon"; src: - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceNeonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2 supports variations'), - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceNeonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2-variations'); + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceNeonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2 supports variations"), + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceNeonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2-variations"); font-weight: 200 800; font-stretch: 100% 125%; font-display: swap; } @font-face { - font-family: 'Monaspace Radon'; + font-family: "Monaspace Radon"; src: - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceRadonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2 supports variations'), - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceRadonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2-variations'); + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceRadonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2 supports variations"), + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceRadonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2-variations"); font-weight: 200 800; font-stretch: 100% 125%; font-display: swap; } @font-face { - font-family: 'Monaspace Xenon'; + font-family: "Monaspace Xenon"; src: - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceXenonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2 supports variations'), - url('https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceXenonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2-variations'); + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceXenonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2 supports variations"), + url("https://minio.fosterhangdaan.com/public/fonts/monaspace/1.101/MonaspaceXenonVarVF%5Bwght,wdth,slnt%5D.woff2") + format("woff2-variations"); font-weight: 200 800; font-stretch: 100% 125%; font-display: swap; diff --git a/src/_includes/styles/normalize.scss b/src/_includes/styles/normalize.scss index 192eb9c..bb6e2a7 100644 --- a/src/_includes/styles/normalize.scss +++ b/src/_includes/styles/normalize.scss @@ -174,7 +174,8 @@ textarea { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -184,7 +185,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } diff --git a/src/_includes/styles/variables.scss b/src/_includes/styles/variables.scss index a8022ff..abb1907 100644 --- a/src/_includes/styles/variables.scss +++ b/src/_includes/styles/variables.scss @@ -32,8 +32,10 @@ :root { --page--max-width: 48rem; /* Fonts */ - --font--sans-serif: "Mona Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif; - --font--sans-serif-alt: "Hubot Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif; + --font--sans-serif: + "Mona Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif; + --font--sans-serif-alt: + "Hubot Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif; --font--mono: "Monaspace Neon", monospace; --font--mono--code-comments: "Monaspace Radon", monospace; --font--mono--code-docstrings: "Monaspace Xenon", monospace;