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;
width: max(11vmax, 200px);
top: 0;
@ -11,11 +11,7 @@
color: var(--foreground);
}
.sidebarContent {
position: relative;
}
.sidebar ul {
.nav-links {
position: relative;
padding-top: 2em;
@ -25,22 +21,22 @@
width: 80%;
}
.sidebar li {
.nav .nav-links li {
display: block;
margin-bottom: 0.8em;
transition: transform 0.3s;
}
.sidebar li a::before {
.nav li a::before {
content: "/";
}
.sidebar li:hover {
.nav li:hover {
transform: translate(1vmax);
}
.sidebar li a {
.nav li a {
display: block;
padding: 2px;
background-color: var(--clear);
@ -48,9 +44,47 @@
transition: background-color 0.5s;
}
.sidebar li a:hover {
.nav li a:hover {
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;
}
}

10
src/inc_html/nav.html
View File

@ -1,6 +1,4 @@
<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>
<ul class="nav-links">
<li><a href="about.html" class="fsText">about</a></li>
<li><a href="gallery.html" class="fsText">gallery</a></li>
</ul>

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>
<title>ktyl ~ about</title>
<div class="sidebar">
<div class="nav">
#include titlestart.html
/about
#include titleend.html

2
src/root/gallery.html
View File

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

8
todo.md
View File

@ -1,11 +1,11 @@
* [-] responsive design
* [-] 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
* [ ] top bar
* [ ] no socials
* [ ] title left (no trail)
* [ ] landing page
* [ ] smaller
* [ ] central