style: move to grid layout from flex
This allows to reposition items without hiding/showing classes
This commit is contained in:
parent
c1dfa1f065
commit
6874b14916
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue