fix layout for zone pages

This commit is contained in:
Hannaeko 2023-02-22 16:58:55 +01:00
parent 3c5de4cab6
commit 9fec0cc643
4 changed files with 41 additions and 22 deletions

View file

@ -5,22 +5,22 @@ body {
margin: 0; margin: 0;
} }
:root {
--color-primary: #712da0;
--color-hightlight-1: #ffbac6;
--color-hightlight-2: #f560f5;
--color-contrast: white;
}
main { main {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
padding: 1rem; padding: 1rem;
} }
input { h1 {
padding: .35rem .35rem; margin-top: 0;
font-size: 1rem; margin-bottom: 1rem;
}
:root {
--color-primary: #712da0;
--color-hightlight-1: #ffbac6;
--color-hightlight-2: #f560f5;
--color-contrast: white;
} }
p.feedback { p.feedback {
@ -33,6 +33,11 @@ p.feedback.error {
color: #710000; color: #710000;
} }
input {
padding: .35rem .35rem;
font-size: 1rem;
}
input[type="submit"] { input[type="submit"] {
margin-top: 2rem; margin-top: 2rem;
background: var(--color-primary); background: var(--color-primary);
@ -60,30 +65,30 @@ form {
flex-direction: column; flex-direction: column;
} }
nav { nav.main {
background: var(--color-primary); background: var(--color-primary);
max-width: 10vw; min-width: 25ch;
display: flex; display: flex;
flex: 1; flex: 0;
padding: 1rem; padding: 1rem;
border-right: 5px solid var(--color-hightlight-1); border-right: 5px solid var(--color-hightlight-1);
} }
nav a { nav.main a {
color: var(--color-contrast); color: var(--color-contrast);
} }
nav ul { nav.main ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
nav ul li { nav.main ul li {
margin-top: .35rem; margin-top: .35rem;
} }
nav ul ul { nav.main ul ul {
margin-left: 1rem; margin-left: 1rem;
} }

14
public/styles/zone.css Normal file
View file

@ -0,0 +1,14 @@
nav.secondary ul {
display: flex;
margin: 0;
list-style: none;
padding: 0;
}
nav.secondary li {
margin-right: 1rem;
}
main {
flex-direction: column;
}

View file

@ -2,7 +2,7 @@
{% import "macros.html" as macros %} {% import "macros.html" as macros %}
{% block content %} {% block content %}
<nav aria-label="Principal"> <nav aria-label="Principal" class="main">
<ul> <ul>
<li><a href="/profil">Mon profile</a></li> <li><a href="/profil">Mon profile</a></li>
<li> <li>

View file

@ -2,10 +2,13 @@
{% import "macros.html" as macros %} {% import "macros.html" as macros %}
{% block title %}{{ current_zone }} ⋅ Records ⋅ {% endblock title %} {% block title %}{{ current_zone }} ⋅ Records ⋅ {% endblock title %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="/styles/zone.css">
{% endblock styles %}
{% block main %} {% block main %}
<h1>Gestion de la zone {{ current_zone }}</h1> <h1>Gestion de la zone {{ current_zone }}</h1>
<nav aria-label="Secondaire"> <nav class="secondary" aria-label="Secondaire">
<ul> <ul>
<li> <li>
{{ macros::nav_link( {{ macros::nav_link(
@ -28,9 +31,6 @@
<zone-content> <zone-content>
</zone-content> </zone-content>
</section> </section>
<aside>
<h2>Aide</h2>
</aside>
{% endblock main %} {% endblock main %}
{% block scripts %} {% block scripts %}