overhauled style to make it more pantoney and aesthetic

src/App.svelte

@@ -8,7 +8,6 @@
 <style>
 	body {
 		max-width: 600px;
-		max-height: 800px;
 		min-height: 600px;
 	}
 </style>

src/components/Card.svelte

@@ -9,9 +9,7 @@
     <div class= "content">
         <Swiper></Swiper>
         <Content></Content>
-        <div class="nav">
-            <Nav></Nav>
-        </div>
+        <Nav></Nav>
     </div>
 
 </main>
@@ -22,7 +20,7 @@
         flex-direction: column;
         align-content: center;
         justify-content: center;
-        height: 100vh;
+        height: 100%;
         overflow: hidden;
     }
 
@@ -31,9 +29,4 @@
         flex-direction: column;
         height: 100%;
     }
-
-    .nav {
-        display: flex;
-    }
-
 </style>

src/components/Content.svelte

@@ -8,6 +8,10 @@
         <h1 id="title">
             {chosen.name}
         </h1>
+
+        <p id="uid">
+            {chosen.uid}
+        </p>
 
         <p id="description">
             {chosen.description}
@@ -31,18 +35,27 @@
     margin: 10px;
     display: flex;
     font-family: 'PT Serif', serif;
-    text-align: center;
-    justify-content: center;
-    font-size: 30pt;
+    text-align: left;
+    font-size: 25pt;
     font-weight: 600;
+    color: #333;
+}
+
+#uid {
+    margin: 0 0 0 10px;
+    display: flex;
+    text-align: left;
+    font-size: 12pt;
+    color: #8e8e8e;
+    font-family: 'PT Serif', serif;
 }
 
 #description {
     margin: 10px;
     display: flex;
     font-family: 'PT Serif', serif;
-    text-align: center;
-    justify-content: center;
-    font-size: 20pt;
+    text-align: left;
+    font-size: 15pt;
+    color: #545454;
 }
 </style>

src/components/Nav.svelte

@@ -1,12 +1,8 @@
 <nav>
 
-    <button>
-        <p>Back</p>
-    </button>
-
-    <button onClick="window.location.reload();">
-        <p>Next</p>
-    </button>
+    <span onClick="window.location.reload();">
+        <p>{">"}</p>
+    </span>
 
 </nav>
 
@@ -16,22 +12,26 @@
         width: 100%;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: center;
     }
 
-    button {
+    span {
+        padding: 5px 13px;
+        margin: 10px 0 0 0;
         font-family: 'PT Serif', serif;
         font-weight: 800;
-    }
-
-    button {
-        background-color: transparent;
+        background-color: #333;
         border: none;
-        color: #333;
+        color: #fff;
         text-align: center;
         text-decoration: none;
         display: inline-flex;
-        font-size: 20pt;
+        font-size: 15pt;
         cursor: pointer;
+        border-radius: 50%;
 }
+
+    p {
+        margin: 0;
+    }
 </style>

src/js/arrayFunc.js

@@ -1,88 +1,98 @@
 function shuffle(array) {
-    var i = array.length,
-        j = 0,
-        temp;
+  var i = array.length,
+    j = 0,
+    temp;
 
-    while (i--) {
+  while (i--) {
+    j = Math.floor(Math.random() * i);
 
-        j = Math.floor(Math.random() * (i));
-
-        // swap randomly chosen element with current element
-        temp = array[i];
-        array[i] = array[j];
-        array[j] = temp;
-
-    }
+    // swap randomly chosen element with current element
+    temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
 
-    return array;
+  return array;
 }
 
-var ranNums = shuffle([0,1,2,3,4,5,6,7,8,9]);
+var ranNums = shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
 
 var nostalgia = {
-    name: "Nostalgia",
-    description: "A wistful desire to return in thought or in fact to a former time in one's life.",
-    img0: "img/nostalgia-" + ranNums[0] + ".jpg",
-    img1: "img/nostalgia-" + ranNums[1] + ".jpg",
-    img2: "img/nostalgia-" + ranNums[2] + ".jpg",
-    img3: "img/nostalgia-" + ranNums[3] + ".jpg",
-    img4: "img/nostalgia-" + ranNums[4] + ".jpg"
+  name: "Nostalgia",
+  uid: "iN-0182-001",
+  description:
+    "A wistful desire to return in thought or in fact to a former time in one's life.",
+  img0: "img/nostalgia-" + ranNums[0] + ".jpg",
+  img1: "img/nostalgia-" + ranNums[1] + ".jpg",
+  img2: "img/nostalgia-" + ranNums[2] + ".jpg",
+  img3: "img/nostalgia-" + ranNums[3] + ".jpg",
+  img4: "img/nostalgia-" + ranNums[4] + ".jpg",
 };
 
 var repentance = {
-    name: "Repentance",
-    description: "Repentance is the activity of reviewing one's actions and feeling contrition or regret for past wrongs.",
-    img0: "img/repentance-" + ranNums[0] + ".jpg",
-    img1: "img/repentance-" + ranNums[1] + ".jpg",
-    img2: "img/repentance-" + ranNums[2] + ".jpg",
-    img3: "img/repentance-" + ranNums[3] + ".jpg",
-    img4: "img/repentance-" + ranNums[4] + ".jpg"
+  name: "Repentance",
+  uid: "iN-0182-002",
+  description:
+    "Repentance is the activity of reviewing one's actions and feeling contrition or regret for past wrongs.",
+  img0: "img/repentance-" + ranNums[0] + ".jpg",
+  img1: "img/repentance-" + ranNums[1] + ".jpg",
+  img2: "img/repentance-" + ranNums[2] + ".jpg",
+  img3: "img/repentance-" + ranNums[3] + ".jpg",
+  img4: "img/repentance-" + ranNums[4] + ".jpg",
 };
 
 var sadness = {
-    name: "Sadness",
-    description: "Sadness is an emotional pain of disadvantage, loss, despair, grief, helplessness, disappointment and sorrow.",
-    img0: "img/sadness-" + ranNums[0] + ".jpg",
-    img1: "img/sadness-" + ranNums[1] + ".jpg",
-    img2: "img/sadness-" + ranNums[2] + ".jpg",
-    img3: "img/sadness-" + ranNums[3] + ".jpg",
-    img4: "img/sadness-" + ranNums[4] + ".jpg"
+  name: "Sadness",
+  uid: "iN-0182-003",
+  description:
+    "Sadness is an emotional pain of disadvantage, loss, despair, grief, helplessness, disappointment and sorrow.",
+  img0: "img/sadness-" + ranNums[0] + ".jpg",
+  img1: "img/sadness-" + ranNums[1] + ".jpg",
+  img2: "img/sadness-" + ranNums[2] + ".jpg",
+  img3: "img/sadness-" + ranNums[3] + ".jpg",
+  img4: "img/sadness-" + ranNums[4] + ".jpg",
 };
 
 var ocean = {
-    name: "Ocean",
-    description: "The ocean is the beginning of life on Earth, and symbolizes formlessness, the unfathomable, and chaos.",
-    img0: "img/ocean-" + ranNums[0] + ".jpg",
-    img1: "img/ocean-" + ranNums[1] + ".jpg",
-    img2: "img/ocean-" + ranNums[2] + ".jpg",
-    img3: "img/ocean-" + ranNums[3] + ".jpg",
-    img4: "img/ocean-" + ranNums[4] + ".jpg"
+  name: "Ocean",
+  uid: "iN-0182-004",
+  description:
+    "The ocean is the beginning of life on Earth, and symbolizes formlessness, the unfathomable, and chaos.",
+  img0: "img/ocean-" + ranNums[0] + ".jpg",
+  img1: "img/ocean-" + ranNums[1] + ".jpg",
+  img2: "img/ocean-" + ranNums[2] + ".jpg",
+  img3: "img/ocean-" + ranNums[3] + ".jpg",
+  img4: "img/ocean-" + ranNums[4] + ".jpg",
 };
 
 var smiling = {
-    name: "Smiling",
-    description: "A smile expresses pleasure, sociability, happiness, joy or amusement.",
-    img0: "img/smiling-" + ranNums[0] + ".jpg",
-    img1: "img/smiling-" + ranNums[1] + ".jpg",
-    img2: "img/smiling-" + ranNums[2] + ".jpg",
-    img3: "img/smiling-" + ranNums[3] + ".jpg",
-    img4: "img/smiling-" + ranNums[4] + ".jpg"
+  name: "Smiling",
+  uid: "iN-0182-005",
+  description:
+    "A smile expresses pleasure, sociability, happiness, joy or amusement.",
+  img0: "img/smiling-" + ranNums[0] + ".jpg",
+  img1: "img/smiling-" + ranNums[1] + ".jpg",
+  img2: "img/smiling-" + ranNums[2] + ".jpg",
+  img3: "img/smiling-" + ranNums[3] + ".jpg",
+  img4: "img/smiling-" + ranNums[4] + ".jpg",
 };
 
 var surprise = {
-    name: "Surprise",
-    description: "Surprise can have any valence; that is, it can be neutral/moderate, pleasant, unpleasant, positive, or negative.",
-    img0: "img/surprise-" + ranNums[0] + ".jpg",
-    img1: "img/surprise-" + ranNums[1] + ".jpg",
-    img2: "img/surprise-" + ranNums[2] + ".jpg",
-    img3: "img/surprise-" + ranNums[3] + ".jpg",
-    img4: "img/surprise-" + ranNums[4] + ".jpg"
+  name: "Surprise",
+  uid: "iN-0182-006",
+  description:
+    "Surprise can have any valence; that is, it can be neutral/moderate, pleasant, unpleasant, positive, or negative.",
+  img0: "img/surprise-" + ranNums[0] + ".jpg",
+  img1: "img/surprise-" + ranNums[1] + ".jpg",
+  img2: "img/surprise-" + ranNums[2] + ".jpg",
+  img3: "img/surprise-" + ranNums[3] + ".jpg",
+  img4: "img/surprise-" + ranNums[4] + ".jpg",
 };
 
 let titleArray = [nostalgia, repentance, sadness, ocean, smiling, surprise];
 
 function chooser() {
-    return titleArray[Math.floor(Math.random() * titleArray.length)];
-  }
+  return titleArray[Math.floor(Math.random() * titleArray.length)];
+}
 
-export var chosen  = chooser();
+export var chosen = chooser();