redesign website
This commit is contained in:
TriMill
parent
1bae0b679e
commit
0c46476350
|
|
@ -39,9 +39,7 @@ data = {
|
|||
"next_theme": {
|
||||
"system": "dark",
|
||||
"dark": "light",
|
||||
"light": "contrast",
|
||||
"contrast": "contrast-dark",
|
||||
"contrast-dark": "system",
|
||||
"light": "system",
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>|></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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue