Stupid-Cat
/
a.stupid.cat
mirror of https://github.com/AriTheStupidCat/a.stupid.cat.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added navbar

This commit is contained in:
Ari 2026-06-14 23:01:35 +01:00
parent 097bae8151
commit 04a0f7d7e0
5 changed files with 91 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
css/index.css
View File

@ -284,8 +284,64 @@ body::before {
border-color: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb));
} }
/* Nav bar */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
background-color: var(--base);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: var(--subtext-0);
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: var(--text);
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.hamburger {
position: fixed;
top: 1rem;
left: 1rem;
font-size: 30px;
cursor: pointer;
z-index: 1000;
}
.sidenav a.active {
color: var(--lavender);
}
/* ========================================== /* ==========================================
2. /coffee 2. /coffee
============================================= */ ============================================= */

7
dev-info/index.html
View File

@ -79,6 +79,13 @@
</head> </head>
<body> <body>
<span class="hamburger" onclick="openNav()">&#9776;</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="/">Index</a>
<a href="/dev-info/" class="active">Dev Info</a>
<a href="/hardware-info/">Hardware Info</a>
</div>
<main class="intro"> <main class="intro">
<header class="hub-header"> <header class="hub-header">
<img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" <img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"

7
hardware-info/index.html
View File

@ -79,6 +79,13 @@
</head> </head>
<body> <body>
<span class="hamburger" onclick="openNav()">&#9776;</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="/">Index</a>
<a href="/dev-info/">Dev Info</a>
<a href="/hardware-info/" class="active">Hardware Info</a>
</div>
<main class="intro"> <main class="intro">
<header class="hub-header"> <header class="hub-header">
<img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" <img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"

16
index.html
View File

@ -79,7 +79,17 @@
</head> </head>
<body> <body>
<span class="hamburger" onclick="openNav()">&#9776;</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="/" class="active">Index</a>
<a href="/dev-info/">Dev Info</a>
<a href="/hardware-info/">Hardware Info</a>
</div>
<main class="intro"> <main class="intro">
<header class="hub-header"> <header class="hub-header">
<img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" <img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"
fetchpriority="high"> fetchpriority="high">
@ -116,9 +126,9 @@
<img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy"> <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
</aside> </aside>
</body> </body>
<script src="js/index.js"></script> <script src="/js/index.js"></script>
<script src="js/flavors.js"></script> <script src="/js/flavors.js"></script>
<script src="js/cat.js"></script> <script src="/js/cat.js"></script>
<script src="/js/heatmap.js"></script> <script src="/js/heatmap.js"></script>
<script>ContribHeatmap.render("#contrib", { theme: "trans" });</script> <script>ContribHeatmap.render("#contrib", { theme: "trans" });</script>

8
js/index.js
View File

@ -23,3 +23,11 @@ function loadArt() {
}) })
.catch(function () {}); .catch(function () {});
} }
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}