Cleaned up the css

svsticky · Nov 29, 2024 · a77b223 · a77b223
1 parent a68ef6d
commit a77b223
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 31 deletions.
diff --git a/static/css/home.css b/static/css/home.css
@@ -1,3 +1,4 @@
+/* SETTINGS */
 :root {
     /* Color Variables */
 	--board-color: #197052; /* primary color of the current board of Sticky */
@@ -18,6 +19,7 @@
     --sidebar-width: 40vw;
 }
 
+/* General */
 *{
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     box-sizing: border-box;
@@ -39,6 +41,7 @@ button, .addSubmitButton {
     color: var(--secondary-color);
 }
 
+/* Nav bar */
 .navBar{
     position: relative;
     height: var(--navbar-height);
@@ -65,12 +68,14 @@ button, .addSubmitButton {
     transform: rotate(45deg);
 }
 
+/* Map */
 #map{
-    height: calc(100% - 80px);
+    height: 100%;
     width: 100%;
     z-index: 1;
 }
 
+/* Sticker adding */
 .addContainer{
     width: 100%;
     height: 100%;
@@ -106,6 +111,7 @@ button, .addSubmitButton {
     padding-left: 20px;
 }
 
+/* Sticker adding: location */
 .locationContainer{
     background-color: var(--element-background-color);
     margin-left: 20px;
@@ -124,17 +130,6 @@ button, .addSubmitButton {
     display: none;
 }
 
-/* location icon */
-@keyframes outerAnim {
-    from{
-        transform: scale(1);
-        opacity: 1;
-    }
-    to{
-        transform: scale(2.5);
-        opacity: 0;
-    }
-}
 
 .locationIcon{
     margin: 10px;
@@ -161,6 +156,36 @@ button, .addSubmitButton {
     cursor: pointer;
 }
 
+/* Sticker adding: location animation */
+@keyframes outerAnim {
+    from{
+        transform: scale(1);
+        opacity: 1;
+    }
+    to{
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}
+
+.addSubmitButtonPressed {
+    background: linear-gradient(-45deg, rgb(200,200,200), var(--board-color));
+    background-size: 200% 400%;
+    animation: submitPressed 2s ease infinite;
+}
+
+@keyframes submitPressed{
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
 .addInputDes{
     margin-left: 20px;
     margin-top: 5px;
@@ -197,12 +222,14 @@ button, .addSubmitButton {
     transition: background-color 0.2s, color 0.2s, border 0.2s;
 }
 
+/* Sticker adding: drag and drop image */
 .highlight{
     background-color: var(--drop-image-see-through-color);
     border: 4px solid var(--border-drop-image-see-through-color);
     color: var(--light-text-color);
 }
 
+/* Sticker adding */
 .imageError{
     background-color: var(--error-color);
     border: 4px solid var(--border-drop-image-see-through-color);
@@ -260,6 +287,7 @@ button, .addSubmitButton {
     animation: submitPressed 2s infinite;
 }
 
+/* Sticker adding: adding succes */
 .successView{
     background-color: var(--background-color);
     position: fixed;
@@ -297,6 +325,7 @@ button, .addSubmitButton {
     transition: border-color 0.2s;
 }
 
+/* Sticker adding: adding failed */
 .invalid{
     border-color: var(--error-color);
 }
@@ -307,7 +336,6 @@ button, .addSubmitButton {
     padding: 4px;
 }
 
-
 /* leaflet popup styling */
 .leaflet-popup-content-wrapper .leaflet-popup-content {
     display: flex;
@@ -422,6 +450,8 @@ button, .addSubmitButton {
     display: none;
 }
 
+
+/* nearYouMobileLine */
 #nearYouOverlay.mobile > #nearYouMobileLine {
     display: block;
     margin-top: 0.5rem;
@@ -436,6 +466,7 @@ button, .addSubmitButton {
     display: none;
 }
 
+/* nearYouTopText */
 #nearYouTopText {
     margin-top: 0.5rem;
     padding-bottom: 2rem;

diff --git a/templates/home.html b/templates/home.html
@@ -9,24 +9,6 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
         <link rel="icon" href="static/img/favicon.ico" type="image/ico"/>
         <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon"/>
-        <style>
-            .addSubmitButtonPressed{
-                background: linear-gradient(-45deg, rgb(200,200,200), {{color}});
-                background-size: 200% 400%;
-                animation: submitPressed 2s ease infinite;
-            }
-            @keyframes submitPressed{
-                0% {
-                    background-position: 0% 50%;
-                }
-                50% {
-                    background-position: 100% 50%;
-                }
-                100% {
-                    background-position: 0% 50%;
-                }
-            }
-        </style>  
     </head>
     <body>
         <div class="navBar">