Merge pull request #47 from heywooddogwood/splashscreen-update

several cosmetic adjustments to splashscreen
cosmicds · Sep 28, 2024 · 22e67c6 · 22e67c6
2 parents 4c69dcf + bfe0fa2
commit 22e67c6
Showing 1 changed file with 47 additions and 30 deletions.
diff --git a/src/SplashScreen.vue b/src/SplashScreen.vue
@@ -1,26 +1,24 @@
 <template>
   <v-overlay :model-value="showSplashScreen" absolute opacity="0.6" :style="props.cssVars" id="splash-overlay">
-      <div id="splash-screen" v-click-outside="closeSplashScreen" :style="props.cssVars">
-        <div id="close-splash-button" @click="closeSplashScreen">&times;
+    <div id="splash-screen" v-click-outside="closeSplashScreen" :style="props.cssVars">
+      <div id="close-splash-button" @click="closeSplashScreen">&times;</div>
+      <div id="splash-screen-text">
+        <div class="highlight">Blaze Star Nova</div>
+        <div class="burst">Learn where in the sky to watch for a "new" star!</div>
+      </div>
+      <div id="splash-screen-acknowledgements" class="splash-screen-small">
+        <div id="links">
+          This Data Story is 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>.
         </div>
-        <div id="splash-screen-text">
-          <p class="highlight">Blaze Star Nova</p>
-          <p>Learn where in the sky to watch for a "new" star!</p>
+        <div id="splash-screen-logos">
+          <credit-logos logo-size="5vmin" />
         </div>
-        <div id="splash-screen-acknowledgements" class="splash-screen-small">
-          <span>This Data Story is 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>.</span>
-
-          <div id="splash-screen-logos">
-            <credit-logos logo-size="5vmin" />
-          </div>
-          <div id="image-credit">
-            Image credit: NASA / Goddard Space Flight Center
-          </div>
+        <div id="image-credit">
+          Image credit: NASA / Goddard Space Flight Center
         </div>
       </div>
-    </v-overlay>
+    </div>
+  </v-overlay>
 </template>
 
 
@@ -67,6 +65,7 @@ function closeSplashScreen() {
   background-color: #000000;
   background-image: url('https://www.nasa.gov/wp-content/uploads/2024/06/novacyg093500952-print.jpg');
   background-position: 80% bottom;
+  position: relative;
 
   display: flex;
   flex-direction: column;
@@ -81,7 +80,7 @@ function closeSplashScreen() {
   border: min(1.2vw, 0.9vh) solid var(--accent-color);
   overflow: auto;
   padding-top: 4rem;
-  padding-bottom: 1rem;
+  padding-bottom: 2rem;
 
   @media (max-width: 699px) {
     max-height: 80vh;
@@ -93,28 +92,31 @@ function closeSplashScreen() {
     max-width: min(65vw, 800px);
   }
 
-  div {
-    margin-inline: 7%;
+  div:not(#close-splash-button, #splash-screen-acknowledgements) {
+    margin-inline: 5%;
     text-align: center;
   }
   
-  p.highlight {
+  .highlight {
     color: var(--accent-color);
     text-transform: uppercase;
     font-weight: bolder;
     text-shadow: 0 0 16px black;
     filter: drop-shadow(0 0 5px black);
-    font-size: 1.2em;
+    font-size: min(1.2em, 7vw);
 
     @media (max-width: 750px) {
       font-weight: bold;
     }
   }
 
-  p:not(.highlight) {
-    background-color: rgba(255, 255, 255, 0.3);
+  .burst {
+    background-color: rgba(255, 255, 255, 0.4);
     border-radius: 15px;
     margin: 1rem;
+    padding: 1rem;
+    line-height: 1.2;
+    font-size: min(0.9em, 5vw)
   }
 
   .splash-screen-small {
@@ -123,9 +125,15 @@ function closeSplashScreen() {
     margin-top: 1rem;
   }
   
-  #splash-screen-acknowledgements > span {
-    background-color: rgba(0, 0, 0, 0.2);
+  #splash-screen-acknowledgements {
+    background-color: rgba(0, 0, 0, 0.5);
     color: white;
+    padding: 1rem;
+    margin-bottom: 2rem;
+
+    #links {
+      font-size: min(0.8em, 4vw)
+    }
   }
 
   #splash-screen-logos {
@@ -134,8 +142,8 @@ function closeSplashScreen() {
 
   #close-splash-button {
     position: absolute;
-    top: 0.5rem;
-    right: 0;
+    top: 20px;
+    right: 20px;
     text-align: end;
     color: var(--accent-color);
     font-size: min(8vw, 5vh);
@@ -145,11 +153,20 @@ function closeSplashScreen() {
     }
   }
 
+  a {
+    color: var(--accent-color);
+    text-decoration: none;
+
+    &:hover {
+      color: #F8C86C;
+    }
+  }
+
   #image-credit {
     position: absolute;
     bottom: 0.5rem;
-    left: -1rem;
-    font-size: calc(0.7 * var(--default-font-size));
+    right: -1rem;
+    font-size: calc(0.6 * var(--default-font-size));
     font-weight: 400;
     color: #DDDDDD;
   }