From c8c556221d06f20fb608fd8e9af48eccd5d6ea5b Mon Sep 17 00:00:00 2001
From: watson <kars@duck.com>
Date: Mon, 21 Oct 2024 21:05:38 +0200
Subject: [PATCH] Fixed button design

---
 src/app.css    | 21 ++++++++++++++++++++-
 src/app.jsx    | 12 +++---------
 src/button.css | 12 +++++++++---
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 15bbed9..cc08bf8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,10 +1,15 @@
+*{
+  margin: 0;
+  box-sizing: border-box;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 1vh;
   text-align: center;
   display: block;
-  /*position: relative;*/
+  position: relative;
 }
 
 h1 {
@@ -20,6 +25,20 @@ h2 {
 }
 
 h3 {
+  margin-top: 5vh;
+  margin-bottom: 5vh;
   font-size: 3vh;
 }
 
+p {
+  margin-bottom: 5vh;
+}
+
+.App {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  width: 50%;
+}
diff --git a/src/app.jsx b/src/app.jsx
index 5b06b61..d4e0bc9 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -14,15 +14,9 @@ function App() {
           </p>
 
           <div className="App">
-              <ButtonGroup buttons={[ ["Home", "https://home.octubre.be"], ["Cloud", "https://cloud.octubre.be"], ["Me", "https://me.octubre.be"]]}/>
-          </div>
-
-          <div className="App">
-              <ButtonGroup buttons={[ ["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"]]}/>
-          </div>
-
-          <div className="App">
-              <ButtonGroup buttons={[["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>
+              <ButtonGroup buttons={[ ["Home", "https://home.octubre.be"], ["Cloud", "https://cloud.octubre.be"], ["Me", "https://me.octubre.be"], ["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"], ["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>
+              {/*<ButtonGroup buttons={[["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"] ]}/>*/}
+              {/*<ButtonGroup buttons={[["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>*/}
           </div>
 
           <h3>Contact</h3>
diff --git a/src/button.css b/src/button.css
index baabafc..6ccfe21 100644
--- a/src/button.css
+++ b/src/button.css
@@ -1,11 +1,17 @@
 button {
     border-radius: 8px;
     border: 1px solid transparent;
-    margin: 1vw;
-    padding: 0.6em 1.2em;
-    font-size: 1.2em;
+
+    margin: 0.5vw;
+    padding: 10px 10px;
+
+    text-align: center;
+    width: 150px;
+
+    font-size: 20px;
     font-weight: 500;
     font-family: inherit;
+
     background-color: #1a1a1a;
     cursor: pointer;
     transition: border-color 0.25s;