From 087ae2ea1fa6b21a28f49ceb008b5eaf388c3e8a Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Sat, 29 Jun 2024 23:28:48 +0200 Subject: [PATCH] The header is now finalized --- header-folder.js | 20 +++--- header.js | 19 ++--- list.css | 176 +++++++++++++++++++++-------------------------- styles.css | 25 +++++-- 4 files changed, 119 insertions(+), 121 deletions(-) diff --git a/header-folder.js b/header-folder.js index 1713b6a..741afe8 100644 --- a/header-folder.js +++ b/header-folder.js @@ -11,18 +11,20 @@ class Header extends HTMLElement {
-
FOSS alternatives
+
FOSS alternatives
-
+
+ +
`; } } diff --git a/header.js b/header.js index 6ea9af1..ad9fdc9 100644 --- a/header.js +++ b/header.js @@ -11,18 +11,19 @@ class Header extends HTMLElement {
-
FOSS alternatives
+
FOSS alternatives
-
+
+ `; } } diff --git a/list.css b/list.css index 29a97b2..2f6ca3b 100644 --- a/list.css +++ b/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 */ -header { +.div-menu{ + 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; - align-items: center; - flex-grow: 1; - margin: 0; + flex-direction: column; + background-color: #2c3e50; + position: absolute; + 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 { - margin: 10px; /* Smaller margin */ -} - -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; +.menu.active { + display: flex; + top: 11vh; + z-index: 0; /* Lower z-index than header, header content, and project name */ } /* 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; +} \ No newline at end of file diff --git a/styles.css b/styles.css index cccd1e0..ed048fd 100644 --- a/styles.css +++ b/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 */ }