diff options
Diffstat (limited to '')
| -rw-r--r-- | css/default.scss | 231 | ||||
| -rw-r--r-- | index.html | 63 | ||||
| -rw-r--r-- | posts/2025-05-28-test.markdown | 23 | ||||
| -rw-r--r-- | templates/default.html | 107 |
4 files changed, 275 insertions, 149 deletions
diff --git a/css/default.scss b/css/default.scss index a163f7f..fff60ed 100644 --- a/css/default.scss +++ b/css/default.scss @@ -1,161 +1,148 @@ -html { - font-size: 62.5%; -} - -body { - font-size: 1.6rem; - color: #000; -} - -header { - border-bottom: 0.2rem solid #000; -} - -nav { - text-align: right; -} - -nav a { - font-size: 1.8rem; - font-weight: bold; - color: black; - text-decoration: none; - text-transform: uppercase; -} +@import "https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap"; -footer { - margin-top: 3rem; - padding: 1.2rem 0; - border-top: 0.2rem solid #000; - font-size: 1.2rem; - color: #555; -} +$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); -h1 { - font-size: 2.4rem; +:root { + font-size: 20px; } -h2 { - font-size: 2rem; +* { + box-sizing: border-box; + transition: 0.1s ease-in-out; + /* outline: 1px solid rgba(255, 0, 0, 0.2); */ } -article .header { - font-size: 1.4rem; - font-style: italic; - /* color: #555; */ - $myColor: red; - color: $myColor; +body { + display: flex; + flex-direction: column; + font-family: "M PLUS 2", sans-serif; + align-items: center; + $opacity: 25%; + background-color: black; + background: $background-color + linear-gradient( + 135deg, + oklch(from $primary-color l c h / $opacity), + oklch(from $secondary-color l c h / $opacity) 100% + ); + color: white; + color: $foreground-color; + padding: 4rem 0 0 0; + margin: 0; + width: 100vw; + height: 100vh; } -.logo a { - font-weight: bold; - color: #000; - text-decoration: none; -} +content { + display: flex; + max-width: 60rem; + flex-direction: row-reverse; -@media (max-width: 319px) { - body { - width: 90%; - margin: 0; - padding: 0 5%; + & > * { + background-color: $background-color; + outline: 0.1rem solid $background-color; + outline-offset: 0.1rem; } - header { - margin: 4.2rem 0; + & > nav { + padding: 1.25rem 0.75rem; } - nav { - margin: 0 auto 3rem; - text-align: center; - } - - footer { - text-align: center; + & > article { + width: 100vw; + padding: 1.25rem; } +} - .logo { - text-align: center; - margin: 1rem auto 3rem; - } +footer { + position: fixed; + bottom: 0px; + color: $background-color; + opacity: 0.7; + font-size: 0.75rem; + padding: 0.5rem; + width: 100%; + text-align: right; - .logo a { - font-size: 2.4rem; + p { + padding: 0; + margin: 0; } - nav a { - display: block; - line-height: 1.6; + a { + color: inherit; } } -@media (min-width: 320px) { - body { - width: 90%; - margin: 0; - padding: 0 5%; - } - - header { - margin: 4.2rem 0; - } +/* --- NAVIGATION BAR --- */ +/* This whole navbar section needs refactoring, because I'm already confused by it */ +nav { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + margin-left: 1rem; + height: fit-content; - nav { - margin: 0 auto 3rem; - text-align: center; + svg { + fill: $foreground-color; + $size: 2rem; + width: $size; + height: $size; } - footer { - text-align: center; + a { + display: flex; + writing-mode: vertical-rl; + text-orientation: sideways; + text-decoration: none; + justify-content: center; + color: $foreground-color; } - .logo { - text-align: center; - margin: 1rem auto 3rem; + span { + color: oklch(from $foreground-color 0.45 c h); } +} - .logo a { - font-size: 2.4rem; - } +/* --- STANDARD ELEMENTS --- */ +a { + color: mediumpurple; + color: $primary-color; - nav a { - display: inline; - margin: 0 0.6rem; + &:hover { + filter: brightness(0.75); } } -@media (min-width: 640px) { - body { - width: 60rem; - margin: 0 auto; - padding: 0; - } - - header { - margin: 0 0 3rem; - padding: 1.2rem 0; - } +@mixin std-style { + display: block; + margin: 0; + padding-bottom: 0.2rem; +} - nav { - margin: 0; - text-align: right; - } +p, +ul { + @include std-style; +} - nav a { - margin: 0 0 0 1.2rem; - display: inline; - } +@for $i from 1 through 6 { + h#{$i} { + @include std-style; - footer { - text-align: right; - } + &:before { + $stars: ""; - .logo { - margin: 0; - text-align: left; - } + @for $_ from 1 through $i { + $stars: $stars + "*"; + } - .logo a { - float: left; - font-size: 1.8rem; + content: "#{$stars} "; + color: oklch(82.67% 0.087 #{280 + ($i - 1) * 20}); + opacity: 0.75; + } } } @@ -1,14 +1,69 @@ --- -title: Home +title: Hi! I'm Jamie! --- -<h2>Welcome</h2> +<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 + connection to technology. Mechanical keyboards, and linux ricing are some of + my current interests, alongside esports, hardware, and a little language + learning on the side! +</p> <img src="/images/haskell-logo.png" style="float: right; margin: 10px" /> -<p>Welcome to my blog!</p> +<h2>Projects</h2> +<ul> + <li> + <a + href="https://github.com/skiletro/nixfileshttps://github.com/skiletro/nixfiles" + >"nixfiles"</a + > + - A Nix flake containing all of my system configuration. I've put a + <mark>lot</mark> of effort into making it look good too. + </li> + <li> + <a href="https://github.com/skiletro/nur-repo" + >My Nix User Repository repo</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! + </li> + <li> + <a href="https://github.com/skiletro/Simple2FA">Simple2FA</a> - Written as + part of my undergraduate studies, Simple2FA, as the name suggests, is a very + basic two-factor authentication app. It has support for manual entry, as + well as scanning QR codes, to import TOTP keys. + </li> + <li> + <a href="https://www.behance.net/skiletro#">Graphics design work</a> - While + I haven't updated my portfolio in a while, I've done quite a lot of work in + the graphics design space, creating logos and whatnot. I intend to move this + portfolio to this website sometime in the future, but for now all my work + happily lives on Behance. + </li> + <li> + ...and more! I honestly can't think of everything off the top of my head, + and I'm always doing more stuff, so check here often! + </li> +</ul> -<p>I've reproduced a list of recent posts here for your reading pleasure:</p> +<h2>Programming Languages and Other Skills</h2> +<ul> + <li>C#</li> + <li>Java</li> + <li>Nix</li> + <li>HTML</li> + <li>CSS/SCSS</li> + <li>Figma</li> +</ul> + +<h2>Thank you for visiting!</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>). <h2>Posts</h2> $partial("templates/post-list.html")$ diff --git a/posts/2025-05-28-test.markdown b/posts/2025-05-28-test.markdown new file mode 100644 index 0000000..6521c6d --- /dev/null +++ b/posts/2025-05-28-test.markdown @@ -0,0 +1,23 @@ +--- +title: Test Page +--- + +Lorem Ipsum + +## Sub-heading + +Here are some code blocks! + +```haskell +fac n = foldr (*) 1 [1..n] +``` + +...and here is some Nix in a codeblock! + +```nix +let + a = 1; +in { + b = a * 2; +} +```` diff --git a/templates/default.html b/templates/default.html index 0fb6145..b0f706b 100644 --- a/templates/default.html +++ b/templates/default.html @@ -1,35 +1,96 @@ <!doctype html> <html lang="en"> <head> - <meta charset="utf-8" /> - <meta http-equiv="x-ua-compatible" content="ie=edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title>My Hakyll Blog - $title$</title> - <link rel="stylesheet" href="/css/default.css" /> - <link rel="stylesheet" href="/css/syntax.css" /> + <meta charset="UTF-8" /> + <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="favicon.png" /> + <meta name="theme-color" content="#9141ac" /> + <meta property="og:title" content="" /> + <meta property="og:description" content="" /> + <meta property="og:image" content="" /> + <meta name="twitter:card" content="" /> + <meta name="twitter:site" content="" /> + <meta name="twitter:title" content="" /> + <meta name="twitter:description" content="" /> + <meta name="twitter:image" content="" /> </head> - <body> - <header> - <div class="logo"> - <a href="/">My Hakyll Blog</a> - </div> + <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> + <span>―</span> <a href="/">Home</a> - <a href="/about.html">About</a> - <a href="/contact.html">Contact</a> - <a href="/archive.html">Archive</a> + <a href="/archive.html">Posts</a> + <a href="/playlists.html">Playlists</a> </nav> - </header> - - <main role="main"> - <h1>$title$</h1> - $body$ - </main> - + <article> + <h1>$title$</h1> + $body$ + </article> + </content> <footer> - Site proudly generated by - <a href="http://jaspervdj.be/hakyll">Hakyll</a> + <p>logo is © 2016-2024 skiletro, all rights reserved.</p> + <p>site written with ❤ with haskell, hakyll, and sass</p> + <p> + i'm + <a href="https://github.com/skiletro/skiletro.github.io" + >open-source!</a + > + </p> </footer> </body> </html> |