background
- #1e1e1e
+ #0e0c14
caret
#F8F8F0
foreground
diff --git a/static/main.css b/static/main.css
index da1ea7b..370a6dd 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,3 +1,19 @@
+/*
+Hey, fair warning, I have no idea what I'm doing with CSS.
+This is just cobbled together from a bunch of searching around.
+Expect a mess!
+
+Not AI though, just me! :3
+ */
+
+:root {
+ --color-accent-1: #af8cff;
+ --color-accent-2: #77aef2;
+
+ --color-note: var(--color-accent-1);
+ --color-warning: #ed9a5f;
+ --color-important: #f279ad;
+}
@font-face {
font-family: "JetBrains Mono";
@@ -5,7 +21,7 @@
}
body {
- background-color: #0a0a0a;
+ background-color: hsl(from var(--color-accent-1) h 25% 8%);
color: #fafafa;
max-width: clamp(600px, 35%, 800px);
@@ -20,30 +36,57 @@ body {
justify-content: flex-start;
}
-:is(h1, h2, h3) {
- font-family: "JetBrains Mono", monospace;
- color: #8aadf4;
-}
-:is(a:link, a:visited) {
- color: #91d7e3;
-}
-a:hover {
- color: #8eeacd;
-}
-
header {
font-family: "JetBrains Mono", monospace;
+ padding-top: 15px;
- padding: 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+
+ flex-wrap: wrap;
+
+ p {
+ display: inline-block;
+ margin: 4px auto 0 0;
+
+ font-family: "JetBrains Mono", monospace;
+ color: var(--color-accent-1);
+ }
nav {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
+ --color: white;
+
+ :nth-child(1) {
+ --color: #74cded;
+ }
+ :nth-child(2) {
+ --color: #af8cff;
+ }
+ :nth-child(3) {
+ --color: #f279ad;
+ }
+ :nth-child(4) {
+ --color: #ed9a5f;
+ }
+
+ a:link, a:visited {
+ color: black;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ a:hover {
+
+ }
+
a {
- padding-left: 4px;
- padding-right: 4px;
- color: #8aadf4;
+ display: inline-block;
+ padding: 0 4px 0 4px;
+
+ background-color: var(--color);
+ border: 2px solid hsl(from var(--color) h s max(calc(l - 25), 25));
+ border-radius: 4px;
}
}
}
@@ -60,51 +103,57 @@ footer {
padding: 5px;
}
- hr {
- border: 2px dotted #89b4fa
- }
-
text-align: center;
font-size: 14px;
font-family: "JetBrains Mono", monospace;
}
-.insert-note {
+
+.content {
+ h1, h2, h3 {
+ font-family: "JetBrains Mono", monospace;
+ color: var(--color-accent-1);
+ }
+
+ .subtitle {
+ font-family: "JetBrains Mono", monospace;
+ color: var(--color-accent-2)
+ }
+
+ a:link, a:visited {
+ color: var(--color-accent-2);
+ }
+
+ a:hover {
+ color: hsl(from var(--color-accent-2) h s 85%);
+ }
+}
+
+.insert-note, .insert-important, .insert-warning {
border-radius: 5px;
border-style: solid;
- border-color: #8aadf4;
- background-color: #242e42;
-
padding: 2px 8px 2px 15px;
}
+.insert-note {
+ border-color: var(--color-note);
+ background-color: hsl(from var(--color-note) h 35% 15%);
+}
+
.insert-warning {
- border-radius: 5px;
- border-style: solid;
- border-color: #e71853;
- background-color: #42242c;
-
- padding: 2px 8px 2px 15px;
+ border-color: var(--color-warning);
+ background-color: hsl(from var(--color-warning) h 35% 15%);
}
.insert-important {
- border-radius: 5px;
- border-style: solid;
- border-color: #f5640a;
- background-color: #32241b;
-
- padding: 2px 8px 2px 15px;
-}
-
-.subtitle {
- font-family: "JetBrains Mono", monospace;
- color: #8bd5ca
+ border-color: var(--color-important);
+ background-color: hsl(from var(--color-important) h 35% 15%);
}
blockquote {
border-left-width: 4px;
- border-left-color: #8aadf4;
+ border-left-color: var(--color-accent-1);
border-left-style: solid;
padding-left: 10px;
margin-left: 20px;
@@ -126,17 +175,6 @@ figcaption {
margin: 5px auto;
}
-#new-site-warning {
- margin-top: 10px;
-
- border-radius: 5px;
- border-style: solid;
- border-color: #e71853;
- background-color: #42242c;
-
- padding: 8px 8px 8px 15px;
-}
-
/*
Suggested css snippet for making code blocks suck less
see https://www.getzola.org/documentation/content/syntax-highlighting/
diff --git a/templates/base.html b/templates/base.html
index 15cc16c..2706d01 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -13,11 +13,12 @@
@@ -27,12 +28,7 @@
diff --git a/templates/index.html b/templates/index.html
index 99ff007..d737cb4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,21 +1,15 @@
{% extends "base.html" %}
{% block content %}
-
- New Website!!
-
-
-
- Hey! This is a new version of my site rewritten from scratch!
- I still don't really know what I'm doing with web dev, and this is still extremely WIP.
-
-Professional waster of time, purveyor of useless activities, and chronic avoider of productivity.
+Hey! You found my little personal page!
+
+I'm a professional waster of time, purveyor of useless activities, and chronic avoider of productivity.
-I write bad code for fun and play games
+I also sometimes write bad code for fun and play games.
More about me.