Make the long list

Author: Jihye Hong

demo/index.html

@@ -21,7 +21,7 @@
             </select>
             <br>
             <span>Navigation Loop: </span>
-            <input id="loopType" type="checkbox" name="loop" value="enable" checked>
+            <input id="loopType" type="checkbox" name="loop" value="enable">
           </div>
         </fieldset>
       </form>
@@ -43,6 +43,9 @@
         <div class="time">4 pm</div>
         <div class="time">5 pm</div>
         <div class="time">6 pm</div>
+        <div class="time">7 pm</div>
+        <div class="time">8 pm</div>
+        <div class="time">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -57,6 +60,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -71,6 +77,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -85,6 +94,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -99,6 +111,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -113,6 +128,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
         <div class="date extra"></div>
         <div class="time extra">note</div>
         <div class="time extra">7 am</div>
@@ -127,6 +145,9 @@
         <div class="time extra">4 pm</div>
         <div class="time extra">5 pm</div>
         <div class="time extra">6 pm</div>
+        <div class="time extra">7 pm</div>
+        <div class="time extra">8 pm</div>
+        <div class="time extra">9 pm</div>
       </div>
       <div class="weekly sun">
         <div class="date">Sun 5</div>

demo/style.css

@@ -54,7 +54,7 @@ body {
 
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(calc(14*7), 50px);
+  grid-template-rows: repeat(calc(17*7), 50px);
 }
 
 .date {
@@ -116,21 +116,21 @@ body {
   grid-area: mon;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 .tue {
   grid-area: tue;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 .wed {
   grid-area: wed;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 #s5 {
@@ -141,7 +141,7 @@ body {
   grid-area: thu;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 #s16 {
@@ -160,26 +160,26 @@ body {
   grid-area: fri;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 #s6 {
   grid-row: 8/10;
 }
 
 #s7 {
-  grid-row: 13/14;
+  grid-row: 17/18;
 }
 
 #s12 {
-  grid-row: 14/15;
+  grid-row: 15/17;
 }
 
 .sat {
   grid-area: sat;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 #s13 {
@@ -206,7 +206,7 @@ body {
   grid-area: sun;
   display: grid;
   grid-gap: 0.5em;
-  grid-template-rows: repeat(14, 50px);
+  grid-template-rows: repeat(17, 50px);
 }
 
 .wrapper {