From 03368d3f4d11cc23cc5ecfd83d5be97a2e270b48 Mon Sep 17 00:00:00 2001
From: maaa <no@thankyou.com>
Date: Sat, 26 Aug 2023 18:57:56 +0200
Subject: [PATCH] changes

---
 static/css/style.css | 89 ++++++++++++++++++++++++++++----------------
 templates/main.html  | 10 ++---
 2 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 43aefbc..451d583 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,7 +1,23 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
+:root {
+    --bar: #f4f4f4;
+    --editor: #ffffff;
+    --text-color: #000000;
+    --border-color: #dadada;
+    --theme-color: #157efb;
+    --theme-text-color: #ffffff;
+    --exit-color: #e9e9e9;
+    --session-color: #f4f4f4;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    color: var(--text-color);
+}
+
 body {
     margin: 0;
+    background-color: var(--editor);
     font-family: "Inter", sans-serif;
 }
 
@@ -11,12 +27,10 @@ body {
     width: 100%;
     height: 50px;
 
-    background-color: rgba(233, 233, 233, 0.5);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
+    background-color: var(--bar);
 
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 0px;
     border-bottom-width: 1px;
 }
@@ -29,12 +43,10 @@ body {
     width: 160px;
     height: 90px;
 
-    background-color: rgba(233, 233, 233, 0.5);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
+    background-color: var(--bar);
 
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 1px;
     border-radius: 8px;
 }
@@ -42,7 +54,7 @@ body {
 .burgerDropdown a {
     position: absolute;
     width: calc(100% - 14px - 4px - 7px);
-    color: black;
+    color: var(--text-color);
     background-color: #ffffff;
 
     height: 35px;
@@ -51,7 +63,7 @@ body {
     padding-left: 7px;
 
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 1px;
     border-radius: 8px;
 
@@ -82,12 +94,10 @@ body {
     bottom: 0;
     height: calc(100% - 50px - 1px);
 
-    background-color: rgba(233, 233, 233, 0.5);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
+    background-color: var(--bar);
 
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 0px;
     border-right-width: 1px;
     border-top-width: 1px;
@@ -101,12 +111,12 @@ body {
     margin: 7px;
     margin-bottom: 0;
     background-color: #ffffff;
-    color: black;
+    color: var(--text-color);
     border: none;
     border-radius: 8px;
 
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 1px;
 
     font-size: 15px;
@@ -135,7 +145,8 @@ body {
 }
 
 .notesBar .selected {
-    background-color: #157efb !important;
+    background-color: var(--theme-color) !important;
+    border: none;
     color: white
 }
 
@@ -186,7 +197,7 @@ body {
     position: fixed;
     background-color: white;
     padding: 10px;
-    color: black;
+    color: var(--text-color);
     border-radius: 8px;
     min-width: 338.5px
 }
@@ -198,10 +209,10 @@ body {
     margin-bottom: 7px;
     padding-left: 15px;
     padding-right: 15px;
-    color: white;
+    color: var(--theme-text-color);
     border: none;
     text-decoration: none;
-    background-color: #157efb;
+    background-color: var(--theme-color);
     border-radius: 8px;
 }
 
@@ -222,30 +233,30 @@ body {
     padding-right: 5px;
     margin-bottom: 7px;
     border: solid;
-    border-color: #dadada;
+    border-color: var(--border-color);
     border-width: 1px;
     border-radius: 8px;
 }
 
 .optionsDiv input:focus {
     outline: 0;
-    border-color: #157efb;
+    border-color: var(--theme-color);
 }
 
 .optionsDiv progress {
     width: 100%;
-    background-color: #d8d8d8;
+    background-color: var(--session-color);
     border: none;
     border-radius: 99px;
     height: 7px;
 }
 
 .optionsDiv progress::-moz-progress-bar {
-    background: #157efb;
+    background: var(--theme-color);
 }
 
 .optionsDiv progresss::-webkit-progress-value {
-    background: #157efb;
+    background: var(--theme-color);
 }
 
 .optionsDiv .exit {
@@ -254,8 +265,8 @@ body {
     width: 40px;
     height: 40px;
     font-size: 16px;
-    background-color: #e9e9e9;
-    color: black;
+    background-color: var(--exit-color);
+    color: var(--text-color);
     border-radius: 100%;
 }
 
@@ -268,23 +279,25 @@ body {
 .optionsDiv .section {
     width: 100%;
     height: 1px;
-    background-color: #d8d8d8;
+    background-color: var(--border-color);
     margin-top: 2px;
     margin-bottom: 10px;
 }
 
 .sessionDiv div {
-    background-color: #f4f4f4;
+    background-color: var(--session-color);
     border-radius: 8px;
     margin-bottom: 5px;
     padding: 10px;
     height: 35px;
 }
+
 .sessionDiv div p {
     display: inline;
     position: absolute;
     transform: translateY(-7.5px);
 }
+
 .sessionDiv div button {
     position: absolute;
     border-radius: 99px;
@@ -294,6 +307,7 @@ body {
     font-size: 16px;
     transform: translateY(-2px);
 }
+
 .sessionDiv img {
     display: inline;
     filter: none;
@@ -315,13 +329,13 @@ body {
     padding-right: 10px;
 
     border: solid;
-    border-color: rgb(207, 207, 207);
+    border-color: var(--border-color);
     border-width: 1px;
     border-radius: 8px;
 }
 
 .inoutdiv button {
-    background-color: #157efb;
+    background-color: var(--theme-color);
     color: white;
     padding: 10px;
     padding-left: 20px;
@@ -397,16 +411,23 @@ body {
     margin-right: 5px;
     color: white;
     text-decoration: none;
-    background-color: #157efb;
+    background-color: var(--theme-color);
     border-radius: 8px;
 }
 
 .mainDiv .feature {
-    width: calc(100% - 20px);
+    width: calc(100% - 7vh - 7vh - 3.5vh);
     margin-bottom: 10px;
+    margin-left: 7vh;
+    margin-right: 7vh;
     padding-left: 10px;
     padding-right: 10px;
 
+    border: solid;
+    border-radius: 8px;
+    border-width: 1px;
+    border-color: var(--border-color);
+
     padding-top: 15px;
     padding-bottom: 15px;
     font-size: 17px;
@@ -431,10 +452,12 @@ body {
     text-align: center;
     padding: 10px;
 }
+
 .links a {
     margin-left: 5px;
     text-decoration: none;
 }
+
 .links a:hover {
     text-decoration: dashed;
 }
diff --git a/templates/main.html b/templates/main.html
index e7ce64c..df6a779 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -8,25 +8,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
     <meta content="burgernotes" property="og:title" />
-    <meta content="simple note taking app" property="og:description" />
+    <meta content="simple note-taking app :3" property="og:description" />
 </head>
 
 <body>
     <div class="mainDiv">
     <div class="startDiv">
     <h1 class="w300">burgernotes</h1>
-    <p>simple note taking, everywhere you go.</p>
+    <p>simple note-taking app</p>
     <br>
     <a href="/app">open in your browser</a>
     <!--<a href="/download">download app</a>-->
     </div>
     <br><br><br>
     <div class="feature green">
-        <h4 class="w500">secure</h4>
-        <p>all your notes are fully <b>end-to-end encrypted</b>. only <b>you</b> can read your notes, not anyone else.</p>
+        <h3 class="w300">secure</h4>
+        <p>all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.</p>
     </div>
     <div class="feature yellow">
-        <h4 class="w500">always up-to-date</h4>
+        <h3 class="w300">always up-to-date</h4>
         <p>your notes seamlessly sync across your devices.</p>
     </div>
     </div>