Commit f6af13c9 authored by Eugen Rochko's avatar Eugen Rochko

Add responsive design

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