change styles

hackupc · Mar 18, 2024 · ed8e2af · ed8e2af
1 parent 26d60f9
commit ed8e2af
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 85 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -56,15 +56,17 @@ body {
   margin: 0;
   background-attachment: fixed;
   background-color: $bg-color;
-  background-image: url('@/assets/img/bg.svg');
+  background-image: url('@/assets/img/stars.jpeg');
   background-position: center / 640px;
   background-repeat: repeat;
+  cursor: url('assets/img/rocket.png'), auto;
   font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 a {
   color: $highlight-color;
+  cursor: url('assets/img/rocket-fire.png'), auto;
   text-decoration: none;
 }
 </style>
diff --git a/src/assets/img/rocket-fire.png b/src/assets/img/rocket-fire.png
diff --git a/src/assets/img/rocket.png b/src/assets/img/rocket.png
diff --git a/src/assets/img/stars.jpeg b/src/assets/img/stars.jpeg
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -79,7 +79,7 @@ const isActive = (page: string): boolean => {
             Home</RouterLink
           >
         </li>
-        <li :class="{ selected: isActive('/schedule') }">
+        <li :class="{ selected: isActive('/live') }">
           <RouterLink to="/live" @click="closeAsideMenu"
             ><FontAwesomeIcon
               icon="calendar-days"
@@ -90,14 +90,14 @@ const isActive = (page: string): boolean => {
           </RouterLink>
         </li>
         <li :class="{ selected: isActive('/map') }">
-          <RouterLink to="/map" @click="closeAsideMenu"
-            ><FontAwesomeIcon
+          <RouterLink to="/map" @click="closeAsideMenu">
+            <FontAwesomeIcon
               icon="map-location-dot"
               size="sm"
               style="margin-right: 5px"
             />
-            Map</RouterLink
-          >
+            Map
+          </RouterLink>
         </li>
         <li :class="{ selected: isActive('/mission') }">
           <RouterLink to="/mission" @click="closeAsideMenu"
@@ -192,102 +192,117 @@ const isActive = (page: string): boolean => {
   <header v-if="!isFullscreen" class="header-nav-bar hide-when-small">
     <nav>
       <ul class="header-nav-bar__list">
-        <li class="header-nav-bar__item" :class="{ selected: isActive('/') }">
-          <RouterLink to="/"
-            ><FontAwesomeIcon icon="home" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+        <RouterLink
+          to="/"
+          class="header-nav-bar__item"
+          :class="{ selected: isActive('/') }"
+        >
+          <li>
+            <FontAwesomeIcon icon="home" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/schedule"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/schedule') }"
         >
-          <RouterLink to="/live"
-            ><FontAwesomeIcon icon="calendar-days" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="calendar-days" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/map"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/map') }"
         >
-          <RouterLink to="/map"
-            ><FontAwesomeIcon icon="map-location-dot" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="map-location-dot" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/mission"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/mission') }"
         >
-          <RouterLink to="/mission"
-            ><FontAwesomeIcon icon="user-secret" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="user-secret" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/mentors"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/mentors') }"
         >
-          <RouterLink to="/mentors"
-            ><FontAwesomeIcon icon="chalkboard-teacher" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="chalkboard-teacher" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/meals"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/meals') }"
         >
-          <RouterLink to="/meals"
-            ><FontAwesomeIcon icon="utensils" size="lg"
-          /></RouterLink>
-        </li>
+          <li>
+            <FontAwesomeIcon icon="utensils" size="lg" />
+          </li>
+        </RouterLink>
         <li class="header-nav-bar__item header-nav-bar__item--countdown">
           <Countdown class="hide-when-small" @click="goToFullscreen" />
         </li>
-        <li
+        <RouterLink
+          to="/talks"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/talks') }"
         >
-          <RouterLink to="/talks"
-            ><FontAwesomeIcon icon="message" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="message" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/challenges"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/challenges') }"
         >
-          <RouterLink to="/challenges"
-            ><FontAwesomeIcon icon="code" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="code" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/hardware"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/hardware') }"
         >
-          <RouterLink to="/hardware"
-            ><FontAwesomeIcon icon="microchip" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="microchip" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/rules"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/rules') }"
         >
-          <RouterLink to="/rules"
-            ><FontAwesomeIcon icon="gavel" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="gavel" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/travel"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/travel') }"
         >
-          <RouterLink to="/travel"
-            ><FontAwesomeIcon icon="plane" size="lg"
-          /></RouterLink>
-        </li>
-        <li
+          <li>
+            <FontAwesomeIcon icon="plane" size="lg" />
+          </li>
+        </RouterLink>
+        <RouterLink
+          to="/faq"
           class="header-nav-bar__item"
           :class="{ selected: isActive('/faq') }"
         >
-          <RouterLink to="/faq"
-            ><FontAwesomeIcon icon="circle-question" size="lg"
-          /></RouterLink>
-        </li>
+          <li>
+            <FontAwesomeIcon icon="circle-question" size="lg" />
+          </li>
+        </RouterLink>
       </ul>
     </nav>
   </header>
@@ -327,9 +342,9 @@ $fade-time: 300ms;
 
   &__bar {
     position: relative;
-    height: 50px;
+    height: 60px;
     border-bottom: thin solid rgb(125 125 125 / 30%);
-    background-color: $contrast-color;
+    background-color: $header-mobile-bg-color;
     box-shadow: 0 0 10px 0 rgb(125 125 125 / 60%);
     color: $secondary-text-color;
   }
@@ -354,7 +369,7 @@ $fade-time: 300ms;
   width: 50px;
   height: 100%;
   align-items: center;
-  color: #000;
+  color: #fff;
   cursor: pointer;
   font-size: 20px;
   text-align: center;
@@ -371,7 +386,7 @@ $fade-time: 300ms;
   overflow: auto; /* just in case */
   width: 200px;
   height: 100%;
-  background-color: $contrast-color;
+  background-color: $header-mobile-bg-color;
   box-shadow: 0 0 13px 1px rgb(0 0 0 / 60%);
   transition: left 300ms;
 
@@ -384,6 +399,7 @@ $fade-time: 300ms;
     width: 50px;
     height: 50px;
     align-items: center;
+    color: #fff;
     cursor: pointer;
     text-align: center;
 
@@ -395,7 +411,7 @@ $fade-time: 300ms;
 
   nav {
     margin-top: 10px;
-    background-color: color.adjust($contrast-color, $lightness: -5%);
+    background-color: color.adjust($header-mobile-bg-color, $lightness: -5%);
   }
 
   ul {
@@ -408,7 +424,7 @@ $fade-time: 300ms;
   }
 
   .selected {
-    background-color: color.adjust($contrast-color, $lightness: -15%);
+    background-color: color.adjust($header-mobile-bg-color, $lightness: -15%);
     font-weight: bold;
   }
 
@@ -444,7 +460,7 @@ $fade-time: 300ms;
     justify-content: center;
     padding: 8px 12px;
     border-left: thin solid rgb(30 30 30 / 20%);
-    background: #fff;
+    background: $header-desktop-bg-color;
     text-align: center;
 
     :first-child {
@@ -460,8 +476,7 @@ $fade-time: 300ms;
   }
 
   a {
-    display: block;
-    padding: 10px 0;
+    padding: 15px 5px;
     color: $text-color;
     text-decoration: none;
   }

diff --git a/src/variables.scss b/src/variables.scss
@@ -1,17 +1,20 @@
 @use 'sass:color';
 
 /* --- COLORS --- */
-$bg-color: #f2ede6;
-$text-color: #222;
-$contrast-color: #E8E2D7;
+$bg-color: #000;
+$text-color: #F9FDFF;
+$text-color-dark: #232F34;
+$contrast-color: #232F34;
 $text-soft-color: #686868;
-$primary-color: #BEB771;
-$secondary-color: #E18282;
+$primary-color: #7F27A2;
+$secondary-color: #E23532;
 $secondary-light-color-intensity: 100;
 $secondary-light-color: color.adjust($secondary-color, $red: $secondary-light-color-intensity, $green: $secondary-light-color-intensity, $blue: $secondary-light-color-intensity);
-$secondary-text-color: #2b2b2b;
-$tertiary-light-color: #fff;
+$secondary-text-color: #dadada;
+$tertiary-light-color: #88A7B7;
 $highlight-color: $secondary-color;
+$header-mobile-bg-color: rgb(40 40 40 / 90%);
+$header-desktop-bg-color: rgb(40 40 40 / 50%);
 
 /* --- EASINGS --- */
 $ease-bounce: cubic-bezier(0.18, 0.89, 0.32, 1.28);

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -333,13 +333,14 @@ const submitDeadline = computed<string>(() =>
     flex: 1 1 0;
     padding: 8px;
     background-color: $tertiary-light-color;
-    color: $text-color !important;
+    color: $text-color-dark !important;
+    cursor: pointer;
     font-weight: bold;
     text-align: center;
     text-decoration: none;
 
     &:not(:first-child) {
-      border-left: 3px solid #e8e2d7;
+      margin-left: 4px;
     }
   }
 }
@@ -379,11 +380,15 @@ const submitDeadline = computed<string>(() =>
     display: inline-block;
     line-height: 2;
     text-align: left;
+
+    code {
+      color: $text-color-dark;
+    }
   }
 }
 
 .icon-label-link {
-  color: currentcolor !important;
+  color: $text-color-dark !important;
   text-decoration: none !important;
 }