send help

css/hamburger-dumb.css

@@ -0,0 +1,31 @@
+/* Add to existing CSS */
+.hamburger {
+    display: none; /* Hide by default */
+    cursor: pointer;
+    font-size: 30px; /* Adjust based on your design preferences */
+    color: #ffffff; /* Change color as needed */
+}
+
+
+/* Mobile-specific styles */
+
+@media only screen and (max-width: 388px) {
+    .hamburger {
+        display: block; 
+    }
+    
+	   .menu {
+        flex-direction: row;
+        width: 100%;
+    }
+
+    .nav {
+        display: block; 
+        text-align: center;
+		padding: 5px;
+    }
+
+    .nav-bar {
+        align-items: flex-start;
+    }
+}

css/nav.css

@@ -3,14 +3,16 @@
 	display:flex;
 	align-items:center;
 	justify-content: center;
-	height:40px;
+	height:80px;
 }
 .nav, .nav0 {
 	color: #ffffff;
 	text-decoration: none;
-	padding:15px;
+	padding: 10px 10px; /* Increase horizontal padding */
 	transition: all .5s ease;
 	position: relative;
+	flex: auto;
+	flex-wrap: wrap;
 }
 .nav:hover{
 	text-shadow:
@@ -25,64 +27,19 @@
 	left:0;
 	position: absolute;
 	background-color:#ffffff;
-	transform-origin: bottom;
+	transform-origin: center;
   transform: scaleX(0);
 	transition: transform 0.5s ease;
 }
 .nav:hover::before{
 	transform: scaleX(1);
 }
-.dot{
-	display:inline-block;
-	width:10px;
-	height:10px;
-	border-radius:10px;
-	background-color:#000;
-	transition: all 0.5s;
-	animation-name: blinking;
-	animation-duration: 4s;
-	animation-iteration-count: infinite;
-}
 .nav0:hover{
 	text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000;
 }
 .nav0:hover .dot{
 	box-shadow: 0px 1px #016A70, 1px 1px #016A70;
 }
-@keyframes blinking{
-	0%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	5%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	7%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	10%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	68%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	70%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	76%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	100%{
-		height:10px;
-		transform: translateY(0%);
-	}
-}
 .main {
 	color:#000;
 	display:flex;
@@ -120,70 +77,72 @@
 }
 
 
-/* Mobile compatibility */
+@media only screen and (max-width: 485px) {
-@media only screen and (max-width: 768px) {
-    .nav-bar {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 10px;
-    }
 
 	.nav, .nav0 {
-        padding: 10px;
+
-        font-size: 14px; /* Adjust font size for smaller screens */
+		padding: 10px 5px; /* Increase horizontal padding */
+
 	}
 
-    .nav-bar, .main, .container, .paragraph {
-        flex-direction: column;
-        align-items: center;
 }
 
-    .main {
+@media only screen and (max-width: 380px) {
-        font-size: 30px; /* Adjust main section font size */
+
+	.nav, .nav0 {
+
+		padding: 10px 5px; /* Increase horizontal padding */
+		margin: 0px;
 	}
 
-    .paragraph {
-        width: 85%; /* Adjust paragraph width */
-    }
 }
 
-/* Hamburger menu for smaller screens */
+/* Add to existing CSS */
-@media only screen and (max-width: 768px) {
+.hamburger {
-    .hamburger-menu {
+    display: none; /* Hide by default */
-        display: block;
     cursor: pointer;
+    font-size: 30px; /* Adjust based on your design preferences */
+    color: #ffffff; /* Change color as needed */
 }
 
-    .nav-menu {
+/* Mobile-specific styles */
-        display: none; /* Hide nav menu by default on mobile */
+
-        flex-direction: column;
+@media only screen and (max-width: 340px) {
-        align-items: center;
+    .hamburger {
+        display: flex;
+		padding-left: 10px;
     }
 
-    .hamburger-menu.active + .nav-menu {
+	.animate{
-        display: flex; /* Show menu when hamburger is active */
+	transform:skew(180deg);
-    }
+	transition: transform 0.5s ease;
+	
 }
 
+.unanimate{
+	transform:skew(180deg);
+	transition: transform 0.5s ease;
 	
-.logo {
-    height: 40px; /* Adjust the height to fit your navbar's size */
-    width: auto; /* Keeps the logo's aspect ratio intact */
 }
     
-.logo-link {
+	   .menu {
-    display: inline-flex;
+        flex-direction: row;
-    align-items: center;
+        width: 100%;
-    position: relative; /* Needed for the positioning of the pseudo-element */
+    }
-    margin-right: 20px; /* Adjust if you need more space around the divider */
+
+    .nav {
+        display: flex; 
+        text-align: left;
+		padding: 10px;
+		width: fit-content;
+    }
+
+    .nav-bar {
+        align-items: flex-start;
+    }
+
+	.nav::before{
+		transform-origin: left;
 	}
 
-.logo-link::after {
-    content: "";
-    position: absolute;
-    right: -10px; /* Adjust this value based on your specific spacing needs */
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: white; /* Set the color of the divider */
 }

index.html

@@ -10,6 +10,69 @@
   <link rel="stylesheet" href="css/flexboxes.css">
   <link rel="stylesheet" href="css/button.css">
   <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
+
+  <script>
+    function toggleMenu() {
+        var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
+        links.forEach(function(link) {
+            if (link.style.display === "flex") {
+                link.style.display = "none";
+            } else {
+                link.style.display = "flex";
+            }
+        });
+    
+        // Toggle the 'active' class for the hamburger icon
+        var hamburger = document.getElementById("hamburger");
+// Check if 'animate' class is currently applied
+if (hamburger.classList.contains("animate")) {
+    hamburger.classList.remove("animate"); // Remove 'animate' class
+    hamburger.classList.add("unanimate"); // Add 'unanimate' class
+} else {
+    hamburger.classList.remove("unanimate"); // Remove 'unanimate' class
+    hamburger.classList.add("animate"); // Add 'animate' class
+}
+
+
+    }
+    
+        
+        function closeMenu() {
+            var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
+            if (window.innerWidth <= 340) { // Close the menus only on small screens
+                linksArray.forEach(function(links) {
+                    links.style.display = "none";
+                });
+            }
+        }
+        
+        // Function to check the screen width and adjust menu visibility
+        function checkScreenWidth() {
+            var linksArray = document.querySelectorAll(".links");
+            linksArray.forEach(function(links) {
+                if (window.innerWidth > 340) {
+                    links.style.display = ""; // Remove any inline display style if screen is wider than 440px
+                } else {
+                    links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
+                }
+            });
+        }
+        
+        // Add event listener for window resize
+        window.addEventListener('resize', checkScreenWidth);
+        
+        // Call checkScreenWidth on initial load
+        window.onload = function() {
+            checkScreenWidth();
+            // Attach closeMenu function to each nav item for small screens
+            var navItems = document.querySelectorAll('.nav');
+            navItems.forEach(function(item) {
+                item.addEventListener('click', closeMenu);
+            });
+        };
+        </script>
+    
+  
   <style>
     .content-div {
       opacity: 0;
@@ -34,14 +97,22 @@
 </head>
 <body class="silly-font">
   <div class="header">
+    
     <div class="nav-bar" style="font-family: 'Quicksand'">  
-    <div id="links">
+      
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
+        <div class="menu"> <!-- Hide this initially and show on hamburger click -->
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
+          <div id="hamburger" class="hamburger" onclick="toggleMenu()">☰</div> <!-- Hamburger Icon -->
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Adastra7')">Home</a>
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Community')">Community</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Services')">Services</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('About')">About</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Contact')">Contact</a>
         </div>
     </div>
+
+
+
+
 <div class="inner-header flex">
 <h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
 </div>
@@ -71,6 +142,15 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
 <!-- nothing here lmeo just clean landing page -->
 <p></p>
 </div>
+<div id="Community" class="content content-div">
+  <div class="wrapper">
+    <ul class="flex-box cards nocent">
+      <li>
+        <p>Put like Community tab here</p>
+      </li>
+    </ul>
+  </div>
+</div>
 <div id="Services" class="content content-div">
   <div class="wrapper">
     <ul class="flex-box cards nocent">
@@ -128,12 +208,12 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
     <ul class="flex-box cards nocent">
       <li>
         <h2>crt</h2>
-        <p>🚀 The powerhouse behind our physical servers! crt not only keeps the gears turning by maintaining most of our essential services but does so with unmatched dedication and skill.</p>
+        <p>🔧 The backbone of our physical servers! crt ensures our services run smoothly and efficiently, maintaining the lifeblood of our operations.</p>
-        <p>🤖 Although not frequently seen on Discord, crt has embraced the future by moving to matrix, pioneering our journey into new realms of communication!</p>
+        <p>📡 Though less active on Discord, crt has shifted towards Matrix, expanding our horizons in communication!</p>
       </li>      
       <li>
         <h2>Yessiest</h2>
-        <p>👨‍💻 Code wizard alert! Yessiest is the genius programming the bots and managing Jabber Registration for Adastra7, transforming our digital landscape one line of code at a time.</p>
+        <p>👨‍💻 Code wizard alert! Yessiest is the genius programming various things like bots and the jabber registration for Adastra7, transforming our digital landscape one line of code at a time.</p>
         <p>🎉 A cornerstone of our Discord community, Yessiest's vibrant presence and contributions keep our spirits high and our server lively!</p>
       </li>
       <li>
@@ -149,20 +229,30 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
     <h2>Updates and News:</h2>
     <ul class="flex-box cards nocent">
       <li>
-        <h2>Planned fiber upgrade:</h2>
+        <h2>Exciting Fiber Upgrade on the Horizon!</h2>
-        <p>In the first week of May 2024 Adastra7 will be getting the long awaited fiber upgrade. Please expect some downtime while fiber is being installed and core components are replace or reconfigured for 10Gbps networking</p>
+        <p>🚀 Big news! In the first week of May 2024, Adastra7 is set to receive a much-anticipated fiber upgrade. We're leveling up to lightning-fast 10Gbps networking! Please bear with us during this time as there may be some downtime while crt installs the fibers and updates core components to bring you blazing-fast speeds.</p>
         <h3>- crt</h3>
       </li>
       <li>
-        <h2>Rework of Adastra7 website:</h2>
+        <h2>Website Overhaul in Progress!</h2>
-        <p>An ongoing project is the rework of this website. I have decided that continuing to drag along our Bootstrap 3 based DOS themed website isnt viable therefore I am working on an overhaul of the entire thing.</p>
+        <p>🎨 We're revamping! The Adastra7 website is getting a complete makeover. Moving away from our nostalgic Bootstrap 3 DOS theme, we're crafting a new experience. Stay tuned !</p>
         <h3>- crt</h3>
       </li>
+      
     </ul>
   </div>
 </div>
 <div id="Contact" class="content content-div">
-  <p style="font-family: 'Quicksand'">Contact content here</p>
+  <div class="wrapper">
+    <ul class="flex-box cards nocent">
+      <li>
+        <p>Join our <a href="https://discord.adastra7.net">Discord server</a> to get started ranting about your local ISP's and Cogent</p>
+        <p>For quick responses and emergencies text crt on Matrix: <a href="https://matrix.to/#/@m1ka:qwu.ch">@m1ka:qwu.ch</a></p>
+        <p>Abuse E-Mail: <a href="mailto:abuse@adastra7.net">abuse@adastra7.net</a></p>
+      </li>            
+          <!-- ich brauche mental dringend hilfe-->
+    </ul>
+  </div>
 </div>
 <!-- Content ends -->
 <!--<div class="footer"><p style="font-family: 'Quicksand'">Adastra7 | 2017-2014</p></div>-->

js/hamburger-dump.js

@@ -0,0 +1,51 @@
+<script>
+function toggleMenu() {
+    var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
+    links.forEach(function(link) {
+        if (link.style.display === "block") {
+            link.style.display = "none";
+        } else {
+            link.style.display = "block";
+        }
+    });
+
+    // Toggle the 'active' class for the hamburger icon
+    var hamburger = document.getElementById("hamburger");
+    hamburger.classList.toggle("active");
+}
+
+    
+    function closeMenu() {
+        var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
+        if (window.innerWidth <= 388) { // Close the menus only on small screens
+            linksArray.forEach(function(links) {
+                links.style.display = "none";
+            });
+        }
+    }
+    
+    // Function to check the screen width and adjust menu visibility
+    function checkScreenWidth() {
+        var linksArray = document.querySelectorAll(".links");
+        linksArray.forEach(function(links) {
+            if (window.innerWidth > 388) {
+                links.style.display = ""; // Remove any inline display style if screen is wider than 440px
+            } else {
+                links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
+            }
+        });
+    }
+    
+    // Add event listener for window resize
+    window.addEventListener('resize', checkScreenWidth);
+    
+    // Call checkScreenWidth on initial load
+    window.onload = function() {
+        checkScreenWidth();
+        // Attach closeMenu function to each nav item for small screens
+        var navItems = document.querySelectorAll('.nav');
+        navItems.forEach(function(item) {
+            item.addEventListener('click', closeMenu);
+        });
+    };
+    </script>