From 008e0cc5af632ac7dd3ff0c97ca4c1a18e2131a1 Mon Sep 17 00:00:00 2001
From: leah <leah@southlondon.cc>
Date: Thu, 24 Mar 2022 15:44:17 +0000
Subject: [PATCH] some website tweakage

---
 paths.toml                    |  8 +++++
 sass/main.scss                |  8 +++--
 templates/header.html         | 48 ++++++++++++++++++-------
 templates/index.html          | 16 +++------
 templates/index/header.html   | 68 -----------------------------------
 templates/index/section1.html | 31 ++++++++++++++++
 templates/index/userlist.html | 60 ++++++++++++++++---------------
 7 files changed, 115 insertions(+), 124 deletions(-)
 create mode 100644 paths.toml
 create mode 100644 templates/index/section1.html

diff --git a/paths.toml b/paths.toml
new file mode 100644
index 0000000..15959c6
--- /dev/null
+++ b/paths.toml
@@ -0,0 +1,8 @@
+paths = [
+    { name = "join", path = "/signup" },
+    { name = "code of conduct", path = "/coc" },
+    { name = "docs + guides", path = "https://library.southlondon.cc"},
+    { name = "code", path = "https://tildegit.org/southlondon"},
+    { name = "x", path = "https://x.southlondon.cc"},
+
+]
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 91b23dc..470bae9 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -6,7 +6,7 @@
 
 :root {
     --bg: white;
-    --fg: rgb(5, 5, 5);
+    --fg: rgb(40, 40, 40);
     --highlight: rgb(220, 220, 220);
 
     --border: 1px solid var(--highlight);
@@ -23,7 +23,8 @@ body {
 }
 
 body {
-    font-family: 'Recursive', sans-serif;
+    font-family:'Recursive', sans-serif;
+    color: var(--fg);
 }
 
 main {
@@ -56,8 +57,9 @@ footer {
 
 a,
 a:visited {
-    color: inherit;
+    color: black;
     text-decoration: underline var(--highlight) dashed 2px;
+    font-weight: 500;
 }
 
 a:hover {
diff --git a/templates/header.html b/templates/header.html
index 1b76b0b..655c1d0 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,23 +1,47 @@
+{% set paths = load_data(path="paths.toml") %}
+
 <header>
     <nav class="nav">
-        <a href="/">south london</a> ·
-        <a href="/signup">join</a> ·
-        <a href="/coc">code of conduct</a> ·
-        <a href="https://library.southlondon.cc">docs + guides</a> ·
-        <a href="https://tildegit.org/southlondon">code</a>·
-        <a href="https://x.southlondon.cc">x</a>
-
+        {% if current_path == "/" %}
+            <span><a href="/" class="active">south london</a></span>
+            {% else %}
+            <span><a href="/">south london</a></span>
+        {% endif %}
+        {% for path in paths.paths %}
+            {% if current_path is starting_with(path.path) %}
+            <span><a href="{{ path.path }}" class="active">{{ path.name }}</a></span>
+            {% else %}
+            <span><a href="{{ path.path }}">{{ path.name }}</a></span>
+            {% endif %}
+        {% endfor %}
     </nav>
+
 </header>
 
 <style>
-    .nav {
-        padding: 0.5em 0;
+    header {
         background: white;
     }
 
-    nav>a {
-        margin: 1em;
+    .nav {
+        padding: 0.5em 0;
+    }
+
+    nav > span > a {
         white-space: nowrap;
     }
-</style>
+
+    a.active {
+        color: #8360c3;
+        font-weight: 800;
+    }
+
+    nav > span::after {
+        content: " · ";
+        margin: 0 1rem;
+    }
+
+    nav > span:last-of-type::after {
+        content: "";
+    }
+</style>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e1cc3a5..867db46 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,20 +6,13 @@
 
 {% block content %}
 
-{% include "index/header.html" %}
+{% include "header.html" %}
+<main>
+{% include "index/section1.html" %}
+</main>
 {% include "index/userlist.html" %}
 
-
 <style>
-    body {
-        background: #44A08D;
-        background: -webkit-linear-gradient(to bottom, #093637, #44A08D);
-        background: linear-gradient(to bottom, #093637, #44A08D);
-
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-    }
-
     @media (max-width: 1000px) {
         header {
             grid-template-columns: 1fr;
@@ -29,7 +22,6 @@
         header>.title {
             border-bottom: var(--border);
         }
-
     }
 </style>
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/index/header.html b/templates/index/header.html
index 92055c6..e69de29 100644
--- a/templates/index/header.html
+++ b/templates/index/header.html
@@ -1,68 +0,0 @@
-<header>
-    <a href="/" class="title">
-        south london
-    </a>
-    <nav class="split">
-        <nav class="nav">
-            <a href="/">home</a> ·
-            <a href="/signup">join</a> ·
-            <a href="/coc">code of conduct</a> ·
-            <a href="https://library.southlondon.cc">docs + guides</a> ·
-            <a href="https://tildegit.org/southlondon">code</a> ·
-            <a href="https://x.southlondon.cc">x</a>
-        </nav>
-        <div class="intro">
-            south london is a shared unix system that tries its best to be a comfy place to piss about with computery things.
-            we're based in the uk so if you're in or around there you should get much better ping than pubnixes located
-            in places that aren't the uk.
-        </div>
-    </nav>
-</header>
-
-<style>
-    header {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        padding: 0;
-        height: 150px;
-        background: white;
-    }
-
-
-    header>.title {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-weight: 700;
-        font-variation-settings: 'slnt'-15;
-        letter-spacing: -4px;
-        font-size: 3.5em;
-        text-align: center;
-
-        border-right: var(--border);
-    }
-
-    header>.split {
-        display: flex;
-
-        flex-direction: column;
-    }
-
-
-    header>.split>.nav {
-        place-items: center left;
-        border-bottom: var(--border);
-        padding: 1em 0;
-    }
-
-    header>.split>.intro {
-        padding: 1em;
-        height: 100%;
-    }
-
-    nav>a {
-        margin: 1em;
-        white-space: nowrap;
-    }
-</style>
diff --git a/templates/index/section1.html b/templates/index/section1.html
new file mode 100644
index 0000000..75f17a5
--- /dev/null
+++ b/templates/index/section1.html
@@ -0,0 +1,31 @@
+<div class="title">
+    <h1>south london</h1>
+    <p>strand-type computing</p>
+</div>
+
+<section>
+    <p>hello! we're a small little very tiny community of people who like to use computers to make things. <a
+            href="/signup">come join us!</a></p>
+    <p>this page is served from a shared linux-based computer that all members have access to. it's pretty modest
+        resource-wise but it should be able to handle all your favourite-command line tools without any trouble.</p>
+    <p>right now we have: </p>
+    <ul>
+        <li>many text editors</li>
+        <li>https:// and gemini:// page hosting</li>
+        <li>tools for a variety of progamming languages</li>
+        <li>some irc clients</li>
+        <li>a <a href="https://library.southlondon.cc">mediawiki instance</a></li>
+    </ul>
+
+</section>
+
+<style>
+    .title {
+        margin: 2rem 0;
+    }
+
+    .title>h1,
+    .title>p {
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/templates/index/userlist.html b/templates/index/userlist.html
index ed8aa45..c563159 100644
--- a/templates/index/userlist.html
+++ b/templates/index/userlist.html
@@ -1,7 +1,7 @@
 <div class="pages">
+    <h4 class="text">our esteemed users</h4>
     {% set user_data = load_data(path="users.toml") %}
-    <h3 style="margin-bottom: 2em;"> <span class="text"> our esteemed users </span> </h3>
-    <ul>
+    <ul class="users">
         {% for u in user_data.all -%}
         <a href="/~{{ u }}/">
             <li><span class="text">~{{ u }}</span></li>
@@ -23,33 +23,44 @@
 <style>
     .pages {
         padding: 1em 2em;
+
+        /* background: #44A08D;
+        background: -webkit-linear-gradient(to bottom, #093637, #44A08D);
+        background: linear-gradient(to bottom, #093637, #44A08D);
+
+        background-repeat: no-repeat;
+        background-attachment: fixed; */
+
+        max-width: 72rem;
+        margin: auto;
     }
 
-    ul {
-        display: grid;
+    .users {
+        display: flex;
 
-        padding: 0;
+        padding: 2rem 0;
 
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        flex-wrap: wrap;
+        justify-content: center;
 
         list-style: none;
-        gap: 4em 24px;
+        gap: 4rem 2rem;
 
         text-align: center;
     }
 
-    ul>a:hover {
+    .users>a:hover {
         color: #8360c3;
         background: none;
     }
 
-    ul>a:hover>img {
-        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.8);
-        transform: scale(1.04);
+    .users>a:hover>img {
+        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.8);
+        transform: scale(1.02);
     }
 
-    ul>a:active>img {
-        transform: scale(0.96);
+    .users>a:active>img {
+        transform: scale(0.98);
     }
 
     .text {
@@ -57,37 +68,28 @@
         border-radius: 15px;
         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
         padding: 0.5em 1em;
+        width: max-content;
     }
 
     img {
         margin-top: 1em;
         background: white;
-        box-shadow: 0 2px 18px 2px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 0 0px 2px rgba(0, 0, 0, 0.1);
         transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
-        width: 250px;
-        height: 250px;
-        border-radius: 40px;
+        width: 12rem;
+        height: 12rem;
+        border-radius: 20px;
     }
 
-    @media (min-width: 1600px) {
-        ul {
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-        }
-    }
-    @media (max-width: 1200px) {
-        ul {
-            grid-template-columns: 1fr 1fr 1fr;
-        }
-    }
 
     @media (max-width: 900px) {
-        ul {
+        .users {
             grid-template-columns: 1fr 1fr;
         }
     }
     @media (max-width: 600px) {
-        ul {
+        .users {
             grid-template-columns: 1fr;
         }
     }