big changes

Author: apacheli

.gitattributes

@@ -0,0 +1 @@
+* text=auto

CNAME

@@ -1,7 +1,23 @@
+:root {
+  --bg: #24303c;
+  --dark: #0000001a;
+  --duration: .25s;
+  --header: #12181e;
+  --key: #ffffff0d;
+  --sub: #bdbfc2;
+  --text: #f7f8fa;
+  --theme: #3aa9f3;
+}
+
 html {
   box-sizing: border-box;
 }
 
+::selection {
+  background: var(--theme);
+  color: var(--text);
+}
+
 body {
   background-color: var(--bg);
   color: var(--text);
@@ -31,17 +47,6 @@ svg:hover {
   box-sizing: inherit;
 }
 
-:root {
-  --bg: #206080;
-  --dark: #0000000d;
-  --duration: .25s;
-  --header: #0c141c;
-  --key: #ffffff0d;
-  --sub: #c0c0c0;
-  --text: #ffffff;
-  --theme: #00c0ff;
-}
-
 .header-icon:hover img {
   animation: rotation 2.5s linear infinite;
 }
@@ -66,6 +71,7 @@ svg:hover {
 .main-hdr {
   align-items: center;
   background-color: var(--header);
+  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .25);
   display: flex;
   height: 4rem;
   justify-content: space-between;
@@ -106,6 +112,7 @@ svg:hover {
   content: "";
   height: .25rem;
   left: 0;
+  pointer-events: none;
   position: absolute;
   transition: width var(--duration);
   width: 0;
@@ -217,13 +224,13 @@ svg:hover {
   text-decoration: none;
 }
 
-.content a:hover {
+.content p a:hover {
   text-decoration: underline;
 }
 
 h1,
 h2 {
-  border-bottom: .0625rem solid var(--sub);
+  border-bottom: .0625rem solid var(--key);
 }
 
 h6 {
@@ -278,11 +285,6 @@ tr:nth-child(even) {
   background-color: var(--dark);
 }
 
-hr {
-  border: none;
-  border-bottom: .0625rem solid var(--sub);
-}
-
 p:has(> img) {
   background-color: var(--dark);
   border-radius: .25rem;
@@ -298,7 +300,40 @@ p img {
   width: 100%;
 }
 
+.scroll-to-top {
+  --h: var(--theme);
+  position: fixed;
+  left: 1rem;
+  bottom: 1rem;
+  height: 3rem;
+  width: 3rem;
+}
+
+article {
+  border-radius: .5rem;
+  padding: .25rem 1rem;
+}
+
+article:hover {
+  background-color: var(--key);
+}
+
+article header {
+  color: var(--text);
+}
+
+article div,
+article footer {
+  color: var(--sub);
+  margin: 1rem 0;
+}
+
+.author {
+  color: var(--theme);
+}
+
 /** https://github.com/highlightjs/highlight.js/blob/main/src/styles/atom-one-dark.css */
+/** https://github.com/highlightjs/highlight.js/blob/main/src/styles/atom-one-light.css */
 
 .hljs-comment,
 .hljs-quote {
@@ -368,4 +403,89 @@ p img {
 
 .hljs-link {
   text-decoration: underline;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f3f6f8;
+    --dark: #ffffff55;
+    --header: #ffffff;
+    --key: #0000000d;
+    --sub: #52565c;
+    --text: #263036;
+  }
+
+  .header-icon img {
+    filter: invert(1);
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #a626a4;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e45649;
+  }
+
+  .hljs-literal {
+    color: #0184bb;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #50a14f;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #986801;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #4078f2;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #c18401;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
 }

LICENSE.txt

@@ -0,0 +1,16 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "correctness": {
+                "useJsxKeyInIterable": "off"
+            }
+        }
+    },
+    "formatter": {
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 160
+    }
+}

assets/index.css

@@ -0,0 +1,16 @@
+export default ({ title, description, date, url }) => (
+    <a href={url}>
+        <article>
+            <header>
+                <h2>{title}</h2>
+            </header>
+            <div>
+                <p>{description}</p>
+            </div>
+            <footer>
+                <span class="author">apacheli</span>
+                <span> - {date}</span>
+            </footer>
+        </article>
+    </a>
+);

biome.json

@@ -0,0 +1,65 @@
+const Discord = await import("../icons/discord.svg");
+const GitHub = await import("../icons/github.svg");
+const Steam = await import("../icons/steam.svg");
+const Twitch = await import("../icons/twitch.svg");
+const Twitter = await import("../icons/twitter.svg");
+const YouTube = await import("../icons/youtube.svg");
+
+const socials = [
+    {
+        h: "#5865F2",
+        href: "/discord",
+        icon: Discord,
+    },
+    {
+        h: "#808080",
+        href: "/github",
+        icon: GitHub,
+    },
+    {
+        h: "#00adef",
+        href: "/steam",
+        icon: Steam,
+    },
+    {
+        h: "#8d44f7",
+        href: "/twitch",
+        icon: Twitch,
+    },
+    {
+        h: "#24a3f1",
+        href: "/twitter",
+        icon: Twitter,
+    },
+    {
+        h: "#ff0000",
+        href: "/youtube",
+        icon: YouTube,
+    },
+].map((social) => (
+    <li>
+        <a href={social.href} style={`--h: ${social.h}`}>
+            {social.icon.default}
+        </a>
+    </li>
+));
+
+const date = new Date();
+const year = date.getFullYear();
+const month = `${date.getMonth() + 1}`.padStart(2, "0");
+const day = `${date.getDate()}`.padStart(2, "0");
+
+export default () => (
+    <footer class="main-ftr">
+        <nav>
+            <ul class="list">{socials}</ul>
+        </nav>
+        <span>
+            Last deployed at <strong>{`${year}-${month}-${day}`}</strong> <a href="https://github.com/apacheli/apacheli.github.io">(Source)</a>
+        </span>
+        <span>
+            Bun <strong>v{process.versions.bun}</strong>
+        </span>
+        <span>&copy; 2024-present apacheli</span>
+    </footer>
+);