From 1d1e34808536268839b14673248052fe4b2f4ba2 Mon Sep 17 00:00:00 2001
From: douwe <douwe.ravers@hotmail.com>
Date: Wed, 6 Aug 2025 19:03:31 +0200
Subject: [PATCH] Refactored css and html file.

---
 static/css/douwco_styling.css | 156 +++++++++++++++++++++++-----
 templates/about_douwco.html   |  21 +---
 templates/about_me.html       |  21 +---
 templates/games.html          |  21 +---
 templates/home.html           | 190 ++++++++++------------------------
 5 files changed, 199 insertions(+), 210 deletions(-)

diff --git a/static/css/douwco_styling.css b/static/css/douwco_styling.css
index ccf1aa4..1137544 100644
--- a/static/css/douwco_styling.css
+++ b/static/css/douwco_styling.css
@@ -13,13 +13,6 @@
     src: url(../font/Montserrat-Bold.ttf);
 }
 
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
 
 body {
     font-family: monsterrat_regular;
@@ -28,34 +21,147 @@ body {
     color: white;
 }
 
-div 
-.app_panel {
+.root_div{
     display: flex;
+    flex-direction: column;
+}
+.root_div > .side_panel_div{
+    width: 100%;
+}
+
+.title_div{
+    margin-left: 50px;
+    display: flex; 
+    align-items: center;
     flex-direction: row; 
+    align-content: center;
+}
+.title_div > img {
+    width:150px; 
+    height: 150px;
+    margin-right: 50px;
+}
+.title_div > h1 {
+    font-family: righteous;
+    font-size: 120px;
+}
+
+.apps_title_div {
+    margin-top: 100px;
+}
+.apps_title_div > h2 {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    text-align: center;
+}
+.apps_title_div > hr {
+    height: 6px;
+    width:75%;
+    background-color: white;
+    border-width: 0px;
+    border-radius: 3px;
+    align-self: center;
+}
+
+.app_option_div { 
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin: 25px;
     border-radius: 25px;
     background-color: #304b4bFF;
 }
-
-button {
+.app_option_div > img {
+    height: 200px;
+    width: 200px;
+    margin: 25px;
+}
+.app_option_div > div > h3 {
     font-family: monsterrat_bold;
-    color: white;
-    cursor: pointer;
-    display: flex; 
-    align-items: center;
+    font-size: 36px;
 }
-.menu_button {
-    font-size: 48px;
-    border: none;
-    background-color: transparent;
+.app_option_div > div > p {
+    font-family: monsterrat_regular;
+    font-size: 24px;
 }
-.menu_button:hover {
-    border-radius: 20px;
-    background-color: #304b4bFF;;
+.app_option_div > div > p > a {
+    color: #6dde99; 
+    font-family: monsterrat_bold;
 }
-.app_selection_button {
+.app_option_div > a {
+    position: absolute;
     height: 50px;
-    width: 150px;
-    background-color: #6dde99;
+    width: 125px;
+    bottom: 25px;
+    right: 25px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
     border-radius: 10px;
     border: none;
+    background-color: #6dde99;
+}
+.app_option_div > a > p {
+    font-family: monsterrat_bold;
+    font-size: 18px;
+    width: 100%;
+    color: white;
+    text-align: center;
+}
+
+
+a {
+    font-family: monsterrat_regular;
+    color: white;
+    text-decoration:none;
+    cursor: pointer;
+}
+.menu_option_a {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+    
+    display: flex; 
+    align-items: center;
+
+    margin-left: 50px; 
+    padding-left: 50px;
+    padding-right: 50px;
+}
+.menu_option_a:hover{
+    background-color: #304b4bFF;;
+}
+.menu_option_a > img {
+    width:100px; 
+    height:75px;
+    margin-right: 50px;
+}
+.menu_option_a > p > span {
+    color: #88d4d4;
+}
+
+
+@media (min-width: 1300px) {
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .root_div{
+        display: flex;
+        flex-direction: row;
+    }
+    .root_div > .side_panel_div{
+        width: 50%;
+    }
+
+    .apps_selection_div {
+        max-height: 75vh;
+        overflow-y: auto;   
+    }
 }
\ No newline at end of file
diff --git a/templates/about_douwco.html b/templates/about_douwco.html
index db1411c..ff0d721 100644
--- a/templates/about_douwco.html
+++ b/templates/about_douwco.html
@@ -6,23 +6,10 @@
 <html>
 
 <body>
-  <div style="
-        margin-left: 50px;
-        display: flex; 
-        align-items: center;
-        flex-direction: row; 
-        align-content: center;">
-
-        <img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
-        width:150px; 
-        height: 150px;
-        margin-right: 50px;">
-
-        <h1 style="
-        font-family: righteous;
-        font-size: 120px;">
-          douwco</h1>
-      </div>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/about_me.html b/templates/about_me.html
index db1411c..ff0d721 100644
--- a/templates/about_me.html
+++ b/templates/about_me.html
@@ -6,23 +6,10 @@
 <html>
 
 <body>
-  <div style="
-        margin-left: 50px;
-        display: flex; 
-        align-items: center;
-        flex-direction: row; 
-        align-content: center;">
-
-        <img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
-        width:150px; 
-        height: 150px;
-        margin-right: 50px;">
-
-        <h1 style="
-        font-family: righteous;
-        font-size: 120px;">
-          douwco</h1>
-      </div>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/games.html b/templates/games.html
index db1411c..ff0d721 100644
--- a/templates/games.html
+++ b/templates/games.html
@@ -6,23 +6,10 @@
 <html>
 
 <body>
-  <div style="
-        margin-left: 50px;
-        display: flex; 
-        align-items: center;
-        flex-direction: row; 
-        align-content: center;">
-
-        <img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
-        width:150px; 
-        height: 150px;
-        margin-right: 50px;">
-
-        <h1 style="
-        font-family: righteous;
-        font-size: 120px;">
-          douwco</h1>
-      </div>
+  <div class="title_div">
+    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+    <h1>douwco</h1>
+  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 5467150..d79e9ee 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -6,151 +6,73 @@
 <html>
 
 <body>
-  <div style="
-    display: flex;
-    flex-direction: row;">
-    <div style="
-      width: 50%;">
-      <div style="
-        margin-left: 50px;
-        display: flex; 
-        align-items: center;
-        flex-direction: row; 
-        align-content: center;">
+  <!-- <p id="demo"></p>
+  <script>
+      var w = window.innerWidth;
+      var h = window.innerHeight;
 
-        <img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
-        width:150px; 
-        height: 150px;
-        margin-right: 50px;">
+      var x = document.getElementById("demo");
+      x.innerHTML = "Browser width: " + w + ", height: " + h + ".";
+  </script> -->
 
-        <h1 style="
-        font-family: righteous;
-        font-size: 120px;">
-          douwco</h1>
+  <div class="root_div">
+    <div class="side_panel_div">
+      <div class="title_div">
+        <img src="../static/img/douwco_logo.png" alt="douwco_logo">
+        <h1>douwco</h1>
       </div>
       <div>
-        <button class="menu_button" s
-        onclick="location.href='/games'"
-        style="
-        margin-left: 50px; 
-        padding-left: 50px;
-        padding-right: 50px;">
-          <img src="../static/img/device-gamepad.png" alt="gamepad icon" style="
-          width:100px; 
-          height:75px;
-          margin-right: 50px;">
-          <p>
-            Play
-            <span style="color: #88d4d4;">My Games</span>
-          </p>
-        </button>
-        <button class="menu_button" 
-        onclick="location.href='/about_me'"
-        style="
-        margin-left: 50px; 
-        padding-left: 50px;
-        padding-right: 50px;">
+        <a class="menu_option_a" href="/games">
+          <img src="../static/img/device-gamepad.png" alt="gamepad icon">
+          <p>Play <span>My Games</span></p>
+        </a>
+        <a class="menu_option_a" href="/about_me">
           <img src="../static/img/user.png" alt="user icon" style="
-          width:5Opx; 
-          height:75px;
-          margin-left: 25px;
-          margin-right: 75px;">
-          <p>
-            About
-            <span style="color: #88d4d4;">Douwe Ravers</span>
-          </p>
-        </button>
-
-        <button class="menu_button"
-        onclick="location.href='/about_douwco'"
-        style="
-        margin-left: 50px; 
-        padding-left: 50px;
-        padding-right: 50px;">
-          <img src="../static/img/info-hexagon.png" alt="gamepad icon" style="
-          width:70px; 
-          height:75px;
-          margin-left: 15px;
-          margin-right: 65px;">
-          <p>
-            About
-            <span style="color: #88d4d4;">Douwco</span>
-          </p>
-        </button>
+            width:60px; 
+            margin-left: 20px;
+            margin-right:70px;">
+          <p>About <span>Douwe Ravers</span></p>
+        </a>
+        <a class="menu_option_a" href="/about_douwco">
+          <img src="../static/img/info-hexagon.png" alt="info icon" style="
+            width:75px; 
+            margin-left: 12px;
+            margin-right:62px;">
+          <p>About <span>Douwco</span></p>
+        </a>
       </div>
     </div>
-    <div style="
-      width: 50%;
-      margin-top: 100px;">
-      <h2 style="
-        font-size: 48px;
-        text-align: center;">
-        Locally Hosted Apps</h2>
-      <hr style="
-        height: 6px;
-        width:75%;
-        background-color: white;
-        border-width: 0px;
-        border-radius: 3px;
-        align-self: center;">
-
-      <div style="
-        max-height: 75vh;
-        overflow-y: auto;">
-        <div class="app_panel" style="margin: 25px;">
-          <img src="../static/img/cloud_img.png" alt="cloud icon" style="
-          height: 200px;
-          width: 200px;
-          margin: 25px;
-        ">
+    <div class="side_panel_div">
+      <div class="apps_title_div">
+        <h2>Locally Hosted Apps</h2>
+        <hr>
+      </div>
+      <div class="apps_selection_div">
+        <div class="app_option_div">
+          <img src="../static/img/cloud_img.png" alt="cloud icon">
           <div>
-            <h3 style="font-size: 36px;">Douwco Cloud</h3>
-            <p style="font-size: 24px;">
+            <h3>Douwco Cloud</h3>
+            <p>
               Access the cloud hosted on my local server.</br></br>
-              Made possible with <a href="https://nextcloud.com/home-users/"
-                style="color: #6dde99; font-weight: bolder;">Nextcloud AIO</a>.</p>
-          </div>
-          <button class="app_selection_button"
-          onclick="location.href='https\:\/\/cloud.douwco.be'"
-          style="
-            margin-right: 25px;
-            margin-bottom: 25px;
-            align-self: flex-end;">
-            <p style="
-              font-size: 18px;
-              width: 100%;
-              color: white;
-              text-align: center;
-              ">Go to Cloud</p>
-          </button>
+              Made possible with <a href="https://nextcloud.com/home-users/">Nextcloud AIO</a>.
+            </p>
+          </div>            
+          <a href="https://cloud.douwco.be">
+            <p>Go to Cloud</p>
+          </a>
         </div>
-        <div class="app_panel" style="margin: 25px;">
-          <img src="../static/img/penpot_img.png" alt="penpot icon" style="
-          height: 200px;
-          width: 200px;
-          margin: 25px;
-        ">
+        <div class="app_option_div">
+          <img src="../static/img/penpot_img.png" alt="penpot icon">
           <div>
-            <h3 style="font-size: 36px;">Douwco Designer</h3>
-            <p style="font-size: 24px;">
-            Create UI designs for websites and software locally hosted on my server. </br></br>
-            Made possible with <a href="https://penpot.app/self-host" 
-              style="color: #6dde99; font-weight: bolder;">PenPot</a>.</p>
-          </div>
-          <button class="app_selection_button" 
-          onclick="location.href='https\:\/\/designer.douwco.be'"
-          style="
-            width: 250px;
-            margin-right: 25px;
-            margin-bottom: 25px;
-            align-self: flex-end;">
-            <p style="
-              font-size: 18px;
-              width: 100%;
-              color: white;
-              text-align: center;
-              ">Go to Designer</p>
-          </button>
+            <h3>Douwco Designer</h3>
+            <p>
+              Create UI designs for websites and software locally hosted on my server. </br></br>
+              Made possible with <a href="https://penpot.app/self-host">PenPot</a>
+            </p>
+          </div>            
+          <a href="https://designer.douwco.be">
+            <p>Go to Designer</p>
+          </a>
         </div>
       </div>
     </div>