From 4cf82368e046cf2d877fcfc7f985da46f6d1ce9a Mon Sep 17 00:00:00 2001
From: Harry Houghton <henry.houghton@cfa.harvard.edu>
Date: Mon, 2 Dec 2024 00:50:28 -0500
Subject: [PATCH 1/2] update splash screen

Remove icons+text; update close button
---
 src/Carina.vue | 30 ++++++++----------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/src/Carina.vue b/src/Carina.vue
index d689b70..0e580b0 100644
--- a/src/Carina.vue
+++ b/src/Carina.vue
@@ -25,32 +25,17 @@
           <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>Want to see in the</p>
               <p class="highlight">INFRARED</p>
               <p>like JWST can?</p>
             </div>
           </div>
-          
-          <div id="splash-screen-guide">
-            <v-row>
-              <v-col cols="12">
-                <font-awesome-icon
-                  icon="video"
-                /> Watch the demo 
-              </v-col>
-              <v-col cols="12">
-                <font-awesome-icon
-                  icon="book-open"
-                /> Learn more
-              </v-col>
-            </v-row>
-          </div>
         
           <div id="splash-screen-acknowledgements">
             Brought to you by <a href="https://www.cosmicds.cfa.harvard.edu/" target="_blank" rel="noopener noreferrer">Cosmic Data Stories</a> and <a href="https://www.worldwidetelescope.org/home/" target="_blank" rel="noopener noreferrer">WorldWide Telescope</a>.
@@ -1047,7 +1032,7 @@ video {
   padding-top: 4rem;
   padding-bottom: 1rem;
 
-  border-radius: 10%;
+  border-radius: 30px;
   border: min(1.2vw, 0.9vh) solid #6facf1;
   overflow: auto;
   font-family: 'Highway Gothic Narrow', 'Roboto', sans-serif;
@@ -1080,11 +1065,11 @@ video {
 
   #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;
@@ -1116,6 +1101,7 @@ video {
   }
 
   #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: 60%; 

From a166a9b28abd9a77f22b812e72cc8a4b219c02df Mon Sep 17 00:00:00 2001
From: Harry Houghton <henry.houghton@cfa.harvard.edu>
Date: Tue, 3 Dec 2024 00:26:57 -0500
Subject: [PATCH 2/2] add get started button

modeled from the button in the Solar Eclipse 2024 data story.
---
 src/Carina.vue | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/Carina.vue b/src/Carina.vue
index 0e580b0..f23a00b 100644
--- a/src/Carina.vue
+++ b/src/Carina.vue
@@ -36,6 +36,20 @@
               <p>like JWST can?</p>
             </div>
           </div>
+
+          <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">
             Brought to you by <a href="https://www.cosmicds.cfa.harvard.edu/" target="_blank" rel="noopener noreferrer">Cosmic Data Stories</a> and <a href="https://www.worldwidetelescope.org/home/" target="_blank" rel="noopener noreferrer">WorldWide Telescope</a>.
@@ -540,6 +554,10 @@ export default defineComponent({
       return this.$vuetify.display.smAndDown;
     },
 
+    xSmallSize(): boolean {
+      return this.$vuetify.display.xs;
+    },
+
     cssVars() {
       return {
         '--accent-color': this.accentColor,
@@ -1084,6 +1102,14 @@ video {
     
   }
 
+  .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);