Shorten intro content

1 files changed, 11 insertions, 16 deletions

diff --git a/src/components/IntroModal.vue b/src/components/IntroModal.vue
index fc79ed0..c4f5e0f 100644
--- a/src/components/IntroModal.vue
+++ b/src/components/IntroModal.vue
@@ -5,29 +5,25 @@
 		<close-icon @click.stop="onClose" ref="closeRef"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
 
-		<h1 class="text-center text-xl font-bold pt-2 pb-1 md:text-2xl md:pt-3">
+		<h1 class="text-center text-xl font-bold pt-2 pb-2 md:pt-3">
 			Welcome
 		</h1>
 
-		<div class="px-4 py-2 md:p-3">
-			<p>
-				This is an interactive historical timeline, displaying events from
-				{{dateToDisplayStr(MIN_DATE)}} to {{dateToYearStr(MAX_DATE)}}.
+		<div class="px-4 pb-3 md:pb-4">
+			<p class="px-2">
+				This is an interactive historical timeline, spanning 14 billion years ago to 2030.
 			</p>
-			<ul class="list-disc pl-4 pt-2">
+			<ul class="list-disc pl-4 pt-1">
 				<li v-if="touchDevice">
-					<span class="font-bold">Drag the screen</span> to move the timeline
+					<span class="font-bold">Drag the screen</span> to move
 				</li>
 				<li v-else>
 					<span class="font-bold">Scroll</span> or
-					<span class="font-bold">press {{vert ? 'up and down': 'left and right'}}</span>
-					to move the timeline
+					<span class="font-bold">press {{vert ? 'up &amp; down': 'left &amp; right'}}</span>
+					to move
 				</li>
 				<li>
-					<span class="font-bold">{{touchDevice ? 'Pinch' : 'Hold shift'}}</span> to zoom in and out
-				</li>
-				<li>
-					{{touchDevice ? 'Tap' : 'Click'}} the help button for more details
+					<span class="font-bold">{{touchDevice ? 'Pinch' : 'Hold shift'}}</span> to zoom in &amp; out
 				</li>
 			</ul>
 		</div>
@@ -39,7 +35,6 @@
 import {ref, computed} from 'vue';
 
 import CloseIcon from './icon/CloseIcon.vue';
-import {MIN_DATE, MAX_DATE, dateToDisplayStr, dateToYearStr} from '../lib';
 import {useStore} from '../store';
 
 const rootRef = ref(null as HTMLDivElement | null);
@@ -48,7 +43,7 @@ const closeRef = ref(null as typeof CloseIcon | null);
 const store = useStore();
 const touchDevice = computed(() => store.touchDevice)
 
-const props = defineProps({
+defineProps({
 	vert: {type: Boolean, required: true},
 });
 
@@ -61,7 +56,7 @@ function onClose(evt: Event){
 }
 
 const styles = computed(() => ({
-	backgroundColor: store.color.bgAlt,
+	backgroundColor: store.color.bgAltDark,
 	borderRadius: store.borderRadius + 'px',
 	overflow: 'visible auto',
 }));