Commit a90fc195 authored by Eugen Rochko's avatar Eugen Rochko

Merge branch 'mobile-layout' into 'master'

Responsive fixes for mobile

See merge request !1
parents 78c5583b 5b8a4c94
Pipeline #31 passed with stages
in 0 seconds
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:400,600|Roboto:400,500,700"); @import url("https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:400,600|Roboto:400,500,700");
@import url("https://unpkg.com/ionicons@4.2.0/dist/css/ionicons.min.css"); @import url("https://unpkg.com/ionicons@4.2.0/dist/css/ionicons.min.css");
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
...@@ -20,73 +21,89 @@ time, mark, audio, video { ...@@ -20,73 +21,89 @@ time, mark, audio, video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; } vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; } display: block;
}
body { body {
line-height: 1; line-height: 1;
box-sizing: border-box; box-sizing: border-box;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: "kern";
text-size-adjust: none; } text-size-adjust: none;
}
ol, ul { ol, ul {
list-style: none; } list-style: none;
}
blockquote, q { blockquote, q {
quotes: none; } quotes: none;
}
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: "";
content: none; } content: none;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
a { a {
outline: 0; } outline: 0;
}
body { body {
box-sizing: border-box; box-sizing: border-box;
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
background-color: #1F232B; background-color: #1F232B;
color: #9baec8; color: #9baec8;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; } font-weight: 400;
}
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto; } margin: 0 auto;
@media screen and (max-width: 600px) { }
@media screen and (max-width: 600px) {
.container { .container {
padding: 0 20px; } } 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) { }
@media screen and (max-width: 600px) {
.navbar { .navbar {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
margin-bottom: 30px; } } margin-bottom: 15px;
.navbar ul { }
list-style: none; } }
.navbar ul li { .navbar ul {
list-style: none;
}
.navbar ul li {
display: inline-block; display: inline-block;
vertical-align: bottom; } vertical-align: bottom;
.navbar ul a { }
.navbar ul a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -95,36 +112,45 @@ body { ...@@ -95,36 +112,45 @@ body {
padding: 12px 14px; padding: 12px 14px;
line-height: 32px; line-height: 32px;
transition: color 250ms linear; transition: color 250ms linear;
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 14px; } font-size: 14px;
.navbar ul a.active, .navbar ul a:hover { }
.navbar ul a.active, .navbar ul a:hover {
color: #d9e1e8; color: #d9e1e8;
transition: color 100ms linear; } transition: color 100ms linear;
.navbar ul a.brand { }
color: #fff; } .navbar ul a.brand {
.navbar ul a.brand img { color: #fff;
}
.navbar ul a.brand img {
width: auto; width: auto;
height: 32px; height: 32px;
opacity: 1; opacity: 1;
position: relative; position: relative;
mix-blend-mode: normal; mix-blend-mode: normal;
top: 4px; top: 4px;
left: -10px; } left: -10px;
.navbar ul a.brand:hover { }
border-bottom-color: transparent; } .navbar ul a.brand:hover {
.navbar ul a.brand:hover img { border-bottom-color: transparent;
opacity: 1; } }
.navbar ul li:first-child a { .navbar ul a.brand:hover img {
padding-left: 0; } opacity: 1;
.navbar ul li:last-child a { }
padding-right: 0; } .navbar ul li:first-child a {
padding-left: 0;
}
.navbar ul li:last-child a {
padding-right: 0;
}
.brand { .brand {
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 2; } z-index: 2;
.brand::before { }
.brand::before {
content: ""; content: "";
display: block; display: block;
background: url("elephant-friend-top.png"); background: url("elephant-friend-top.png");
...@@ -134,102 +160,129 @@ body { ...@@ -134,102 +160,129 @@ body {
z-index: -1; z-index: -1;
top: -21px; top: -21px;
left: -28px; left: -28px;
pointer-events: none; } pointer-events: none;
@media screen and (max-width: 600px) { }
@media screen and (max-width: 600px) {
.brand::before { .brand::before {
display: none; } } display: none;
.brand:hover::before { }
top: -20px; } }
.brand:hover::before {
top: -20px;
}
.intro { .intro {
text-align: center; text-align: center;
padding: 90px 0; padding: 20px 0 90px;
padding-top: 20px; } }
.intro img { .intro img {
display: block; display: block;
max-width: 140px; max-width: 140px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto 30px;
margin-bottom: 30px; } }
.intro h1 { .intro h1 {
font-size: 42px; font-size: 42px;
font-weight: 500; font-weight: 500;
color: #d9e1e8; color: #d9e1e8;
line-height: 1; } line-height: 1;
@media screen and (max-width: 600px) { }
@media screen and (max-width: 600px) {
.intro { .intro {
padding-top: 20px; } padding: 0 0 40px;
}
.intro h1 { .intro h1 {
font-size: 28px; } } font-size: 28px;
}
}
.thumbnail-grid { .thumbnail-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -15px; } margin: 0 -15px;
.thumbnail-grid li { }
.thumbnail-grid li {
box-sizing: border-box; box-sizing: border-box;
width: 50%; width: 50%;
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) { }
@media screen and (max-width: 600px) {
.thumbnail-grid li { .thumbnail-grid li {
width: 100%; } } width: 100%;
.thumbnail-grid li .cover { }
display: block; }
.thumbnail-grid li .cover {
display: flex;
background: #282d37; background: #282d37;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
width: 100%; width: 100%;
height: 220px; height: auto;
min-height: 220px;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
background-size: cover; } background-size: cover;
.thumbnail-grid li .overlay { justify-content: center;
height: 100%; } }
.thumbnail-grid li h2 { @media screen and (max-width: 600px) {
.thumbnail-grid li .cover {
min-height: 125px;
}
}
.thumbnail-grid li .overlay {
align-self: center;
}
.thumbnail-grid li h2 {
color: #fff; color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
position: relative;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
text-align: center; text-align: center;
font-size: 26px; font-size: 26px;
line-height: 1.58; line-height: 1.58;
padding: 20px; } padding: 20px;
.thumbnail-grid li .article-information { }
.thumbnail-grid li .article-information {
padding: 20px; padding: 20px;
background: #303643; background: #303643;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
font-size: 16px; font-size: 16px;
letter-spacing: -.003em; letter-spacing: -0.003em;
line-height: 1.58; } line-height: 1.58;
.thumbnail-grid li .article-information .author { }
float: left; } .thumbnail-grid li .article-information .author {
.thumbnail-grid li .article-information .author strong { float: left;
}
.thumbnail-grid li .article-information .author strong {
font-weight: 600; font-weight: 600;
color: #687590; } color: #687590;
.thumbnail-grid li .article-information .author a { }
.thumbnail-grid li .article-information .author a {
text-decoration: none; text-decoration: none;
color: inherit; } color: inherit;
.thumbnail-grid li .article-information .author a i { }
font-weight: initial; } .thumbnail-grid li .article-information .author a i {
.thumbnail-grid li .article-information time { font-weight: initial;
}
.thumbnail-grid li .article-information time {
float: right; float: right;
color: #687590; } color: #687590;
.thumbnail-grid li .article-information .summary { }
.thumbnail-grid li .article-information .summary {
margin-top: 46px; margin-top: 46px;
clear: both; clear: both;
height: 80px; height: 80px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; } text-overflow: ellipsis;
}
.related-articles { .related-articles {
margin-top: 30px; } margin-top: 30px;
}
.article main { .article main {
max-width: 600px; max-width: 600px;
margin: 0 auto; } margin: 0 auto;
}
.article h1 { .article h1 {
font-size: 36px; font-size: 36px;
line-height: 1.08; line-height: 1.08;
...@@ -238,8 +291,9 @@ body { ...@@ -238,8 +291,9 @@ body {
padding-top: 35px; padding-top: 35px;
margin-left: -2.63px; margin-left: -2.63px;
text-align: center; text-align: center;
position: relative; } position: relative;
.article h1::before { }
.article h1::before {
display: block; display: block;
content: ""; content: "";
border-top: 2px solid #2b90d9; border-top: 2px solid #2b90d9;
...@@ -248,7 +302,8 @@ body { ...@@ -248,7 +302,8 @@ body {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 0; top: 0;
transform: translateX(-50%); } transform: translateX(-50%);
}
.article h2 { .article h2 {
font-size: 21px; font-size: 21px;
line-height: 1.22; line-height: 1.22;
...@@ -256,7 +311,8 @@ body { ...@@ -256,7 +311,8 @@ body {
color: #9baec8; color: #9baec8;
margin-top: 25px; margin-top: 25px;
margin-left: -1.75px; margin-left: -1.75px;
text-align: center; } text-align: center;
}
.article h3 { .article h3 {
font-size: 26px; font-size: 26px;
margin-left: -1.63px; margin-left: -1.63px;
...@@ -265,7 +321,8 @@ body { ...@@ -265,7 +321,8 @@ body {
margin-top: 50px; margin-top: 50px;
margin-bottom: 30px; margin-bottom: 30px;
font-weight: 600; font-weight: 600;
color: #d9e1e8; } color: #d9e1e8;
}
.article blockquote { .article blockquote {
color: #d9e1e8; color: #d9e1e8;
font-size: 16px; font-size: 16px;
...@@ -275,41 +332,51 @@ body { ...@@ -275,41 +332,51 @@ body {
padding-left: 20px; padding-left: 20px;
margin-left: -23px; margin-left: -23px;
padding-bottom: 2px; padding-bottom: 2px;
margin-bottom: 26px; } margin-bottom: 26px;
.article blockquote p:last-child { }
margin-bottom: 0; } .article blockquote p:last-child {
margin-bottom: 0;
}
.article p { .article p {
color: #d9e1e8; color: #d9e1e8;
font-size: 16px; font-size: 16px;
line-height: 28px; line-height: 28px;
font-weight: normal; font-weight: normal;
margin-bottom: 26px; margin-bottom: 26px;
hyphens: auto; } hyphens: auto;
}
.article a { .article a {
color: #79b9e7; } color: #79b9e7;
}
.article img { .article img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 4px; border-radius: 4px;
box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35); } box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35);
}
.article .image-large { .article .image-large {
margin-bottom: 50px; } margin-bottom: 50px;
}
.article .image-pull-left { .article .image-pull-left {
float: left; } float: left;
}
.article em { .article em {
font-style: italic; } font-style: italic;
}
.article ul { .article ul {
counter-reset: post; counter-reset: post;
margin-bottom: 26px; } margin-bottom: 26px;
}
.article ul li { .article ul li {
margin-left: 30px; margin-left: 30px;
margin-bottom: 14px; margin-bottom: 14px;
color: #d9e1e8; color: #d9e1e8;
font-size: 16px; font-size: 16px;
line-height: 28px; } line-height: 28px;
.article ul li::before { }
.article ul li::before {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -319,80 +386,106 @@ body { ...@@ -319,80 +386,106 @@ body {
text-align: right; text-align: right;
padding-top: 4px; padding-top: 4px;
padding-right: 15px; padding-right: 15px;
content: '\2022'; } content: "•";
}
.article figure figcaption { .article figure figcaption {
margin-top: 8px; margin-top: 8px;
text-align: center; } text-align: center;
.article figure figcaption, }
.article figure figcaption p { .article figure figcaption,
color: #687590; } .article figure figcaption p {
color: #687590;
}
.article-header { .article-header {
padding: 50px 0; } padding: 50px 0;
.article-header .image-large { }
.article-header .image-large {
margin-top: 50px; margin-top: 50px;
margin-bottom: 0; } margin-bottom: 0;
}
.footer { .footer {
padding-bottom: 30px; } padding-bottom: 30px;
.footer .legal { }
margin-top: 30px; } .footer .legal {
.footer .legal a { margin-top: 30px;
}
.footer .legal a {
color: #687590; color: #687590;
text-decoration: none; } text-decoration: none;
}
.entry-nav { .entry-nav {
overflow: hidden; overflow: hidden;
margin-bottom: 30px; } margin-bottom: 30px;
.entry-nav a { }
.entry-nav a {
color: #79b9e7; color: #79b9e7;
display: inline-block; display: inline-block;
border: 1px solid #303643; border: 1px solid #303643;
padding: 10px 14px; padding: 10px 14px;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
text-decoration: none; } text-decoration: none;
.entry-nav .prev-entry { }
float: left; } .entry-nav .prev-entry {
.entry-nav .next-entry { float: left;
float: right; } }
.entry-nav .next-entry {
float: right;
}
.pagination { .pagination {
display: -ms-flexbox;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 30px; } margin: 0 0 30px;
.pagination li { }
.pagination li {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 15px; } padding: 0 15px;
.pagination a { }
@media screen and (max-width: 600px) {
.pagination li {
padding: 0 5px;
}
}
.pagination a {
color: #79b9e7; color: #79b9e7;
display: inline-block; display: inline-block;
border: 1px solid #303643; border: 1px solid #303643;
padding: 10px 14px; padding: 10px 14px;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
text-decoration: none; } text-decoration: none;
.pagination .disabled a { }
color: #687590; } .pagination .disabled a {
.pagination .active a { color: #687590;
border-color: #79b9e7; } }
.pagination .active a {
border-color: #79b9e7;
}
.cta-banner { .cta-banner {
background: #2b90d9; background: #2b90d9;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
padding: 40px; } padding: 40px;
.cta-banner h4 { }
.cta-banner h4 {
font-size: 24px; font-size: 24px;
line-height: 1.08; 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; line-height: 1.22;
margin-bottom: 20px; } margin-bottom: 20px;
.cta-banner > a { }
.cta-banner > a {
font-weight: 500; font-weight: 500;
color: #2b90d9; color: #2b90d9;
background: #fff; background: #fff;
...@@ -407,36 +500,45 @@ body { ...@@ -407,36 +500,45 @@ body {
padding: 4px 16px; padding: 4px 16px;
margin: 0 auto;