Skeletoning

2025-12-08 13:48:14 +01:00 · 2025-12-08 13:48:14 +01:00 · f7c238ec38
commit f7c238ec38
parent 8262888a93
23 changed files with 580 additions and 0 deletions
--- a/.envrc
+++ b/.envrc
@ -0,0 +1 @@
+use flake
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.devenv
+/.direnv/
+~^
--- a/about.html
+++ b/about.html
@ -0,0 +1,22 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>About Me</title>
+    <meta name="description" content="A brief biography" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+    <link href="/global.css" rel="stylesheet" />
+    <link href="/about.css" rel="stylesheet" />
+    <link href="/header.css" rel="stylesheet" />
+    <script type="text/javascript" src="/loadin.js"></script>
+    <script type="text/javascript" src="/about.js"></script>
+  </head>
+  <body onload="loadDependencies()">
+    <header id="header"></header>
+    I'm just a girl!
+  </body>
+</html>
--- a/about.js
+++ b/about.js
@ -0,0 +1,3 @@
+function loadDependencies() {
+    loadHTML("header", "/header.html");
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/flake.lock
+++ b/flake.lock
@ -0,0 +1,112 @@
+{
+  "nodes": {
+    "devshell": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1764011051,
+        "narHash": "sha256-M7SZyPZiqZUR/EiiBJnmyUbOi5oE/03tCeFrTiUZchI=",
+        "owner": "numtide",
+        "repo": "devshell",
+        "rev": "17ed8d9744ebe70424659b0ef74ad6d41fc87071",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "devshell",
+        "type": "github"
+      }
+    },
+    "flake-parts": {
+      "inputs": {
+        "nixpkgs-lib": "nixpkgs-lib"
+      },
+      "locked": {
+        "lastModified": 1763759067,
+        "narHash": "sha256-LlLt2Jo/gMNYAwOgdRQBrsRoOz7BPRkzvNaI/fzXi2Q=",
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "rev": "2cccadc7357c0ba201788ae99c4dfa90728ef5e0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1762156382,
+        "narHash": "sha256-Yg7Ag7ov5+36jEFC1DaZh/12SEXo6OO3/8rqADRxiqs=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "7241bcbb4f099a66aafca120d37c65e8dda32717",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-lib": {
+      "locked": {
+        "lastModified": 1761765539,
+        "narHash": "sha256-b0yj6kfvO8ApcSE+QmA6mUfu8IYG6/uU28OFn4PaC8M=",
+        "owner": "nix-community",
+        "repo": "nixpkgs.lib",
+        "rev": "719359f4562934ae99f5443f20aa06c2ffff91fc",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "repo": "nixpkgs.lib",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1764947035,
+        "narHash": "sha256-EYHSjVM4Ox4lvCXUMiKKs2vETUSL5mx+J2FfutM7T9w=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a672be65651c80d3f592a89b3945466584a22069",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devshell": "devshell",
+        "flake-parts": "flake-parts",
+        "nixpkgs": "nixpkgs_2",
+        "systems": "systems"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
--- a/flake.nix
+++ b/flake.nix
@ -0,0 +1,42 @@
+# SPDX-License-Identifier: Unlicense
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-parts.url = "github:hercules-ci/flake-parts";
+    systems.url = "github:nix-systems/default";
+    devshell.url = "github:numtide/devshell";
+  };
+
+  outputs =
+    inputs@{
+      flake-parts,
+      devshell,
+      ...
+    }:
+    flake-parts.lib.mkFlake { inherit inputs; } {
+      systems = import inputs.systems;
+
+      imports = [
+        devshell.flakeModule
+      ];
+
+      perSystem =
+        {
+          system,
+          pkgs,
+          inputs',
+          ...
+        }:
+        {
+          _module.args.pkgs = inputs.nixpkgs.legacyPackages.${system};
+
+          devshells.default = {
+            packages = with pkgs; [
+              http-server
+              prettier
+              vscode-langservers-extracted
+            ];
+          };
+        };
+    };
+}
--- a/footer/footer.css
+++ b/footer/footer.css
@ -0,0 +1,11 @@
+footer {
+    font-weight: 900;
+    position: fixed bottom;
+
+    margin: 5px;
+    padding: 0.25rem;
+    border-style: solid;
+    border-radius: 0.5rem;
+    border-width: 2px;
+    background: linear-gradient(15deg, #dc8a78, #f2d5cf);
+}
--- a/footer/footer.html
+++ b/footer/footer.html
@ -0,0 +1,7 @@
+<link href="/footer/footer.css" rel="stylesheet" />
+
+<div id="ft-left">I'm just a foot!</div>
+
+<div id="ft-center"></div>
+
+<div id="ft-right"></div>
--- a/global.css
+++ b/global.css
@ -0,0 +1,34 @@
+body {
+    background: linear-gradient(170deg, #dce0e8, #dc8a78);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    height: max-content;
+    margin: 0;
+
+    font-family: "Radio Canada", sans-serif;
+    font-weight: 375;
+    font-style: normal;
+    color: #232634;
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 100%;
+
+    min-height: 100svh;
+
+    a {
+        color: #232634;
+        font-style: italic;
+    }
+
+    li {
+        img {
+            height: 1rem;
+        }
+    }
+}
+
+.centered {
+    text-align: center;
+    width: 100%;
+}
--- a/header.css
+++ b/header.css
@ -0,0 +1,18 @@
+header {
+    margin: 5px;
+    padding: 0.25rem;
+    border-style: solid;
+    border-radius: 0.5rem;
+    border-width: 2px;
+    background: linear-gradient(15deg, #f2d5cf, #dc8a78);
+
+    .logo {
+        height: 1rem;
+    }
+
+    a {
+        color: #232634;
+        text-decoration: none;
+        font-style: normal;
+    }
+}
--- a/header.html
+++ b/header.html
@ -0,0 +1,3 @@
+<a href="/" id="hd-home"><img class="logo" src="/logo.png" /></a>
+<a href="/about" id="hd-about">About</a>
+<a href="/links" id="hd-links">Links</a>
--- a/index.css
+++ b/index.css
@ -0,0 +1,2 @@
+body {
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>April Eaton</title>
+    <meta
+      name="description"
+      content="A personal webpage for hosting links and general useful items"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/global.css" rel="stylesheet" />
+    <link href="/index.css" rel="stylesheet" />
+    <link href="/header.css" rel="stylesheet" />
+    <script type="text/javascript" src="/loadin.js"></script>
+    <script type="text/javascript" src="/index.js"></script>
+  </head>
+  <body onload="loadDependencies()">
+    <header id="header"></header>
+    <article>
+      <div id="intro-heading" class="centered">
+        <h1>Welcome to my homepage!</h1>
+        Go to the <a href="/about">about section</a> for a short biography and
+        the <a href="/links">links section</a> for a small linktree.
+      </div>
+    </article>
+    <footer id="footer"></footer>
+  </body>
+</html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,4 @@
+function loadDependencies() {
+    loadHTML("header", "/header.html");
+    loadHTML("footer", "/footer/footer.html");
+}
--- a/links.css
+++ b/links.css
@ -0,0 +1,17 @@
+body {
+    li {
+        /* list-style-type: none; */
+        display: flex;
+        align-items: center;
+
+        img {
+            height: 1rem;
+            margin: 0.2rem;
+        }
+    }
+
+    a {
+        font-style: normal;
+        text-decoration: none;
+    }
+}
--- a/links.html
+++ b/links.html
@ -0,0 +1,29 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Personal Links</title>
+    <meta name="description" content="My personal linktree" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+
+    <link href="/global.css" rel="stylesheet" />
+    <link href="/links.css" rel="stylesheet" />
+    <link href="/header.css" rel="stylesheet" />
+    <script type="text/javascript" src="/loadin.js"></script>
+    <script type="text/javascript" src="/links.js"></script>
+  </head>
+  <body onload="loadDependencies()">
+    <header id="header"></header>
+    <ul id="linktree">
+      <li>
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
+        /><a href="https://git.aprileaton.net">Gitea instance</a>
+      </li>
+    </ul>
+  </body>
+</html>
--- a/links.js
+++ b/links.js
@ -0,0 +1,3 @@
+function loadDependencies() {
+    loadHTML("header", "/header.html");
+}
--- a/loadin.js
+++ b/loadin.js
@ -0,0 +1,8 @@
+function loadHTML(elementId, url) {
+    fetch(url)
+        .then((response) => response.text())
+        .then((data) => {
+            document.getElementById(elementId).innerHTML = data;
+        })
+        .catch((error) => console.error("Error loading HTML:", error));
+}
--- a/logo.kra
+++ b/logo.kra
--- a/logo.png
+++ b/logo.png
--- a/logo.svg
+++ b/logo.svg
--- a/logo.webp
+++ b/logo.webp