i spent 1 hour figuring this out

mudkipdev · Jun 19, 2024 · dde6f07 · dde6f07
1 parent 41b9afc
commit dde6f07
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -23,4 +23,36 @@ const { Content } = await post.render();
 <Page title={data.title}>
     <Date date={data.date} />
     <Content />
-</Page>
+
+    <div id="options">
+        <input type="checkbox" id="hide-cat">
+        <label for="hide-cat">hide cat</label>
+    </div>
+</Page>
+
+<style>
+    #options {
+        position: absolute;
+        bottom: 15px;
+        left: 15px;
+    }
+
+    label[for="hide-cat"] {
+        position: relative;
+        margin-left: 3px;
+        top: 2px;
+    }
+</style>
+
+<script is:inline>
+    let checkbox = document.querySelector("#hide-cat");
+    let cat = document.querySelector("#oneko");
+
+    checkbox.addEventListener("change", (event) => {
+        if (event.target.checked) {
+            cat.style.visibility = "hidden";
+        } else {
+            cat.style.visibility = "visible";
+        }
+    });
+</script>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -13,7 +13,7 @@ import Cards from "@components/cards/Cards.astro";
 
         <Card
             title="skylite"
-            description="A Minecraft server featuring unique and fun minigames."
+            description="A Minecraft server featuring fun and unique minigames."
             url="https://github.com/skylite-network"
         />
 

diff --git a/src/style.css b/src/style.css
@@ -99,6 +99,8 @@ body {
     color: var(--crust);
 }
 
+/* Typography */
+
 h1 {
     font-size: 2em;
     margin: 0;
@@ -127,6 +129,8 @@ nav a {
     margin-right: 1em;
 }
 
+/* Code Blocks */
+
 /* https://github.com/shikijs/shiki/issues/3#issuecomment-830564854 */
 pre {
     background-color: var(--mantle) !important;
@@ -148,6 +152,8 @@ code .line::before {
     counter-increment: step;
 }
 
+/* Details */
+
 details {
     padding: 0.75em 1em;
     background: var(--mantle);
@@ -161,6 +167,17 @@ details summary {
     user-select: none;
 }
 
-details p {
-    margin-left: 0.5em;
-}
+/* Checkboxes */
+
+/* input[type="checkbox"] {
+    appearance: none;
+    background-color: var(--crust);
+    padding: 1em;
+    border-radius: 0.5em;
+    margin: 0;
+}
+
+input[type="checkbox"]:checked {
+    background-color: var(--accent) !important;
+    box-shadow: inset 0 0 0 5px var(--crust);
+} */