From 029bbbda63b150d90e3f3eef84dbf851422366d9 Mon Sep 17 00:00:00 2001
From: Alex <alex@scerba.org>
Date: Sun, 2 Jun 2024 10:37:42 -0500
Subject: Switch to dark nav bar and more consistent sizing for mobile views

---
 static/style.css | 47 ++++++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

(limited to 'static')

diff --git a/static/style.css b/static/style.css
index c0f0547..ffef6d8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -86,7 +86,11 @@ main:has(#intro) {
     display: flex;
     align-items: center;
     padding: .7rem 1.5rem;
-    background-color: white;
+    background-color: black;
+}
+
+.top-bar a {
+  color: white;
 }
 
 /* .logo-w-name {
@@ -97,7 +101,7 @@ main:has(#intro) {
     padding-left: .75rem;
     padding-right: .75rem;
     height: 3rem;
-    filter: invert(70%)
+    filter: invert(70%);
 }
 
 .landing-page {
@@ -107,6 +111,8 @@ main:has(#intro) {
   display: flex;
   align-items: center;
   justify-content: center;
+  background-image: url("/static/media/grid-background-light.png");
+  background-size: 20rem 20rem;
 }
 
 .landing-text {
@@ -114,8 +120,8 @@ main:has(#intro) {
   flex-direction: column;
 }
 
-.landing-page span {
-  font-size: 2rem;
+.landing-text span {
+  font-size: max(4rem, 10vw);
   font-weight: bolder;
   line-height: 1;
 }
@@ -175,7 +181,7 @@ p {
 .name {
   font-weight: bold;
   margin: auto .3rem;
-  color: rgb(100, 100, 100)
+  color: rgb(197, 197, 197);
 }
 
 .main-nav-position {
@@ -305,10 +311,10 @@ blockquote {
       visibility: visible;
       display: block;
       z-index: 4;
-      height: 60px;
-      width: 60px;
+      height: 45px;
+      width: 45px;
       position: fixed;
-      top: .75rem;
+      top: .15rem;
       right: 1rem;
       cursor: pointer;
       opacity: 0;
@@ -318,14 +324,13 @@ blockquote {
     .hamburger{
       z-index: 3;
       position: fixed;
-      top: .75rem;
+      top: .15rem;
       right: 1rem;
-      height: 60px;
-      width: 60px;
-      padding: 5px;
+      height: 45px;
+      width: 45px;
       /*border-bottom-left-radius: 8px;
       background-color: var(--dark-transparent);*/
-      background-color: white;
+      /*background-color: black;*/
 
     /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
 
@@ -340,7 +345,7 @@ blockquote {
       position: relative;
       top: 0;
       right: 0;
-      background: black;
+      background: white;
       height: 2px;
       width: 60%;
       transition: all  0.4s ease;
@@ -354,7 +359,7 @@ blockquote {
       content: '';
       position: absolute;
       top: -10px;
-      background: black;
+      background: white;
       width: 100%;
       height: 2px;
       transition: all  0.4s ease;
@@ -394,7 +399,7 @@ blockquote {
       top: 0;
       right: 0;
       z-index: 2;
-      background-color: white;
+      background-color: rgba(0, 0, 0, 0.75);
       padding: 6rem 2rem 1rem 2rem;
       align-items: center;
 
@@ -407,6 +412,7 @@ blockquote {
       margin-top: 15px;
       margin-bottom: 15px;
       font-size: 34px;
+      z-index: 4;
     }
 
     /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
@@ -428,16 +434,7 @@ blockquote {
   .logo {
     height: 10vw;
   }
-  .name {
-    font-size: 6.5vw;
-  }
   .address {
     font-size: .5rem;
   }
-  .toggler{
-    top: .4rem;
-  }
-  .hamburger{
-    top: .4rem;
-  }
 }
\ No newline at end of file
-- 
cgit v1.2.3