Meta texts at the bottom of the page
This commit is contained in:
parent
4eb11a1785
commit
2ed60ba3ed
3 changed files with 48 additions and 88 deletions
64
style.less
64
style.less
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue