new style + more buttons

assets/components/header/style.css

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   border: 1px solid currentColor;
   gap: 8px;
-  font-size: 16px;
+  /* font-size: 16px; */
   background: transparent var(--tiles-last-black);
   box-shadow: inset var(--inset) var(--inset) 0 var(--foreground);
 
@@ -20,7 +20,6 @@
     box-sizing: border-box;
     border: 1px solid currentColor;
     font-family: var(--font-text-top);
-    font-weight: bold;
     background: var(--background);
     box-shadow: var(--inset) var(--inset) 0 var(--foreground);
 
@@ -49,13 +48,17 @@
       p {
         /* letter-spacing: 0.2em; */
         line-height: 0.8em;
+        font-size: 1em;
+        font-family: var(--font-text-header);
       }
 
       h1 {
         font-weight: normal;
-        font-size: 2.5em;
+        font-family: var(--font-text-top);
+        /* looks weird on Firefox Windows */
+        font-size: 2em;
         line-height: 1em;
-        /* letter-spacing: 0.1em; */
+        /* letter-spacing: 0.0625em; */
       }
     }
   }
@@ -65,7 +68,6 @@
     align-items: center;
     justify-content: safe center;
     font-family: var(--font-text-header);
-    font-weight: bold;
     font-size: 1em;
     overflow: auto;
     max-width: 100%;
@@ -77,7 +79,7 @@
       width: 100%;
       min-width: max-content;
       text-align: center;
-      padding: 0.5em;
+      padding: 0.25em;
       border: 1px solid currentColor;
       color: currentColor;
       text-decoration: inherit;

assets/fonts/style.css

@@ -35,10 +35,19 @@
   font-weight: normal;
 }
 
-:root {
+@font-face {
-  --font-text-top: "Permanent Marker";
+  font-family: "Fixedsys";
-  --font-text-mono: "VCR OSD Mono";
+  src: url("./Fixedsys%20Excelsior/FSEX302.ttf");
-  --font-text-legible: "Lexend";
+  font-weight: normal;
-  --font-text-header: "Comic Neue";
+}
-  --font-text-generic: "Helvetica";
+
+:root {
+  --font-text-top: "Fixedsys";
+  --font-text-mono: "Fixedsys";
+  --font-text-legible: "Fixedsys";
+  --font-text-header: "Fixedsys";
+  --font-text-generic: "Fixedsys";
+  font-size: 16px;
+  font-smooth: never;
+  -webkit-font-smoothing : none;
 }

assets/style.css

@@ -17,7 +17,8 @@
   --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
 }
 
-@media (prefers-color-scheme: dark) {
+/* i never liked this */
+/* @media (prefers-color-scheme: dark) {
   :root {
     --background: #000;
     --red: #0ff;
@@ -31,7 +32,7 @@
     --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
     --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
   }
-}
+} */
 
 html {
   height: 100%;
@@ -40,12 +41,11 @@ html {
 
 body {
   margin: 0;
-  padding: 8px 16px;
+  padding: 0.5em 1em;
   box-sizing: border-box;
   min-height: 100%;
   width: 100%;
   background: var(--background) var(--tiles-last-black);
-  text-align: center;
   font-family: var(--font-text-legible);
 }
 
@@ -58,11 +58,17 @@ main, div.fakemain {
   background-color: var(--background);
   border: 1px solid currentColor;
   color: var(--foreground);
-  padding: 8px;
+  padding: 0.5em;
-  margin: 8px auto;
+  margin: 1em auto;
+  margin-left: 4em;
   box-shadow: 4px 4px 0 var(--foreground);
 }
 
+h1, h2, h3 {
+  font-size: 2em;
+  font-weight: normal;
+}
+
 section {
   margin: 1em;
 }
@@ -71,6 +77,10 @@ a {
   color: var(--foreground);
 }
 
+a:hover {
+  opacity: 0.75;
+}
+
 img[src^="/assets"],
 img[src^="/favicon.ico"] {
   filter: var(--image-filter);
@@ -89,7 +99,7 @@ hr {
 
 .boxThing {
   padding: 1rem;
-  margin: 16px 8px;
+  margin: 1em 0.5em;
   border: 1px solid currentColor;
   background: var(--background);
   box-sizing: border-box;
@@ -100,6 +110,12 @@ hr {
     font-family: var(--font-text-top);
   }
 
+  h1::before {
+    content: ">>";
+    margin-inline-end: 0.25em;
+    opacity: 0.5;
+  }
+
   :first-child {
     margin-top: 0;
   }
@@ -108,12 +124,45 @@ hr {
   }
 }
 
+@property --hue {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@keyframes hue-shift {
+  0% {
+    --hue: 0;
+  }
+
+  50% {
+    --hue: 180;
+  }
+
+  100% {
+    --hue: 360;
+  }
+}
+
 .web-button {
   position: relative;
   filter: grayscale(1);
   left: 0;
   top: 0;
-  transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all 0.0625s ease-out;
+  opacity: 1 !important;
+  display: inline-block;
+  width: 88px;
+  height: 31px;
+  line-height: 31px;
+  border: 1px solid black;
+  vertical-align: middle;
+  margin: 4px 0;
+  text-decoration: none;
+  /* text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0 8px;
+  box-sizing: border-box; */
 }
 
 .web-button:hover {
@@ -121,5 +170,15 @@ hr {
   top: -4px;
   z-index: 999;
   filter: grayscale(0);
-  box-shadow: 4px 4px 16px #0008;
+  animation: hue-shift 1s linear infinite;
+  --shadow: hsl(var(--hue), 50%, 75%);
+  box-shadow:
+  4px 4px 0 -1px var(--shadow),
+  3px 3px 0 -1px var(--shadow),
+  2px 2px 0 -1px var(--shadow),
+  1px 1px 0 -1px var(--shadow),
+  4px 4px 0 0px black,
+  3px 3px 0 0px black,
+  2px 2px 0 0px black,
+  1px 1px 0 0px black;
 }

index.js

@@ -25,8 +25,14 @@ config();
 app.use(async (req, res, next) => {
   const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json")
     .catch(() => res.status(500).send())
-    .then((res) => res.json());
+    .then((res) => res.json())
+    .catch(() => res.status(500).send());
+  const followingJson = await fetch("https://cdn.abtmtr.link/site_content/following.json")
+    .catch(() => res.status(500).send())
+    .then((res) => res.json())
+    .catch(() => res.status(500).send());
   app.locals.buttons = buttonsJson;
+  app.locals.following = followingJson;
   next();
 })
 

views/components/about-boxes.ejs

@@ -27,4 +27,11 @@
     </div>
     <img class="AboutboxElementImage" src="/assets/icons/links.png" />
   </div>
+  <div class="AboutboxElement">
+    <div class="AboutboxElementText">
+      <h1><a href="/about/">ABOUT</a></h1>
+      <p>Who I am.</p>
+    </div>
+    <img class="AboutboxElementImage" src="/assets/icons/about.png" />
+  </div>
 </div>

views/components/footer.ejs

@@ -1,13 +1,26 @@
 <footer>
   <section>
     <h2>abtmtr.link v13</h2>
-    <p>&copy; <a href="mailto:me@abtmtr.link">MeowcaTheoRange</a> 2023-2024</p>
+    <p>&copy; <a href="/about">MeowcaTheoRange</a> 2023-2024</p>
     <p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p>
     <p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p>
   </section>
   <section style="text-align: center;">
     <% buttons.forEach((button) => { %>
-      <a href="<%= button.href %>"><img class="web-button" src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
+      <% if (button.img != null) { %>
+        <a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
+      <% } else { %>
+        <a class="web-button" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
+      <% } %>
+    <% }) %>
+  </section>
+  <section style="text-align: center;">
+    <% following.forEach((button) => { %>
+      <% if (button.img != null) { %>
+        <a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
+      <% } else { %>
+        <a class="web-button" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
+      <% } %>
     <% }) %>
   </section>
 </footer>

views/components/header.ejs

@@ -8,9 +8,9 @@
   </div>
   <div class="HeaderLinks">
     <a class="HeaderLinksLink" href="/">Home</a>
-    <a class="HeaderLinksLink" href="/matkap/">matkap zone</a>
     <a class="HeaderLinksLink" href="/services/">Services</a>
     <a class="HeaderLinksLink" href="/computers/">Computers</a>
     <a class="HeaderLinksLink" href="/links/">Links</a>
+    <a class="HeaderLinksLink" href="/about/">About</a>
   </div>
 </div>

views/pages/about/index.ejs

@@ -16,7 +16,25 @@
   <main>
     <p class="tagline">Who I am.</p>
     <section>
-      <p>abtmtr.link is a website. that's for sure</p>
+      <h2>My h-card</h2>
+      <div class="h-card" style="padding: 1em;">
+        <h3 style="margin: 0;"><span class="p-name">Theo Range</span></h3>
+        <p>(<span class="p-honorific-prefix">Mx.</span>
+          <span class="p-given-name">Theo</span>
+          <span class="p-family-name">Range</span>)
+        (<span class="p-pronouns">they/them</span>, <span class="p-gender-identity">non-binary</span>)</p>
+        <p>a.k.a "<span class="p-nickname">MeowcaTheoRange</span>"</p>
+        <img class="u-photo" src="http://abtmtr.link/favicon.ico"/>
+        <p>
+        <a class="u-url" href="http://abtmtr.link/">website</a>,
+        <a class="u-email" href="mailto:me@abtmtr.link">email</a>
+        </p>
+        <p>born <time class="dt-bday">2007-08-07</time></p>
+        <p class="p-adr">
+          <span class="p-region">Minnesota</span>,
+          <span class="p-country-name">USA</span>
+        </p>
+      </div>
     </section>
   </main>
   <div class="fakemain">

views/pages/matkap/index.ejs

@@ -58,6 +58,19 @@
   </main>
   <script src="/assets/script.js"></script>
   <style>
+    :root {
+      --font-text-top: "Permanent Marker";
+      --font-text-mono: "VCR OSD Mono";
+      --font-text-legible: "Helvetica";
+      --font-text-header: "Comic Neue";
+      --font-text-generic: "Helvetica";
+      font-size: 16px;
+    }
+
+    h1, h2 {
+      font-weight: bold;
+    }
+
     main {
       width: 768px;
     }