ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

responsive nav

This commit is contained in:
ktyl 2021-12-31 16:17:55 +00:00
parent 5b17282c9e
commit f5678270c5
6 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/inc_css/nav.css
View File

@ -1,4 +1,4 @@
.sidebar { .nav {
position: fixed; position: fixed;
width: max(11vmax, 200px); width: max(11vmax, 200px);
top: 0; top: 0;
@ -11,11 +11,7 @@
color: var(--foreground); color: var(--foreground);
} }
.sidebarContent { .nav-links {
position: relative;
}
.sidebar ul {
position: relative; position: relative;
padding-top: 2em; padding-top: 2em;
@ -25,22 +21,22 @@
width: 80%; width: 80%;
} }
.sidebar li { .nav .nav-links li {
display: block; display: block;
margin-bottom: 0.8em; margin-bottom: 0.8em;
transition: transform 0.3s; transition: transform 0.3s;
} }
.sidebar li a::before { .nav li a::before {
content: "/"; content: "/";
} }
.sidebar li:hover { .nav li:hover {
transform: translate(1vmax); transform: translate(1vmax);
} }
.sidebar li a { .nav li a {
display: block; display: block;
padding: 2px; padding: 2px;
background-color: var(--clear); background-color: var(--clear);
@ -48,9 +44,47 @@
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.sidebar li a:hover { .nav li a:hover {
color: var(--accent); color: var(--accent);
} }
@media only screen and (max-width: 600px) {
.nav {
position: fixed;
width: 100%;
padding: 0;
z-index: 1;
top: 0;
height: 2em;
}
.nav .title {
padding-top: .5em;
padding-left: .5em;
}
.nav .nav-links {
position: absolute;
top: 0;
right: 0;
padding: .5em .5em 0 0;
float: right;
text-align: right;
}
.nav .nav-links li {
display: inline-block;
}
.nav .nav-links li a::before {
content: "";
}
.nav .pageTitle {
display: none;
}
.nav .socials {
display: none;
}
}

6
src/inc_html/nav.html
View File

@ -1,6 +1,4 @@
<div class="sidebarContent"> <ul class="nav-links">
<ul>
<li><a href="about.html" class="fsText">about</a></li> <li><a href="about.html" class="fsText">about</a></li>
<li><a href="gallery.html" class="fsText">gallery</a></li> <li><a href="gallery.html" class="fsText">gallery</a></li>
</ul> </ul>
</div>

6
src/inc_html/navlinks.html
View File

@ -1,6 +0,0 @@
<div class="sidebarContent">
<ul>
<li><a href="about.html" class="fsText">about</a></li>
<li><a href="gallery.html" class="fsText">gallery</a></li>
</ul>
</div>

2
src/root/about.html
View File

@ -6,7 +6,7 @@
<body> <body>
<title>ktyl ~ about</title> <title>ktyl ~ about</title>
<div class="sidebar"> <div class="nav">
#include titlestart.html #include titlestart.html
/about /about
#include titleend.html #include titleend.html

2
src/root/gallery.html
View File

@ -6,7 +6,7 @@
<body> <body>
<title>ktyl ~ gallery</title> <title>ktyl ~ gallery</title>
<div class="sidebar"> <div class="nav">
#include titlestart.html #include titlestart.html
/gallery /gallery
#include titleend.html #include titleend.html

8
todo.md
View File

@ -1,11 +1,11 @@
* [-] responsive design * [-] responsive design
* [-] nav * [-] nav
* [x] rename to nav * [x] rename to nav
* [ ] should also be a top bar * [x] top bar
* [x] no socials
* [x] title left (no trail)
* [x] page links right (no prefix)
* [ ] text bigger * [ ] text bigger
* [ ] top bar
* [ ] no socials
* [ ] title left (no trail)
* [ ] landing page * [ ] landing page
* [ ] smaller * [ ] smaller
* [ ] central * [ ] central