Merge pull request #3 from Lukas-Batema/Lukas-Batema/Development

Update header image spacing across site

Author: MelonicOverlord

about.html

@@ -27,7 +27,7 @@
             </div>
         </div> 
 
-        <header class="head1"><h1></h1></header>
+        <header class="head1"><img alt="header image" src="about.png" /></header>
         <p class="about1"><h2>FetchCord is an application mainly aimed towards Linux users which grabs OS and Hardware information and displays it as a Discord Rich Presence. Although the application is aimed towards Linux users, it also runs on Microsoft Windows and MacOS with minimal changes. To run, it requires Python, PyPresence, NeoFetch and (in most cases, PIP). For Linux users who use Systemd, it is possible to intergrate FetchCord to start with your system, although this is still achieveable in most cases by just adding it to startup applications or making a startup script.</h2></p>
     </body>
 </html>

credits.html

@@ -27,7 +27,7 @@
             </div>
         </div>
 
-        <header class="head5"><h1></h1></header>
+        <header class="head5"><img alt="header image" src="credits.png" /></header>
             <p class="creators"><b>> Creators:</b></p> 
             <p class="creators1">BlivionlaG (Kévin Le Torc'h), MrPotatoBobx, HyperKVM (Annie)</p>
             &nbsp;

discord.html

@@ -27,4 +27,4 @@
             </div>
         </div> 
 
-        <header class="head6"><h1></h1></header>
+        <header class="head6"><img alt="header image" src="discord.png" /></header>

linux.html

@@ -27,6 +27,6 @@
             </div>
         </div> 
 
-        <header class="head4"><h1></h1></header>
+        <header class="head4"><img alt="header image" src="linux.png" /></header>
     </body>
 </html>

macos.html

@@ -27,6 +27,6 @@
             </div>
         </div> 
 
-        <header class="head3"><h1></h1></header>
+        <header class="head3"><img alt="header image" src="macos.png" /></header>
     </body>
 </html>

styles.css

@@ -29,22 +29,19 @@ h1 {
   background-origin: border-box;
   height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  /* margin-bottom: 20px; */
   display: grid;
   place-items: center;
-  /* padding: 50px; */
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
-  /* padding-top: 25px; */
 }
 
 .header--home {
   overflow: hidden;
 }
 
 .header--home img {
-  margin-left: 0%;
-  transform: translateX(0%);
+  margin-left: 0;
+  transform: translateX(0);
   width: 100%;
 }
 
@@ -144,85 +141,108 @@ h1 {
 }
 
 .head1 {
-  background-image: url("about.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
   display: grid;
   place-items: center;
-  padding: 50px;
+  overflow: hidden;
+}
+
+.head1 img {
+  margin-left: 0%;
+  transform: translateX(0%);
+  width: 100%;
 }
 
 .head2 {
-  background-image: url("windows.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
   display: grid;
   place-items: center;
-  padding: 50px;
+  overflow: hidden;
+}
+
+.head2 img {
+  width: 100%;
+  transform: translateX(0);
+  margin-left: 0;
 }
 
 .head3 {
-  background-image: url("macos.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
   display: grid;
   place-items: center;
-  padding: 50px;
+}
+
+.head3 img {
+  width: 100%;
+  margin-left: 0;
+  transform: translateX(0);
 }
 
 .head4 {
-  background-image: url("linux.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
+  overflow: hidden;
   display: grid;
   place-items: center;
-  padding: 50px;
+}
+
+.head4 img {
+  width: 100%;
+  margin-left: 0;
+  transform: translateX(0);
 }
 
 .head5 {
-  background-image: url("credits.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
+  overflow: hidden;
   display: grid;
   place-items: center;
-  padding: 50px;
+}
+
+.head5 img {
+  margin-left: 0;
+  transform: translateX(0);
+  width: 100%;
 }
 
 .head6 {
-  background-image: url("discord.png");
   font-family: Arial, Helvetica, sans-serif;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 200px;
+  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-  margin-bottom: 20px;
+  overflow: hidden;
   display: grid;
   place-items: center;
-  padding: 50px;
+}
+
+.head6 img {
+  width: 100%;
+  margin-left: 0;
+  transform: translateX(0);
 }

windows.html

@@ -27,7 +27,7 @@
             </div>
         </div> 
 
-        <header class="head2"><h1></h1></header>
+        <header class="head2"><img alt="header image" src="windows.png" /></header>
     </body>
 
 </html>