Colors :3

posts/colorful/post.md

@@ -0,0 +1,25 @@
+## WEBSITE UPDATE!!!
+
+After suffering for quiet some time I finally managed to color the website in a way that doesn't looks 20 years dated
+
+I decided to use the quiet popular catppuccin color palette because I like it a lot
+
+### News for this month
+
+So the goal now is that this website is fully functional by the end of this month
+I got this idea after my partner brought up "the goretober challenge"
+So as an added challenge, I AM FORCED to update this website EVERY SINGLE DAY.
+If I don't do it uh, let's say my punishment will be that I will have to record a 10 minute long asmr video or some embarassing shit.
+
+also I think I find this website fully functional if I manage to:
+- add a frontend for writing posts
+- a comment section (maybe but honestly this is unlikely)
+- the ability for me to let other people write posts
+- sort posts chronologically (should be easy)
+- other fancy stuff :3
+
+
+alright that's all for today bai bai 
+
+here is a pixel art cat (that I definietly did not just whip up in gimp to test if I can put images in posts)
+<img src="/static/assets/car.png" style="height=5vw; width:auto;">

posts/colorful/post_frontmatter.toml

@@ -0,0 +1,9 @@
+title = 'Cured your color blindness, no problem'
+file_name = 'colorful'
+description = 'FINALLY NO LONGER MONOCHROME'
+tags = ["website update"]
+posted = '2024. oct. 2.'
+estimated_reading_time = 2
+author = 'IMK' # feel free to swap with your own name
+order = 1
+pinned = false

static/css/colors.css

@@ -0,0 +1 @@
+@mycol: #fff;

static/css/index.css

@@ -1,7 +1,16 @@
+:root {
+	--bg-color: #24273a;
+	--text-color: #cad3f5;
+	--border-color: #181926;
+	--frame-color: #c6a0f6;
+	--blue: #8aadf4;
+}
+
+
 body {
-	background-color: #000;
+	background-color: var(--bg-color);
 	font-family: "Zilla Slab";
-	color: #FFFF;
+	color: var(--text-color);
 }
 
 a {
@@ -17,11 +26,11 @@ a {
 }
 
 a:link{
-	color: white;
+	color: var(--text-color);
 }
 
 a:visited{
-	color: white;
+	color: var(--text-color);
 }
 
 a.return{
@@ -32,7 +41,9 @@ a.return{
 
 hr
 {
-	border-top: 2px dashed white;
+	border: none;
+	height: .3vw;
+	background-image: linear-gradient(90deg, #000000 -30%, var(--border-color) 50%, #000000 130%);
 }
 
 p.title{
@@ -61,10 +72,20 @@ article ul {
 }
 
 div.post {
-	border: 1px solid #fff;
+	padding-left: 1vw;
+	border: 2px solid var(--border-color);
+	border-right-color: transparent;
+	border-left-color: transparent;
+	margin-top: 1vw;
+	background-image: linear-gradient(90deg,var(--blue)-2%,var(--blue).5%, var(--frame-color) 1%);
+
 }
 
 h1.htitle{
 	text-align: center;
 	text-size: 6vw;
 }
+
+h2.post-title{
+	
+}

templates/home.html

@@ -8,7 +8,7 @@
     <a class="mb-3" href="/posts/{{fm.file_name}}">
         <div class="post">
         <img class="pinned-{{fm.pinned}}" src="/static/assets/pin.svg" alt="PIN" style="max-width:1.5%;height:auto;"/>
-		<h2 class="text-2xl font-semibold hover:underline">  {{fm.title}}</h2>
+		<h2 class="post-title">  {{fm.title}}</h2>
 	    <hr>
             <ul>
                 <li>On: {{fm.posted}}</li>