From 76dd32d8cfc3af2ebc7342a59cce68595d82fdd9 Mon Sep 17 00:00:00 2001
From: Jakub <jakubb.06@protonmail.com>
Date: Thu, 1 Feb 2024 06:22:34 -0500
Subject: [PATCH] wip rewrite of css - much cleaner even RN

---
 static/css/colors.css |  16 ++
 static/css/old.css    | 261 ++++++++++++++++++++++++++++++++
 static/css/style.css  | 343 ++++++++++++++----------------------------
 3 files changed, 386 insertions(+), 234 deletions(-)
 create mode 100644 static/css/colors.css
 create mode 100644 static/css/old.css

diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..c394233
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,16 @@
+:root {
+	--bg: #f9f5d7;
+	--fg: #3c3836;
+	--alt-bg: #d5c4a1;
+	--acc-1: #076678;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #1d2021;
+		--fg: #ebdbb2;
+		--alt-bg: #504945;
+		--acc-1: #83a598;
+	}
+}
+
diff --git a/static/css/old.css b/static/css/old.css
new file mode 100644
index 0000000..eec4294
--- /dev/null
+++ b/static/css/old.css
@@ -0,0 +1,261 @@
+body {
+}
+
+a {
+}
+
+
+.menu-entries a:hover,
+.header .menu-btn:hover {
+ 	background-color: var(--alt-bg);
+ 	color: var(--acc-1);
+}
+
+.header .menu-btn:checked ~ .menu .logo {
+ 	background-color: var(--acc-1);
+ 	color: var(--alt-bg);
+}
+
+
+a.home-link{
+    display: none;
+}
+
+.logo img, .logo {
+    height: 24px;
+}
+
+.content {
+  overflow: none;
+  margin: auto 5% auto 5%;
+  word-wrap: break-word;
+  /* padding-bottom: 15%; */
+/* display: inline-grid; */
+/*   max-width: 45rem; */
+/*   margin-bottom: 2rem; */
+/*   margin: 2rem auto; */
+  /* padding-top: 100px; */
+
+}
+/* Lists */
+.post-snippet {
+  margin-bottom: 1rem;
+}
+
+.post-snippet h3 {
+  margin-bottom: 0.25rem;
+}
+
+/* header */
+
+.header {
+  z-index: 3;
+}
+
+.header .menu {
+/*   /1* width: 100%; *1/ */
+/*   height: auto; */
+  /* overflow: hidden; */
+  /* background-color: #a89984; */
+}
+
+
+
+
+
+
+.header .logo {
+  /* float: left; */
+}
+
+/* menu */
+
+.menu-entries {
+  /* display: none; */
+}
+
+.header .menu {
+}
+
+/* menu icon */
+
+.logo {
+  cursor: pointer;
+}
+
+.header .menu-icon {
+/*   cursor: pointer; */
+/*   float: right; */
+/*   padding: 28px 20px; */
+/*   position: relative; */
+/*   user-select: none; */
+}
+
+/* menu btn */
+
+.header .menu-btn {
+  display: none;
+}
+
+
+.menu .logo {
+  transition: 400ms;
+}
+
+footer {
+   /* position: fixed; */
+   left: 0;
+   /* bottom: 0; */
+   /* width: 100%; */
+   text-align: center;
+   /* max-height: 15%; */
+
+  padding-top; 10px;
+  padding-bottom: 10px;
+}
+
+footer .buttons {
+  margin-top: 5px;
+}
+
+footer .buttons img {
+  /* margin: 5px; */
+  display: inline-block;
+  max-height: 25em;
+  max-width: 100%;
+}
+
+/* div.content, footer{ */
+/*   margin-left: 0; */
+/*   /1* height: 1000px; *1/ */
+/* } */
+
+/* @media screen and (max-width: 900px) { */
+/*   ul.menu { width: 100%; */
+/*     height: auto; */
+/*     position: relative; */
+/*   } */
+  
+/*   ul.menu li a { */
+/*     padding: 15px; */
+/*   } */
+  
+/*   div.content, footer {margin-left: 0;} */
+/* } */
+
+/* .menu a { */
+/*     padding: 20px 30px; */
+/* } */
+/*   ul.menu li a { */
+/*     float: left; */
+/*   } */
+
+/*   .menu-entries { */
+/* 	float: right; */
+/*   } */
+
+/*   .header .menu li .menu-entries{ */
+/*     clear: none; */
+/*     align-self: right; */
+/*     width: auto; */
+/*     max-height: none; */
+/*   } */
+
+/*   .header .menu-icon { */
+/*     display: none; */
+/*   } */
+
+/* } */
+@media screen and (max-width: 750px) {
+
+
+  .menu-entries {
+    text-align: center;
+    float: none;
+    display: none;
+  }
+
+  .logo {
+/*     clear: none; */
+	  pointer-events: none;
+  }
+
+  .menu-icon {
+    cursor: pointer;
+  }
+
+.menu {
+  overflow: auto;
+}
+
+
+.content {
+	margin: auto 5% auto 5%;
+}
+
+}
+
+
+@media screen and (min-width: 1040px) {
+  /* ul.menu { */
+  .header {
+    top: 0;
+    width: 15%;
+    height: 100%;
+    position: fixed;
+  }
+
+  .menu {
+    height: 100%;
+  }
+  
+/*   .header .logo { */
+/*     float: none; */
+/*   } */
+/*   .header .menu { */
+/*     clear: both; */
+/*   } */
+
+  .menu-entries{ 
+	  float: none;
+  }
+
+.menu-entries a:hover,
+.header .menu-btn:hover {
+  color: #83a598; 
+  background-color: #504945;
+}
+
+/*   ul.menu li a { */
+/*     float: none; */
+/*     padding: 20px; */
+/*   } */
+  .content, footer {
+    /* margin: auto; */
+    padding: 1px 16px;
+  }
+  
+
+  .header .menu li a {
+    display: block;
+    /* width: 100%; */
+    float: none;
+  }
+
+.content { 
+  margin: auto 5% auto 20%;
+}
+
+}
+
+
+/*   .logo { */
+/*     height: 28px; */
+/*     width: fit-content; */
+/*   } */
+/* } */
+
+
+
+/* .header .logo { */
+/*   display: block; */
diff --git a/static/css/style.css b/static/css/style.css
index babd094..6e6ad62 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,205 +1,88 @@
- /* modifying it for now. */
+@import url('./colors.css'); /* Include colorscheme */
+/* TODO clean and move all ugly code from old.css into this file */
+/* @import url('./old.css'); */
 
-a.home-link{
-    display: none;
-}
-
-.logo img, .logo {
-    height: 24px;
-}
 
+/* Global  */
 html, body {
   margin: 0;
   padding: 0;
 }
 
-body {
-  background-color: #1d2021;
-  color: #ebdbb2;
+body{
   font-size: 100%;
   line-height: 1.5;
-}
-a {
-  color: #83a598;
-  text-decoration: none;
+ 	background-color: var(--bg);
+ 	color: var(--fg);
 }
 
+a{
+  text-decoration: none;
+ 	color: var(--acc-1);
+}
+
+
+/* Main Body */
 
 .content {
-  overflow: none;
   margin: auto 5% auto 5%;
-  word-wrap: break-word;
-  /* padding-bottom: 15%; */
-/* display: inline-grid; */
-/*   max-width: 45rem; */
-/*   margin-bottom: 2rem; */
-/*   margin: 2rem auto; */
-  /* padding-top: 100px; */
-
-}
-/* Lists */
-.post-snippet {
-  margin-bottom: 1rem;
 }
+	
 
-.post-snippet h3 {
-  margin-bottom: 0.25rem;
-}
+	.menu-entries {
+  	/* display: block; */
+  	/* clear: both; */
+  	/* transition: max-height .2s ease-out; */
+	}
 
-/* header */
+	/* Footer */
+	footer {
+		/* position: fixed; */
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		text-align: center;
+		max-height: 15%;
+		padding-top; 10px;
+		padding-bottom: 10px;
+	}
+	
+	footer .buttons {
+  	margin-top: 5px;
+	}
 
-.header {
-  background-color: #504945;
-  /* width: 100%; */
-/* /1*   position: fixed; *1/ */
-/*   z-index: 3; */
+
+/* Header */
+
+.header { 
+	width: 100%;
+	/* position: fixed; */
+	/* top: 0; */
+	background-color: var(--alt-bg);
+	/*   z-index: 3; */
+	
 }
 
 .header .menu {
   margin: 0;
+  /* position: relative; */
+  /* overflow: auto; */
   padding: 0;
-/*   /1* width: 100%; *1/ */
-/*   height: auto; */
-  position: relative;
   list-style: none;
-  /* overflow: hidden; */
-  overflow: auto;
-  /* background-color: #a89984; */
 }
 
-
-.header .menu li a{
-  padding: 15px;
-  display: block;
+.header .menu a {
+	display: inline-block;
+	padding: 20px;
 }
 
-.menu-entries a:hover,
-.header .menu-btn:hover {
-  background-color: #83a598;
-  color: #504945;
-}
-
-
-
-.header .logo {
-  /* float: left; */
-  padding: 15px 20px;
-}
-
-/* menu */
-
-.menu-entries {
-  display: block;
-  clear: both;
-  /* display: none; */
-  transition: max-height .2s ease-out;
-}
-
-.header .menu {
-}
-
-/* menu icon */
-
-.logo {
-  cursor: pointer;
-}
-
-.header .menu-icon {
-/*   cursor: pointer; */
-/*   float: right; */
-/*   padding: 28px 20px; */
-/*   position: relative; */
-/*   user-select: none; */
-}
-
-/* menu btn */
-
+	/* Menu */
 .header .menu-btn {
   display: none;
 }
 
 
-.menu .logo {
-  transition: 400ms;
-}
-
-footer {
-   /* position: fixed; */
-   left: 0;
-   /* bottom: 0; */
-   /* width: 100%; */
-   text-align: center;
-   /* max-height: 15%; */
-
-  padding-top; 10px;
-  padding-bottom: 10px;
-}
-
-footer .buttons {
-  margin-top: 5px;
-}
-
-footer .buttons img {
-  /* margin: 5px; */
-  display: inline-block;
-  max-height: 25em;
-  max-width: 100%;
-}
-
-/* div.content, footer{ */
-/*   margin-left: 0; */
-/*   /1* height: 1000px; *1/ */
-/* } */
-
-/* @media screen and (max-width: 900px) { */
-/*   ul.menu { width: 100%; */
-/*     height: auto; */
-/*     position: relative; */
-/*   } */
-  
-/*   ul.menu li a { */
-/*     padding: 15px; */
-/*   } */
-  
-/*   div.content, footer {margin-left: 0;} */
-/* } */
-
-/* .menu a { */
-/*     padding: 20px 30px; */
-/* } */
-/*   ul.menu li a { */
-/*     float: left; */
-/*   } */
-
-/*   .menu-entries { */
-/* 	float: right; */
-/*   } */
-
-/*   .header .menu li .menu-entries{ */
-/*     clear: none; */
-/*     align-self: right; */
-/*     width: auto; */
-/*     max-height: none; */
-/*   } */
-
-/*   .header .menu-icon { */
-/*     display: none; */
-/*   } */
-
-/* } */
-@media screen and (max-width: 750px) {
-
-.header .menu-btn:checked ~ .menu li .menu-entries,
-.menu li .menu-entries a.home-link {
-  display: block;
-}
-
-  .menu-entries {
-    text-align: center;
-    float: none;
-    display: none;
-  }
-
+@media screen and (max-width: 755px) {
   .logo {
 /*     clear: none; */
 	  pointer-events: none;
@@ -209,40 +92,52 @@ footer .buttons img {
     cursor: pointer;
   }
 
-.menu {
-  overflow: auto;
+	/* .content { */
+	/* 	margin: auto 5% auto 5%; */
+	/* } */
+.header .menu-btn:checked ~ .menu li .menu-entries, .menu li .menu-entries a{
+  display: block;
 }
 
-.header .menu-btn:checked ~ .menu .logo {
-  background-color:#83a598;
-  color: #504945;
-}
-
-.content {
-	margin: auto 5% auto 5%;
-}
+.header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover {
+	background-color: var(--acc-1);
+	color: var(--alt-bg);
+  	transition: 400ms;
 
 }
 
-@media screen and (min-width: 750px) {
 
-.menu-entries {
-  float: right;
+	.menu-entries {
+		text-align: center;
+		float: none;
+		display: none;
+	}
+
+	.menu-icon a.logo {
+		display: block;
+	}
+
 }
 
-.header .menu li a {
-  width: fit-content;
-  display: inline-block;
-}
+@media screen and (min-width: 755px) {
 
-.menu-entries a {
-  float: left;
-}
+	.menu-entries {
+	  	float: right;
+	}
 
+	
+	.header .menu li a {
+	  	/* width: fit-content; */
+		/* padding:15px; */
+	  /* display: inline-block; */
+	}
+	/*  */
+	/* .menu-entries a { */
+	/*   	float: left; */
+	/* } */
 }
 
 @media screen and (min-width: 1040px) {
-  /* ul.menu { */
   .header {
     top: 0;
     width: 15%;
@@ -250,57 +145,37 @@ footer .buttons img {
     position: fixed;
   }
 
-  .menu {
-    height: 100%;
-  }
-  
-/*   .header .logo { */
-/*     float: none; */
-/*   } */
-/*   .header .menu { */
-/*     clear: both; */
-/*   } */
+	.menu {
+		width: 100%;
+		padding: 0;
+		margin: 0;
+	}
+
+.header .menu a {
+	display: block;
+}
+	.header .menu li a{
+		/* width: 100%; */
+		display: block;
+		/* padding: 15px; */
+		margin: 0;
+	}
+
+	.menu .menu-entries a:hover{
+		background-color: var(--acc-1);
+		color: var(--alt-bg);
+  	transition: 400ms;
+	}
 
   .menu-entries{ 
 	  float: none;
   }
 
-.menu-entries a:hover,
-.header .menu-btn:hover {
-  color: #83a598; 
-  background-color: #504945;
-}
+	.content { 
+	  	margin: auto 5% auto 20%;
+	}
 
-/*   ul.menu li a { */
-/*     float: none; */
-/*     padding: 20px; */
-/*   } */
   .content, footer {
-    /* margin: auto; */
     padding: 1px 16px;
   }
-  
-
-  .header .menu li a {
-    display: block;
-    /* width: 100%; */
-    float: none;
-  }
-
-.content { 
-  margin: auto 5% auto 20%;
 }
-
-}
-
-
-/*   .logo { */
-/*     height: 28px; */
-/*     width: fit-content; */
-/*   } */
-/* } */
-
-
-
-/* .header .logo { */
-/*   display: block; */