fixes for small screens
This commit is contained in:
parent
390a58b404
commit
2bf2e409b6
|
@ -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);
|
||||||
}
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue