crt
/
a7-css-shenanigans
1
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

2 Commits
08435de599 ... 5d7159f74c

Author SHA1 Message Date
crt 5d7159f74c Merge branch 'master' of https://adastra7.net/git/crt/a7-css-shenanigans
2 months ago
crt 2087503781 send help
2 months ago
4 changed files with 252 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 31
      css/hamburger-dumb.css
  2. 167
      css/nav.css
  3. 124
      index.html
  4. 51
      js/hamburger-dump.js

31
css/hamburger-dumb.css
View File

@ -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;
}
}

167
css/nav.css
View File

@ -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;
.nav, .nav0 {
color: #ffffff;
text-decoration: none;
padding: 10px 10px; /* Increase horizontal padding */
transition: all .5s ease;
position : relative;
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: 768px) {
.nav-bar {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
@media only screen and (max-width: 485px) {
.nav, .nav0 {
padding: 10px;
font-size: 14px; /* Adjust font size for smaller screens */
}
.nav, .nav0 {
.nav-bar, .main, .container, .paragraph {
flex-direction: column;
align-items: center;
}
padding: 10px 5px; /* Increase horizontal padding */
.main {
font-size: 30px; /* Adjust main section font size */
}
}
.paragraph {
width: 85%; /* Adjust paragraph width */
}
}
/* Hamburger menu for smaller screens */
@media only screen and (max-width: 768px) {
.hamburger-menu {
display: block;
cursor: pointer;
}
@media only screen and (max-width: 380px) {
.nav-menu {
display: none; /* Hide nav menu by default on mobile */
flex-direction: column;
align-items: center;
}
.nav, .nav0 {
.hamburger-menu.active + .nav-menu {
display: flex; /* Show menu when hamburger is active */
}
}
padding: 10px 5px; /* Increase horizontal padding */
margin: 0px;
}
}
.logo {
height: 40px; /* Adjust the height to fit your navbar's size */
width: auto; /* Keeps the logo's aspect ratio intact */
/* 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 */
}
.logo-link {
display: inline-flex;
align-items: center;
position: relative; /* Needed for the positioning of the pseudo-element */
margin-right: 20px; /* Adjust if you need more space around the divider */
/* Mobile-specific styles */
@media only screen and (max-width: 340px) {
.hamburger {
display: flex;
padding-left: 10px;
}
.animate{
transform:skew(180deg);
transition: transform 0.5s ease;
}
.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 */
.unanimate{
transform:skew(180deg);
transition: transform 0.5s ease;
}
.menu {
flex-direction: row;
width: 100%;
}
.nav {
display: flex;
text-align: left;
padding: 10px;
width: fit-content;
}
.nav-bar {
align-items: flex-start;
}
.nav::before{
transform-origin: left;
}
}

124
index.html
View File

@ -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;
@ -33,15 +96,23 @@
</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>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
<div class="header">
<div class="nav-bar" style="font-family: 'Quicksand'">
<div class="menu"> <!-- Hide this initially and show on hamburger click -->
<div id="hamburger" class="hamburger" onclick="toggleMenu()">☰</div> <!-- Hamburger Icon -->
<a href="javascript:void(0);" class="nav links" onclick="changeContent('Adastra7')">Home</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>
<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">
@ -130,12 +210,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>🤖 Although not frequently seen on Discord, crt has embraced the future by moving to matrix, pioneering our journey into new realms of communication!</p>
</li>
<p>🔧 The backbone of our physical servers! crt ensures our services run smoothly and efficiently, maintaining the lifeblood of our operations.</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>
@ -151,20 +231,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>
<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>
<h2>Exciting Fiber Upgrade on the Horizon!</h2>
<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>
<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>
<h2>Website Overhaul in Progress!</h2>
<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>-->

51
js/hamburger-dump.js
View File

@ -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>
Write Preview
Loading…
Cancel
Save