fixes for small screens

This commit is contained in:
Niko Abeler 2024-05-11 19:46:47 +02:00
parent 390a58b404
commit 2bf2e409b6
2 changed files with 22 additions and 5 deletions

View File

@ -72,6 +72,20 @@
/* Styling of main page elements */ /* Styling of main page elements */
@media only screen and (max-width: 600px) {
main {
max-width: 100%;
padding-left: var(--s1);
padding-right: var(--s1);
}
}
@media screen and (min-width: 600px) {
main {
max-width: var(--cw);
}
}
* { * {
/* global properties*/ /* global properties*/
font-family: var(--font); font-family: var(--font);
@ -92,7 +106,6 @@ html {
main { main {
flex: 1; flex: 1;
max-width: var(--cw);
margin: 0 auto; margin: 0 auto;
} }
@ -139,6 +152,7 @@ pre {
background-color: var(--primary-l4); background-color: var(--primary-l4);
padding: var(--s0); padding: var(--s0);
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere;
} }
main img { main img {
@ -360,7 +374,6 @@ header {
header img { header img {
max-height: var(--s5); max-height: var(--s5);
margin-right: var(--s1);
margin-left: var(--s1); margin-left: var(--s1);
} }
@ -368,6 +381,7 @@ header>hgroup {
flex: 1; flex: 1;
min-width: calc(var(--cw) / 2); min-width: calc(var(--cw) / 2);
margin-right: var(--s5); margin-right: var(--s5);
margin-left: var(--s1);
} }
header>hgroup>h1 { header>hgroup>h1 {
@ -400,6 +414,7 @@ header>nav>ul {
padding-top: var(--s1); padding-top: var(--s1);
padding-bottom: var(--s1); padding-bottom: var(--s1);
align-items: center; align-items: center;
flex-wrap: wrap;
} }
header>nav>ul>li { header>nav>ul>li {
@ -450,6 +465,7 @@ footer>nav>ul {
padding-top: var(--s1); padding-top: var(--s1);
padding-bottom: var(--s1); padding-bottom: var(--s1);
align-items: center; align-items: center;
flex-wrap: wrap;
} }
footer>nav>ul>li { footer>nav>ul>li {
@ -461,10 +477,10 @@ footer>nav>ul>li {
} }
footer>nav>ul>li>a { footer a {
color: var(--text-primary); color: var(--text-primary);
} }
footer>nav>ul>li>a:hover { footer a:hover {
color: var(--text-primary); color: var(--text-primary);
} }

View File

@ -101,4 +101,5 @@ nav.row {
border-width: 4px; border-width: 4px;
border-color: #ff3e3e; border-color: #ff3e3e;
animation: border-pulsate-error 1s 2; animation: border-pulsate-error 1s 2;
} }