Meta texts at the bottom of the page

This commit is contained in:
Miraty 2020-10-12 18:55:36 +02:00
commit 2ed60ba3ed
3 changed files with 48 additions and 88 deletions

View file

@ -61,17 +61,17 @@ p {
}
form {
display: block;
flex-grow: 1;
margin-bottom: 30px;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
margin-right: auto;
width: 814px;
height: 99%;
}
body {
@ -80,16 +80,11 @@ body {
color: @text;
font-weight: normal;
font-size: 20px;
& h1 {
color: @text;
text-decoration: none;
}
height: 99%;
}
label {
font-size: 20px;
html {
height: 97%;
}
header {
@ -180,8 +175,6 @@ label[for=txt] {
color: @secondaryText;
text-align: left;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
position: fixed;
width: 400px;
& a:link {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
@ -195,10 +188,18 @@ label[for=txt] {
}
#metaTexts {
padding-top: 50px;
}
header, #metaTexts {
flex-shrink: 0;
}
footer {
font-size: 14px;
bottom: 20px;
left: 20px;
padding-top: 20px;
}
#info {
@ -275,9 +276,9 @@ input[type=color] {
border: 2px @border solid;
}
/* Infobulle */
/* Help message */
#helpImg {
.helpImg {
width: 20px;
height: 20px;
margin-bottom: -3px;
@ -323,25 +324,8 @@ input[type=color] {
/* Media queries */
@media (max-width: 1400px) {
.metaText {
width: 250px;
}
}
@media (max-width: 1050px) {
#metaTexts {
display: flex;
flex-direction: row;
}
.metaText {
width: 100%;
position: static;
font-size: 20px;
}
#info {
color: @text;
margin-bottom: 20px;
@ -356,14 +340,6 @@ input[type=color] {
@media (max-width: 850px) {
#metaTexts {
flex-direction: column;
width: 480px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
main {
width: auto;
}
@ -382,11 +358,7 @@ input[type=color] {
}
@media (max-width: 500px) { // Version mobile
#metaTexts {
width: auto;
}
@media (max-width: 500px) { // Mobile version
#colors {
flex-direction: column;