Commit cdd1554f authored by Noran Baskaran's avatar Noran Baskaran
Browse files

Made improvements on the dark neon theme and it looks good also on a tablet...

Made improvements on the dark neon theme and it looks good also on a tablet type device, but mobile view still needs work.
There is also a bug where the painting moves when going to the next or previous poem
parent ae99ace4
/* Dark Deep Neon Theme */
html {
height: 100%;
width: 100%;
}
header {
padding-top: 2%;
padding-bottom: 2%;
margin-bottom: 2%;
background-color: #202040;
}
body {
background-color: #121212;
background-color: #1b1b36;
color: #e5e5e5;
text-align: center;
padding:0.5%
padding: 0.5%;
height: 100%;
}
h1 {
......@@ -22,10 +29,9 @@ header > h1 {
text-decoration: none;
}
#wrapperdiv {
background-color: #202040;
padding-left: 5%;
padding-right: 5%;
height: 100%;
}
button {
......@@ -37,7 +43,7 @@ button {
text-align: center;
transition: all 0.2s ease-in-out;
background-color: #602080;
margin-bottom: 2%;
margin-bottom: 3%;
padding: 1%;
width: 20%;
}
......@@ -61,11 +67,10 @@ button:hover {
justify-content: space-evenly;
}
#canvasAndLines{
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
/* flex-wrap: wrap; */
#canvasAndLines {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
}
#wrapperdiv hr {
......@@ -80,6 +85,8 @@ canvas {
background: black;
width: 400px;
height: 500px;
margin-left: 10%;
margin-right: 10%;
}
.lds-ring {
......@@ -122,3 +129,93 @@ canvas {
transform: rotate(360deg);
}
}
/*Example width: ipad 768 width*/
@media only screen and (max-width: 770px) and (min-width: 550px) {
html {
height: 100vh;
width: 100vw;
margin: 0;
}
body {
background-color: red;
margin: 0%;
padding: 0%;
width: 100vw;
height: 100vh;
}
button {
transition: 0.5s ease-in-out;
width: 100%;
border-radius: 12px;
}
.buttons {
flex-wrap: wrap;
}
/*
No hover property on tablet and mobile devices.
*/
button:hover {
transform: unset;
background-color: #602080;
color: #e5e5e5;
}
#canvasAndLines {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
flex-wrap: wrap;
}
#lines {
margin-top: 5%;
}
}
@media only screen and (max-width: 500px) {
html {
height: 100vh;
width: 100vw;
margin: 0;
}
body {
background-color: green;
margin: 0%;
padding: 0%;
width: 100vw;
height: 100vh;
}
button {
transition: 0.5s ease-in-out;
width: 100%;
border-radius: 12px;
}
.buttons {
flex-wrap: wrap;
}
/*
No hover property on tablet and mobile devices.
*/
button:hover {
transform: unset;
background-color: #602080;
color: #e5e5e5;
}
#canvasAndLines {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
flex-wrap: wrap;
}
#lines {
margin-top: 5%;
}
}
Supports Markdown
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