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 */ /* Dark Deep Neon Theme */
html {
height: 100%;
width: 100%;
}
header { header {
padding-top: 2%; padding-top: 2%;
padding-bottom: 2%; padding-bottom: 2%;
margin-bottom: 2%;
background-color: #202040; background-color: #202040;
} }
body { body {
background-color: #121212; background-color: #1b1b36;
color: #e5e5e5; color: #e5e5e5;
text-align: center; text-align: center;
padding:0.5% padding: 0.5%;
height: 100%;
} }
h1 { h1 {
...@@ -22,10 +29,9 @@ header > h1 { ...@@ -22,10 +29,9 @@ header > h1 {
text-decoration: none; text-decoration: none;
} }
#wrapperdiv { #wrapperdiv {
background-color: #202040;
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
height: 100%;
} }
button { button {
...@@ -37,7 +43,7 @@ button { ...@@ -37,7 +43,7 @@ button {
text-align: center; text-align: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background-color: #602080; background-color: #602080;
margin-bottom: 2%; margin-bottom: 3%;
padding: 1%; padding: 1%;
width: 20%; width: 20%;
} }
...@@ -61,11 +67,10 @@ button:hover { ...@@ -61,11 +67,10 @@ button:hover {
justify-content: space-evenly; justify-content: space-evenly;
} }
#canvasAndLines{ #canvasAndLines {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-evenly; justify-content: space-evenly;
/* flex-wrap: wrap; */
} }
#wrapperdiv hr { #wrapperdiv hr {
...@@ -80,6 +85,8 @@ canvas { ...@@ -80,6 +85,8 @@ canvas {
background: black; background: black;
width: 400px; width: 400px;
height: 500px; height: 500px;
margin-left: 10%;
margin-right: 10%;
} }
.lds-ring { .lds-ring {
...@@ -122,3 +129,93 @@ canvas { ...@@ -122,3 +129,93 @@ canvas {
transform: rotate(360deg); 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