index page update, redo window tags

_includes/layouts/about/about.njk

@@ -0,0 +1,19 @@
+<!-- about synth.download -->
+<article window id="about">
+    <div class="header">
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler message-chatbot></icon-tabler>
+        </titlebar-icon>
+        <a href="#about">About</a>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
+    </div>
+    <window-contents>
+        <h1>About</h1>
+    </window-contents>
+</article>

_includes/layouts/admins/admins.njk

@@ -1,5 +1,5 @@
 <!-- synth.download admins -->
-<article id="admins" class="window">
+<article window id="admins">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler user-cog></icon-tabler>

_includes/layouts/donate/donate.njk

@@ -1,5 +1,5 @@
 <!-- donation window -->
-<article id="donate" class="window">
+<article window id="donate">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler currency-dollar></icon-tabler>

_includes/layouts/fediverse/iceshrimp/bubble.njk

@@ -1,5 +1,5 @@
 <!-- bubble timeline -->
-<article id="bubble" class="window">
+<article window id="bubble">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/iceshrimp/fe.njk

@@ -1,5 +1,5 @@
 <!-- alternative frontends -->
-<article id="frontends" class="window">
+<article window id="frontends">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/iceshrimp/features.njk

@@ -1,5 +1,5 @@
 <!-- instance features -->
-<article id="features" class="window">
+<article window id="features">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/iceshrimp/info.njk

@@ -1,5 +1,5 @@
 <!-- information -->
-<article id="information" class="window">
+<article window id="information">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/iceshrimp/intro.njk

@@ -1,5 +1,5 @@
 <!-- iceshrimp introduction -->
-<article id="iceshrimp" class="window">
+<article window id="iceshrimp">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--universe"></span>

_includes/layouts/fediverse/iceshrimp/tips.njk

@@ -1,5 +1,5 @@
 <!-- iceshrimp tips & tricks -->
-<article id="tips" class="window">
+<article window id="tips">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/mastodon/features.njk

@@ -1,5 +1,5 @@
 <!-- instance features -->
-<article id="features" class="window">
+<article window id="features">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/mastodon/info.njk

@@ -1,5 +1,5 @@
 <!-- information -->
-<article id="information" class="window">
+<article window id="information">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/mastodon/intro.njk

@@ -1,5 +1,5 @@
 <!-- mastodon introduction -->
-<article id="mastodon" class="window">
+<article window id="mastodon">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--universe"></span>

_includes/layouts/fediverse/moderation.njk

@@ -1,5 +1,5 @@
 <!-- moderation-->
-<article id="moderation" class="window">
+<article window id="moderation">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/rules.njk

@@ -1,5 +1,5 @@
 <!-- instance rules -->
-<article id="rules" class="window">
+<article window id="rules">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/sharkey/bubble.njk

@@ -1,5 +1,5 @@
 <!-- bubble timeline -->
-<article id="bubble" class="window">
+<article window id="bubble">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/sharkey/features.njk

@@ -1,5 +1,5 @@
 <!-- instance features -->
-<article id="features" class="window">
+<article window id="features">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/sharkey/info.njk

@@ -1,5 +1,5 @@
 <!-- information -->
-<article id="information" class="window">
+<article window id="information">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/fediverse/sharkey/intro.njk

@@ -1,5 +1,5 @@
 <!-- sharkey introduction -->
-<article id="sharkey" class="window">
+<article window id="sharkey">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--universe"></span>

_includes/layouts/fediverse/sharkey/tips.njk

@@ -1,5 +1,5 @@
 <!-- iceshrimp tips & tricks -->
-<article id="tips" class="window">
+<article window id="tips">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>

_includes/layouts/footer.njk

@@ -1,5 +1,5 @@
 <!-- webrings and credits -->
-<footer id="footer" class="window">
+<footer window id="footer">
     <div class="header">
         <a href="#footer">Footer</a>
     </div>

_includes/layouts/home/intro.njk

@@ -1,26 +0,0 @@
-<!-- simple site introduction -->
-<article id="site" class="window home">
-    <div class="header">
-        <titlebar-icon aria-hidden="true">
-            <icon-tabler message-chatbot></icon-tabler>
-        </titlebar-icon>
-        <a href="#site">Welcome!</a>
-        <window-controls aria-hidden="true">
-            <icon-tabler minimize></icon-tabler>
-            <icon-tabler maximize></icon-tabler>
-            <close-button aria-hidden="true">
-                <icon-tabler x></icon-tabler>
-            </close-button>
-        </window-controls>
-    </div>
-    <window-contents>
-        <p>Hey! Welcome to...</p>
-        <a href="https://forged.synth.download/sneexy/synth"><img id="logo" loading="lazy" src="/assets/synth.download/logo_web.svg" alt="Synth.Download" /></a>
-        <p>We're a small community of friends, hosting and managing stuff together. Themed around <a target="_blank" href="https://synthspecies.com">synths</a>, most of us are synths, including <small><i>(most)</i></small> of the <a href="/admins">system administrators</a>, but open and accepting of all fellow beings, creatures, toasters and organics.</p>
-        <p>There are a few public facing services we run here for general public use, although most services are private or require registration as they are meant for members and friends of Synth.Download. Poke at the navigation bar on top to navigate this page and figure out more about what we serve here.</p>
-        <p>Enjoy your stay! <i>Beep!~</i></p>
-        <button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSynthDownload()">
-            <img src="/assets/buttons/synth.download.svg" alt="Synth.Download!">
-        </button>
-    </window-contents>
-</article>

_includes/layouts/index.njk

@@ -0,0 +1,27 @@
+<!-- simple site introduction -->
+<article window id="home">
+    <div class="header">
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler message-chatbot></icon-tabler>
+        </titlebar-icon>
+        <a href="#site">Welcome!</a>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
+    </div>
+    <window-contents>
+        <p t-center>Hey! Welcome to...</p>
+        <p t-center><a id="logo" href="https://forged.synth.download/sneexy/synth"><img loading="lazy" src="/assets/synth.download/logo_web.svg" alt="Synth.Download" /></a></p>
+        <p>We're a project managed by beepers, toasters, and other non-organic and organic creatures alike, hosting and running services together to provide ourselves with a safe community, and for the greater net public.</p>
+        <p>Synth.Download is, obviously, themed around <a href="https://synthspecies.com">Synths</a>. In general, we're aimed towards furry, therian, otherkin and non-organic-like beings, but accepts all! As long as you're chill with us.</p>
+        <p>Read our <a href="/about">About</a> for more information related to Synth.Download itself, or head over to our <a href="/services">Services</a> page to see what we provide. <small>By accessing and using this site and its services, you agree to our <a href="/privacy">Privacy Policy</a> and <a href="/tos">Terms of Service</a>.</small></p>
+        <p t-center>Enjoy your stay! <i>Beep!~</i></p>
+        <button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSynthDownload()">
+            <img src="/assets/buttons/synth.download.svg" alt="Synth.Download!">
+        </button>
+    </window-contents>
+</article>

_includes/layouts/privacy.njk

@@ -1,5 +1,5 @@
 <!-- privacy policy -->
-<article id="privacy" class="window">
+<article window id="privacy">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler lock></icon-tabler>

_includes/layouts/services/services.njk

@@ -1,5 +1,5 @@
 <!-- publics & private services -->
-<article id="services" class="window">
+<article window id="services">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler server-cog></icon-tabler>

_includes/layouts/sneexy/about.njk

@@ -1,5 +1,5 @@
 <!-- about me -->
-<article id="about-me" class="window">
+<article window id="about-me">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler info-circle></icon-tabler>

_includes/layouts/sneexy/buttons.njk

@@ -1,5 +1,5 @@
 <!-- buttons -->
-<article id="buttons" class="window home">
+<article window id="buttons" class="window home">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler link></icon-tabler>

_includes/layouts/sneexy/funfacts.njk

@@ -1,5 +1,5 @@
 <!-- "fun" facts -->
-<article id="fun-facts" class="window">
+<article window id="fun-facts">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler mood-empty></icon-tabler>

_includes/layouts/sneexy/intro.njk

@@ -1,5 +1,5 @@
 <!-- simple introduction -->
-<article id="sneexy" class="window">
+<article window id="sneexy">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler user></icon-tabler>

_includes/layouts/sneexy/nsfw/intro.njk

@@ -1,5 +1,5 @@
 <!-- content warned introduction -->
-<article id="warning" class="window">
+<article window id="warning">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler alert-triangle></icon-tabler>

_includes/layouts/sneexy/nsfw/nsfw.njk

@@ -1,5 +1,5 @@
 <!-- nsfw -->
-<article id="nsfw" class="window">
+<article window id="nsfw">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler user></icon-tabler>

_includes/layouts/sneexy/ruben/features.njk

@@ -1,5 +1,5 @@
 <!-- features -->
-<article id="features" class="window">
+<article window id="features">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler notes></icon-tabler>

_includes/layouts/sneexy/ruben/intro.njk

@@ -1,5 +1,5 @@
 <!-- intro -->
-<article id="intro" class="window">
+<article window id="intro">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler robot-face></icon-tabler>

_includes/layouts/sneexy/ruben/personality.njk

@@ -1,5 +1,5 @@
 <!-- personality -->
-<article id="personality" class="window">
+<article window id="personality">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler mood-look-up></icon-tabler>

_includes/layouts/sneexy/socials.njk

@@ -1,5 +1,5 @@
 <!-- socials -->
-<article id="links" class="window">
+<article window id="links">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler link></icon-tabler>

_includes/layouts/tos.njk

@@ -1,5 +1,5 @@
 <!-- terms of service -->
-<article id="tos" class="window">
+<article window id="tos">
     <div class="header">
         <titlebar-icon aria-hidden="true">
             <icon-tabler rosette-discount-check></icon-tabler>

_includes/styles/base.css

@@ -137,6 +137,11 @@ h3 a, h4 a {
     color: var(--warning);
 }
 
+/* utility classes or whatever they call them */
+[t-center] {
+    text-align: center;
+}
+
 /* links should look good i think */
 a {
     color: var(--foreground);

_includes/styles/pages/home.css

@@ -7,16 +7,9 @@
 /  ╰──────────────────────────────╯
 /  home - specific styling for the main synth.download home page (index.md) */
 
-#site.window.home {
+article#home {
     window-contents {
-        #logo {
+        p 
-            width: 40rem;
-            height: auto;
-            line-break: strict;
-            margin-bottom: 0.5rem;
-            text-align: center;
-            cursor: default;
-        }
 
         h1 {
             margin-top: -1rem;
@@ -24,7 +17,15 @@
         }
 
         p {
-            margin-top: 3px;
+            a#logo {
+                cursor: default;
+                margin-bottom: 0.5rem;
+
+                img[src="/assets/synth.download/logo_web.svg"] {
+                    width: 40rem;
+                    height: auto;
+                }
+            }
         }
 
         ul {
@@ -38,8 +39,6 @@
                 text-decoration: underline !important;
             }
         }
-
-        text-align: center;
     }
 }
 

_includes/styles/windows.css

@@ -7,7 +7,7 @@
 /  ╰────────────────────────────────────────────╯
 /  windows - related styling for the windows on pages */
 
-.window {
+[window] {
     background-color: var(--background);
     border-radius: 2rem .6rem 2rem .6rem;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

about.md

@@ -0,0 +1,7 @@
+---
+title: about synth.download
+layout: "layouts/base.njk"
+permalink: "/about/"
+---
+
+{% include "layouts/about/about.njk" %}

assets/buttons/friends/madz.gif

@@ -12,7 +12,7 @@
   <div class="overlay"></div>
   <body>
     <main class="container">
-      <div class="window">
+      <div>
         <p class="windowtitle">Home ~ Madz.mov - Mozilla Firefox</p>
         <div class="window-controls">
           <a href="javascript:history.back()"><img style="margin-left: 5px;" src="/assets/images/icons-ff/go-previous.png"></a>

index.md

@@ -4,4 +4,4 @@ layout: "layouts/base.njk"
 permalink: "/index.html"
 ---
 
-{% include "layouts/home/intro.njk" %}
+{% include "layouts/index.njk" %}