Skip to content

Commit

Permalink
Added drop menu on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrookJeynes
BrookJeynes committed Feb 19, 2024
1 parent d8594f5 commit 62bf1a6
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 34 deletions.
82 changes: 57 additions & 25 deletions css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,10 +578,6 @@ video {
}
}

.static {
position: static;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
Expand All @@ -597,21 +593,16 @@ video {
margin-bottom: 4rem;
}

.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.mb-10 {
margin-bottom: 2.5rem;
}
Expand All @@ -628,18 +619,14 @@ video {
margin-bottom: 1.25rem;
}

.mt-9 {
margin-top: 2.25rem;
}

.ml-2 {
margin-left: 0.5rem;
}

.ml-4 {
margin-left: 1rem;
}

.mt-9 {
margin-top: 2.25rem;
}

.mt-2 {
margin-top: 0.5rem;
}
Expand Down Expand Up @@ -708,6 +695,10 @@ video {
gap: 2rem;
}

.gap-5 {
gap: 1.25rem;
}

.rounded-lg {
border-radius: 0.5rem;
}
Expand Down Expand Up @@ -746,6 +737,16 @@ video {
padding-bottom: 0.5rem;
}

.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}

.\!pl-7 {
padding-left: 1.75rem !important;
}
Expand Down Expand Up @@ -820,7 +821,39 @@ video {
text-decoration-line: underline;
}

.active\:underline:active {
text-decoration-line: underline;
}

@media (min-width: 640px) {
.sm\:my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}

.sm\:my-9 {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}

.sm\:my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.sm\:my-14 {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}

.sm\:flex {
display: flex;
}

.sm\:hidden {
display: none;
}

.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
Expand All @@ -829,6 +862,10 @@ video {
grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sm\:flex-row {
flex-direction: row;
}

.sm\:gap-16 {
gap: 4rem;
}
Expand Down Expand Up @@ -867,11 +904,6 @@ video {
margin-bottom: 8rem;
}

.lg\:my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}

.lg\:block {
display: block;
}
Expand Down
26 changes: 23 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,41 @@
<script src="./language-highlight/highlight.min.js"></script>
<link rel="stylesheet" href="./language-highlight/styles/atom-one-dark.css">
<script>hljs.highlightAll();</script>

<!-- Hamburger menu icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script>
// Toggle between showing and hiding the navigation menu links.
function toggleMenu() {
const x = document.getElementById("links");
x.classList.toggle("hidden");
}
</script>
</head>

<body class="h-screen">
<div id="header" class="flex justify-between items-center py-2 px-4 md:px-10 border-b-zap-yellow border-b-solid border-b-2">
<span class="text-3xl font-bold hover:underline decoration-zap-yellow"><a href="index.html">⚡ZAP⚡</a></span>
<div class="flex gap-2 md:gap-5">
<div class="hidden sm:flex gap-5">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>
<button class="block sm:hidden" onclick="toggleMenu()">
<i class="fa fa-bars fa-lg"></i>
</button>
</div>

<div class="pt-5 mb-10 mx-auto px-5 w-full lg:max-w-[120ch]">
<div class="my-14" />
<div id="links" class="hidden sm:hidden py-2 flex flex-col gap-2 justify-center items-center border-b-zap-yellow border-b-solid border-b-2">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>

<div class="my-2 sm:my-14" />

<div class="pt-5 mb-10 mx-auto px-5 w-full lg:max-w-[120ch]">
<div id="title" class="flex justify-center items-center flex-col">
<h1 class="text-5xl font-bold mb-3">⚡ZAP⚡</h1>
<h2 class="text-2xl font-medium w-full md:w-[50%] text-center opacity-65">Unleash the Low-Level Power of
Expand Down
30 changes: 24 additions & 6 deletions learn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,40 @@
<script src="./language-highlight/highlight.min.js"></script>
<link rel="stylesheet" href="./language-highlight/styles/atom-one-dark.css">
<script>hljs.highlightAll();</script>

<!-- Hamburger menu icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script>
// Toggle between showing and hiding the navigation menu links.
function toggleMenu() {
const x = document.getElementById("links");
x.classList.toggle("hidden");
}
</script>
</head>

<body class="h-screen">
<div id="header"
class="flex justify-between items-center py-2 px-4 md:px-10 border-b-zap-yellow border-b-solid border-b-2">
<span class="text-3xl font-bold hover:underline decoration-zap-yellow"><a href="index.html">⚡ZAP⚡</a></span>
<div class="flex gap-2 md:gap-5">
<div class="hidden sm:flex gap-5">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank"
rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap"
target="_blank" rel="noopener noreferrer">GitHub</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>
<button class="block sm:hidden" onclick="toggleMenu()">
<i class="fa fa-bars fa-lg"></i>
</button>
</div>

<div id="links" class="hidden sm:hidden py-2 flex flex-col gap-2 justify-center items-center border-b-zap-yellow border-b-solid border-b-2">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>

<div class="my-14" />
<div class="my-2 sm:my-6" />

<div class="pt-5 mb-10 mx-auto px-5 w-full lg:max-w-[120ch]">
<section>
Expand Down

0 comments on commit 62bf1a6

Please sign in to comment.