Browse Source

Added responsiveness fixes for coming soon

master
Muthu Kumar 7 years ago
parent
commit
4de1ea7819
  1. 35
      docs/css/style.css
  2. 37
      sass/style.sass

35
docs/css/style.css

@ -10,15 +10,21 @@ body {
background: #000; } background: #000; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: 300; } font-weight: 300;
margin: 0; }
p {
margin: 0; }
h1 { h1 {
font-size: 2.8em; font-size: 2.8em; }
line-height: 0em; }
.t-right { .t-right {
text-align: right; } text-align: right; }
.t-center {
text-align: center; }
.t-white { .t-white {
color: #fff; } color: #fff; }
@ -38,18 +44,9 @@ h1 {
font-size: 0.8em; font-size: 0.8em;
text-align: left; } text-align: left; }
.is-relative { @media screen and (max-width: 600px) {
position: relative; } .t-right {
text-align: center; } }
.row-full {
display: block;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
margin: auto;
height: 100vh;
grid-template-columns: [full] 100%; }
.row-full { .row-full {
display: block; display: block;
@ -65,3 +62,11 @@ h1 {
align-self: center; align-self: center;
grid-area: full; grid-area: full;
margin: auto; } margin: auto; }
@media screen and (max-width: 600px) {
.row-full {
margin: 40vh auto;
height: auto; } }
.is-relative {
position: relative; }

37
sass/style.sass

@ -22,14 +22,20 @@ body
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
font-weight: 300 font-weight: 300
margin: 0
p
margin: 0
h1 h1
font-size: 2.8em font-size: 2.8em
line-height: 0em
.t-right .t-right
text-align: right text-align: right
.t-center
text-align: center
.t-white .t-white
color: #fff color: #fff
@ -49,8 +55,9 @@ h1
font-size: 0.8em font-size: 0.8em
text-align: left text-align: left
.is-relative @media screen and (max-width: 600px)
position: relative .t-right
text-align: center
// Grid // Grid
@ -64,19 +71,17 @@ h1
height: 100vh height: 100vh
grid-template-columns: [full] 100% grid-template-columns: [full] 100%
.row-full
display: block
display: grid
align-content: center
align-items: center
justify-content: center
margin: auto
height: 100vh
grid-template-columns: [full] 100%
.col-full .col-full
align-self: center align-self: center
grid-area: full grid-area: full
margin: auto margin: auto
@media screen and (max-width: 600px)
.row-full
margin: 40vh auto
height: auto
// Micro-class
.is-relative
position: relative
Loading…
Cancel
Save