From 3dc9425b3478bb3ac6cc5f18bd7047350880f71f Mon Sep 17 00:00:00 2001
From: Tomohiro IKEDA <rilakkuma.san.xjapan@gmail.com>
Date: Sat, 18 Nov 2023 20:00:44 +0900
Subject: [PATCH] style: Use Grid Layout instead of Flexbox

---
 app.css    | 28 ++++++++++++----------------
 index.html |  4 ----
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/app.css b/app.css
index a9ac8b1b4..e5fb5d69e 100644
--- a/app.css
+++ b/app.css
@@ -36,6 +36,14 @@ header,
   overflow: hidden;
 }
 
+aside > section {
+  display: grid;
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: repeat(3, auto);
+  gap: 12px;
+  margin-top: 12px;
+}
+
 header,
 aside {
   background-color: #000;
@@ -120,14 +128,6 @@ aside > img {
   transform: scale(0.5);
 }
 
-.section > section {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 12px;
-}
-
 h1 {
   font-family: "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
   font-size: calc(64 * ((100vw - 320px) / (1280 - 320)) + 64px);
@@ -189,9 +189,9 @@ h1 > span:last-child {
 }
 
 nav {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 12px;
   margin-top: 48px;
 }
 
@@ -205,7 +205,6 @@ nav > a:first-of-type {
 }
 
 nav > a:last-of-type {
-  margin-left: 12px;
   color: #c000c0;
   background-color: rgb(0 0 0 / 0%);
 }
@@ -222,14 +221,12 @@ nav > a:last-of-type:hover {
 }
 
 aside h3 {
-  min-width: 90px;
   text-transform: uppercase;
 }
 
 pre {
-  width: 480px;  /* HACK */
+  max-width: 480px;  /* HACK */
   padding: 8px 16px;
-  margin-left: 16px;
   overflow-x: auto;
   font-size: 16px;
   color: #212121;
@@ -238,7 +235,6 @@ pre {
 
 button[type="button"] {
   padding: 12px 16px;
-  margin-left: 16px;
   font-size: 16px;
   color: #eee;
   text-transform: uppercase;
diff --git a/index.html b/index.html
index e67a8e97e..3f54d563d 100644
--- a/index.html
+++ b/index.html
@@ -60,13 +60,9 @@ <h2>Let's Begin !</h2>
         <h3>npm</h3>
         <pre id="pre-npm"><code>$ npm install --save xsound</code></pre>
         <button id="button-npm" type="button">copy</button>
-      </section>
-      <section>
         <h3>Yarn</h3>
         <pre id="pre-yarn"><code>$ yarn add xsound</code></pre>
         <button id="button-yarn" type="button">copy</button>
-      </section>
-      <section>
         <h3>CDN</h3>
         <pre id="pre-cdn"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/npm/xsound@latest/build/xsound.min.js&quot;&gt;&lt;/script&gt;</code></pre>
         <button id="button-cdn" type="button">copy</button>