diff --git a/src/SplashScreen.vue b/src/SplashScreen.vue index 3c11dc6..0cdad2b 100644 --- a/src/SplashScreen.vue +++ b/src/SplashScreen.vue @@ -1,26 +1,24 @@ @@ -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; }