Add blog posts to home screen, make template for webrings, add footer, remove unused stuff

_data/i18n.js

@@ -87,7 +87,12 @@ module.exports = {
     wrongosWebring: "This site is a member of the Wrongos webring.",
     previousSite: "previous site",
     nextSite: "next site",
-    random: "random"
+    random: "random",
+    showMore: "Show more",
+    previous: "previous",
+    next: "next",
+    about: "about",
+    thisWebsiteDoesNotTrackYou: "This website does not track you."
   },
   pt: {
     language: "português",
@@ -150,6 +155,11 @@ module.exports = {
     wrongosWebring: "Esse website faz parte do webring Wrongos.",
     previousSite: "site anterior",
     nextSite: "próximo site",
-    random: "aleatório"
+    random: "aleatório",
+    showMore: "Ver mais",
+    previous: "anterior",
+    next: "próximo",
+    about: "sobre",
+    thisWebsiteDoesNotTrackYou: "Esse website não rastreia você."
   }
 };

_includes/base.njk

@@ -13,20 +13,16 @@
     <meta charset="UTF-8">
     <title>Adrian Victor{% if pageTitle or postTitle %} - {{ pageTitle or postTitle }}{% endif %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
     <link rel="stylesheet" href="{{ '/static/main.css?fixcache=1' | url }}">
-
     <script type="module" src="{{ '/static/scripts/ccd.js' | url }}"></script>
     <script type="module" src="{{ '/static/scripts/music.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/88x31.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/tips.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/click.js' | url }}" defer></script>
-
     <link rel="apple-touch-icon" sizes="180x180" href="{{ '/static/apple-touch-icon.png' | url }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ '/static/favicon-32x32.png' | url }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ '/static/favicon-16x16.png' | url }}">
     <link rel="manifest" href="{{ '/static/site.webmanifest' | url }}">
-
     <meta property="og:title" content="Adrian Victor{% if pageTitle or postTitle %} - {{ pageTitle or postTitle }}{% endif %}">
     <meta property="og:description" content="{{ description or i18n[langKey].websiteDescription }}">
     <meta property="og:type" content="article">
@@ -37,11 +33,13 @@
     <script>
         const rootPrefix = "{{ '/' | url }}";
     </script>
+
     <style>
         .bg {
             opacity: {{ backgroundOpacity or ".4" }}!important;
         }
     </style>
+
     <noscript>
         <style>
             .i88x31:hover {
@@ -49,9 +47,12 @@
             }
         </style>
     </noscript>
+
     <div id="everythingHelper">
         <img src="{{ ('/static/images/' ~ (background or 'bear.jpg')) | url }}" class="bg">
+
         {% include "header.njk" %}
+
         <div id="mainHelper">
             {{ content | safe }}
         </div>

_includes/macros.njk

@@ -41,3 +41,16 @@
     </div>
 </div>
 {% endmacro %}
+
+{% macro webring(opts) %}
+<div class="webringGeneric"
+     style="{% if opts.image %}background-image:url('{{ opts.image | url }}');{% endif %}
+            {% if opts.color %}background-color:{{ opts.color }};{% endif %}">
+    <p>{{ opts.text }}</p>
+    <div class="webringButtons">
+        {% for link in opts.links %}
+            {{ link | safe }}
+        {% endfor %}
+    </div>
+</div>
+{% endmacro %}

_includes/post.11tydata.js

@@ -1,3 +0,0 @@
-module.exports = {
-  langKey: data => data.lang
-};

_includes/widgets/droidring.html

@@ -0,0 +1,44 @@
+<center>
+    <div class="droidringwidget">
+        <a href="https://kanandraw.neocities.org/stuffs/droidring/home"><img src="https://kanandraw.neocities.org/stuffs/droidring/assets/logo.png" style="width: 200px; padding: .4em;"></a><br/>
+        <!-- <img src="https://kanandraw.neocities.org/stuffs/droidring/assets/droidwidget.png" style="width: 115px;"><br> -->
+        <div class="buttonsdroidring">
+            <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=previous"><button class="navdroidring" data-tip="{{ i18n[langKey].previousSite | smartTitle }}">←</button></a>
+            <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=random"><button class="navdroidring" data-tip="{{ i18n[langKey].random | smartTitle }}">⇄</button></a>
+            <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=next"><button class="navdroidring" data-tip="{{ i18n[langKey].nextSite | smartTitle }}">→</button></a>
+        </div>
+        <style>
+            .droidringwidget {
+                font-family: 'Droid Sans',sans-serif;
+                align-content: center;
+                text-align: center;
+                /* width: 215px; */
+                border: 1px solid #666666;
+                background: linear-gradient(0deg, black, #000000db);
+                padding: 5px;
+            }
+            .buttonsdroidring {
+                background: #989898;
+                padding: 4px;
+                margin: -5px;
+            }
+            
+            .navdroidring {
+                background: linear-gradient(to bottom, #F1F1F1, #B8B8B8);
+                padding: 5px;
+                color: black;
+                box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003B;
+                border: none;
+                width: 50px;
+                height: 27px;
+                min-width: 50px;
+            }
+            .navdroidring:active {
+                background: linear-gradient(to bottom,#FFD554,#E99D00);
+            }
+            .navdroidring:hover {
+                background: linear-gradient(to bottom, #ffebc4, #f2f2f2);
+            }
+        </style>
+    </div>
+</center>

index.njk

@@ -9,13 +9,13 @@ layout: base.njk
 {% from "macros.njk" import i88x31 with context %}
 {% from "macros.njk" import videoCard with context %}
 {% from "macros.njk" import projectCard %}
+{% from "macros.njk" import webring %}
 
-<div id="homeSquares">
-</div>
+<!-- Will be loaded by the home JS -->
+<div id="homeSquares"></div>
+<script src="{{ '/static/scripts/home.js' | url }}" defer></script>
 
 <main id="boxChain">
-    <script src="{{ '/static/scripts/home.js' | url }}" defer></script>
-    
     <noscript>
         <style>
             .hs {
@@ -27,11 +27,14 @@ layout: base.njk
         </style>
     </noscript>
     
+    <!-- Intro -->
     <div class="hs" id="hsDefault">
+        <!-- Keep Android Open alert -->
         <div class="box kaoBox alert">
             <p>{{ i18n[langKey].kaoMain | safe }}</p>
             <p class="end-text nomargin">{{ i18n[langKey].kaoLink | safe }} →</p>
         </div>
+
         <div class="box pageHeaderBox">
             <h1 id="homeTitle">{{ i18n[langKey].welcome | smartTitle }}</h1>
             <p>{{ i18n[langKey].homeWelcomeParagraph | safe }}</p>
@@ -60,6 +63,7 @@ layout: base.njk
         <p>{{ i18n[langKey].homeSocialsAndContactParagraphTwo | safe }}</p>
     </div>
     
+    <!-- Music -->
     <div class="hs" id="hsMusic">
         <div class="box pageHeaderBox">
             <h1>{{ i18n[langKey].myMusic | smartTitle }}</h1>
@@ -88,6 +92,7 @@ layout: base.njk
         </div>
     </div>
     
+    <!-- Video -->
     <div class="hs" id="hsVideo">
         <div class="box pageHeaderBox">
             <h1>{{ i18n[langKey].myVideos | smartTitle }}</h1>
@@ -107,6 +112,7 @@ layout: base.njk
         }}
     </div>
     
+    <!-- Programming -->
     <div class="hs" id="hsCode">
         <div class="box pageHeaderBox">
             <h1>{{ i18n[langKey].mySoftware | smartTitle }}</h1>
@@ -159,105 +165,61 @@ layout: base.njk
     </div>
 </main>
 
-<aside>
+<!-- Webrings -->
+<aside id="homeAside">
+    <div id="homeBlog">
+        <div>
+            <h1 class="nomargin negativeMargin">Blog</h1>
+            <hr style="margin-bottom: .4em;">
+        </div>
+
+        {% for post in collections.post %}
+          {% if post.data.langKey == langKey %}
+            <li>
+            <p>
+                <a href="{{ post.url | url }}">{{ post.data.postTitle }}</a>
+            </p>
+            <p><b>{{ post.data.date | postDate }}</b></p>
+            </li>
+          {% endif %}
+        {% endfor %}
+
+        <p class="end-text"><a href="{{ ('/' ~ langKey ~ '/blog/') | url }}">{{ i18n[langKey].showMore }}</a></p>
+    </div>
+
     <div id="homeWebrings">
         <div>
             <h1 class="nomargin negativeMargin">Webrings</h1>
             <hr style="margin-bottom: .4em;">
             <p class="end-text">{{ i18n[langKey].webringDescription | safe }}</p>
         </div>
-        <div id="webring-Wrongos-widget" class="_wrongoInternalWidget">
-            <style>
-                #webring-Wrongos-widget div {
-                    display: grid;
-                    grid-template-columns: 1fr 1fr 1fr;
-                    text-align: center;
-                }
 
-                #webring-Wrongos-widget p {
-                    text-align: center;
-                    margin: 0;
-                    padding: 0.4em;
-                    border: 2px solid #72BAA9;
-                    color: #D5E7B5;
-                }
+        {{ webring({
+            text: "Wrongos Webring",
+            links: [
+                "<a class='wrongoLink' href='https://adrianvic.github.io/wrongos/redirect?action=previous&current=https%3A%2F%2Fadrianvic.github.io'>" ~ (i18n[langKey].previous | smartTitle) ~ "</a>",
+                "<a class='wrongoLink' href='https://adrianvic.github.io/wrongos'>" ~ (i18n[langKey].about | smartTitle ) ~ "</a>",
+                "<a class='wrongoLink' href='https://adrianvic.github.io/wrongos/redirect?action=next&current=https%3A%2F%2Fadrianvic.github.io'>" ~ (i18n[langKey].next | smartTitle) ~ "</a>"
+            ],
+            color: "#362328",
+            image: "/static/images/grunge.png"
+        }) }}
         
-                #webring-Wrongos-widget a {
-                    margin: 0;
-                    padding: 0.2em;
-                    border: 2px solid #72BAA9;
-                    border-top: 0;
-                    color: #72BAA9;
-                }
+        {{ webring({
+            text: "Breakcore Webring",
+            links: [
+                "<a href='https://webri.ng/webring/breakcoreweb/previous?via=https%3A%2F%2Fadrianvic.github.io%2F'>" ~ (i18n[langKey].previous | smartTitle) ~ "</a>",
+                "<a href='https://appak.neocities.org/breakcore'>" ~ (i18n[langKey].about | smartTitle) ~ "</a>",
+                "<a href='https://webri.ng/webring/breakcoreweb/next?via=https%3A%2F%2Fadrianvic.github.io%2F'>" ~ (i18n[langKey].next | smartTitle) ~ "</a>"
+            ],
+            image: "/static/images/metro-flowers.jpg"
+        }) }}
 
-                #webring-Wrongos-widget a:first-child {
-                    border-right: 0;
-                }
-                
-                #webring-Wrongos-widget a:last-child {
-                    border-left: 0;
-                }
-            </style>
-            <p>{{ i18n[langKey].wrongosWebring }}</p>
-            <div>
-                <a href="https://adrianvic.github.io/wrongos/redirect?action=previous&current=https%3A%2F%2Fadrianvic.github.io">{{ i18n[langKey].previousSite | smartTitle }}</a>
-                <a href="https://adrianvic.github.io/wrongos">Wrongos</a>
-                <a href="https://adrianvic.github.io/wrongos/redirect?action=next&current=https%3A%2F%2Fadrianvic.github.io">{{ i18n[langKey].nextSite | smartTitle }}</a>
-            </div>
-        </div>
-        <center>
-            <div id="breakcoreWebring" class="box noPadding" style="width: fit-content; text-align:center; background-image: url('{{ '/static/images/metro-flowers.jpg' | url }}');">
-                <p style="margin: 0; padding: 0.4em;">{{ i18n[langKey].breakcoreWebring }}</p>
-                <div style="display: flex">
-                    <a style="flex: 1; margin: 0; padding: 0.2em;" href="https://webri.ng/webring/breakcoreweb/previous?via=https%3A%2F%2Fadrianvic.github.io%2F">{{ i18n[langKey].previousSite | smartTitle }}</a>
-                    <a style="flex: 1; margin: 0; padding: 0.2em;" href="https://appak.neocities.org/breakcore">Breakcore Webring</a>
-                    <a style="flex: 1; margin: 0; padding: 0.2em;" href="https://webri.ng/webring/breakcoreweb/next?via=https%3A%2F%2Fadrianvic.github.io%2F">{{ i18n[langKey].nextSite | smartTitle }}</a>
-                </div>
-            </div>
-        </center>
-        <center>
-            <div class="droidringwidget">
-                <a href="https://kanandraw.neocities.org/stuffs/droidring/home"><img src="https://kanandraw.neocities.org/stuffs/droidring/assets/logo.png" style="width: 200px;"></a><br/>
-                <img src="https://kanandraw.neocities.org/stuffs/droidring/assets/droidwidget.png" style="width: 115px;"><br>
-                <div class="buttonsdroidring">
-                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=previous"><button class="navdroidring" data-tip="{{ i18n[langKey].previousSite | smartTitle }}">←</button></a>
-                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=random"><button class="navdroidring" data-tip="{{ i18n[langKey].random | smartTitle }}">⇄</button></a>
-                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=next"><button class="navdroidring" data-tip="{{ i18n[langKey].nextSite | smartTitle }}">→</button></a>
-                </div>
-                <style>
-                    .droidringwidget {
-                        font-family: 'Droid Sans',sans-serif;
-                        align-content: center;
-                        text-align: center;
-                        width: 215px;
-                        border: 1px solid #666666;
-                        background: linear-gradient(0deg, black, #000000db);
-                        padding: 5px;
-                    }
-                    .buttonsdroidring {
-                        background: #989898;
-                        padding: 4px;
-                        margin: -5px;
-                    }
-                    
-                    .navdroidring {
-                        background: linear-gradient(to bottom, #F1F1F1, #B8B8B8);
-                        padding: 5px;
-                        color: black;
-                        box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003B;
-                        border: none;
-                        width: 50px;
-                        height: 27px;
-                        min-width: 50px;
-                    }
-                    .navdroidring:active {
-                        background: linear-gradient(to bottom,#FFD554,#E99D00);
-                    }
-                    .navdroidring:hover {
-                        background: linear-gradient(to bottom, #ffebc4, #f2f2f2);
-                    }
-                </style>
-            </div>
-        </center>
+        {% include 'widgets/droidring.html' %}
     </div>
+
+    <footer class="end-text">
+        <p>Adrian Victor, 2026</p>
+        <p><a href="{{ ('/' ~ langKey ~ '/misc/about') | url }}">{{ i18n[langKey].thisWebsiteDoesNotTrackYou}}</a></p>
+    </footer>
 </aside>

maintenance/edit-i18n.js

@@ -1,191 +0,0 @@
-// Coded entirely by ChatGPT
-// :(
-
-const express = require("express");
-const fs = require("fs");
-const parser = require("@babel/parser");
-const traverse = require("@babel/traverse").default;
-const generate = require("@babel/generator").default;
-const t = require("@babel/types");
-
-const app = express();
-app.use(express.json());
-
-const FILE = "../_data/i18n.js";
-
-function loadAST() {
-    const code = fs.readFileSync(FILE, "utf8");
-    return parser.parse(code, { sourceType: "module" });
-}
-
-function extract(ast) {
-    const out = {};
-    
-    traverse(ast, {
-        AssignmentExpression(path) {
-            if (
-                path.node.left.object?.name === "module" &&
-                path.node.left.property?.name === "exports"
-            ) {
-                path.node.right.properties.forEach(langProp => {
-                    const lang = langProp.key.name || langProp.key.value;
-                    out[lang] = {};
-                    
-                    langProp.value.properties.forEach(p => {
-                        const key = p.key.name || p.key.value;
-                        out[lang][key] = p.value.extra?.raw || generate(p.value).code;
-                    });
-                });
-            }
-        }
-    });
-    
-    return out;
-}
-
-function write(ast, newData) {
-    traverse(ast, {
-        AssignmentExpression(path) {
-            if (
-                path.node.left.object?.name === "module" &&
-                path.node.left.property?.name === "exports"
-            ) {
-                path.node.right.properties.forEach(langProp => {
-                    const lang = langProp.key.name || langProp.key.value;
-                    
-                    const existingKeys = new Set(
-                        langProp.value.properties.map(p => p.key.name || p.key.value)
-                    );
-                    
-                    // update existing
-                    langProp.value.properties.forEach(p => {
-                        const key = p.key.name || p.key.value;
-                        
-                        if (key in (newData[lang] || {})) {
-                            p.value = parser.parseExpression(newData[lang][key]);
-                        }
-                    });
-                    
-                    // add new keys
-                    Object.keys(newData[lang] || {}).forEach(key => {
-                        if (!existingKeys.has(key)) {
-                            langProp.value.properties.push(
-                                t.objectProperty(
-                                    t.identifier(key),
-                                    parser.parseExpression(newData[lang][key])
-                                )
-                            );
-                        }
-                    });
-                });
-            }
-        }
-    });
-    
-    const output = generate(ast, { retainLines: true }).code;
-    fs.writeFileSync(FILE, output);
-}
-
-app.get("/data", (req, res) => {
-    const ast = loadAST();
-    res.json(extract(ast));
-});
-
-app.post("/save", (req, res) => {
-    const ast = loadAST();
-    write(ast, req.body);
-    res.send("ok");
-});
-
-app.get("/", (req, res) => {
-    res.send(`
-<!DOCTYPE html>
-<html>
-<body>
-<h2>i18n Editor</h2>
-<table id="t"></table>
-<button onclick="addRow()">Add</button>
-<button onclick="save()">Save</button>
-        
-<script>
-let data;
-        
-fetch('/data').then(r=>r.json()).then(d=>{
-  data=d;
-  render();
-});
-        
-function render(){
-  const table=document.getElementById('t');
-  table.innerHTML='';
-        
-  const langs=Object.keys(data);
-  const keys=[...new Set(langs.flatMap(l=>Object.keys(data[l]||{})))];
-        
-  // header
-  const headRow=document.createElement('tr');
-  const thKey=document.createElement('th');
-  thKey.textContent='key';
-  headRow.appendChild(thKey);
-        
-  langs.forEach(l=>{
-    const th=document.createElement('th');
-    th.textContent=l;
-    headRow.appendChild(th);
-  });
-        
-  table.appendChild(headRow);
-        
-  // rows
-  keys.forEach(k=>{
-    const tr=document.createElement('tr');
-        
-    const tdKey=document.createElement('td');
-    tdKey.textContent=k;
-    tr.appendChild(tdKey);
-        
-    langs.forEach(l=>{
-      const td=document.createElement('td');
-      const input=document.createElement('input');
-        
-      input.value = (data[l] && data[l][k]) || '';
-        
-      input.addEventListener('change', (e)=>{
-        upd(l, k, e.target.value);
-      });
-        
-      td.appendChild(input);
-      tr.appendChild(td);
-    });
-        
-    table.appendChild(tr);
-  });
-}
-        
-function upd(lang,key,val){
-  if(!data[lang])data[lang]={};
-  data[lang][key]=val;
-}
-        
-function addRow(){
-  const k=prompt('key');
-  if(!k)return;
-  Object.keys(data).forEach(l=>data[l][k]='');
-  render();
-}
-        
-function save(){
-  fetch('/save',{
-    method:'POST',
-    headers:{'Content-Type':'application/json'},
-    body:JSON.stringify(data)
-  });
-}
-</script>
-</body>
-</html>
-  `);
-    });
-    
-    app.listen(3000,()=>console.log('http://localhost:3000'));
-    

misc/about/index.njk

@@ -19,6 +19,7 @@ background: "bear3.jpg"
         <dd>{{ t.bgImageCredit }}</dd>
         <dt>{{ t.badges88x31Label }}</dt>
         <dd><a href="https://88x31.nl/">88x31.nl</a></dd>
+        <dd><a href="https://cyber.dabamos.de/88x31/">dabamos.de</a></dd>
         <dd><a href="https://neocities.org/browse">{{ t.neocitiesCommunity }}</a></dd>
         <dt>{{ t.clickSoundLabel }}</dt>
         <dd><a href="https://www.myinstants.com/en/instant/dog-clicker-7758/">lilypids @ Myinstants</a></dd>

school/telnet-en.html

@@ -1,61 +0,0 @@
----
-postTitle: "Telnet"
-layout: post.njk
-date: 2025-08-27
-background: redes.jpg
-authors: Adrian Victor & Arthur Borges
-langKey: en
----
-    <script src="/static/scripts/telnetSimulator.js" defer></script>
-                    <h2>What the protocol is, its function and history</h2>
-                    <p>Telnet (from <b>TEL</b>ecommunication <b>NET</b>work) is a TCP/IP stack network protocol that allows remote text-mode communication between computers. Its main function is to provide an interactive session where a user can access and control another device as if they were on a local terminal.</p>
-                    <p>Created in 1969, Telnet was one of the first protocols developed for ARPANET (the network that gave rise to the Internet) and became fundamental for system and device administration in the 1970s, 1980s, and 1990s. Over time, it fell out of use due to lack of security, being replaced by more modern alternatives such as SSH (Secure Shell).</p>
-                    <h2>Implementation</h2>
-                    <p><b>Default port:</b> 23/TCP.<br>
-Works at the application layer of the OSI model.<br>
-<b>Format:</b> Based on ASCII character exchange, without encryption.<br>
-<b>RFC:</b> Defined by RFC 854 (1983).<br>
-<b>Architecture:</b> Follows the client-server model</p>
-                    <h2>How it works</h2>
-                    <p>In practice, Telnet works relatively simply. The process starts when the client establishes a TCP connection to the server via port 23. Then a remote terminal session is initiated and the user must provide credentials such as username and password. After authentication, commands typed on the client are transmitted in plain text to the server, which processes them and returns the corresponding output. The session remains active as long as the user wants, normally ending with commands like <i>exit</i> or <i>logout</i></p>
-                    <h2>Use cases</h2>
-                    <p>For many years, Telnet was widely used for remote access to Unix, Linux, and Windows servers, especially older versions of these systems. It also became common in network device administration, such as routers and switches, until SSH became the standard. Additionally, mainframes and some legacy devices still use Telnet today. Another practical application is in educational environments and network diagnostics, where it is used to test open ports and check service connectivity, such as running “telnet server.com 80” to see if a web server port is operational.</p>
-                    <h2>Encryption: the inherent problem</h2>
-                    <p>Telnet has no native encryption, which makes it extremely vulnerable. To solve this problem, more secure alternatives were developed. The main one is SSH (Secure Shell), created in the 1990s as a direct Telnet replacement. SSH offers the same functionality while ensuring data protection through strong authentication and full traffic encryption. Another, less common approach is using SSL/TLS to tunnel Telnet sessions, but in practice this is rarely used.</p>
-                    <h2>Advantages and disadvantages</h2>
-                    <p>Telnet’s advantages include simplicity, low resource usage, and compatibility with various older systems, which facilitated its adoption over the years. However, these benefits are outweighed by its disadvantages. The main one is the lack of encryption, exposing all transmitted data—including passwords—in plain text. This makes it vulnerable to attacks such as sniffing, which captures network packets, and hijacking, which takes over active sessions. For this reason, Telnet is considered obsolete and unsafe for use on open networks like the Internet.</p>
-                    <h2>Relation to other protocols</h2>
-                    <p>Telnet is part of the TCP/IP protocol family and uses TCP to ensure reliable communication. Like other protocols in this stack, such as HTTP, FTP, and SMTP, it relies on stable connections to perform its functions, but its distinguishing feature has always been terminal-mode interactivity. Due to security flaws, it was replaced by its natural successor, SSH, which retained Telnet’s conceptual base but added robust protection layers.</p>
-                    <h2>Functional example</h2>
-                    <p>Below is a Telnet connection simulator written in JavaScript.</p>
-                    <div id="telnetSimulationLoadingHolder">
-                        <p id="telnetSimulationLoadingText">Loading...</p>
-                        <div class="ellipsis-loader" aria-role="alert" aria-label="Loading. Please wait">
-                            <div class="ellipsis-loader__dot"></div>
-                            <div class="ellipsis-loader__dot"></div>
-                            <div class="ellipsis-loader__dot"></div>
-                            <div class="ellipsis-loader__dot"></div>
-                        </div>
-                    </div>
-                    <div id="telnetSimulation">
-                        <div id="telnetSimulationServer">
-                            <h3>Server</h3>
-                            <textarea name="" id="telnetSimulationServerScreen" readonly>Welcome to Zubuntu 30.1!
-Running startup script: start_telnet_server.sh
-Telnet Server started on localhost:23
-Ready to receive commands.
-----
-</textarea>
-                            <button id="telnetSimulationServerClean">Clear</button>
-                        </div>
-                        <div id="telnetSimulationClient">
-                            <h3>Client</h3>
-                            <textarea name="" id="telnetSimulationClientScreen" readonly>Send help to see the list of commands supported by the server!
-----
-</textarea>
-                            <div id="telnetSimulationInput">
-                                <input type="text" id="telnetSimulationInputBox">
-                                <button id="telnetSimulationClientSend">Send</button>
-                            </div>
-                        </div>
-                    </div>

static/main.css

@@ -228,6 +228,10 @@ aside.metromenu #content {
     gap: 1em;
 }
 
+footer a {
+    font-size: small;
+}
+
 /* Global classes and IDs */
 
 .nomargin {
@@ -701,6 +705,22 @@ div.hs.selected {
     gap: 1em;
 }
 
+.webringGeneric {
+    background-color: black;
+    padding: .4em;
+    background-position-x: 0;
+    background-size: cover;
+}
+
+.webringButtons {
+    display: flex;
+    gap: .4em;
+}
+
+.wrongoLink {
+    color: #D5E7B5;
+}
+
 #breakcoreWebring {
     background-position-x: 0;
     background-size: cover;
@@ -819,12 +839,27 @@ header div:first-child {
     display: flex;
 }
 
+#homeAside {
+    margin-bottom: 2em;
+}
+
 #homeWebrings {
     display: flex;
     flex-direction: column;
     gap: 1em;
     height: fit-content;
-    margin-bottom: 2em;
+}
+
+#homeBlog p {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+#homeBlog a {
+    color: white;
 }
 
 #telnetSimulation {