Improve layout on small screens

	First tab only contains one title
	Canvas is centered
parent c4407ca7
......@@ -180,12 +180,6 @@ div.navButtons {
margin-top: 2em;
}
main {
background-color: #ebf3ff;
min-height: 100%;
padding-left: 40px;
}
body {
display: flex;
flex-direction: row;
......@@ -221,16 +215,33 @@ body {
textarea {
height: 3.5em;
}
main > div:first-child {
margin: auto;
}
h2.title-big {
display: none;
}
}
@media (min-width: 992px) {
main {
min-height: 100vh;
padding-left: 40px;
}
input#step2value {
height: 200px;
}
main > div > #output {
margin-top: 7vw;
}
h2.title-small {
display: none;
}
}
main > div:nth-child(1) {
......@@ -243,11 +254,6 @@ main a {
font-weight: bold;
}
main > div > #output {
margin-top: 7vw;
display: block;
}
a#save-image {
padding-left: 2em;
padding-right: 2em;
......
......@@ -26,7 +26,8 @@
<button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
</div>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
<h2 class="title-small">Choisissez 2 couleurs</h2>
<h2 class="title-big">Choisissez la couleur de fond</h2>
<div class="colorpicker">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
......@@ -57,7 +58,7 @@
<span style="background-color: #000"></span>
</label>
</div>
<h2>Choisissez la couleur du texte</h2>
<h2 class="title-big">Choisissez la couleur du texte</h2>
<div class="colorpicker">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment