diff options
| -rw-r--r-- | css/default.scss | 78 | ||||
| -rw-r--r-- | index.html | 12 |
2 files changed, 57 insertions, 33 deletions
diff --git a/css/default.scss b/css/default.scss index 580278e..a77bb95 100644 --- a/css/default.scss +++ b/css/default.scss @@ -1,19 +1,7 @@ @import "https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+2:wght@100..900&display=swap"; @mixin for-phone-only { - @media (max-width: 599px) { - @content; - } -} - -@mixin for-tablet-portrait-up { - @media (min-width: 600px) { - @content; - } -} - -@mixin for-tablet-landscape-up { - @media (min-width: 900px) { + @media (max-width: 499px) { @content; } } @@ -24,19 +12,13 @@ } } -@mixin for-big-desktop-up { - @media (min-width: 1800px) { - @content; - } -} - $background-color: oklch(22.49% 0.008 297.21); $foreground-color: oklch(98.51% 0 0); $primary-color: oklch(82.67% 0.096 307.5); $secondary-color: oklch(from $primary-color l c 240); :root { - font-size: 20px; + font-size: 16px; } * { @@ -66,6 +48,10 @@ body { padding: 4rem 1rem 1rem 1rem; margin: 0; + // Stops central content from shifting around when&if a scrollbar appears + width: 100vw; + overflow-x: hidden; + @include for-phone-only { padding: 0.25rem; flex-direction: row; @@ -80,8 +66,12 @@ content { & > * { background-color: $background-color; - outline: 0.1rem solid $background-color; - outline-offset: 0.1rem; + outline: 2px solid $background-color; + outline-offset: 2px; + + @include for-phone-only { + outline: 0px; + } } & > nav { @@ -103,7 +93,7 @@ footer { position: fixed; bottom: 0px; opacity: 0.7; - font-size: 0.75rem; + font-size: 0.9rem; padding: 0.5rem; width: 100%; text-align: right; @@ -128,6 +118,8 @@ footer { // This whole navbar section needs refactoring, because I'm already confused by it nav { display: flex; + position: sticky; + top: 4rem; flex-direction: column; align-items: center; gap: 1rem; @@ -150,12 +142,18 @@ nav { color: $foreground-color; } + hr { + width: 100%; + } + @include for-phone-only { + // TODO: i absolutely hate this: it feels extremely hacky. + top: 0.25rem; + margin-bottom: 0.4rem !important; + // end + z-index: 1; margin: 0; - margin-bottom: 0.75rem; flex-direction: row; - justify-content: space-between; - align-items: center; a { writing-mode: horizontal-tb; @@ -168,6 +166,14 @@ nav { span { display: none; } + + hr { + display: none; + } + + img { + display: none; + } } } @@ -234,11 +240,27 @@ img { code { font-family: "M PLUS 1 Code", monospace; + + @include for-phone-only { + word-break: break-all; + } +} + +div.sourceCode { + padding: 1rem; +} + +div.sourceCode, +code { + background-color: oklch(from $background-color calc(l - 0.05) c h); } hr { - color: oklch(from $foreground-color 0.45 c h); - width: 55%; + $color: oklch(from $foreground-color 0.45 c h); + // Not a single platform can decide which way to set the color of a `hr`. + background-color: $color; + color: $color; + border-color: $color; } .playlist { @@ -2,6 +2,8 @@ title: Hi! I'm Jamie! --- +<hr /> + <p> I also go by skiletro, or just simply skil, and use they/them pronouns. I'm interested in a whole range of things; most of which have some sort of @@ -55,14 +57,14 @@ title: Hi! I'm Jamie! <li>Figma</li> </ul> -<hr /> - -<h2>Thank you for visiting!</h2> +<h2>Contact Me</h2> If you need to contact me, feel free to do so through <a href="https://matrix.to/#/@jvmi:matrix.org">matrix</a>, or on Discord -(<code>jvmi</code>). +(<code>jvmi</code>)! I don't bite. + +<hr /> <h2>Posts</h2> $partial("templates/post-list.html")$ -<p>…or you can find more in the <a href="/archive.html">archives</a>.</p> +<p>…or you can find more in the <a href="/archive">archives</a>.</p> |