aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorcurly <curlybryce@protonmail.com>2023-01-11 11:22:29 -0700
committercurly <curlybryce@protonmail.com>2023-01-11 11:22:29 -0700
commit4bd45d754821448b37c206544cbbfddf04360988 (patch)
treeb8be4c2dc2883decef7a1a8c36262e947ade417c /src
parent5d4988161300f368f4252628f6e2588ce75ef101 (diff)
downloadinfernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.gz
infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.bz2
infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.zip
mobile nav complete
Diffstat (limited to 'src')
-rw-r--r--src/assets/css/main.css39
-rw-r--r--src/assets/js/main.js44
-rw-r--r--src/people/cards/glass/glass.html15
-rw-r--r--src/people/cards/glass/glass.pngbin1310925 -> 39401 bytes
-rw-r--r--src/templates/body-bottom.html21
-rw-r--r--src/templates/inner-head.html3
-rw-r--r--src/templates/nav.html24
7 files changed, 117 insertions, 29 deletions
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b08b004..a224932 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -22,6 +22,14 @@ html, body {
--text-primary: #ddd;
--text-secondary: #999;
}
+
+ :link {
+ color: #99ccff;
+ }
+
+ :visited {
+ color: #c78cff;
+ }
}
@media screen and (max-width: 500px) {
@@ -36,6 +44,10 @@ html, body {
.body_decoration {
display: none;
}
+ .nav-button > a > .fa {
+ margin: auto 5px auto 5px;
+ width: 20px;
+ }
}
@media screen and (min-width: 501px) and (max-width: 1099px) {
.header-image > :nth-child(1) {
@@ -43,6 +55,8 @@ html, body {
}
.header-image > :nth-child(2) {
display: inline-block;
+ margin-bottom: 3px;
+ width: 32px;
}
.nav-button > a > :nth-child(2) {
display: none;
@@ -80,6 +94,9 @@ html, body {
.floatwrapper > div {
max-width: 50px;
}
+ .nav-button > a > .fa {
+ margin: auto;
+ }
}
@media screen and (min-width: 1100px) {
.header-image > :nth-child(1) {
@@ -108,6 +125,10 @@ html, body {
padding-left: 5px;
padding-right: 5px;
}
+ .nav-button > a > .fa {
+ margin: auto 5px auto 5px;
+ width: 20px;
+ }
}
@@ -173,6 +194,7 @@ main {
display: grid;
height: 100vh;
overflow: auto;
+ z-index: 2;
}
.header-image {
@@ -184,8 +206,13 @@ main {
}
.mobile-nav-button {
- display: block;
- margin: auto;
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ width: 100%;
+ height: 100%;
+ text-decoration: none;
+ color: var(--text-primary);
}
.mobile-nav {
@@ -199,7 +226,7 @@ main {
}
.nav-button {
display: block;
- height: 35px;
+ height: 30px;
}
.nav-button > a {
display: flex;
@@ -210,7 +237,6 @@ main {
.nav-button > a > span {
margin-top: auto;
margin-bottom: auto;
- padding-left: 5px;
}
.nav-button:hover, .header-image:hover {
cursor: pointer;
@@ -255,9 +281,4 @@ main {
}
.card-head {
font-weight: bold;
-}
-
-
-.fa-pleroma {
- color: #fba457;
} \ No newline at end of file
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
new file mode 100644
index 0000000..462c456
--- /dev/null
+++ b/src/assets/js/main.js
@@ -0,0 +1,44 @@
+function mobile_nav_toggle() {
+ var nav = document.getElementById("nav");
+
+ if (nav.style.display == "unset") {
+ mobile_nav_off();
+ } else {
+ mobile_nav_on();
+ }
+}
+
+function mobile_nav_on() {
+ var nav = document.getElementById("nav");
+ nav.style.display = "unset";
+
+ // Subract mobile nav height from navbar
+ var mobile_nav = document.getElementsByClassName("mobile-nav")[0];
+ nav.children[0].style.height = "calc(100vh - " + mobile_nav.clientHeight + "px)";
+ mobile_nav.style.backgroundColor = "rgb(var(--secondary))";
+
+ // Hide content
+ var content = document.getElementById("content");
+ content.style.display = "none";
+
+ // Align nav and mobile nav by setting
+ // the <body> flow to column
+ var body = document.getElementsByTagName("body")[0];
+ body.style.flexFlow = "column nowrap"
+}
+
+// Undo all changes in mobile_nav_on()
+function mobile_nav_off() {
+ var nav = document.getElementById("nav");
+ nav.style.display = "";
+
+ var mobile_nav = document.getElementsByClassName("mobile-nav")[0];
+ nav.children[0].style.height = "";
+ mobile_nav.style.backgroundColor = "";
+
+ var content = document.getElementById("content");
+ content.style.display = "";
+
+ var body = document.getElementsByTagName("body")[0];
+ body.style.flexFlow = ""
+} \ No newline at end of file
diff --git a/src/people/cards/glass/glass.html b/src/people/cards/glass/glass.html
index abf1116..b60c32e 100644
--- a/src/people/cards/glass/glass.html
+++ b/src/people/cards/glass/glass.html
@@ -1,10 +1,23 @@
+<style>
+ .fa-pleroma {
+ color: #fba457;
+ }
+ .fa-gitea {
+ color: #609926;
+ }
+ .fa-github {
+ color: var(--text-primary);
+ }
+</style>
<section id="glass">
<span class="card">
<img class="card-image" src="/people/cards/glass/glass.png">
<div>
<span class="card-head">
glass:!refglass:!/ref
- <a href="https://ak.infernal.garden/glass"><i class="fa fa-pleroma" aria-hidden="true"></i></a>
+ <a href="https://ak.infernal.garden/glass" aria-label="akkoma"><i class="fa fa-pleroma" aria-hidden="true"></i></a>
+ <a href="https://git.infernal.garden/glass" aria-label="gitea"><i class="fa fa-gitea" aria-hidden="true"></i></a>
+ <a href="https://github.com/curlybryce/" aria-label="github"><i class="fa fa-github" aria-hidden="true"></i></a>
</span>
<hr>
<div class="card-body">
diff --git a/src/people/cards/glass/glass.png b/src/people/cards/glass/glass.png
index efc1c7d..a926ecc 100644
--- a/src/people/cards/glass/glass.png
+++ b/src/people/cards/glass/glass.png
Binary files differ
diff --git a/src/templates/body-bottom.html b/src/templates/body-bottom.html
index 6a5da72..cb197ad 100644
--- a/src/templates/body-bottom.html
+++ b/src/templates/body-bottom.html
@@ -1,12 +1,21 @@
</div>
<nav class="mobile-nav">
- <div class="mobile-nav-button"></div>
- <div class="mobile-nav-button"></div>
- <div class="mobile-nav-button">
+ <noscript><span>Javascript is required for the mobile navbar</span></noscript>
+ <a href="/about/" class="mobile-nav-button" aria-label="About" title="About">
+ <i class="fa fa-newspaper-o" aria-hidden="true"></i>
+ </a>
+ <a href="/projects/" class="mobile-nav-button" aria-label="Projects" title="Projects">
+ <i class="fa fa-code" aria-hidden="true"></i>
+ </a>
+ <a href="#" onclick="mobile_nav_toggle()" class="mobile-nav-button" aria-label="Toggle Menu" title="Toggle Menu">
<img class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
- </div>
- <div class="mobile-nav-button"></div>
- <div class="mobile-nav-button"></div>
+ </a>
+ <a href="/services/" class="mobile-nav-button" aria-label="Services" title="Services">
+ <i class="fa fa-cogs" aria-hidden="true"></i>
+ </a>
+ <a href="/people/" class="mobile-nav-button" aria-label="People" title="People">
+ <i class="fa fa-address-book" aria-hidden="true"></i>
+ </a>
</nav>
</main>
<div class="body_decoration noaa"></div>
diff --git a/src/templates/inner-head.html b/src/templates/inner-head.html
index 88f5a1c..0928eeb 100644
--- a/src/templates/inner-head.html
+++ b/src/templates/inner-head.html
@@ -3,4 +3,5 @@
<link rel="icon" type="image/png" href="/assets/image/icon.png">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/background.css">
-<link rel="stylesheet" href="/assets/fork-awesome/css/fork-awesome.min.css"> \ No newline at end of file
+<link rel="stylesheet" href="/assets/fork-awesome/css/fork-awesome.min.css">
+<script src="/assets/js/main.js"></script> \ No newline at end of file
diff --git a/src/templates/nav.html b/src/templates/nav.html
index 15286e2..35b00a6 100644
--- a/src/templates/nav.html
+++ b/src/templates/nav.html
@@ -1,39 +1,39 @@
-<nav class="nav">
+<nav class="nav" id="nav">
<div class="floatwrapper">
<div>
- <a href="/" class="header-image">
+ <a href="/" class="header-image" aria-label="Home" title="Home">
<img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata between &quot;infernal&quot; and &quot;garden&quot;" src="/assets/image/header.png">
<img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
</a>
<div class="nav-button">
- <a href="/about/">
- <img loading="auto" class="noaa icon" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+ <a href="/about/" aria-label="About" title="About">
+ <i class="fa fa-newspaper-o" aria-hidden="true"></i>
<span>About</span>
</a>
</div>
<div class="nav-button">
- <a href="/projects/">
- <img loading="auto" class="noaa icon" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+ <a href="/projects/" aria-label="Projects" title="Projects">
+ <i class="fa fa-code" aria-hidden="true"></i>
<span>Projects</span>
</a>
</div>
<div class="nav-button">
- <a href="/services/">
- <img loading="auto" class="noaa icon" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+ <a href="/services/" aria-label="Services" title="Services">
+ <i class="fa fa-cogs" aria-hidden="true"></i>
<span>Services</span>
</a>
</div>
<div class="nav-button">
- <a href="/people/">
- <img loading="auto" class="noaa icon" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+ <a href="/people/" aria-label="People" title="People">
+ <i class="fa fa-address-book" aria-hidden="true"></i>
<span>People</span>
</a>
</div>
</div>
<div>
<div class="nav-button">
- <a href="/contact/">
- <img loading="auto" class="noaa icon" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+ <a href="/contact/" aria-label="Contact" title="Contact">
+ <i class="fa fa-envelope" aria-hidden="true"></i>
<span>Contact</span>
</a>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-27 13:13:22 +0000