diff options
Diffstat (limited to '')
| -rw-r--r-- | css/default.scss | 253 | ||||
| -rw-r--r-- | css/fonts.scss | 0 | ||||
| -rw-r--r-- | css/syntax.scss (renamed from css/syntax.css) | 2 | ||||
| -rw-r--r-- | flake.nix | 5 | ||||
| -rw-r--r-- | index.html | 33 | ||||
| -rw-r--r-- | pages/playlists.html | 6 | ||||
| -rw-r--r-- | posts/2025-06-20-vr-plus-nixos-plus-nvidia.md | 1 | ||||
| -rw-r--r-- | site.hs | 33 | ||||
| -rw-r--r-- | skiletro.cabal | 2 | ||||
| -rw-r--r-- | templates/default.html | 139 | ||||
| -rw-r--r-- | templates/post.html | 6 |
11 files changed, 231 insertions, 249 deletions
diff --git a/css/default.scss b/css/default.scss index 642ca65..5fd653f 100644 --- a/css/default.scss +++ b/css/default.scss @@ -1,36 +1,25 @@ -@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); - -@mixin for-phone-only { - @media (max-width: 499px) { - @content; - } -} - -@mixin for-desktop-up { - @media (min-width: 1200px) { - @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); +@import "syntax"; + :root { - font-size: 16px; + font-size: 16px; // acts as a sort of scale because everything uses rem. } * { box-sizing: border-box; transition: 0.1s ease-in-out; - // outline: 1px solid rgba(255, 0, 0, 0.2); + /* outline: 1px solid rgba(255, 1, 0, 0.2); */ + padding: 0; + margin: 0; } body { display: flex; flex-direction: column; - font-family: "Space Grotesk", sans-serif; align-items: center; $opacity: 25%; background-color: black; @@ -45,74 +34,23 @@ body { background-attachment: fixed; color: white; color: $foreground-color; - padding: 4rem 1rem 1rem 1rem; - margin: 0; + $gaps: 1rem; + padding: $gaps; + padding-top: 5rem; + gap: $gaps; - // 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; - } -} - -content { - display: flex; - width: 100%; - max-width: 60rem; - flex-direction: row-reverse; - - & > * { - background-color: $background-color; - outline: 2px solid $background-color; - outline-offset: 2px; - - @include for-phone-only { - outline: 0px; - } - } - - & > nav { - padding: 1.25rem 0.75rem; - } - - & > article { - flex: auto; - padding: 1.25rem; - height: fit-content; - } - - @include for-phone-only { + &>* { + display: flex; flex-direction: column; - } -} - -footer { - position: fixed; - bottom: 0px; - opacity: 0.7; - font-size: 0.9rem; - padding: 0.5rem; - width: 100%; - text-align: right; - color: white; - mix-blend-mode: overlay; - pointer-events: none; - - p { - padding: 0; - margin: 0; - } - - a { - color: inherit; - pointer-events: all; - } - - @include for-phone-only { - display: none; + gap: 1rem; + background-color: $background-color; + width: 100%; + max-width: 50rem; + padding: 1.5rem 2.5rem; + outline: 0.2rem solid $background-color; + outline-offset: 0.2rem; } } @@ -120,12 +58,14 @@ footer { // This whole navbar section needs refactoring, because I'm already confused by it nav { display: flex; - position: sticky; - top: 4rem; + width: unset; + padding: 1rem; + position: fixed; + top: 1rem; // TODO: actually have this floating next to the side like the old site + right: 1rem; flex-direction: column; align-items: center; gap: 1rem; - margin-left: 1rem; height: fit-content; svg { @@ -147,36 +87,6 @@ nav { 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; - flex-direction: row; - - a { - writing-mode: horizontal-tb; - - &:first-child { - margin-right: auto; - } - } - - span { - display: none; - } - - hr { - display: none; - } - - img { - display: none; - } - } } // --- STANDARD ELEMENTS --- @@ -199,62 +109,48 @@ p { } ul { + display: flex; + flex-direction: column; + gap: 0.5rem; list-style-type: none; margin: 0; padding: 0; - & > li:before { - content: "-"; + &>li:before { + content: "~"; color: oklch(82.67% 0.087 180); padding-left: 0.5rem; padding-right: 0.25rem; } } -h1 { - font-size: 1.25rem; -} - @for $i from 1 through 6 { h#{$i} { @include std-style; padding-top: 0.5rem; - font-size: 1rem; &:before { - $stars: ""; + $hashes: ""; @for $_ from 1 through $i { - $stars: $stars + "*"; + $hashes: $hashes + "#"; } - content: "#{$stars} "; - color: oklch(82.67% 0.087 #{280 + ($i - 1) * 20}); - opacity: 0.75; + content: "#{$hashes} "; + color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40}); } } } -img { - user-select: none; - pointer-events: none; -} - -code { - font-family: "Space Mono", monospace; - - @include for-phone-only { - word-break: break-all; +@for $i from 1 through 15 { + ul>li:nth-child(n+#{$i}):before { + color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80}); } } -div.sourceCode { - padding: 1rem; -} - -div.sourceCode, -code { - background-color: oklch(from $background-color calc(l - 0.05) c h); +img { + user-select: none; + pointer-events: none; } hr { @@ -271,3 +167,74 @@ hr { align-items: center; gap: 15px; } + +// FONTS!!!!!!!!!!!!!!!!! TODO: split up +@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap"); + +* { + font-family: "Atkinson Hyperlegible Next", sans-serif; + font-optical-sizing: auto; + text-transform: lowercase; +} + + +p, +ul, +span { + text-align: justify; + font-size: 1.25rem; +} + +code { + font-family: "Atkinson Hyperlegible Mono", monospace; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 1.75rem; +} + +address { + opacity: 0.5; + text-align: right; + width: auto; + margin-top: -2.1lh; // TODO: i can fix this when it becomes a problem :) + margin-bottom: 0.5rem; // SO HACKY +} + +footer { + gap: 0; +} + +footer>* { + text-align: center; + font-size: 1rem; + opacity: 0.5; +} + +// SYNTAX!!!!!!! +div.sourceCode { + // prettier-ignore + background-image: + url("/images/noise.png"), + radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent), + radial-gradient(circle at bottom left, #27577D, transparent), + radial-gradient(circle at top right, #952EA4 0%, transparent), + radial-gradient(circle at center right, #6949A5 0%, transparent), + radial-gradient(circle at top center, #336BA0 0%, transparent); + background-attachment: fixed; + padding: 0.2rem; + overflow: hidden; + + &>* { + background-color: $background-color; + background-attachment: fixed; + padding: 1.2rem; + overflow: scroll; + } +}
\ No newline at end of file diff --git a/css/fonts.scss b/css/fonts.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/css/fonts.scss diff --git a/css/syntax.css b/css/syntax.scss index 48e8146..42be310 100644 --- a/css/syntax.css +++ b/css/syntax.scss @@ -241,5 +241,3 @@ code span.wa { font-weight: bold; font-style: italic; } - -/* Warning */ @@ -5,10 +5,7 @@ haskell-flake.url = "github:srid/haskell-flake"; # https://community.flake.parts/haskell-flake treefmt-nix.url = "github:numtide/treefmt-nix"; }; - outputs = inputs @ { - flake-parts, - ... - }: + outputs = inputs @ {flake-parts, ...}: flake-parts.lib.mkFlake {inherit inputs;} { systems = [ "x86_64-linux" @@ -1,8 +1,8 @@ --- -title: Hi! I'm Jamie! +title: Hi! --- -<hr /> +<h1>Hi! I'm Jamie!</h1> <p> I also go by skiletro, or just simply skil, and use they/them pronouns. I'm @@ -15,18 +15,21 @@ title: Hi! I'm Jamie! <h2>Projects</h2> <ul> <li> - <a href="https://github.com/skiletro/nixfiles">"nixfiles"</a> - - A Nix flake containing all of my system configuration. I've put a - <em>lot</em> of effort into making it look good too. + <a href="https://codeberg.org/skil/erebus">erebus</a> + - A Nix flake containing all of my system configuration. It features + numerous custom packages, configurations for multiple systems, and secrets + handling, just to name a few features. I've put a <em>lot</em> of effort + into considering both form and function. Before this, I worked on another + flake called <a href="https://github.com/skiletro/nixfiles">nixfiles</a>, + which has gained more attention over the years. </li> <li> - <a href="https://github.com/skiletro/nur-repo" - >My Nix User Repository repo</a + <a href="http://github.com/skiletro/cave-360-video-converter/" + >cave 360 video converter</a > - - Not a lot going on in here; mostly containing fonts and other small - programs. Instead of restricting the packages to my flake specifically, I - decided it would be more useful to publish them for others to use under the - NUR! + - Written in Go as part of my software dev internship at MMU, this internal + tool converts panoramic 360 videos into a format that can be used as a + background for the university's cave facility. </li> <li> <a href="https://github.com/skiletro/Simple2FA">Simple2FA</a> - Written as @@ -58,9 +61,11 @@ title: Hi! I'm Jamie! </ul> <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>)! I don't bite. +<p> + Feel free to contact me on + <a href="https://matrix.to/#/@jvmi:matrix.org">matrix</a>, or through social + media. I don't bite! +</p> <hr /> diff --git a/pages/playlists.html b/pages/playlists.html index b11cfad..8437667 100644 --- a/pages/playlists.html +++ b/pages/playlists.html @@ -1,6 +1,4 @@ ---- -title: Playlists ---- +<h1>Playlists</h1> <h2>Consider Yourself Drunk</h2> <a @@ -44,7 +42,7 @@ title: Playlists href="https://open.spotify.com/playlist/7qKp0piqkOPEpRwGTN6ckO" > <img - src="https://i2o.scdn.co/image/ab67706c0000cfa38bfa12b132704e6fb5acad07" + src="https://image-cdn-fa.spotifycdn.com/image/ab67706c0000d72c8bfa12b132704e6fb5acad07" height="8.5em" /> DnB, Jump-up, all that good stuff diff --git a/posts/2025-06-20-vr-plus-nixos-plus-nvidia.md b/posts/2025-06-20-vr-plus-nixos-plus-nvidia.md index a04486e..3c6b90e 100644 --- a/posts/2025-06-20-vr-plus-nixos-plus-nvidia.md +++ b/posts/2025-06-20-vr-plus-nixos-plus-nvidia.md @@ -1,6 +1,5 @@ --- title: VR + NixOS + Nvidia -modified: June 21, 2025 --- For the longest time, getting VR working nicely with Linux (and especially NixOS) was a monumental task. @@ -1,12 +1,15 @@ -------------------------------------------------------------------------------- {-# LANGUAGE OverloadedStrings #-} +import Control.Exception (SomeException, catch) import Data.List (isInfixOf, sortBy) import Data.Monoid (mappend) import Hakyll import Hakyll.Web.Sass (sassCompiler) +import System.Environment import System.FilePath.Posix (splitFileName, takeBaseName, takeDirectory, (</>)) +import System.Process -------------------------------------------------------------------------------- main :: IO () @@ -28,7 +31,7 @@ main = hakyll $ do route idRoute compile $ pandocCompiler - >>= loadAndApplyTemplate "templates/default.html" defaultContext + >>= loadAndApplyTemplate "templates/default.html" defaultCtx >>= relativizeUrls >>= removeIndexHtml @@ -36,7 +39,7 @@ main = hakyll $ do route prettyRoute compile $ pandocCompiler - >>= loadAndApplyTemplate "templates/default.html" defaultContext + >>= loadAndApplyTemplate "templates/default.html" defaultCtx >>= relativizeUrls >>= removeIndexHtml @@ -57,7 +60,7 @@ main = hakyll $ do let archiveCtx = listField "posts" postCtx (return posts) `mappend` constField "title" "Archives" - `mappend` defaultContext + `mappend` defaultCtx makeItem "" >>= loadAndApplyTemplate "templates/archive.html" archiveCtx @@ -89,7 +92,7 @@ main = hakyll $ do posts <- recentFirst =<< loadAll "posts/*" let indexCtx = listField "posts" postCtx (return posts) - `mappend` defaultContext + `mappend` defaultCtx getResourceBody >>= applyAsTemplate indexCtx @@ -132,12 +135,32 @@ removeIndexHtml item = return $ fmap (withUrls removeIndexStr) item -------------------------------------------------------------------------------- +defaultCtx :: Context String +defaultCtx = gitRevisionCtx <> defaultContext + postCtx :: Context String -postCtx = hDateCtx <> cDateCtx <> defaultContext +postCtx = hDateCtx <> cDateCtx <> defaultCtx hDateCtx :: Context String hDateCtx = dateField "hdate" "%B %e, %Y" cDateCtx :: Context String cDateCtx = dateField "cdate" "%Y-%m-%d" + +gitRevisionField :: String -> Context String +gitRevisionField = flip field (const gitRevision) + +-- Compiler which attempts to find the current git revision. This is done by +-- first checking the "REVISION" environment variable and, if this fails, +-- running the command "git rev-parse HEAD". +gitRevision :: Compiler String +gitRevision = do + rev <- unsafeCompiler (getEnv "REVISION" `catch` (\e -> return (e :: SomeException) >> return "")) + if rev == "" + then unixFilter "git" ["rev-parse", "--short=7", "HEAD"] "" + else return rev + +gitRevisionCtx :: Context String +gitRevisionCtx = gitRevisionField "revision" + -------------------------------------------------------------------------------- diff --git a/skiletro.cabal b/skiletro.cabal index 2eb185b..e4c59af 100644 --- a/skiletro.cabal +++ b/skiletro.cabal @@ -9,5 +9,7 @@ executable site , filepath , hakyll == 4.16.* , hakyll-sass == 0.2.* + , template-haskell == 2.21.* + , process == 1.6.25.* ghc-options: -threaded -rtsopts -with-rtsopts=-N default-language: Haskell2010 diff --git a/templates/default.html b/templates/default.html index 9a9c347..bd94760 100644 --- a/templates/default.html +++ b/templates/default.html @@ -2,11 +2,10 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <title>$title$ | Skiletro</title> + <title>$title$ ~ Skiletro</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="/css/default.css" /> - <link rel="stylesheet" type="text/css" href="/css/syntax.css" /> <link rel="icon" href="/images/favicon.ico" /> <meta name="theme-color" content="#9141ac" /> <meta property="og:title" content="" /> @@ -19,79 +18,73 @@ <meta name="twitter:image" content="" /> </head> <body> - <content> - <nav> - <a href="/" - ><svg class="logo" width="25" height="25" viewBox="0 0 980.4 1e3"> - <path - d="M235.84 924.57a498 498 0 0061.81 32.76l-8.3-72.08z" - transform="translate(-9.8)" - ></path> - <path - d="M297.65 957.34a498 498 0 0065.1 23.58l-15.94-80z" - transform="translate(-9.8)" - ></path> - <path - d="M106.47 808.4l33.65-81C87.2 708.58 52.2 688 30.46 672.18A498.84 498.84.0 00106.47 808.4z" - transform="translate(-9.8)" - ></path> - <path - d="M362.76 980.92a498.66 498.66.0 0070.37 14.63L407.74 919.2z" - transform="translate(-9.8)" - ></path> - <path - d="M433.14 995.55A505 505 0 005e2 1e3l-33.06-76.45z" - transform="translate(-9.8)" - ></path> - <path - d="M164.33 735.49h0l23.17 71.42 28.1-57.41 32 57.41 32.54-44.58 37.1 56.76 30-47.88 19.61 51.36L405 775.87l25.42 49.32 38.3-46.87L5e2 830.41l31.32-52.09 38.3 46.87L595 775.87l38.13 46.7 19.61-51.36 30 47.88 37.1-56.76 32.54 44.58 32-57.41 28.09 57.41 23.17-71.42h0C759.29 759.35 650.92 778.6 5e2 778.6s-259.29-19.25-335.67-43.11z" - transform="translate(-9.8)" - ></path> - <path - d="M702.35 957.33a498 498 0 0061.81-32.76l-53.51-39.32z" - transform="translate(-9.8)" - ></path> - <path - d="M637.25 980.92a498 498 0 0065.1-23.58l-49.16-56.42z" - transform="translate(-9.8)" - ></path> - <path - d="M893.53 808.4a498.84 498.84.0 0076-136.22C947.8 688 912.8 708.58 859.88 727.41z" - transform="translate(-9.8)" - ></path> - <path - d="M566.87 995.55a498.66 498.66.0 0070.37-14.63l-45-61.72z" - transform="translate(-9.8)" - ></path> - <path - d="M5e2 1e3a505 505 0 0066.86-4.45l-33.8-72z" - transform="translate(-9.8)" - ></path> - <path - d="M526.1 376.88c25.15-186.25 147.42-287.57 199.81-323a500.87 500.87.0 00-451.82.0c52.39 35.47 174.66 136.79 199.81 323C506.11 615.39 290 737.32 9.8 598.89q4.09 20.4 9.83 40.16C64.44 675.61 195.83 753.8 5e2 753.8s435.56-78.19 480.37-114.75q5.71-19.75 9.83-40.16C710 737.32 493.89 615.39 526.1 376.88z" - transform="translate(-9.8)" - ></path></svg - ></a> - <hr /> - <a href="/">Home</a> - <a href="/archive">Archive</a> - <a href="/pages/playlists">Playlists</a> - <hr /> - <img src="/images/nonbinary-flag.svg" width="20rem" height="20rem" /> - </nav> - <article> - <h1>$title$</h1> - $body$ - </article> - </content> + <nav> + <a href="/" + ><svg class="logo" width="25" height="25" viewBox="0 0 980.4 1e3"> + <path + d="M235.84 924.57a498 498 0 0061.81 32.76l-8.3-72.08z" + transform="translate(-9.8)" + ></path> + <path + d="M297.65 957.34a498 498 0 0065.1 23.58l-15.94-80z" + transform="translate(-9.8)" + ></path> + <path + d="M106.47 808.4l33.65-81C87.2 708.58 52.2 688 30.46 672.18A498.84 498.84.0 00106.47 808.4z" + transform="translate(-9.8)" + ></path> + <path + d="M362.76 980.92a498.66 498.66.0 0070.37 14.63L407.74 919.2z" + transform="translate(-9.8)" + ></path> + <path + d="M433.14 995.55A505 505 0 005e2 1e3l-33.06-76.45z" + transform="translate(-9.8)" + ></path> + <path + d="M164.33 735.49h0l23.17 71.42 28.1-57.41 32 57.41 32.54-44.58 37.1 56.76 30-47.88 19.61 51.36L405 775.87l25.42 49.32 38.3-46.87L5e2 830.41l31.32-52.09 38.3 46.87L595 775.87l38.13 46.7 19.61-51.36 30 47.88 37.1-56.76 32.54 44.58 32-57.41 28.09 57.41 23.17-71.42h0C759.29 759.35 650.92 778.6 5e2 778.6s-259.29-19.25-335.67-43.11z" + transform="translate(-9.8)" + ></path> + <path + d="M702.35 957.33a498 498 0 0061.81-32.76l-53.51-39.32z" + transform="translate(-9.8)" + ></path> + <path + d="M637.25 980.92a498 498 0 0065.1-23.58l-49.16-56.42z" + transform="translate(-9.8)" + ></path> + <path + d="M893.53 808.4a498.84 498.84.0 0076-136.22C947.8 688 912.8 708.58 859.88 727.41z" + transform="translate(-9.8)" + ></path> + <path + d="M566.87 995.55a498.66 498.66.0 0070.37-14.63l-45-61.72z" + transform="translate(-9.8)" + ></path> + <path + d="M5e2 1e3a505 505 0 0066.86-4.45l-33.8-72z" + transform="translate(-9.8)" + ></path> + <path + d="M526.1 376.88c25.15-186.25 147.42-287.57 199.81-323a500.87 500.87.0 00-451.82.0c52.39 35.47 174.66 136.79 199.81 323C506.11 615.39 290 737.32 9.8 598.89q4.09 20.4 9.83 40.16C64.44 675.61 195.83 753.8 5e2 753.8s435.56-78.19 480.37-114.75q5.71-19.75 9.83-40.16C710 737.32 493.89 615.39 526.1 376.88z" + transform="translate(-9.8)" + ></path></svg + ></a> + <hr /> + <a href="/">Home</a> + <a href="/archive">Archive</a> + <a href="/pages/playlists">Playlists</a> + <hr /> + <img src="/images/nonbinary-flag.svg" width="20rem" height="20rem" /> + </nav> + <main>$body$</main> <footer> - <p>branding © 2016-2024 skiletro, all rights reserved.</p> - <p>site written with ❤ with haskell, hakyll, and sass.</p> + <p>Branding © 2016-2025 Skiletro, All Rights Reserved</p> <p> - also, i'm - <a href="https://github.com/skiletro/skiletro.github.io" - >open-source!</a - > + Made with ❤ with + <a href="https://jaspervdj.be/hakyll/">Hakyll</a> + - commit + <a href="https://github.com/skiletro/website">$revision$</a> </p> </footer> </body> diff --git a/templates/post.html b/templates/post.html index cfcd59b..27f17da 100644 --- a/templates/post.html +++ b/templates/post.html @@ -1,7 +1,7 @@ +<h1>$title$</h1> <address class="author"> - Posted on <time pubdate datetime="$cdate$" title="$hdate$">$hdate$</time> by - <a rel="author" href="/">Skiletro</a>. Last modified $modified$. + Posted on + <time pubdate datetime="$cdate$" title="$hdate$">$hdate$</time> </address> <!-- prettier-ignore --> -<hr /> $body$ |