redesign website

flaskr/__init__.py

@@ -39,9 +39,7 @@ data = {
     "next_theme": {
         "system": "dark",
         "dark": "light",
-        "light": "contrast",
+        "light": "system",
-        "contrast": "contrast-dark",
-        "contrast-dark": "system",
     }
 }
 

flaskr/static/style.css

@@ -1,16 +1,44 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:wght@500&display=swap');
+@font-face {
+    font-family: Merriweather;
+    src: url(/static/f/Merriweather-Light.woff2);
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Merriweather;
+    src: url(/static/f/Merriweather-LightItalic.woff2);
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Merriweather;
+    src: url(/static/f/Merriweather-Bold.woff2);
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: Merriweather;
+    src: url(/static/f/Merriweather-BoldItalic.woff2);
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Roboto Slab";
+    src: url(/static/f/RobotoSlab-Medium.woff2);
+    font-weight: 500;
+}
 
 @media (prefers-color-scheme: dark) {
     :root.theme-system {
-        --bg: #242328;
+        --bg: #131720;
-        --bg-intense: #141316;
+        --bg-intense: #000000;
-        --bg-faded: #373338;
+        --bg-faded: #293441;
-        --fg: #e0dedc;
+        --fg: #e6ded6;
-        --fg-faded: #9b9497;
+        --fg-faded: #908a81;
-        --accent-1: #96bf59;
+        --accent-1: #2aca98;
-        --accent-1-dark: #759438;
+        --accent-1-dark: #268d78;
-        --accent-2: #789ebf;
-        --accent-2-dark: #52729d;
         --error: #ee6d7d;
     }
     .only-theme-light {
@@ -37,15 +65,13 @@
 }
 
 :root.theme-dark {
-    --bg: #242328;
+    --bg: #131720;
-    --bg-intense: #141316;
+    --bg-intense: #000000;
-    --bg-faded: #373338;
+    --bg-faded: #293441;
-    --fg: #e0dedc;
+    --fg: #e6ded6;
-    --fg-faded: #9b9497;
+    --fg-faded: #908a81;
-    --accent-1: #96bf59;
+    --accent-1: #2aca98;
-    --accent-1-dark: #759438;
+    --accent-1-dark: #268d78;
-    --accent-2: #789ebf;
-    --accent-2-dark: #52729d;
     --error: #ee6d7d;
 }
 
@@ -57,37 +83,9 @@
     --fg-faded: #989097;
     --accent-1: #0642c3;
     --accent-1-dark: #07136d;
-    --accent-2: #0d8101;
-    --accent-2-dark: #045901;
     --error: #a50518;
 }
 
-:root.theme-contrast {
-    --bg: white;
-    --bg-intense: white;
-    --bg-faded: #d0d0d0;
-    --fg: black;
-    --fg-faded: #444444;
-    --accent-1: blue;
-    --accent-1-dark: darkblue;
-    --accent-2: blue;
-    --accent-2-dark: darkblue;
-    --error: #880000;
-}
-
-:root.theme-contrast-dark {
-    --bg: black;
-    --bg-intense: black;
-    --bg-faded: #333333;
-    --fg: white;
-    --fg-faded: #cccccc;
-    --accent-1: #44c0ff;
-    --accent-1-dark: #2280bb;
-    --accent-2: #44c0ff;
-    --accent-2-dark: #2280bb;
-    --error: #ff8888;
-}
-
 :root.theme-special {
     --bg: #ffff00;
     --bg-intense: #ffffff;
@@ -96,31 +94,29 @@
     --fg-faded: #ff0000;
     --accent-1: #00ffff;
     --accent-1-dark: #0000ff;
-    --accent-2: #000000;
+    --error: #000000;
-    --accent-2-dark: #00ffff;
-    --error: #00ff88;
     font-family: "Comic Sans MS", cursive;
 }
 
 :root {
     color: var(--fg);
-    font-family: "Lato", sans-serif;
+    --text-fonts: "Merriweather", "DejaVu Serif", serif;
-    font-size: 20px;
+    font-family: var(--text-fonts);
+    font-size: 19px;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.6;
     --link: var(--accent-1);
     --link-hover: var(--accent-1-dark);
     --link-active: var(--accent-1-dark);
     --button: var(--bg-intense);
     --button-hover: var(--bg-faded);
-    --button-active: var(--accent-2-dark);
+    --button-active: var(--accent-1-dark);
     overflow-wrap: break-word;
 }
 
 h1, h2, h3, nav {
     font-family: "Roboto Slab", serif;
     font-weight: 500;
-    margin-left: 20px;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -129,6 +125,8 @@ h1 {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
+    margin-top: 4px;
+    margin-bottom: 0px;
 }
 
 body {
@@ -144,6 +142,15 @@ main {
     flex-grow: 1;
 }
 
+hr {
+    width: 100%;
+}
+
+section {
+    padding-left: 10px;
+    background-color: var(--bg-intense);
+}
+
 footer {
     text-align: center;
     color: var(--fg-faded);
@@ -226,7 +233,7 @@ pre {
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 12px;
-    border-left: 5px solid var(--accent-2-dark);
+    border-left: 5px solid var(--accent-1-dark);
 }
 
 button, input, select, textarea {
@@ -234,7 +241,7 @@ button, input, select, textarea {
     background-color: var(--bg-faded);
     border: 2px solid var(--fg-faded);
     border-radius: 3px;
-    font-family: "Lato", sans-serif;
+    font-family: var(--text-fonts);
     font-size: 16px;
 }
 

flaskr/templates/_base.html

@@ -23,7 +23,7 @@
             {% if meta.fullscreen == True %}
             width: 100%;
             {% else %}
-            width: min({{ meta.pagewidth or "900px"}}, 90vw);
+            width: min({{ meta.pagewidth or "800px"}}, 80vw);
             {% endif %}
         }
     </style>
@@ -39,7 +39,7 @@
         <a href="/">Home</a> ·
         <a href="/projects/">Projects</a> ·
         <a href="/blog/">Blog™</a> ·
-        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" style="position: sticky;">
         <a href="?theme={{ data.next_theme[theme] | safe }}">
             <rect width="8" height="8" fill="#00000000" />
             {% if theme == "dark" %}
@@ -48,12 +48,6 @@
             {% elif theme == "light" %}
             <path d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-2.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-2.5 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-3.5 1.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-6 2.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-2.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5z"/>
             <title>Light theme</title>
-            {% elif theme == "contrast" %}
-            <path d="M4 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 1c1.66 0 3 1.34 3 3s-1.34 3-3 3v-6z" />
-            <title>High-contrast theme</title>
-            {% elif theme == "contrast-dark" %}
-            <path d="M4 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 1c1.66 0 3 1.34 3 3s-1.34 3-3 3v-6z" />
-            <title>Dark high-contrast theme</title>
             {% elif theme == "special" %}
             <image href="/static/i/apioform1.png" width="8" height="8" />
   transform="translate(0 1)" />
@@ -65,15 +59,18 @@
         </a>
         </svg>
     </nav>
-    <hr style="width: 100%"/>
+
-    {% block title %}
     <h1>{{ meta.title }}</h1>
-    {% endblock %}
+
+    <hr style="width: 100%"/>
+
     {% endif %}
     <main>
         {% block content %}{% endblock %}
     </main>
     {% if meta.fullscreen != True %}
+    <hr />
+    {% block footer_content %}{% endblock %}
     <footer>
         {{ data.feet | random | safe }}
     </footer>

flaskr/templates/index.html

@@ -2,29 +2,40 @@
 {% extends "/_base.html" %}
 {% block content %}
 
-<p>
-Welcome! On this website you may view a multitude of content, including numerous 
-<a href="/projects/">projects</a>, a <a href="/blog/">Blog™</a>, and various other information contained on 
-this page. Enjoy.
-</p>
-
 <h2>About</h2>
 <p>
-I am a person (proof of this fact is left to the reader) who has been granted an internet connection and uses 
+    I am a person (proof of this fact is left to the reader) who has been granted an internet connection and uses 
-it extensively for assorted purposes.  I enjoy many things, most of which involve manipulating some state
+    it extensively for assorted purposes.  I enjoy many things, most of which involve manipulating some state
-according to various sets of rules.
+    according to various sets of rules.
 </p>
-<h2>GEORGE</h2>
+
+<h2>Projects</h2>
+<ul>
+    <li><a href="projects/complex_grapher">Complex Grapher</a> - Graph complex functions online</li>
+    <li><a href="projects/complex_grapher">zzcxz visualizer</a> - Force-directed graph of <a href="https://zzcxz.citrons.xyz/">zzcxz</a> using D3.js</a>
+    <li><a href="https://g.trimill.xyz/trimill/complexpr">complexpr</a> - A toy programming language with an interpreter written in Rust</li>
+    <li><a href="https://g.trimill.xyz/trimill/Quectocraft">Quectocraft</a> - An ultra-minimalist implementation of a Minecraft server in Rust and Lua</li>
+    <li><a href="https://g.trimill.xyz/trimill/rss-bundler">RSS Bundler</a> - Bundle multiple RSS feeds into one</li>
+</ul>
 <p>
-<a href="https://george.gh0.pw">GEORGE</a> is a webring of which I am a member. Use the standard-issue GEORGEbox 
+    See more on the <a href="projects">projects page</a> and on <a href="https://g.trimill.xyz/trimill">my Forgejo instance</a>.
-below to view the GEORGE homepage or access the previous and next members in the ring.
 </p>
+
+<h2>Contact</h2>
+<p>
+    Email: trimill012 ("at" sign) gmail (full stop) com <br />
+    Discord: trimill#6898 <br />
+    Forgejo: <a href="https://g.trimill.xyz/">trimill</a> <br />
+    GitHub: <a href="https://github.com/TriMill/">trimill</a> <br />
+    Youtube: <a href="https://www.youtube.com/@trimill012">trimill</a> <br />
+</p>
+
+{% endblock %}
+
+{% block footer_content %}
+
 {% if theme == "light" %}
 <iframe height="50" src="https://george.gh0.pw/embed.cgi?trimill&c_bg=%23f6f5f2&c_fg=%2328262b&c_links=%230642c3&c_george=%230d8101&c_underline=%230d8101" style="border:none;width:100%;" sandbox="allow-top-navigation"></iframe>
-{% elif theme == "contrast" %}
-<iframe height="50" src="https://george.gh0.pw/embed.cgi?trimill" style="border:none;width:100%;" sandbox="allow-top-navigation"></iframe>
-{% elif theme == "contrast-dark" %}
-<iframe height="50" src="https://george.gh0.pw/embed.cgi?trimill&c_bg=%23000000&c_fg=%23ffffff&c_links=%2344c0ff&c_george=%2344c0ff&c_underline=%2344c0ff" style="border:none;width:100%;" sandbox="allow-top-navigation"></iframe>
 {% elif theme == "special" %}
 <iframe height="50" src="https://george.gh0.pw/embed.cgi?trimill&c_bg=%23ffff00&c_fg=%23ff00ff&c_links=%2300ffff&c_george=%2300ff00&c_underline=%2300ff00" style="border:none;width:100%;" sandbox="allow-top-navigation"></iframe>
 {% elif theme == "system" %}
@@ -34,27 +45,6 @@ below to view the GEORGE homepage or access the previous and next members in the
 <iframe height="50" src="https://george.gh0.pw/embed.cgi?trimill&c_bg=%23242328&c_fg=%23e0dedc&c_links=%2396bf59&c_george=%23789ebf&c_underline=%23789ebf" style="border:none;width:100%;" sandbox="allow-top-navigation"></iframe>
 {% endif %}
 
-<h2>Other places I exist</h2>
-<p>
-Email: trimill012 ("at" sign) gmail (full stop) com <br />
-Discord: trimill#6898 <br />
-Forgejo: <a href="https://g.trimill.xyz/">trimill</a> <br />
-GitHub: <a href="https://github.com/TriMill/">trimill</a> <br />
-Youtube: <a href="https://www.youtube.com/@trimill012">trimill</a> <br />
-</p>
-
-<h2>Source code & attribution</h2>
-<p>
-The source code for this website is available <a href="https://g.trimill.xyz/trimill/trimill.xyz/">on my Forgejo instance</a> and is 
-released under the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPLv3</a> free and open-source license.
-It is built using the <a href="https://flask.palletsprojects.com/en/2.1.x/">Flask</a> web framework and incorporates
-icons from <a href="https://useiconic.com/open">Open Iconic</a>. The <a href="https://citrons.xyz/a/memetic-apioform-page.html">memetic apioform page</a>
-was not involved at all in this site's creation, yet for some reason I feel compelled to link it here.
-</p>
-
-<br />
-
-<div style="color: var(--fg-faded); text-align: center;">johnvertisement</div>
 <p>
 <iframe src="https://john.citrons.xyz/embed?ref=trimill.xyz" style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
 </p>

flaskr/templates/projects.html

@@ -2,19 +2,82 @@
 {% extends "/_base.html" %}
 {% block content %}
 
-<p>Here are some projects I have made over the past few years.</p>
+<h2><a href="https://g.trimill.xyz/trimill/complexpr">complexpr</a></h2>
+<p>
+    Complexpr is a toy programming language with an interpreter written in Rust. It is dynamically typed, with 
+    native support for rational and complex numbers, lists and maps, and first-class functions. It features
+    pipeline operators (similar to Elixir's <code>|&gt;</code>) to express nested function calls more cleanly.
+</p>
 
-<ul>
+<h2><a href="https://g.trimill.xyz/trimill/quectocraft">Quectocraft</a></h2>
-{% for site in data.projects %}
+<p>
-{% if site.hidden != True %}
+    Quectocraft is an extensible, ultra-minimalist implementation of a Minecraft server. By doing away with most
-<li>
+    features of the vanilla server (such as world generation and interaction) it can run without consuming many system
-{% if site.star == True %}
+    resources. It is written primarily in Rust, but can load simple plugins written in Lua to add chat features and commands.
-★
+</p>
-{% endif %}
-<a href="/projects/{{ site.path }}/">{{ site.title }}</a> · {{ site.desc | safe }}
-</li>
-{% endif %}
-{% endfor %}
-</ul>
 
-{% endblock %}
+<h2><a href="https://g.trimill.xyz/trimill/rss-bundler">RSS Bundler</a></h2>
+<p>
+    RSS Bundler is a tool that bundles multiple RSS feeds into one. At a fixed interval it fetches content from the configured
+    feeds, merges them together, and stores and serves the result. RSS Bundler is written in Rust.
+</p>
+
+<h2><a href="/projects/complex_grapher">Complex grapher</a></h2>
+<p>
+    Complex grapher allows you to functions using <a href="https://en.wikipedia.org/wiki/Domain_coloring">domain coloring</a>. 
+    Functions are written in a custom expression language and compiled to GLSL. WebGL is then used to generate a color for each pixel. 
+    Complex grapher also has support for iterating functions, allowing you to generate fractals such as the Mandelbrot and Julia sets.
+</p>
+
+<h2><a href="/projects/zzcxz_vis">zzcxz visualizer</a></h2>
+<p>
+    zzcxz visualizer displays a force-directed graph of <a href="https://zzcxz.citrons.xyz/">zzcxz</a>, a collaborative interactive
+    fiction project. It is written in JavaScript and uses D3.js.
+</p>
+
+<h2><a href="https://g.trimill.xyz/trimill/sysh">sysh</a></h2>
+<p>
+    sysh is a shell that allows users to run Linux syscalls directly. It supports the entire set of x86_64 syscalls, as well as 
+    several other commands to manage memory, manipulate data, and perform arithmetic. sysh is written in C, using Python to
+    automatically generate some code.
+</p>
+
+<h2><a href="https://g.trimill.xyz/trimill/musidl">Musidl</a></h2>
+<p>
+    Musidl is a Bash script that downloads music using <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a> and 
+    automatically add ID3v2 tags based on Youtube Music metadata.
+</p>
+
+<h2><a href="/projects/mazemaker">Maze maker</a></h2>
+<p>
+    Generate random mazes based on a variety of parameters. Written in JavaScript using <a href="https://p5js.org/">p5.js</a>.
+</p>
+
+<h2><a href="/projects/converter">Unit converter</a></h2>
+<p>
+    Convert between various different units, including commonly-used ones as well as unusual or archaic ones.
+</p>
+
+
+<h2><a href="/projects/fracbase">Fraction base converter</a></h2>
+<p>
+    Convert a fraction to its positional notation in an arbitrary base.
+</p>
+
+<h2><a href="/projects/number">number</a></h2>
+<p>
+    Make number go up.
+</p>
+
+<h2><a href="/projects/pixelcircle">Pixel circle</a></h2>
+<p>
+    Create pixelated circles with a specified radius.
+</p>
+
+<h2><a href="/projects/stars">Stars</a></h2>
+<p>
+    Generate stars.
+</p>
+
+
+{% endblock %}