feat: grid-view

Lab-LVM · Aug 31, 2024 · 38cddd2 · 38cddd2
1 parent 40d617b
commit 38cddd2
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -46,17 +46,20 @@
 </head>
 <style>
   .mycontainer {
-    display: flex;
+    /* display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-content: center;
     justify-content: space-around;
-    align-items: center;
+    align-items: center; */
+    display: grid;
+    grid-template-columns: 5fr 5fr;
+    grid-gap: 1rem;
   }
   .myitem {
-    flex-basis: 0;
+    /* flex-basis: 0;
     flex-grow: 1;
-    margin: 1em;
+    margin: 1em; */
   }
 </style>
 <body>
@@ -203,7 +206,7 @@ <h4 class="title is-5">Song Title: "Rock You Like A Hurricane"</h4>
              <div id="player1"></div>
           </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -261,7 +264,7 @@ <h4 class="title is-5">Song Title: "Living On A Prayer"</h4>
              <div id="player5"></div>
           </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -322,7 +325,7 @@ <h4 class="title is-5">Song Title: "Hypeboy"</h4>
              <div id="player9"></div>
         </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -379,7 +382,7 @@ <h4 class="title is-5">Song Title: "Dash"</h4>
              <div id="player13"></div>
           </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -439,7 +442,7 @@ <h4 class="title is-5">Song Title: "Samulnori"</h4>
              <div id="player17"></div>
           </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -496,7 +499,7 @@ <h4 class="title is-5">Song Title: "Hello Im Innyeon"</h4>
              <div id="player21"></div>
           </div>
         <h2 class="title is-6">
-          Method1: Original chroma
+          Method1: Original chromagram
         </h2>
         </div>
        <div class="myitem item item-video1">
@@ -656,7 +659,7 @@ <h2 class="title">BibTeX</h2>
     var youtube_id_list = [
       "smHRooxKzB8",
       "sGNe0CEadhM",
-      "JKVKplyH",
+      "JKVKplyH-jA",
       "IXNLS-AJ904",
       "IcPqGVEfU1g",
       "CyWZHx_CJ7E",