From e2e7e90e01b7aaee2db75702ba27741dbfb82e9f Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Tue, 25 Jun 2024 10:14:04 +0200 Subject: [PATCH 1/4] added opening animation --- burger.js | 20 +++++++- header.js | 16 +++--- styles.css | 144 ++++++++++++++++++++++++++++++----------------------- 3 files changed, 107 insertions(+), 73 deletions(-) diff --git a/burger.js b/burger.js index 12ff1ed..24c42cd 100644 --- a/burger.js +++ b/burger.js @@ -3,21 +3,37 @@ function toggleMenu() { const menu = document.querySelector(".menu"); + + // Toggle the 'active' class to show/hide the menu menu.classList.toggle("active"); - // Add event listener to close menu when clicking anywhere on the document + // Apply animations based on the menu's visibility if (menu.classList.contains("active")) { + menu.style.animation = "slideIn 0.3s forwards"; document.addEventListener("click", closeMenu); } else { + menu.style.animation = "slideOut 0.3s forwards"; + // Remove the event listener to close the menu document.removeEventListener("click", closeMenu); + // Reset animation after it's completed + menu.addEventListener("animationend", () => { + menu.style.animation = ""; + }, { once: true }); } } function closeMenu(event) { const menu = document.querySelector(".menu"); + // Check if the click is outside the menu and not on the burger icon if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.classList.remove("active"); + menu.style.animation = "slideOut 0.3s forwards"; + // Remove the event listener to close the menu document.removeEventListener("click", closeMenu); + // Reset animation after it's completed + menu.addEventListener("animationend", () => { + menu.classList.remove("active"); + menu.style.animation = ""; + }, { once: true }); } } diff --git a/header.js b/header.js index a6b8183..6ea9af1 100644 --- a/header.js +++ b/header.js @@ -13,14 +13,14 @@ class Header extends HTMLElement {
FOSS alternatives
- +
`; diff --git a/styles.css b/styles.css index 8e1d26d..1b70feb 100644 --- a/styles.css +++ b/styles.css @@ -4,7 +4,7 @@ margin: 0; padding: 0; font-family: "Roboto", Arial, sans-serif; - transition: all 2s ease; /* Smooth transitions */ + transition: 3s; /* Smooth transitions */ } /* Body styles */ @@ -21,13 +21,14 @@ body { /* Header styles */ header { background-color: #2c3e50; - padding: 15px 0; /* Adjusted 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; + z-index: 9999; } .header-content { @@ -36,13 +37,29 @@ header { align-items: center; max-width: 1200px; margin: 0 auto; + flex-direction: row; + justify-content: space-between; + align-items: center; padding: 0 20px; /* Original padding */ + z-index: -1; +} + +header li { + margin: 0; + padding: 10px; +} + +header a { + width: 100%; + padding: 12px 0; + text-align: center; /* Center align the menu items */ } .project-name { color: #ffffff; font-size: 1.5em; /* Updated font size */ font-weight: bold; + z-index: 9999; } .burger-menu { @@ -51,16 +68,52 @@ header { color: #ffffff; font-size: 1.5em; /* Updated font size */ cursor: pointer; - display: none; + display: block; + padding: 0; + z-index: 9999; } .menu { + display: none; + flex-direction: column; + background-color: #2c3e50; + position: absolute; + top: 100%; + left: 0; + width: 100%; /* Full width of the header */ + z-index: 999; + padding: 0; list-style: none; + justify-content: center; /* Center items vertically */ + text-align: center; /* Center items horizontally */ + animation: slideOut 0.3s ease forwards; /* Initial animation state */ +} + +.menu.active { display: flex; - justify-content: space-around; - align-items: center; - flex-grow: 1; - margin: 0; + animation: slideIn 0.3s ease forwards; /* Show animation */ +} + +.menu.closed { + animation: slideOut 0.3s ease forwards; /* Hide animation */ +} + +@keyframes slideIn { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } +} + +@keyframes slideOut { + from { + transform: translateY(0); + } + to { + transform: translateY(-100%); + } } header li { @@ -73,6 +126,7 @@ header a { padding: 8px; /* Smaller padding */ border-radius: 5px; transition: background-color 0.3s ease; + justify-content: center; } header a:hover { @@ -81,7 +135,6 @@ header a:hover { /* Article styles */ article { - margin-top: 8em; margin-bottom: 50px; padding: 20px; width: 90%; @@ -90,6 +143,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 +193,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,60 +222,21 @@ nav { transform: scale(0.98); /* Slight scale down on click */ } -/* Mobile Styles */ -@media (max-width: 4000px) { - .burger-menu { - display: block; - padding: 0; +/* Animation styles */ +@keyframes slideIn { + from { + transform: translateY(-100%); } - - .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; /* Original padding */ - } - - .project-name { - font-size: 1.5em; /* Updated font size */ - } - - 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 */ + to { + transform: translateY(0); + } +} + +@keyframes slideOut { + from { + transform: translateY(0); + } + to { + transform: translateY(-100%); } } From c46d66daef69e5226a7754f221d354c1171e8b52 Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Tue, 25 Jun 2024 10:25:47 +0200 Subject: [PATCH 2/4] ahhhhhhh --- burger.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/burger.js b/burger.js index 24c42cd..839317f 100644 --- a/burger.js +++ b/burger.js @@ -3,21 +3,21 @@ function toggleMenu() { const menu = document.querySelector(".menu"); - + // Toggle the 'active' class to show/hide the menu menu.classList.toggle("active"); - + // Apply animations based on the menu's visibility if (menu.classList.contains("active")) { - menu.style.animation = "slideIn 0.3s forwards"; - document.addEventListener("click", closeMenu); + menu.style.animation = "slideIn 0.3s forwards"; // Menu is shown here + document.addEventListener("click", closeMenu); // Event listener added to close menu } else { - menu.style.animation = "slideOut 0.3s forwards"; - // Remove the event listener to close the menu + menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here + // Remove the event listener to close the menu (this line removes the event listener, not closes the menu) document.removeEventListener("click", closeMenu); // Reset animation after it's completed menu.addEventListener("animationend", () => { - menu.style.animation = ""; + menu.style.animation = ""; // Animation reset after hiding menu }, { once: true }); } } @@ -26,13 +26,13 @@ function closeMenu(event) { const menu = document.querySelector(".menu"); // Check if the click is outside the menu and not on the burger icon if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.style.animation = "slideOut 0.3s forwards"; - // Remove the event listener to close the menu + menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here + // Remove the event listener to close the menu (again, this line removes the event listener) document.removeEventListener("click", closeMenu); - // Reset animation after it's completed - menu.addEventListener("animationend", () => { - menu.classList.remove("active"); - menu.style.animation = ""; + // After animation completes, remove 'active' class and reset animation + menu.addEventListener("animationend", function() { + menu.classList.remove("active"); // 'active' class removed after animation completes + menu.style.animation = ""; // Animation reset after hiding menu }, { once: true }); } } From 8209e64f10d652c854adeedab64a4ebbe0aed01e Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Tue, 25 Jun 2024 15:34:23 +0200 Subject: [PATCH 3/4] Fixed the animation --- .vscode/launch.json | 14 +++++ burger.js | 24 ++------ styles.css | 133 ++++++++++++++------------------------------ 3 files changed, 61 insertions(+), 110 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..bed90cf --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Open index.html", + "file": "c:\\Users\\lucab\\Desktop\\FOSS\\foss_alternatives\\index.html" + } + ] +} \ No newline at end of file diff --git a/burger.js b/burger.js index 839317f..12ff1ed 100644 --- a/burger.js +++ b/burger.js @@ -3,37 +3,21 @@ function toggleMenu() { const menu = document.querySelector(".menu"); - - // Toggle the 'active' class to show/hide the menu menu.classList.toggle("active"); - - // Apply animations based on the menu's visibility + + // Add event listener to close menu when clicking anywhere on the document if (menu.classList.contains("active")) { - menu.style.animation = "slideIn 0.3s forwards"; // Menu is shown here - document.addEventListener("click", closeMenu); // Event listener added to close menu + document.addEventListener("click", closeMenu); } else { - menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here - // Remove the event listener to close the menu (this line removes the event listener, not closes the menu) document.removeEventListener("click", closeMenu); - // Reset animation after it's completed - menu.addEventListener("animationend", () => { - menu.style.animation = ""; // Animation reset after hiding menu - }, { once: true }); } } function closeMenu(event) { const menu = document.querySelector(".menu"); - // Check if the click is outside the menu and not on the burger icon if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here - // Remove the event listener to close the menu (again, this line removes the event listener) + menu.classList.remove("active"); document.removeEventListener("click", closeMenu); - // After animation completes, remove 'active' class and reset animation - menu.addEventListener("animationend", function() { - menu.classList.remove("active"); // 'active' class removed after animation completes - menu.style.animation = ""; // Animation reset after hiding menu - }, { once: true }); } } diff --git a/styles.css b/styles.css index 1b70feb..cccd1e0 100644 --- a/styles.css +++ b/styles.css @@ -4,7 +4,7 @@ margin: 0; padding: 0; font-family: "Roboto", Arial, sans-serif; - transition: 3s; /* Smooth transitions */ + transition: 0.5s; /* Smooth transitions */ } /* Body styles */ @@ -28,7 +28,7 @@ header { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 0; /* Further reduce the padding */ height: auto; - z-index: 9999; + z-index: 10; /* Higher z-index to ensure it is above other elements */ } .header-content { @@ -41,7 +41,7 @@ header { justify-content: space-between; align-items: center; padding: 0 20px; /* Original padding */ - z-index: -1; + z-index: 10; } header li { @@ -53,74 +53,6 @@ header a { width: 100%; padding: 12px 0; text-align: center; /* Center align the menu items */ -} - -.project-name { - color: #ffffff; - font-size: 1.5em; /* Updated font size */ - font-weight: bold; - z-index: 9999; -} - -.burger-menu { - background: none; - border: none; - color: #ffffff; - font-size: 1.5em; /* Updated font size */ - cursor: pointer; - display: block; - padding: 0; - z-index: 9999; -} - -.menu { - display: none; - flex-direction: column; - background-color: #2c3e50; - position: absolute; - top: 100%; - left: 0; - width: 100%; /* Full width of the header */ - z-index: 999; - padding: 0; - list-style: none; - justify-content: center; /* Center items vertically */ - text-align: center; /* Center items horizontally */ - animation: slideOut 0.3s ease forwards; /* Initial animation state */ -} - -.menu.active { - display: flex; - animation: slideIn 0.3s ease forwards; /* Show animation */ -} - -.menu.closed { - animation: slideOut 0.3s ease forwards; /* Hide animation */ -} - -@keyframes slideIn { - from { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} - -@keyframes slideOut { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } -} - -header li { - margin: 10px; /* Smaller margin */ -} - -header a { color: #ffffff; text-decoration: none; padding: 8px; /* Smaller padding */ @@ -133,6 +65,46 @@ header a:hover { background-color: #34495e; } +.project-name { + color: #ffffff; + 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; /* Updated font size */ + cursor: pointer; + display: block; + padding: 0; + z-index: 12; /* Higher z-index to ensure it is above the menu */ +} + +.menu { + display: flex; + 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 */ +} + +.menu.active { + display: flex; + top: 100%; + z-index: 0; /* Lower z-index than header, header content, and project name */ +} + /* Article styles */ article { margin-bottom: 50px; @@ -221,22 +193,3 @@ nav { .folder-link:active { transform: scale(0.98); /* Slight scale down on click */ } - -/* Animation styles */ -@keyframes slideIn { - from { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} - -@keyframes slideOut { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } -} From 087ae2ea1fa6b21a28f49ceb008b5eaf388c3e8a Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Sat, 29 Jun 2024 23:28:48 +0200 Subject: [PATCH 4/4] 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
+ -
+
+ +
`; } } 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
+ -
+
+ `; } } 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 */ }