feat: unify header bars and navigation

This commit is contained in:
Louis Heredero 2025-05-12 15:46:52 +02:00
parent 7061f8d64c
commit 958a55ff17
Signed by: HEL
GPG Key ID: 8D83DE470F8544E7
7 changed files with 51 additions and 25 deletions

View File

@ -10,7 +10,8 @@
<script src="/static/js/conversion.js"></script>
</head>
<body>
<header>
<header id="header">
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
<h1>Media Conversion</h1>
</header>
<main>

View File

@ -10,8 +10,8 @@
<script src="/static/js/index.js"></script>
</head>
<body>
<header>
<img src="/static/images/icon3.svg">
<header id="header">
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
<h1>Melies</h1>
</header>
<main>

View File

@ -14,6 +14,10 @@
<img src="/static/images/improve.svg">
<img class="clicked" src="/static/images/improve_clicked.svg">
</button>
<header id="header">
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
<h1>Metadata Editor</h1>
</header>
<header id="toolbar">
<a href="/metadata/">Back</a>
<button id="check-integrity">Check integrity</button>

View File

@ -10,7 +10,8 @@
<script src="/static/js/metadata.js"></script>
</head>
<body>
<header>
<header id="header">
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
<h1>Metadata Editor</h1>
</header>
<main>

View File

@ -1,3 +1,13 @@
@keyframes moon-pulse {
from {
filter: drop-shadow(0px 0px 0px #e7d7a8);
}
to {
filter: drop-shadow(0px 0px 12px white);
}
}
* {
margin: 0;
box-sizing: border-box;
@ -29,19 +39,17 @@ header {
gap: 0.8em;
color: white;
a, button {
padding: 0.4em 0.8em;
border: none;
color: black;
background-color: #e4e4e4;
font-size: inherit;
font-family: inherit;
text-decoration: none;
border-radius: 0.2em;
cursor: pointer;
&#header {
align-items: center;
&:hover {
background-color: #dbdbdb;
img.logo {
width: 4em;
height: 4em;
object-fit: contain;
&:hover {
animation: moon-pulse 2s alternate infinite linear;
}
}
}
}

View File

@ -4,6 +4,27 @@ main {
gap: 1.2em;
}
header#toolbar {
padding: 0.8em;
background-color: #4b4b4b;
a, button {
padding: 0.4em 0.8em;
border: none;
color: black;
background-color: #e4e4e4;
font-size: inherit;
font-family: inherit;
text-decoration: none;
border-radius: 0.2em;
cursor: pointer;
&:hover {
background-color: #dbdbdb;
}
}
}
#toggle-notifs {
margin-left: auto;
}

View File

@ -1,12 +1,3 @@
header {
align-items: center;
img {
width: 4em;
height: 4em;
object-fit: contain;
}
}
#pages {
display: grid;
max-width: calc(max(50%, 20em));