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,216 +21,268 @@ time, mark, audio, video { ...@@ -20,216 +21,268 @@ 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) { }
.container { @media screen and (max-width: 600px) {
padding: 0 20px; } } .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 { @media screen and (max-width: 600px) {
flex-wrap: wrap; .navbar {
justify-content: center; flex-wrap: wrap;
margin-bottom: 30px; } } justify-content: center;
.navbar ul { margin-bottom: 15px;
list-style: none; } }
.navbar ul li { }
display: inline-block; .navbar ul {
vertical-align: bottom; } list-style: none;
.navbar ul a { }
display: flex; .navbar ul li {
justify-content: center; display: inline-block;
align-items: center; vertical-align: bottom;
color: #9baec8; }
text-decoration: none; .navbar ul a {
padding: 12px 14px; display: flex;
line-height: 32px; justify-content: center;
transition: color 250ms linear; align-items: center;
font-family: 'Montserrat', sans-serif; color: #9baec8;
font-weight: 600; text-decoration: none;
font-size: 14px; } padding: 12px 14px;
.navbar ul a.active, .navbar ul a:hover { line-height: 32px;
color: #d9e1e8; transition: color 250ms linear;
transition: color 100ms linear; } font-family: "Montserrat", sans-serif;
.navbar ul a.brand { font-weight: 600;
color: #fff; } font-size: 14px;
.navbar ul a.brand img { }
width: auto; .navbar ul a.active, .navbar ul a:hover {
height: 32px; color: #d9e1e8;
opacity: 1; transition: color 100ms linear;
position: relative; }
mix-blend-mode: normal; .navbar ul a.brand {
top: 4px; color: #fff;
left: -10px; } }
.navbar ul a.brand:hover { .navbar ul a.brand img {
border-bottom-color: transparent; } width: auto;
.navbar ul a.brand:hover img { height: 32px;
opacity: 1; } opacity: 1;
.navbar ul li:first-child a { position: relative;
padding-left: 0; } mix-blend-mode: normal;
.navbar ul li:last-child a { top: 4px;
padding-right: 0; } left: -10px;
}
.navbar ul a.brand:hover {
border-bottom-color: transparent;
}
.navbar ul a.brand:hover img {
opacity: 1;
}
.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 {
content: "";
display: block;
background: url("elephant-friend-top.png");
position: absolute;
width: 393px;
height: 176px;
z-index: -1;
top: -21px;
left: -28px;
pointer-events: none;
}
@media screen and (max-width: 600px) {
.brand::before { .brand::before {
content: ""; display: none;
display: block; }
background: url("elephant-friend-top.png"); }
position: absolute; .brand:hover::before {
width: 393px; top: -20px;
height: 176px; }
z-index: -1;
top: -21px;
left: -28px;
pointer-events: none; }
@media screen and (max-width: 600px) {
.brand::before {
display: none; } }
.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 {
font-size: 42px;
font-weight: 500;
color: #d9e1e8;
line-height: 1;
}
@media screen and (max-width: 600px) {
.intro {
padding: 0 0 40px;
}
.intro h1 { .intro h1 {
font-size: 42px; font-size: 28px;
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 { .thumbnail-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -15px; } margin: 0 -15px;
}
.thumbnail-grid li {
box-sizing: border-box;
width: 50%;
flex: 0 0 auto;
padding: 0 15px;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.thumbnail-grid li { .thumbnail-grid li {
box-sizing: border-box; width: 100%;
width: 50%; }
flex: 0 0 auto; }
padding: 0 15px; .thumbnail-grid li .cover {
margin-bottom: 30px; } display: flex;
@media screen and (max-width: 600px) { background: #282d37;
.thumbnail-grid li { border-radius: 4px 4px 0 0;
width: 100%; } } width: 100%;
.thumbnail-grid li .cover { height: auto;
display: block; min-height: 220px;
background: #282d37; text-decoration: none;
border-radius: 4px 4px 0 0; font-weight: 600;
width: 100%; background-size: cover;
height: 220px; justify-content: center;
text-decoration: none; }
font-weight: 600; @media screen and (max-width: 600px) {
background-size: cover; } .thumbnail-grid li .cover {
.thumbnail-grid li .overlay { min-height: 125px;
height: 100%; } }
.thumbnail-grid li h2 { }
color: #fff; .thumbnail-grid li .overlay {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); align-self: center;
position: relative; }
vertical-align: middle; .thumbnail-grid li h2 {
top: 50%; color: #fff;
transform: translateY(-50%); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
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 { }
padding: 20px; .thumbnail-grid li .article-information {
background: #303643; padding: 20px;
border-radius: 0 0 4px 4px; background: #303643;
font-size: 16px; border-radius: 0 0 4px 4px;
letter-spacing: -.003em; font-size: 16px;
line-height: 1.58; } letter-spacing: -0.003em;
.thumbnail-grid li .article-information .author { line-height: 1.58;
float: left; } }
.thumbnail-grid li .article-information .author strong { .thumbnail-grid li .article-information .author {
font-weight: 600; float: left;
color: #687590; } }
.thumbnail-grid li .article-information .author a { .thumbnail-grid li .article-information .author strong {
text-decoration: none; font-weight: 600;
color: inherit; } color: #687590;
.thumbnail-grid li .article-information .author a i { }
font-weight: initial; } .thumbnail-grid li .article-information .author a {
.thumbnail-grid li .article-information time { text-decoration: none;
float: right; color: inherit;
color: #687590; } }
.thumbnail-grid li .article-information .summary { .thumbnail-grid li .article-information .author a i {
margin-top: 46px; font-weight: initial;
clear: both; }
height: 80px; .thumbnail-grid li .article-information time {
overflow: hidden; float: right;
text-overflow: ellipsis; } color: #687590;
}
.thumbnail-grid li .article-information .summary {
margin-top: 46px;
clear: both;
height: 80px;
overflow: hidden;
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,17 +291,19 @@ body { ...@@ -238,17 +291,19 @@ 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 { }
display: block; .article h1::before {
content: ""; display: block;
border-top: 2px solid #2b90d9; content: "";
width: 100px; border-top: 2px solid #2b90d9;
height: 0; width: 100px;
position: absolute; height: 0;
left: 50%; position: absolute;
top: 0; left: 50%;
transform: translateX(-50%); } top: 0;
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,168 +332,213 @@ body { ...@@ -275,168 +332,213 @@ 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 { }
position: absolute; .article ul li::before {
display: inline-block; position: absolute;
-webkit-box-sizing: border-box; display: inline-block;
box-sizing: border-box; -webkit-box-sizing: border-box;
width: 78px; box-sizing: border-box;
margin-left: -78px; width: 78px;
text-align: right; margin-left: -78px;
padding-top: 4px; text-align: right;
padding-right: 15px; padding-top: 4px;
content: '\2022'; } padding-right: 15px;
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 { }
margin-top: 50px; .article-header .image-large {
margin-bottom: 0; } margin-top: 50px;
margin-bottom: 0;
}
.footer { .footer {
padding-bottom: 30px; } padding-bottom: 30px;
.footer .legal { }
margin-top: 30px; } .footer .legal {
.footer .legal a { margin-top: 30px;
color: #687590; }
text-decoration: none; } .footer .legal a {
color: #687590;
text-decoration: none;
}
.entry-nav { .entry-nav {
overflow: hidden; overflow: hidden;
margin-bottom: 30px; } margin-bottom: 30px;
.entry-nav a { }
color: #79b9e7; .entry-nav a {
display: inline-block; color: #79b9e7;
border: 1px solid #303643; display: inline-block;
padding: 10px 14px; border: 1px solid #303643;
border-radius: 4px; padding: 10px 14px;
font-weight: 500; border-radius: 4px;
text-decoration: none; } font-weight: 500;
.entry-nav .prev-entry { text-decoration: none;
float: left; } }
.entry-nav .next-entry { .entry-nav .prev-entry {
float: right; } float: left;
}
.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 {
flex: 0 0 auto;
padding: 0 15px;
}
@media screen and (max-width: 600px) {
.pagination li { .pagination li {
flex: 0 0 auto; padding: 0 5px;
padding: 0 15px; } }
.pagination a { }
color: #79b9e7; .pagination a {
display: inline-block; color: #79b9e7;
border: 1px solid #303643; display: inline-block;
padding: 10px 14px; border: 1px solid #303643;
border-radius: 4px; padding: 10px 14px;
font-weight: 500; border-radius: 4px;
text-decoration: none; } font-weight: 500;
.pagination .disabled a { text-decoration: none;
color: #687590; } }
.pagination .active a { .pagination .disabled a {
border-color: #79b9e7; } color: #687590;
}
.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 { }
font-size: 24px; .cta-banner h4 {
line-height: 1.08; font-size: 24px;
font-weight: 600; line-height: 1.08;
margin-bottom: 20px; font-weight: 600;
color: #fff; } margin-bottom: 20px;
.cta-banner p { color: #fff;
color: #fff;