wip header
This commit is contained in:
parent
b8e8c0edfa
commit
bd9f8a6da8
4 changed files with 108 additions and 7 deletions
|
|
@ -1,3 +1,76 @@
|
||||||
|
:root {
|
||||||
|
--lavender: #cdb4db;
|
||||||
|
--light-pink: #ffc8dd;
|
||||||
|
--pink: #ffafcc;
|
||||||
|
--light-blue: #bde0fe;
|
||||||
|
--blue: #a2d2ff;
|
||||||
|
--darker-pink: #ff75a7;
|
||||||
|
--darkerer-pink: #ff4287;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: crimson;
|
background-image: url(assets/images/tiledbgpink.webp);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
height: 100lvh;
|
||||||
|
width: 100lvw;
|
||||||
|
overflow: auto;
|
||||||
|
font-family: "DotGothic16", sans-serif;
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar */
|
||||||
|
navbar {
|
||||||
|
font-family: "VT323", monospace;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100svw;
|
||||||
|
height: 3.5rem;
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
|
||||||
|
navbar-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: #ffffff #808080 #808080 #ffffff;
|
||||||
|
background: #c0c0c0;
|
||||||
|
|
||||||
|
&:has(input:checked) {
|
||||||
|
background: #ff75a7;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #808080 #ffffff #ffffff #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: #808080 #ffffff #ffffff #808080;
|
||||||
|
padding: 5px 7px 3px 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #0004;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif" />
|
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif">
|
||||||
<title>Agahnim</title>
|
<title>Agahnim</title>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DotGothic16&family=VT323&display=swap">
|
||||||
<link rel="stylesheet" href="/static/style.css" />
|
<link rel="stylesheet" href="/static/style.css" />
|
||||||
<script src="/static/vendor/htmx.min.js"></script>
|
<script src="/static/vendor/htmx.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<header>
|
<navbar>
|
||||||
<nav>
|
<navbar-content>
|
||||||
<a href="/">Accueil</a>
|
<label>
|
||||||
</nav>
|
<input type="radio" name="nav" id="nav-home" checked>
|
||||||
</header>
|
<a href="/">Accueil</a>
|
||||||
|
</label>
|
||||||
|
</navbar-content>
|
||||||
|
</navbar>
|
||||||
|
|
@ -1 +1,25 @@
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
<h1>Bonjour</h1>
|
<h1>Bonjour</h1>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue