add blog and archive

index.html

@@ -24,10 +24,15 @@
             ><img src="images/lulu.webp" alt="Lulu the dog"
           /></a>
         </div>
+        <ul id="index">
+          <li><a href="/lulu">Lulu</a></li>
+          <li><a href="/archive">Archive</a></li>
+          <li><a href="/blog">Blog</a></li>
+        </ul>
         <hr />
         <section>
           <h2>Things I've Done</h2>
-          <a target="_blank" href="/youclient"><h3>YouClient</h3></a>
+          <a href="/youclient"><h3>YouClient</h3></a>
           <p>
             My middle school gave each student an incredibly weak Chromebook
             infested with blockers and spyware, and didn't allow us to bring our
@@ -38,10 +43,7 @@
             tab customization, anti-unload, no browser history, and no spyware
             spying.
           </p>
-          <a
+          <a href="https://git.miningtcup.me/MiningTcup/dotfiles/">
-            target="_blank"
-            href="https://git.miningtcup.me/MiningTcup/dotfiles/"
-          >
             <h3>Linux</h3></a
           >
           <p>
@@ -50,16 +52,14 @@
             kernels. It can run on nearly any device (including PCs and Macs),
             and is used by Android. One of my favorite things to do is mess with
             configuration files on my
-            <a target="_blank" href="https://archlinux.org">Arch Linux</a>
+            <a href="https://archlinux.org">Arch Linux</a>
             +
-            <a target="_blank" href="https://hypr.land">Hyprland</a>
+            <a href="https://hypr.land">Hyprland</a>
             system. Over the last more than a year, I've settled on an (in my
             opinion) nearly <i>perfect</i> configuration.
           </p>
 
-          <a
+          <a href="https://git.miningtcup.me/MiningTcup/noteserver"
-            target="_blank"
-            href="https://git.miningtcup.me/MiningTcup/noteserver"
             ><h3>Notes</h3></a
           >
           <p>
@@ -70,33 +70,29 @@
             do with servers, and the app in Android Studio using Kotlin. After
             completing the server, I accidentally deleted the source code,
             prompting me to recode it. It's finished now, and you can view the
-            most likely terrible source code for the server
+            most likely terrible source code for the
-            <a
+            <a href="https://git.miningtcup.me/MiningTcup/noteserver"
-              target="_blank"
+              >Notes server</a
-              href="https://git.miningtcup.me/MiningTcup/noteserver"
-              >here</a
             >. Although I don't plan on giving out the source code for the app
-            because it's so terrible, you can download the APK file
+            because it's so terrible, you can download the
-            <a download href="notes.apk">here</a>.
+            <a download href="notes.apk">Notes APK file</a>.
           </p>
         </section>
         <hr />
         <section>
           <h2>Services I Run</h2>
-          <a
+          <a href="https://git.miningtcup.me/MiningTcup/website">
-            target="_blank"
-            href="https://git.miningtcup.me/MiningTcup/website"
-          >
             <h3>Static Webserver</h3></a
           >
           <p>
             That's what you're using right now- my website! It's a classic Nginx
             webserver. Notice how fast it loaded? That's what happens when a
             website is written without any libraries, tracking, or external
-            fonts. This also includes a frontend for accessing the
+            fonts. Additionally, this includes a frontend for accessing the
-            <a target="_blank" href="https://openfreemap.org/">OpenFreeMap</a>
+            <a href="https://openfreemap.org/">OpenFreeMap</a>
             public instance. You can access that
-            <a target="_blank" href="/maps">here</a>.
+            <a href="/maps">here</a>. I also have a collection of questionably
+            redistributable files in my <a href="/archive">archive</a>.
           </p>
           <h3>DNS Servers</h3>
           <p>
@@ -106,35 +102,36 @@
             servers of any network except(?) the schools. This gave us the power
             to block any domain we wanted, including the domains which would
             load blocklists or send away all our data. The plain DNS server is
-            run using BIND 9.
+            run using BIND 9. Not currently active.
           </p>
-          <a target="_blank" href="https://git.miningtcup.me/">
+          <a href="https://git.miningtcup.me/"> <h3>Git Server</h3></a>
-            <h3>Git Server</h3></a
-          >
           <p>
             GitHub is slow, annoying, and trains LLMs on everything you upload.
             My Git server is <i>very</i> fast (for me, at least),
             annoyance-free, and <i>doesn't</i> train LLMs on your work without
             asking.
           </p>
-          <a target="_blank" href="https://zim.miningtcup.me">
+          <a href="https://zim.miningtcup.me">
             <h3>Kiwix Server</h3>
           </a>
           <p>
-            Kiwix provides offline browsing of websites, including Wikipedia and
+            <a href="https://kiwix.org/en/">Kiwix</a> provides offline browsing
-            DevDocs, serving access to resources in an internet outage or while
+            of websites, including
-            travelling.
+            <a href="https://wiki.archlinux.org/title/Main_page">ArchWiki</a>,
+            <a href="https://www.wikipedia.org/">Wikipedia</a>, and
+            <a href="https://devdocs.io/">DevDocs</a>, allowing access to
+            resources in an internet outage or while travelling.
           </p>
-          <a target="_blank" href="https://mozhi.miningtcup.me/">
+          <a href="https://mozhi.miningtcup.me/"> <h3>Mozhi Server</h3></a>
-            <h3>Mozhi Server</h3></a
-          >
           <p>
-            Mozhi is a proxy for several translators, used by Crow Translate by
+            <a href="https://codeberg.org/aryak/mozhi">Mozhi</a> is a proxy for
-            KDE.
+            several online translators, such as Google Translate, and is used by
+            <a href="https://invent.kde.org/office/crow-translate">
+              Crow Translate
+            </a>
+            (by <a href="https://kde.org/">KDE</a>).
           </p>
-          <a target="_blank" href="https://arch.miningtcup.me/">
+          <a href="https://arch.miningtcup.me/"> <h3>Arch Linux Mirror</h3></a>
-            <h3>Arch Linux Mirror</h3></a
-          >
           <p>
             Having my own Arch Linux mirror means my updates will be just about
             instant.

lulu.html

@@ -14,8 +14,13 @@
           <div class="h1-container">
             <h1>Lulu Pier<span class="subtitle">&nbsp;a.k.a. Doggo</span></h1>
           </div>
-          <a href="index.html"><img alt="Ted" id="title-img" /></a>
+          <a href="/"><img src="images/ted1.jpg" /></a>
         </div>
+        <ul id="index">
+          <li><a href="/index">Home</a></li>
+          <li><a href="/archive">Archive</a></li>
+          <li><a href="/blog">Blog</a></li>
+        </ul>
         <hr />
         <p>
           My favorite thing to do is chase tennis balls in the back yard.
@@ -42,6 +47,5 @@
         </video>
       </div>
     </div>
-    <script src="lulu.js"></script>
   </body>
 </html>

lulu.js

@@ -1,7 +0,0 @@
-const $ = (id) => document.getElementById(id);
-$("title-img").src = `images/ted${Math.ceil(Math.random() * 3)}.jpg`;
-document.querySelectorAll("img.media").forEach((item) => {
-  item.addEventListener("click", () => {
-    item.requestFullscreen();
-  });
-});

style.css

@@ -33,12 +33,17 @@ a {
     color: light-dark(black, white);
 }
 
-:not(p) > a {
+a {
-    text-decoration: none;
+  text-decoration: none;
+  font-weight: bold;
 }
 
-:not(p) > a:hover {
+a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
+}
+
+:not(h2) > a {
+    color: light-dark(darkslategrey, beige)
 }
 
 p {
@@ -55,14 +60,13 @@ p {
 }
 
 #contact-info-container {
-    min-height: 57px;
+    min-height: 55px;
-    max-width: 256px;
 }
 
 .cover {
     cursor: pointer;
-    background: light-dark(white, #181825);
+    color: light-dark(whitesmoke, black);
-    color: light-dark(white, #181825);
+    border: solid 1px light-dark(black, whitesmoke);
     user-select: none;
 }
 
@@ -99,6 +103,20 @@ p {
     background: light-dark(black, whitesmoke);
 }
 
+#index {
+  list-style-type: none;
+  margin: 8px 0 0 0;
+  padding: 0;
+}
+
+#index > li {
+  display: inline;
+  border: solid light-dark(black, whitesmoke);
+  border-width: 0 1px;
+  margin: 0;
+  padding: 0 8px;
+}
+
 #title-1 > .h1-container {
     padding: 16px;
     background: light-dark(black, whitesmoke);
@@ -149,3 +167,33 @@ section {
 .margin-8px-top {
     margin-top: 8px;
 }
+
+.blog-item {
+  width: calc(100% - 18px);
+  overflow: hidden;
+  cursor: pointer;
+  border: solid 1px grey;
+  position: relative;
+  z-index: 1;
+  padding: 8px;
+}
+
+.blog-item > img {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  max-width: calc(50% - 16px);
+  max-height: calc(100% - 16px);
+  z-index: -1;
+}
+
+.blog-item > h3, .blog-item > p {
+  max-width: 70%;
+  background: light-dark(#ffffff88, #00000088);
+  box-shadow: 8px 0 8px light-dark(#ffffff88, #00000088);
+  margin: 0;
+}
+
+.blog-item > p {
+  font-weight: normal;
+}