trimill/trimill.xyz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

redesign website

Browse source
This commit is contained in:
TriMill 2023-02-22 17:12:52 -05:00
parent 1bae0b679e
commit 0c46476350
12 changed files with 177 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
flaskr/__init__.py
View file

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

BIN
flaskr/static/f/Merriweather-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/Merriweather-BoldItalic.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/Merriweather-Italic.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/Merriweather-Light.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/Merriweather-LightItalic.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/Merriweather-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
flaskr/static/f/RobotoSlab-Medium.woff2 Normal file
View file

Binary file not shown.

121
flaskr/static/style.css
View file

@ -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-intense: #141316;
--bg-faded: #373338;
--fg: #e0dedc;
--fg-faded: #9b9497;
--accent-1: #96bf59;
--accent-1-dark: #759438;
--accent-2: #789ebf;
--accent-2-dark: #52729d;
--bg: #131720;
--bg-intense: #000000;
--bg-faded: #293441;
--fg: #e6ded6;
--fg-faded: #908a81;
--accent-1: #2aca98;
--accent-1-dark: #268d78;
--error: #ee6d7d;
}
.only-theme-light {
@ -37,15 +65,13 @@
}
:root.theme-dark {
--bg: #242328;
--bg-intense: #141316;
--bg-faded: #373338;
--fg: #e0dedc;
--fg-faded: #9b9497;
--accent-1: #96bf59;
--accent-1-dark: #759438;
--accent-2: #789ebf;
--accent-2-dark: #52729d;
--bg: #131720;
--bg-intense: #000000;
--bg-faded: #293441;
--fg: #e6ded6;
--fg-faded: #908a81;
--accent-1: #2aca98;
--accent-1-dark: #268d78;
--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;
--accent-2-dark: #00ffff;
--error: #00ff88;
--error: #000000;
font-family: "Comic Sans MS", cursive;
}
:root {
color: var(--fg);
font-family: "Lato", sans-serif;
font-size: 20px;
--text-fonts: "Merriweather", "DejaVu Serif", serif;
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;
}

19
flaskr/templates/_base.html
View file

@ -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>

64
flaskr/templates/index.html
View file

@ -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
it extensively for assorted purposes. I enjoy many things, most of which involve manipulating some state
according to various sets of rules.
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
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
below to view the GEORGE homepage or access the previous and next members in the ring.
See more on the <a href="projects">projects page</a> and on <a href="https://g.trimill.xyz/trimill">my Forgejo instance</a>.
</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>

91
flaskr/templates/projects.html
View file

@ -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>
{% for site in data.projects %}
{% if site.hidden != True %}
<li>
{% if site.star == True %}
★
{% endif %}
<a href="/projects/{{ site.path }}/">{{ site.title }}</a> · {{ site.desc | safe }}
</li>
{% endif %}
{% endfor %}
</ul>
<h2><a href="https://g.trimill.xyz/trimill/quectocraft">Quectocraft</a></h2>
<p>
Quectocraft is an extensible, ultra-minimalist implementation of a Minecraft server. By doing away with most
features of the vanilla server (such as world generation and interaction) it can run without consuming many system
resources. It is written primarily in Rust, but can load simple plugins written in Lua to add chat features and commands.
</p>
{% 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 %}