diff --git a/src/JwstBrick.vue b/src/JwstBrick.vue index 44105e8..2703f51 100644 --- a/src/JwstBrick.vue +++ b/src/JwstBrick.vue @@ -27,19 +27,33 @@ >
-
+ ×
+ icon="xmark" + />
-

Want to see JWST's view of our

-

Galactic Center?

+ Want to see JWST's view of our Galactic Center?
+ +
+ + Get Started + +
Brought to you by Cosmic Data Stories and WorldWide Telescope. @@ -616,6 +630,11 @@ export default defineComponent({ smallSize(): boolean { return this.$vuetify.display.smAndDown; }, + + xSmallSize(): boolean { + return this.$vuetify.display.xs; + }, + mobile(): boolean { return this.smallSize && this.touchscreen; }, @@ -1094,7 +1113,7 @@ body { padding-bottom: 1rem; padding-inline: 0.5rem; - border-radius: 50px; + border-radius: 30px; border: min(1.2vw, 0.9vh) solid var(--accent-color); overflow: auto; font-family: 'Highway Gothic Narrow', 'Roboto', sans-serif; @@ -1129,11 +1148,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; @@ -1145,9 +1164,18 @@ body { display: flex; flex-direction: column; line-height: 130%; + padding: 0 2rem; } + .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); @@ -1165,6 +1193,7 @@ 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%;