style: move to grid layout from flex

This allows to reposition items without hiding/showing classes
This commit is contained in:
Chris Josten 2024-10-12 20:37:26 +02:00
parent c1dfa1f065
commit 6874b14916
2 changed files with 95 additions and 62 deletions

View file

@ -1,32 +1,3 @@
@media (max-width: 850px) {
body {
flex-wrap: wrap;
}
body > main {
box-sizing: border-box;
min-width: 100%;
}
body > section.header-navigation, body > footer {
width: 100%;
flex-grow: 1 !important;
}
.hide-small {
display: none;
}
.hide-big {
display: block !important;
}
}
.hide-big {
display: none;
}
:root {
font-family: "sans-serif";
--colour-bg: #f0f0f0;
@ -62,48 +33,54 @@ body {
background-color: #f0f0f0;
background-color: var(--colour-bg);
margin: 0;
display: flex;
display: grid;
grid-template-columns: 2em 200px max-content min-content;
grid-column-gap: 2em;
grid-template-rows: 2em min-content min-content 1fr;
grid-template-areas:
". . main . "
". header main sidebar"
". menu main sidebar"
". footer main sidebar";
justify-content: center;
min-height: 100vh;
color: #000000;
color: var(--colour-fg);
}
body > section.header-navigation {
flex: 0 0 200px;
padding: 2em;
}
@media (pointer: coarse) {
body > section.header-navigation li {
padding: 0.25em 0;
}
body > nav {
grid-area: menu;
}
body > footer {
flex: 0 0 200px;
padding: 2em;
border: none;
grid-area: footer;
margin-top: 0;
}
body > section.header-navigation > header {
body > header {
grid-area: header;
text-align: center;
margin-bottom: 0;
}
body > section.header-navigation > header > img {
body > header > img {
width: 100%;
max-width: 160px;
}
body > section.main-sidebar {
grid-area: sidebar;
}
body > main {
flex: 1 1;
grid-area: main;
padding: 2em;
/* width: 600px; */
border-left: #7f0602 dotted 1px;
border-right: #7f0602 dotted 1px;
border-left: var(--colour-fg-highlight) dotted 1px;
border-right: var(--colour-fg-highlight) dotted 1px;
max-width: 600px;
max-width: calc(600px);
background-color: #ddd;
background-color: var(--colour-bg-main);
}
@ -274,11 +251,65 @@ a {
text-decoration: underline dotted;
}
a:hover {
a:hover, a:focus {
color: var(--colour-fg);
text-decoration: underline solid;
}
@media (max-width: calc(800px + 8em)) {
body {
grid-template-columns: 100%;
grid-column-gap: 2em;
grid-template-rows: repeat(4, min-content);
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
body > .main-sidebar {
display: none;
}
body > main {
box-sizing: border-box;
min-width: 100%;
border: none;
border-top: #7f0602 dotted 1px;
border-bottom: #7f0602 dotted 1px;
border-top: var(--colour-fg-highlight) dotted 1px;
border-bottom: var(--colour-fg-highlight) dotted 1px;
}
body > nav, body > footer {
width: calc(100% - 4em);
padding: 2em;
}
}
@media (pointer: coarse) {
body > nav li a {
display: inline-block;
padding: 1em 2em;
width: calc(100% - 4em);
}
body > nav > ul {
width: 100%;
}
body > nav li:not(:last-child) {
border-bottom: 1px dotted #000000;
border-bottom: 1px dotted var(--colour-fg);
}
body > nav {
padding: 1em 0em;
width: 100%;
}
}
@media print {
body {
background-color: initial;

View file

@ -43,23 +43,25 @@ html(prefix="og: http://ogp.me/ns#")
li
a(href="#{link}") #{trWeb(text)}
section.header-navigation
header
img.logo(src="/static/img/logo.png", alt="The logo of the website: the letter C drawn in an unprofessional manner with wobbly eyes on put on top")
p #{trWeb("template.page.name")}
nav
ul
- menuItem("template.menu.home", "/");
- menuItem("template.menu.posts", "/posts/");
- menuItem("template.menu.projects", "/projects/");
- menuItem("template.menu.contact", "/contact");
header
img.logo(src="/static/img/logo.png", alt="The logo of the website: the letter C drawn in an unprofessional manner with wobbly eyes on put on top")
p #{trWeb("template.page.name")}
section.main-sidebar
block sidebar
footer.hide-small
block footer
include parts/footer
nav
ul
- menuItem("template.menu.home", "/");
- menuItem("template.menu.posts", "/posts/");
- menuItem("template.menu.projects", "/projects/");
- menuItem("template.menu.contact", "/contact");
main
block content
footer.hide-big
footer
block footer
include parts/footer