From 649f201729965e66a15b71c25cd0594244567247 Mon Sep 17 00:00:00 2001
From: Sage The DM <luca.burger@grischuni.net>
Date: Tue, 18 Jun 2024 19:16:01 +0200
Subject: [PATCH] Style improvement & name correction

---
 download.html |  7 +++--
 index.html    | 23 ++++++++++------
 style.css     | 72 +++++++++++++++++++++------------------------------
 3 files changed, 50 insertions(+), 52 deletions(-)
diff --git a/download.html b/download.html
index f81be1a..7dba409 100644
--- a/download.html
+++ b/download.html
@@ -9,7 +9,7 @@
   <body>
     <header>
       <div class="header-content">
-        <div class="project-name"><a href="index.html">freeTTRPG</a></div>
+        <div class="project-name"><a href="index.html">FreeTTRPG</a></div>
         <button class="burger-menu" onclick="toggleMenu()">☰</button>
         <ul class="menu">
           <li><a href="#section1">open a git console</a></li>
@@ -62,7 +62,10 @@
         <p>Move the bash console into the newly created repository</p>
       </section>
     </article>
-
+     <footer>
+      <br />
+      <br />
+    </footer>
     <script>
       function toggleMenu() {
         const menu = document.querySelector(".menu");
diff --git a/index.html b/index.html
index b8bd8e3..b866f8b 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>freeTTRPG</title>
+    <title>FreeTTRPG</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
       <div class="header-content">
-        <div class="project-name"><a href="index.html">freeTTRPG</a></div>
+        <div class="project-name"><a href="index.html">FreeTTRPG</a></div>
         <button class="burger-menu" onclick="toggleMenu()">☰</button>
         <ul class="menu">
           <li><a href="#section1">The Game</a></li>
@@ -71,7 +71,7 @@
       <section id="section5">
         <h1>Join Us</h1>
         <p>
-          We're excited to share freeTTRPG with the world and hope you'll join
+          We're excited to share FreeTTRPG with the world and hope you'll join
           us on this journey. Together, let's create a TTRPG ecosystem that's
           open, inclusive, and driven by the passion of its community.
         </p>
@@ -79,14 +79,17 @@
 
       <section id="section6">
         <h1>Our Code</h1>
-        <a href="download.html" target="_blank"
-          ><button type="button">Download</button></a
-        >
+        <p>
+          The entire code for FreeTTRPG is publicly saved and available. To download out project please follow the instructions from the download page. 
+        </p>
+        <a href="download.html" target="_blank">
+          <button type="button">Download</button>
+        </a>
       </section>
 
       <section id="section7">
         <h1>Our Game Assets</h1>
-        <h1>Our charackters</h1>
+        <h2>Our charackters</h2>
         <div class="cards">
           <a href="charackters/gigachad.html" class="card">
             <img src="assets/gigachad.png" alt="Gigachad" />
@@ -114,7 +117,7 @@
             <p>Out test tiefling bard at starting level</p>
           </a>
         </div>
-        <h1>Our textures</h1>
+        <h2>Our textures</h2>
         <div class="cards">
           <a href="index.html" class="card">
             <img src="assets/water.png" alt="Water Texture" />
@@ -140,6 +143,10 @@
         </div>
       </section>
     </article>
+    <footer>
+      <br />
+      <br />
+    </footer>
 
     <script>
       function toggleMenu() {
diff --git a/style.css b/style.css
index 661c8ea..710b327 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 /* Reset and global styles */
-* {
+body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -9,12 +9,7 @@
 
 /* Body styles */
 body {
-  background-color: #f5f5f5;
-  background-image: url("assets/background.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
+  background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -33,11 +28,11 @@ header {
 }
 
 .header-content {
+  max-width: 1200px;
+  margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
 }
 
 .project-name {
@@ -79,8 +74,8 @@ header a:hover {
 
 /* Article styles */
 article {
-  margin-top: 100px;
-  padding: 20px;
+  margin-top: 140px;
+  padding: 30px; 
   width: 90%;
   max-width: 800px;
   background: rgba(255, 255, 255, 0.9);
@@ -89,15 +84,22 @@ article {
   text-align: center;
 }
 
+h1, p {
+  margin-bottom: 20px;
+}
+
 h1 {
   color: #333;
-  margin-bottom: 20px;
+  font-size: 1.8em; 
+}
+
+h2{
+  margin-bottom: -1em;
 }
 
 p {
   color: #666;
   line-height: 1.6;
-  margin-bottom: 20px;
 }
 
 img {
@@ -107,8 +109,8 @@ img {
 }
 
 button {
-  padding: 10px 20px;
-  margin: 2em;
+  padding: 12px 24px;
+  margin: 0;
   border: none;
   background-color: #333;
   color: white;
@@ -121,24 +123,10 @@ button:hover {
   background-color: #555;
 }
 
-/* Additional CSS for command-line style */
-.code-box {
-  background-color: #f0f0f0;
-  font-family: "Courier New", Courier, monospace;
-  padding: 10px;
-  border-left: 4px solid #555;
-  margin-left: 20px;
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-}
-
 /* Cards section styles */
 section .cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted minmax size */
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin-top: 50px;
 }
@@ -166,11 +154,11 @@ section .card:hover {
 }
 
 section .card img {
-  height: 64px; /* Set fixed height */
-  width: 64px; /* Set fixed width */
+  height: 64px;
+  width: 64px;
   object-fit: cover;
   border-radius: 5px;
-  margin: 0 auto 10px; /* Center image and add bottom margin */
+  margin: 0 auto 10px;
 }
 
 section .card h3 {
@@ -192,7 +180,7 @@ section .card p {
     flex-direction: column;
     background-color: rgba(0, 0, 0, 0.7);
     position: absolute;
-    top: 100%; /* Adjusted position */
+    top: 100%;
     left: 0;
     width: 100%;
     z-index: 999;
@@ -201,9 +189,9 @@ section .card p {
   .menu.active {
     display: flex;
   }
-  
+
   header {
-    padding: 5px;
+    padding: 8px; /* Adjusted padding */
     height: auto;
   }
 
@@ -229,17 +217,17 @@ section .card p {
   }
 
   article {
-    margin-top: 190px;
-    padding-top: 20px;
+    margin-top: 180px; /* Adjusted margin-top */
+    padding: 20px; /* Adjusted padding */
   }
 
   section .card {
-    padding: 10px;
+    padding: 12px; /* Adjusted padding */
   }
 
   section .card img {
-    height: 64px; 
-    width: 64px; 
-    border-radius: 10px; 
+    height: 60px; /* Adjusted height */
+    width: 60px; /* Adjusted width */
+    border-radius: 8px; /* Adjusted border-radius */
   }
 }
