Commit f6af13c9 authored by Eugen Rochko's avatar Eugen Rochko

Add responsive design

parent 0235dea6
Pipeline #26 passed with stages
in 0 seconds
public/
static/.sass-cache
......@@ -67,12 +67,20 @@ body {
.container {
max-width: 800px;
margin: 0 auto; }
@media screen and (max-width: 600px) {
.container {
padding: 0 20px; } }
.navbar {
padding-top: 15px;
margin-bottom: 90px;
display: flex;
justify-content: space-between; }
@media screen and (max-width: 600px) {
.navbar {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 30px; } }
.navbar ul {
list-style: none; }
.navbar ul li {
......@@ -127,6 +135,9 @@ body {
top: -21px;
left: -28px;
pointer-events: none; }
@media screen and (max-width: 600px) {
.brand::before {
display: none; } }
.brand:hover::before {
top: -20px; }
......@@ -143,6 +154,11 @@ body {
font-weight: 500;
color: #d9e1e8;
line-height: 1; }
@media screen and (max-width: 600px) {
.intro {
padding-top: 20px; }
.intro h1 {
font-size: 28px; } }
.thumbnail-grid {
display: flex;
......@@ -154,6 +170,9 @@ body {
flex: 0 0 auto;
padding: 0 15px;
margin-bottom: 30px; }
@media screen and (max-width: 600px) {
.thumbnail-grid li {
width: 100%; } }
.thumbnail-grid li .cover {
display: block;
background: #282d37;
......@@ -343,12 +362,14 @@ body {
padding: 40px; }
.cta-banner h4 {
font-size: 24px;
line-height: 1.08;
font-weight: 600;
margin-bottom: 20px;
color: #fff; }
.cta-banner p {
color: #fff;
font-size: 18px;
line-height: 1.22;
margin-bottom: 20px; }
.cta-banner > a {
font-weight: 500;
......
This diff is collapsed.
......@@ -94,6 +94,10 @@ body {
.container {
max-width: $content-width;
margin: 0 auto;
@media screen and (max-width: 600px) {
padding: 0 20px;
}
}
.navbar {
......@@ -102,6 +106,12 @@ body {
display: flex;
justify-content: space-between;
@media screen and (max-width: 600px) {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 30px;
}
ul {
list-style: none;
......@@ -178,6 +188,10 @@ body {
top: -21px;
left: -28px;
pointer-events: none;
@media screen and (max-width: 600px) {
display: none;
}
}
&:hover {
......@@ -204,6 +218,14 @@ body {
color: $lightest;
line-height: 1;
}
@media screen and (max-width: 600px) {
padding-top: 20px;
h1 {
font-size: 28px;
}
}
}
.thumbnail-grid {
......@@ -218,6 +240,10 @@ body {
padding: 0 15px;
margin-bottom: 30px;
@media screen and (max-width: 600px) {
width: 100%;
}
.cover {
display: block;
background: lighten($darkest, 4%);
......@@ -486,6 +512,7 @@ body {
h4 {
font-size: 24px;
line-height: 1.08;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
......@@ -494,6 +521,7 @@ body {
p {
color: #fff;
font-size: 18px;
line-height: 1.22;
margin-bottom: 20px;
}
......
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