From b55cb5239f34478351a36a5eb758f4546117b537 Mon Sep 17 00:00:00 2001
From: kaBeech <contact@kaBeech.com>
Date: Sat, 18 Mar 2023 16:18:32 -0700
Subject: [PATCH] Update preview button layout

---
 index.html | 20 ++++++++++++++------
 style.css  | 12 ++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 67cc2cf..885f0f8 100644
--- a/index.html
+++ b/index.html
@@ -30,12 +30,20 @@
         <p>THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!</p>
         <p>0123456789.:,;(*!?')</p>
       </div>
-      <button id="seriousButton">Serious Sans</button>
-      <button id="seriousItalicButton">Serious Sans Italic</button>
-      <button id="seriousBoldButton">Serious Sans Bold</button>
-      <button id="seriousBoldItalicButton">Serious Sans Bold Italic</button>
-      <button id="seriousLightButton">Serious Sans Light</button>
-      <button id="seriousLightItalicButton">Serious Sans Light Italic</button>
+      <div id="previewButtons">
+        <div class="flex column">
+          <button id="seriousButton">Serious Sans</button>
+          <button id="seriousBoldButton">Serious Sans Bold</button>
+          <button id="seriousLightButton">Serious Sans Light</button>
+        </div>
+        <div class="flex column">
+          <button id="seriousItalicButton">Serious Sans Italic</button>
+          <button id="seriousBoldItalicButton">Serious Sans Bold Italic</button>
+          <button id="seriousLightItalicButton">
+            Serious Sans Light Italic
+          </button>
+        </div>
+      </div>
       <br />
       <h2>Downloads</h2>
       <div id="downloads">
diff --git a/style.css b/style.css
index 8013c51..cd0efb9 100644
--- a/style.css
+++ b/style.css
@@ -36,6 +36,10 @@
     display: flex;
     justify-content: space-evenly;
   }
+  #previewButtons {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 body {
@@ -95,6 +99,14 @@ button {
   color: rgb(0, 188, 138);
 }
 
+.flex {
+  display: flex;
+}
+
+.column {
+  flex-direction: column;
+}
+
 .selected {
   background-color: #464646;
   color: #d4d4d4;