Some style adjustments

ubyssey · Nov 14, 2024 · 3a9cde8 · 3a9cde8
1 parent 484faeb
commit 3a9cde8
Showing 1 changed file with 54 additions and 52 deletions.
diff --git a/ubyssey/static_src/src/styles/components/events/_base.scss b/ubyssey/static_src/src/styles/components/events/_base.scss
@@ -285,7 +285,7 @@ button.events-calendar--number {
 
 header.events{
     width: fit-content;
-    margin-left: 8em;
+    margin-left: 4em;
 
     .logo-area {
       margin-top: 20px;
@@ -546,8 +546,8 @@ header.events{
     }
 }
 .events-calendar--navigation {
-    left: -2.5em;
-    // top: -2.8em;
+    max-height: 1.5em;
+
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -560,8 +560,7 @@ header.events{
         padding: 0;
         margin: 0;
         svg {
-            width: 30px;
-            height: 30px;
+            height: 1.5em;
         }
 
         &.up-arrow svg {
@@ -584,29 +583,32 @@ header.events{
         }        
     }
     .today-button {
-        background-color: #0095ff;
-        border: 1px solid transparent;
+        position: relative;
+        display: inline-block;
+
+        padding: 0 0.5em;
+        margin: 0 auto;
+
         border-radius: 3px;
         box-sizing: border-box;
-        color: #ffffff;
-        cursor: pointer;
-        display: inline-block;
-        line-height: 1.15385;
-        margin: 0;
-        outline: none;
-        padding: 5px 0.8em;
-        position: relative;
+
+        line-height: 1.5em;
+        color: white;
+        background-color: $color-ubyssey-blue;
+
         text-align: center;
         text-decoration: none;
+        vertical-align: baseline;
+        white-space: nowrap;
+
+        cursor: pointer;
+        outline: none;
         user-select: none;
         -webkit-user-select: none;
         touch-action: manipulation;
-        vertical-align: baseline;
-        white-space: nowrap;
       }
       .today-button:hover {
-        background-color: #0095ff; /* Keep the same background color */
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Inner shadow for hover feedback */
+        opacity: 0.8;
     }
 }
 /* Dark mode styles */
@@ -625,50 +627,50 @@ html[color-css-theme="dark"] .events-calendar--navigation .arrow-button {
 
 @media ($bp-smaller-than-desktop) {
     .events-calendar--navigation {
+        margin-bottom: 0.5em;
+
+        position: relative;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        position: relative;
         // width: 100%;
-    }
-
-    .arrow-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        width: 32px;
-        height: 32px;
-    }
-
-    .arrow-button svg {
-        width: 100%;
-        height: 100%;
-    }
-
-    .arrow-button.left-arrow {
-        margin-left: 40px; /* Adjust if needed */
-    }
+
+        .arrow-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            width: 32px;
+            height: 32px;
+        }
 
-    .arrow-button.left-arrow svg {
-        transform: rotate(270deg);
-    }
+        .arrow-button svg {
+            width: 100%;
+            height: 100%;
+        }
 
+        .arrow-button.left-arrow svg {
+            transform: rotate(270deg);
+        }
 
-    .arrow-button.right-arrow {
-        margin-right: -40px; /* Adjust if needed */
-    }
+        .arrow-button.right-arrow svg {
+            transform: rotate(90deg);
+        }
 
-    .arrow-button.right-arrow svg {
-        transform: rotate(90deg);
-    }
+        .today-button {
+            position: absolute;
+            right: 3em;
+        }
 
+        .month-label {
+            position: absolute;
+
+            left: 50%;
+            transform: translateX(-50%);
 
-    .month-label {
-        font-size: 18px;
-        text-align: center;
-        flex-grow: 1;
-        margin-left: 3em;
+            font-size: 18px;
+            text-align: center;
+        }
     }
 }