The header is now finalized

header-folder.js

@@ -11,8 +11,11 @@ class Header extends HTMLElement {
       </style>
       <header>
         <div class="header-content">
-           <div class="project-name"><a href="../index.html">FOSS alternatives</a></div>
+           <div><a href="../index.html" class="project-name">FOSS alternatives</a></div>
             <button class="burger-menu" style="display: block;" onclick="toggleMenu()">☰</button>
+        </div>
+    </header>
+    <div class="div-menu">
       <ul class="menu">
         <li><a href="../games/index.html">Games</a></li>
         <li><a href="../general_purpose/index.html">General Purpose</a></li>
@@ -22,7 +25,6 @@ class Header extends HTMLElement {
         <li><a href="../social_platforms/index.html">Social Platforms</a></li>
       </ul>
     </div>
-    </header>
     `;
   }
 }

header.js

@@ -11,8 +11,11 @@ class Header extends HTMLElement {
       </style>
       <header>
         <div class="header-content">
-           <div class="project-name"><a href="index.html">FOSS alternatives</a></div>
+           <div><a href="index.html" class="project-name">FOSS alternatives</a></div>
             <button class="burger-menu" onclick="toggleMenu()">☰</button>
+        </div>
+    </header>
+    <div class="div-menu">
       <ul class="menu">
         <li><a href="games/index.html">Games</a></li>
         <li><a href="general_purpose/index.html">General Purpose</a></li>
@@ -21,8 +24,6 @@ class Header extends HTMLElement {
         <li><a href="operating_systems/index.html">Operating Systems</a></li>
         <li><a href="social_platforms/index.html">Social Platforms</a></li>
       </ul>
-        </div>
-    </header>
     `;
   }
 }

list.css

@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   font-family: "Roboto", Arial, sans-serif;
-  transition: all 2s ease; /* Smooth transitions */
+  transition: 0.5s; /* Smooth transitions */
 }
 
 /* Body styles */
@@ -18,16 +18,29 @@ body {
   padding: 0;
 }
 
-/* Header styles */
+.div-menu{
-header {
+  z-index: 0;
   background-color: #2c3e50;
-  padding: 10px 0; /* Smaller padding */
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  padding: 0; /* Further reduce the padding */
+  height: auto;
+}
+
+/* Header styles */
+header {
+  background-color: #2c3e50;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  padding: 0; /* Further reduce the padding */
+  height: auto;
+  z-index: 10; /* Higher z-index to ensure it is above other elements */
 }
 
 .header-content {
@@ -36,52 +49,79 @@ header {
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; /* Original padding */
+  z-index: 10;
+}
+
+.div-menu li {
+  margin: 0;
+  padding: 10px;
+  z-index: -100;
+}
+
+.div-menu a {
+  width: 100%;
+  padding: 12px 0;
+  text-align: center; /* Center align the menu items */
+  color: #ffffff;
+  text-decoration: none;
+  padding: 8px; /* Smaller padding */
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+  justify-content: center;
+  z-index: -100;
+}
+
+.div-menu a:hover {
+  background-color: #34495e;
 }
 
 .project-name {
+  text-decoration: none;
   color: #ffffff;
-  font-size: 1.5em; /* Smaller font size */
+  font-size: 1.5em; /* Updated font size */
   font-weight: bold;
+  z-index: 11; /* Higher z-index to ensure it is above the menu */
 }
 
 .burger-menu {
   background: none;
   border: none;
   color: #ffffff;
-  font-size: 1.5em; /* Smaller font size */
+  font-size: 1.5em; /* Updated font size */
   cursor: pointer;
-  display: none;
+  display: block;
+  padding: 0;
+  z-index: 12; /* Higher z-index to ensure it is above the menu */
 }
 
 .menu {
-  list-style: none;
   display: flex;
-  justify-content: space-around;
+  flex-direction: column;
-  align-items: center;
+  background-color: #2c3e50;
-  flex-grow: 1;
+  position: absolute;
-  margin: 0;
+  top: -40vh; 
+  left: 0;
+  width: 100%; /* Full width of the header */
+  z-index: 0; /* Lower z-index than header, header content, and project name */
+  padding: 0;
+  list-style: none;
+  justify-content: center; /* Center items vertically */
+  text-align: center; /* Center items horizontally */
+  animation: top 1s ease-in-out; /* Initial animation state */
 }
 
-header li {
+.menu.active {
-  margin: 10px; /* Smaller margin */
+  display: flex;
-}
+  top: 11vh; 
-
+  z-index: 0; /* Lower z-index than header, header content, and project name */
-header a {
-  color: #ffffff;
-  text-decoration: none;
-  padding: 8px; /* Smaller padding */
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
-}
-
-header a:hover {
-  background-color: #34495e;
 }
 
 /* Article styles */
 article {
-  margin-top: 6em; /* Adjusted top margin */
   margin-bottom: 50px;
   padding: 20px;
   width: 90%;
@@ -90,6 +130,8 @@ article {
   border-radius: 10px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   text-align: left;
+  margin-top: 140px; /* Increase margin-top for better readability */
+  padding-top: 20px;
 }
 
 h1 {
@@ -138,12 +180,14 @@ nav {
 }
 
 .folder-list {
+  justify-content: center;
   list-style-type: none;
   padding: 0;
 }
 
 .folder-list-item {
   margin-bottom: 10px;
+  justify-content: center;
 }
 
 .folder-link {
@@ -165,75 +209,6 @@ nav {
   transform: scale(0.98); /* Slight scale down on click */
 }
 
-/* Mobile Styles */
-@media (max-width: 4000px) {
-  .burger-menu {
-    display: block;
-    padding: 0;
-  }
-
-  .menu {
-    display: none;
-    flex-direction: column;
-    background-color: #2c3e50;
-    position: absolute;
-    top: 100%; 
-    left: 0;
-    width: 100%;
-    z-index: 999;
-    padding: 0;
-  }
-
-  .menu.active {
-    display: flex;
-    padding: 10px;
-  }
-  
-  header {
-    padding: 0; /* Further reduce the padding */
-    height: auto;
-  }
-
-  .header-content {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px 0 20px;
-  }
-
-  .project-name {
-    font-size: 1.5em;
-  }
-
-  header li {
-    margin: 0;
-    padding: 10px;
-  }
-
-  header a {
-    width: 100%;
-    padding: 12px 0;
-    text-align: center; /* Center align the menu items */
-  }
-
-  article {
-    margin-top: 140px; /* Increase margin-top for better readability */
-    padding-top: 20px;
-    margin-bottom: 20px; /* Adjust margin-bottom for consistency */
-  }
-}
-
-/* Additional styles for article */
-article ul {
-  list-style-type: none;
-  padding: 0;
-  width: 50%;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
 
 ul.fully-free {
   border: 2px solid #4CAF50;
@@ -294,3 +269,8 @@ ul.death {
   font-weight: bold;
   text-shadow: red;
 }
+
+article ul{
+  list-style: none;
+  margin: 1em;
+}

styles.css

@@ -18,6 +18,18 @@ body {
   padding: 0;
 }
 
+.div-menu{
+  z-index: 0;
+  background-color: #2c3e50;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  padding: 0; 
+  height: auto;
+}
+
 /* Header styles */
 header {
   background-color: #2c3e50;
@@ -44,12 +56,13 @@ header {
   z-index: 10;
 }
 
-header li {
+.div-menu li {
   margin: 0;
-  padding: 10px;
+  z-index: -100;
+  padding: 1em;
 }
 
-header a {
+.div-menu a {
   width: 100%;
   padding: 12px 0;
   text-align: center; /* Center align the menu items */
@@ -59,13 +72,15 @@ header a {
   border-radius: 5px;
   transition: background-color 0.3s ease;
   justify-content: center;
+  z-index: -100;
 }
 
-header a:hover {
+.div-menu a:hover {
   background-color: #34495e;
 }
 
 .project-name {
+  text-decoration: none;
   color: #ffffff;
   font-size: 1.5em; /* Updated font size */
   font-weight: bold;
@@ -101,7 +116,7 @@ header a:hover {
 
 .menu.active {
   display: flex;
-  top: 100%; 
+  top: 11vh; 
   z-index: 0; /* Lower z-index than header, header content, and project name */
 }