From 7c24c66dd727c8da6180464712ab1950a85c736c Mon Sep 17 00:00:00 2001 From: Gylan Date: Mon, 27 May 2024 00:56:26 +0200 Subject: [PATCH] update --- Readme.md | 5 + altercsscode.css | 0 assets/css/style.css | 210 +++++++++++++++++++++++++++++++------- assets/js/vanilla-tilt.js | 13 ++- index.html | 16 +-- script.js | 2 +- 6 files changed, 198 insertions(+), 48 deletions(-) create mode 100644 altercsscode.css diff --git a/Readme.md b/Readme.md index 77e8935..9134cfa 100644 --- a/Readme.md +++ b/Readme.md @@ -50,6 +50,11 @@ Updates / Fixes: 0.0.9 - Header Icon Enhancement Refined icon positioning for enhanced usability + New Logo + 0.0.95 - Spacing/Margin/Padding Bugs + -Fixed + + 0.0.95 Fixed Menu bar with Toggle Responsive + ## Misc: * Follow Gylan: [Twitter](https://www.gylansalih.com), [GitHub](https://github.com/gylansalih) diff --git a/altercsscode.css b/altercsscode.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/style.css b/assets/css/style.css index 4802b82..17f2960 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -43,10 +43,18 @@ a { text-transform: uppercase; text-decoration: none; z-index: 999; + padding-top: 0px; + padding-bottom: 0px; + padding-left: 0px; + padding-right: 0px; + margin-left: 0px; + margin-top: -15px; + margin-bottom: 0px; + margin-right: 65px; } -@media screen and (max-width: 701px) { +@media screen and (max-width: 771px) { .dark-mode-toggle { cursor: pointer; text-align: center; @@ -69,11 +77,41 @@ a { padding-left: 0px; padding-bottom: 0px; padding-right: 0px; - margin-top: 0px; - margin-right: 30px; + margin-top: -1px; + margin-right: 35px; + top: 27px; } } +@media screen and (max-width: 991px) { + .dark-mode-toggle { + cursor: pointer; + text-align: center; + position: fixed; + transform: translateY(-50%); + font-family: 'Arial', sans-serif; + font-size: 24px; + text-transform: uppercase; + text-decoration: none; + z-index: 999; + margin: 0 5px; + margin-top: 2px; + padding-top: 0px; + border-left-width: 0px; + border-left-style: solid; + border-right-width: 0px; + border-right-style: solid; + margin-right: 35px; + padding-left: 0px; + padding-bottom: 0px; + padding-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + top: 27px; + } +} + + .dark-mode-toggle i.fa-sun { color: rgb(0, 0, 0); @@ -85,17 +123,74 @@ a { padding: 20px 0; } -/* Header */ +/* Header Container Menu */ .top_navigation_container, .container { width: 100%; margin: 0 auto; display: flex; - height: 85px; align-items: center; justify-content: space-between; - position: relative; padding: 0 20px; + background: #ffffff; /* Light mode background */ + color: #000000; /* Light mode text color */ + position: fixed; + z-index: 999; + height: 56px; + padding: 0 16px; + left: 0px; + top: 0px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); +} + + + +/* Header Container Mobile */ +@media screen and (max-width: 771px) { + .container { + width: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + background: #ffffff; /* Light mode background */ + color: #000000; /* Light mode text color */ + position: fixed; + z-index: 999; + height: 56px; + padding: 0 16px; + left: 0px; + top: 0px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + } +} + +/* Header Container tablet */ +@media screen and (max-width: 991px) { + .container { + width: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + background: #ffffff; /* Light mode background */ + color: #000000; /* Light mode text color */ + position: fixed; + z-index: 999; + height: 56px; + padding: 0 16px; + left: 0px; + top: 0px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + } +} + +/* Header Container Mobile / darkmode funktion */ +.dark-mode .container { + background: #000000; /* Dark mode background */ + color: #ffffff; /* Dark mode text color */ } .logo { @@ -104,6 +199,25 @@ a { z-index: 999; } +@media screen and (max-width: 701px) { + .logo { + position: fixed; + padding-bottom: 0px; + z-index: 999; + margin-left: 12px; + } +} + +@media screen and (max-width: 991px) { + .logo { + position: fixed; + padding-bottom: 0px; + z-index: 999; + margin-left: 0px; + } +} + + .logo img { max-height: 18px; } @@ -190,14 +304,15 @@ a { /* 2 Themes Install Styles */ .menu { width: 100%; - height: 100vh; + height: 0vh; display: flex; + margin-top: -660px; } .menu-left { position: fixed; width: 100%; - height: 200vh; + height: 165vh; background: #ffffff; /* Light mode background */ color: #000000; /* Light mode text color */ display: flex; @@ -233,6 +348,13 @@ body.menu-open { cursor: pointer; font-size: 20px; color: #000000; + margin-left: 0px; + margin-right: 61px; + padding-right: 0px; + padding-left: 0px; + padding-top: 0px; + padding-bottom: 0px; + margin-top: 18px; } /* Dark mode state for menu-open */ @@ -283,7 +405,7 @@ body.menu-open { .menu-left { position: fixed; width: 100%; - height: 200vh; + height: 150vh; background: #ffffff; /* Light mode background */ color: #000000; /* Light mode text color */ display: flex; @@ -299,14 +421,24 @@ body.menu-open { } .menu-open { - position: fixed; - z-index: 999; - top: 0; - right: 30px; - padding: 2rem; - cursor: pointer; - font-size: 20px; - color: #000000; + position: fixed; + z-index: 999; + cursor: pointer; + font-size: 20px; + color: #000000; + margin: 0 5px; + padding-top: 0px; + border-left-width: 0px; + border-left-style: solid; + border-right-width: 0px; + border-right-style: solid; + padding-right: 0px; + padding-left: 0px; + padding-bottom: 0px; + margin-top: 16px; + margin-right: 49px; + margin-left: 0px; + margin-top: 17px; } } @@ -314,7 +446,7 @@ body.menu-open { .menu-left { position: fixed; width: 100%; - height: 200vh; + height: 180vh; background: #ffffff; /* Light mode background */ color: #000000; /* Light mode text color */ display: flex; @@ -331,23 +463,24 @@ body.menu-open { .menu-open { - position: fixed; - z-index: 999; - cursor: pointer; - font-size: 20px; - color: #000000; - margin: 0 5px; - padding-top: 0px; - border-left-width: 0px; - border-left-style: solid; - border-right-width: 0px; - border-right-style: solid; - padding-right: 0px; - padding-left: 0px; - padding-bottom: 0px; - margin-top: 32px; - margin-right: 34px; - margin-left: 0px; + position: fixed; + z-index: 999; + cursor: pointer; + font-size: 20px; + color: #000000; + margin: 0 5px; + padding-top: 0px; + border-left-width: 0px; + border-left-style: solid; + border-right-width: 0px; + border-right-style: solid; + padding-right: 0px; + padding-left: 0px; + padding-bottom: 0px; + margin-top: 16px; + margin-right: 34px; + margin-left: 0px; + right: 24px; } } @@ -461,6 +594,8 @@ body.menu-open { } } + +/* Hoover effect für den text */ /* Project Poster */ .projects_project_menu_poster { width: 100%; @@ -503,7 +638,6 @@ body.menu-open { grid-gap: 24px; justify-content: center; align-items: center; - margin-top: 20px; width: 100%; padding: 0 10px; /* Adjusted padding for better alignment */ height: auto; /* Changed height to auto */ @@ -555,8 +689,11 @@ body.menu-open { bottom: 0; opacity: 0; transition: opacity 0.3s ease; + pointer-events: none; /* Ensures hover events pass through */ } + + /* Pseudo-Element for Hover Effect */ .project-hover-block::before { content: ''; @@ -567,6 +704,7 @@ body.menu-open { height: 100%; opacity: 0; transition: opacity 0.13s ease; + pointer-events: none; /* Ensures hover events pass through */ } /* Hover effect for Project Hover Block */ diff --git a/assets/js/vanilla-tilt.js b/assets/js/vanilla-tilt.js index 8aeb0f4..ec82f25 100644 --- a/assets/js/vanilla-tilt.js +++ b/assets/js/vanilla-tilt.js @@ -505,14 +505,21 @@ return VanillaTilt; function destroyTilt() { - var tiltElements = document.querySelectorAll(`[data-tilt]`); + var tiltElements = document.querySelectorAll('[data-tilt]'); var mq = window.matchMedia("(max-width: 1025px)"); if (mq.matches) { for (var i = 0, len = tiltElements.length; i < len; i++) { - tiltElements[i].vanillaTilt.destroy(); + if (tiltElements[i].vanillaTilt) { + tiltElements[i].vanillaTilt.destroy(); + } } } else { console.log('pedal'); } } -destroyTilt(); \ No newline at end of file + +// Initial aufrufen +destroyTilt(); + +// Event-Listener für Fenstergrößenänderung +window.addEventListener('resize', destroyTilt); diff --git a/index.html b/index.html index b59512e..b4feb02 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,9 @@ Light Logo + + +
@@ -58,7 +61,12 @@
+
menu
+ + + +
@@ -72,7 +80,6 @@

PORTFOLIO

Ghost Red Poster -
View Project
@@ -81,7 +88,6 @@

PORTFOLIO

 Poster 1 -
View Project
@@ -90,7 +96,6 @@

PORTFOLIO

 Poster 2 -
View Project
@@ -98,7 +103,6 @@

PORTFOLIO

 Poster 3 -
View Project
@@ -106,7 +110,6 @@

PORTFOLIO

 Poster 4 -
View Project
@@ -114,7 +117,6 @@

PORTFOLIO

 Ghost Red Poster -
View Project
@@ -123,7 +125,6 @@

PORTFOLIO

 Poster 6 -
View Project
@@ -131,7 +132,6 @@

PORTFOLIO

 Poster 7 -
View Project
diff --git a/script.js b/script.js index 0898e67..b3b7695 100644 --- a/script.js +++ b/script.js @@ -61,4 +61,4 @@ document.querySelector(".menu-open").addEventListener("click", function() { tl.reversed(!tl.reversed()); // Toggle the reversed state of the timeline }); -// New JS Scripts here--- \ No newline at end of file +// New JS Scripts here---