From c1ef896807480268e81db058d091ffa92f0094dd Mon Sep 17 00:00:00 2001
From: Jordan Leslie <jordan02leslie@gmail.com>
Date: Thu, 2 Nov 2023 20:08:07 -0400
Subject: [PATCH] more styling

---
 assets/images/Down.svg  | 4 ++++
 assets/images/Left.svg  | 2 +-
 assets/images/Right.svg | 2 +-
 assets/images/Up.svg    | 4 ++++
 index.html              | 2 +-
 styles.css              | 9 +++++++--
 6 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 assets/images/Down.svg
 create mode 100644 assets/images/Up.svg

diff --git a/assets/images/Down.svg b/assets/images/Down.svg
new file mode 100644
index 0000000..9ea4f08
--- /dev/null
+++ b/assets/images/Down.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/assets/images/Left.svg b/assets/images/Left.svg
index 08599a1..397c43a 100644
--- a/assets/images/Left.svg
+++ b/assets/images/Left.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 9L8 12M8 12L11 15M8 12H16M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1795 3.26875C15.7889 2.87823 15.1558 2.87823 14.7652 3.26875L8.12078 9.91322C6.94952 11.0845 6.94916 12.9833 8.11996 14.155L14.6903 20.7304C15.0808 21.121 15.714 21.121 16.1045 20.7304C16.495 20.3399 16.495 19.7067 16.1045 19.3162L9.53246 12.7442C9.14194 12.3536 9.14194 11.7205 9.53246 11.33L16.1795 4.68297C16.57 4.29244 16.57 3.65928 16.1795 3.26875Z" fill="#0F0F0F"/>
 </svg>
\ No newline at end of file
diff --git a/assets/images/Right.svg b/assets/images/Right.svg
index 6f5aa79..714cba4 100644
--- a/assets/images/Right.svg
+++ b/assets/images/Right.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 15L16 12M16 12L13 9M16 12H8M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#0F0F0F"/>
 </svg>
\ No newline at end of file
diff --git a/assets/images/Up.svg b/assets/images/Up.svg
new file mode 100644
index 0000000..94a8c97
--- /dev/null
+++ b/assets/images/Up.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6844d2f..4654172 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
       <div id="wrapper">
         <div id="poem-container">
           <h1 class="title">A typical conversation of mine this summer in Taiwan</h1>
-          <ul class="verse" id="verse1">
+          <ul class="verse active-verse" id="verse1">
             <li>Hello, my (English) name is Jordan</li>
             <li>Sorry, my Chinese isn't too good—</li>
             <li>It's good! you insist,</li>
diff --git a/styles.css b/styles.css
index ae0cc86..a185aba 100644
--- a/styles.css
+++ b/styles.css
@@ -46,7 +46,7 @@ p {
 }
 
 .disabled-btn {
-  opacity: 0.5 !important;
+  opacity: 0.3 !important;
   &:hover {
     cursor: default !important;
   }
@@ -78,6 +78,10 @@ li {
   font-size: 20px;
 }
 
+.active-verse {
+  color: black;
+}
+
 #wrapper {
   display: flex;
   flex-direction: row;
@@ -85,7 +89,7 @@ li {
   min-height: calc(100vh);
 }
 
-@media (max-width: 1150px) {
+@media (max-width: 1280px) {
   #wrapper {
     flex-direction: column;
     max-height: calc(50vh);
@@ -101,6 +105,7 @@ li {
   overflow: auto;
   max-height: calc(100vh);
   background-color: #fffffe;
+  min-width: 400px;
 }
 
 #statement-selector {