Merge pull request #6 from heywooddogwood/splash-screen-updates

Splash screen updates
cosmicds · Dec 4, 2024 · efdc255 · efdc255
2 parents 8471f89 + b8e652e
commit efdc255
Showing 1 changed file with 30 additions and 32 deletions.
diff --git a/src/AnnularEclipse2023.vue b/src/AnnularEclipse2023.vue
@@ -739,40 +739,29 @@
       <div
           id="first-splash-row"
         >
-          <div
+          <font-awesome-icon
             id="close-splash-button"
             @click="closeSplashScreen"
-            >&times;</div>
+            icon="xmark"  
+          />
           <div id="splash-screen-text">
             <p>WATCH the October 14</p>
             <p class="highlight"> Annular Eclipse </p>
           </div>
         </div>
-
-        <div id="splash-screen-guide">
-          <v-row>
-            <v-col cols="12">
-              <font-awesome-icon
-                icon="rocket"
-              /> Explore the view 
-            </v-col>
-            <v-col cols="12">
-              <font-awesome-icon
-                icon="location-dot"
-              /> Choose any location 
-            </v-col>
-            <v-col cols="12">
-              <font-awesome-icon
-                icon="puzzle-piece"
-              /> Identify the path 
-            </v-col>
-            <v-col cols="12">
-              <font-awesome-icon
-                icon="video"
-              />
-           New! Video guide 
-            </v-col>
-          </v-row>
+
+        <div>
+          <v-btn
+            class="splash-get-started"
+            @click="closeSplashScreen"
+            :color="accentColor"
+            :density="xSmallSize ? 'compact' : 'default'"
+            size="x-large"
+            variant="elevated"
+            rounded="lg"
+          >
+            Get Started
+          </v-btn>
         </div>
 
         <div id="splash-screen-acknowledgements">
@@ -3465,7 +3454,7 @@ body {
   padding-top: 4rem;
   padding-bottom: 1rem;
 
-  border-radius: 10%;
+  border-radius: 30px;
   border: min(1.2vw, 0.9vh) solid var(--accent-color);
   overflow: auto;
   font-family: 'Highway Gothic Narrow', 'Roboto', sans-serif;
@@ -3509,11 +3498,11 @@ body {
 
   #close-splash-button {
     position: absolute;
-    top: 0.5rem;
-    right: 1.75rem;
+    top: 20px;
+    right: 20px;
     text-align: end;
     color: var(--accent-color);
-    font-size: min(8vw, 5vh);
+    font-size: min(5vw, 4vh);
 
     &:hover {
       cursor: pointer;
@@ -3528,6 +3517,14 @@ body {
 
   }
 
+.splash-get-started {
+  border: 2px solid white;
+  font-size: calc(1.8 * var(--default-font-size));
+  margin-top: 5%;
+  margin-bottom: 2%;
+  font-weight: bold !important;
+}
+
   #splash-screen-guide {
     margin-block: 1.5em;
     font-size: min(5vw, 4vh);
@@ -3545,9 +3542,10 @@ body {
   }
 
   #splash-screen-acknowledgements {
+    margin-top: 3rem;
     font-size: calc(1.7 * var(--default-font-size));
     line-height: calc(1.5 * var(--default-line-height));
-    width: 70%; 
+    width: 60%; 
   }
 
   #splash-screen-logos {