diff options
Diffstat (limited to '_sass')
| -rw-r--r-- | _sass/_dracula.scss | 167 | ||||
| -rw-r--r-- | _sass/_highlight.scss | 13 | ||||
| -rw-r--r-- | _sass/_reset.scss | 39 | ||||
| -rw-r--r-- | _sass/main.scss | 178 |
4 files changed, 397 insertions, 0 deletions
diff --git a/_sass/_dracula.scss b/_sass/_dracula.scss new file mode 100644 index 0000000..c51ccb1 --- /dev/null +++ b/_sass/_dracula.scss @@ -0,0 +1,167 @@ +/* Dracula Theme v1.2.5 + * + * https://github.com/zenorocha/dracula-theme + * + * Copyright 2016, All rights reserved + * + * Code licensed under the MIT license + * http://zenorocha.mit-license.org + * + * @author Rob G <[email protected]> + * @author Chris Bracco <[email protected]> + * @author Zeno Rocha <[email protected]> + * @author Piruin Panichphol <[email protected]> + */ + +/* + * Variables + */ + +$dt-gray-dark: var(--color-neutral-900); // Background +$dt-gray: #44475a; // Current Line & Selection +$dt-gray-light: #f8f8f2; // Foreground +$dt-blue: #6272a4; // Comment +$dt-cyan: #8be9fd; +$dt-green: #50fa7b; +$dt-orange: #ffb86c; +$dt-pink: #ff79c6; +$dt-purple: #bd93f9; +$dt-red: #ff5555; +$dt-yellow: #f1fa8c; + +/* + * Styles + */ + +.highlight { + background: $dt-gray-dark; + color: $dt-gray-light; + + .hll, + .s, + .sa, + .sb, + .sc, + .dl, + .sd, + .s2, + .se, + .sh, + .si, + .sx, + .sr, + .s1, + .ss { + color: $dt-yellow; + } + + .go { + color: $dt-gray; + } + + .err, + .g, + .l, + .n, + .x, + .p, + .ge, + .gr, + .gh, + .gi, + .gp, + .gs, + .gu, + .gt, + .ld, + .no, + .nd, + .ni, + .ne, + .nn, + .nx, + .py, + .w, + .bp { + color: $dt-gray-light; + } + + .gh, + .gi, + .gu { + font-weight: bold; + } + + .ge { + text-decoration: underline; + } + + .bp { + font-style: italic; + } + + .c, + .ch, + .cm, + .cpf, + .c1, + .cs { + color: $dt-blue; + } + + .kd, + .kt, + .nb, + .nl, + .nv, + .vc, + .vg, + .vi, + .vm { + color: $dt-cyan; + } + + .kd, + .nb, + .nl, + .nv, + .vc, + .vg, + .vi, + .vm { + font-style: italic; + } + + .na, + .nc, + .nf, + .fm { + color: $dt-green; + } + + .k, + .o, + .cp, + .kc, + .kn, + .kp, + .kr, + .nt, + .ow { + color: $dt-pink; + } + + .m, + .mb, + .mf, + .mh, + .mi, + .mo, + .il { + color: $dt-purple; + } + + .gd { + color: $dt-red; + } +} diff --git a/_sass/_highlight.scss b/_sass/_highlight.scss new file mode 100644 index 0000000..27cbf1f --- /dev/null +++ b/_sass/_highlight.scss @@ -0,0 +1,13 @@ +.highlight { + margin-block-end: 1rem; + padding-inline: 1rem; + padding-block: 1rem; + font-size: 0.875rem; + border-radius: 0.5rem; +} + +.highlight pre { + overflow-x: auto; +} + +@import "./dracula"; diff --git a/_sass/_reset.scss b/_sass/_reset.scss new file mode 100644 index 0000000..1cf0654 --- /dev/null +++ b/_sass/_reset.scss @@ -0,0 +1,39 @@ +*, *::before, *::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; + } +} + +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; +} + +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +p { + text-wrap: pretty; +} + +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} diff --git a/_sass/main.scss b/_sass/main.scss new file mode 100644 index 0000000..69bf664 --- /dev/null +++ b/_sass/main.scss @@ -0,0 +1,178 @@ +:root { + --color-neutral-50: oklch(98.5% 0 0); + --color-neutral-100: oklch(97% 0 0); + --color-neutral-200: oklch(92.2% 0 0); + --color-neutral-300: oklch(87% 0 0); + --color-neutral-400: oklch(70.8% 0 0); + --color-neutral-500: oklch(55.6% 0 0); + --color-neutral-600: oklch(43.9% 0 0); + --color-neutral-700: oklch(37.1% 0 0); + --color-neutral-800: oklch(26.9% 0 0); + --color-neutral-900: oklch(20.5% 0 0); + --color-neutral-950: oklch(14.5% 0 0); + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-200: oklch(90.5% 0.093 164.15); + --color-emerald-300: oklch(84.5% 0.143 164.978); + --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-emerald-500: oklch(69.6% 0.17 162.48); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-emerald-700: oklch(50.8% 0.118 165.612); + --color-emerald-800: oklch(43.2% 0.095 166.913); + --color-emerald-900: oklch(37.8% 0.077 168.94); + --color-emerald-950: oklch(26.2% 0.051 172.552); +} + +@import "_reset.scss"; +@import "_highlight.scss"; + +body { + font-size: 1rem; + color: var(--color-neutral-200); + background-color: var(--color-neutral-950); +} + +.site-container { + position: relative; + display: grid; + grid-template-areas: + "." + "header" + "." + "main" + "." + "footer"; + grid-template-rows: 1.5rem auto 3rem 1fr 5rem auto; + grid-template-columns: minmax(0, 1fr); + font-family: 'Inter', sans-serif; +} + +.site-header { + grid-area: header; + display: flex; + flex-direction: column; + gap: 2rem; + padding-block: 1.5rem; + padding-inline: 1.5rem; +} + +.logo { + padding-block: 0.5rem; +} + +.logo a { + display: inline-block; + padding-block: 0.5rem; + transition: opacity 0.2s ease; +} + +.logo a:hover { + opacity: 0.8; +} + +.site-nav { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.nav-link { + color: var(--color-neutral-400); + text-decoration: none; + white-space: nowrap; + transition: color 0.2s ease; +} + +.nav-link:hover { + color: var(--color-neutral-200); +} + +.nav-link.active { + color: var(--color-neutral-50); + font-weight: 500; +} + +.site-main { + grid-area: main; + padding-inline: 1.5rem; +} + +.site-main p { + margin-block-end: 1.5rem; +} + +.site-main p:last-child { + margin-block-end: 0; +} + +.site-main ul { + list-style: disc; + margin-block-end: 1rem; +} + +.site-main li { + margin-block-end: 0.25rem; +} + +.site-main a { + color: var(--color-emerald-200); + text-decoration: underline; + text-underline-position: from-font; + transition: color 0.2s ease; +} + +.site-main a:hover { + color: var(--color-emerald-300); +} + +.site-main em { + font-style: italic; + color: var(--color-neutral-300); +} + +.site-main strong { + font-weight: 600; + color: var(--color-neutral-50); +} + +.site-footer { + grid-area: footer; + padding-inline: 1.5rem; + padding-block: 1.5rem; +} + +.site-footer p { + color: var(--color-neutral-500); +} + +@media (min-width: 48rem) { + .site-container { + grid-template-rows: 3rem auto 7rem 1fr 10rem auto; + } + + .site-header { + padding-block: 2rem; + padding-inline: 6rem; + gap: 3rem; + } + + .site-main { + padding-inline: 6rem; + } + + .site-footer { + padding-inline: 6rem; + padding-block: 2rem; + } + + .site-main { + max-width: 60rem; + } + + .site-nav { + flex-direction: row; + align-items: center; + gap: 1.5rem; + align-items: center; + } +} |