Kyren223/github-website
1
0
Fork 0
mirror of https://github.com/Kyren223/website.git synced 2025-12-28 08:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed navigation for mobile

Browse Source
This commit is contained in:
Kyren223
2025-01-03 14:49:24 +02:00
parent 44e3d98af3
commit 3daab8ec5f
3 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Nav.astro
View File

@@ -8,9 +8,23 @@ const { path } = Astro.props;
const directories = ["skills", "projects", "blogs"];
---
<nav>
<span id="nav-path">/home/kyren/{path}</span>
<span id="nav-links">
<nav
class="grid sm:flex
justify-between
border-[0.25vh] sm:border-[0.125vw]
border-[var(--alt)]
border-solid
mb-[7vw] sm:mb-[1.5625vw]
p-[3vw] sm:p-[1vw]"
>
<span class="mr-[2.5vh] text-[5vw] sm:mr-[2.5vw] sm:text-[1.375vw]"
>/home/kyren/{path}</span
>
<span
id="nav-links"
class="mb-0 mx-[0.2vw] text-[5vw]
mx-[0.2vw] sm:text-[1.375vw]"
>
<a href="/">home</a>
{
directories.map((dir) => (
@@ -23,26 +37,10 @@ const directories = ["skills", "projects", "blogs"];
</nav>
<style>
nav {
display: flex;
justify-content: space-between;
border: 0.125vw var(--alt);
border-style: solid;
margin-bottom: 1.5625vw;
padding: 0.9375vw;
}
#nav-links a {
margin-bottom: 0;
margin-right: 0.1875vw;
margin-left: 0.1875vw;
font-size: 1.375vw;
color: var(--primary);
}
#nav-links a:hover {
color: var(--accent);
}
#nav-path {
margin-right: 2.5vw;
font-size: 1.375vw;
}
</style>

21
src/layouts/Terminal.astro
View File

@@ -14,9 +14,28 @@ const { path: title } = Astro.props;
<html lang="en">
<Head title=`/home/kyren/${title}` description="My personal website" />
<body>
<main>
<main class="
w-[95vw] h-[97svh] p-[2.2svh] text-[1.125vh]
sm:w-[68.75vw] sm:h-[35vw] sm:p-[2.2vw] sm:text-[1.125vw] sm:border-[0.2vw] sm:border-solid
">
<Nav path={title} />
<slot />
</main>
</body>
</html>
<style>
main {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--background);
font-weight: 300;
overflow: hidden;
/* grid-template-columns: minmax(200px, 1fr); */
/* max-width: 75%; */
/* max-height: 80%; */
}
</style>

20
src/styles/terminal.css
View File

@@ -27,26 +27,6 @@ body {
zoom: 1;
}
main {
display: block;
position: absolute;
top: 50%;
left: 50%;
grid-template-columns: minmax(200px, 1fr);
transform: translate(-50%, -50%);
border: 0.2vw;
border-style: solid;
background: var(--background);
padding: 2.2vw;
width: 68.75vw;
height: 35vw;
max-width: 75%;
max-height: 80%;
overflow: hidden;
font-size: 1.125vw;
font-weight: 300;
}
h1,
h2,
h3 {