astolfo/astolfo.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make navbar a sidebar

Browse source
This commit is contained in:
Nico 2025-09-03 00:49:59 +10:00
parent 78c7e9e73c
commit f2e910f14a
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 58 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
_includes/base.html
View file

@ -10,20 +10,23 @@
<link rel="icon" type="image/x-icon" href="/img/favicon.ico"> <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head> </head>
<body> <body>
<nav>
<a href="/">home</a>
<a href="/blog">blog</a>
<a href="/store">store</a>
<a href="https://git.astolfo.org">git</a>
</nav>
<header> <header>
<h1 id="wave-text"> <h1 id="wave-text">
<span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span> <span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span>
</h1> </h1>
</header> </header>
<div style="padding: 2em;">{{ content }}</div> <div id="main-page">
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/store">store</a></li>
<li><a href="https://git.astolfo.org">git</a></li>
</ul>
</nav>
<div style="margin: 2em;">{{ content }}</div>
</div>
<footer class="horizontal-flex"> <footer class="horizontal-flex">
<marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee> <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>

53
bundle.css
View file

@ -52,8 +52,8 @@ header {
border-radius: var(--rounding); border-radius: var(--rounding);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
width: 60em; width: auto;
height: 30em; height: 10em;
margin: auto; margin: auto;
margin-top: 2em; margin-top: 2em;
animation: spinin 1s; animation: spinin 1s;
@ -70,8 +70,8 @@ header h1 {
border-radius: var(--rounding); border-radius: var(--rounding);
background-color: var(--accent2); background-color: var(--accent2);
position: relative; position: absolute;
top: 3em; left: 0px;
margin: auto; margin: auto;
font-size: 8em; font-size: 8em;
height: fit-content; height: fit-content;
@ -133,23 +133,54 @@ header a:hover {
* nav/sidebar * nav/sidebar
*/ */
nav { #main-page {
list-style-type: none;
justify-content: space-evenly;
display: flex; display: flex;
flex-direction: reverse-row;
} }
nav a { nav {
margin-top: 2em;
width: 7em;
ul {
margin: 0;
padding: 0;
}
li {
color: var(--text) !important; color: var(--text) !important;
background-color: var(--background);
border-radius: var(--rounding);
list-style-type: none;
margin: 0;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
width: 6em;
} }
nav a:hover { a {
color: var(--accent2); color: black;
text-decoration: none;
}
li:hover {
transform: scale(125%);
filter: hue-rotate(60deg);
border: white 2px solid;
background-image: url("/img/astolfos/header.gif");
background-position: 100% 100%;
background-size: 100% 100%;
}
a:hover {
background-color: inherit; background-color: inherit;
transform: none; transform: none;
scale: 100%;
rotate: 0deg; rotate: 0deg;
} }
}
/* /*
* footer * footer