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://unpkg.com/ionicons@4.2.0/dist/css/ionicons.min.css");
/* http://meyerweb.com/eric/tools/css/reset/
......@@ -20,216 +21,268 @@ time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
display: block;
}
body {
line-height: 1;
box-sizing: border-box;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none; }
text-size-adjust: none;
}
ol, ul {
list-style: none; }
list-style: none;
}
blockquote, q {
quotes: none; }
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0; }
border-spacing: 0;
}
a {
outline: 0; }
outline: 0;
}
body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
text-rendering: optimizeLegibility;
background-color: #1F232B;
color: #9baec8;
font-size: 13px;
line-height: 18px;
font-weight: 400; }
font-weight: 400;
}
.container {
max-width: 800px;
margin: 0 auto; }
@media screen and (max-width: 600px) {
.container {
padding: 0 20px; } }
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 {
display: inline-block;
vertical-align: bottom; }
.navbar ul a {
display: flex;
justify-content: center;
align-items: center;
color: #9baec8;
text-decoration: none;
padding: 12px 14px;
line-height: 32px;
transition: color 250ms linear;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px; }
.navbar ul a.active, .navbar ul a:hover {
color: #d9e1e8;
transition: color 100ms linear; }
.navbar ul a.brand {
color: #fff; }
.navbar ul a.brand img {
width: auto;
height: 32px;
opacity: 1;
position: relative;
mix-blend-mode: normal;
top: 4px;
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; }
justify-content: space-between;
}
@media screen and (max-width: 600px) {
.navbar {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 15px;
}
}
.navbar ul {
list-style: none;
}
.navbar ul li {
display: inline-block;
vertical-align: bottom;
}
.navbar ul a {
display: flex;
justify-content: center;
align-items: center;
color: #9baec8;
text-decoration: none;
padding: 12px 14px;
line-height: 32px;
transition: color 250ms linear;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 14px;
}
.navbar ul a.active, .navbar ul a:hover {
color: #d9e1e8;
transition: color 100ms linear;
}
.navbar ul a.brand {
color: #fff;
}
.navbar ul a.brand img {
width: auto;
height: 32px;
opacity: 1;
position: relative;
mix-blend-mode: normal;
top: 4px;
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 {
display: inline-block;
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 {
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 {
display: none; } }
.brand:hover::before {
top: -20px; }
display: none;
}
}
.brand:hover::before {
top: -20px;
}
.intro {
text-align: center;
padding: 90px 0;
padding-top: 20px; }
.intro img {
display: block;
max-width: 140px;
height: auto;
margin: 0 auto;
margin-bottom: 30px; }
padding: 20px 0 90px;
}
.intro img {
display: block;
max-width: 140px;
height: auto;
margin: 0 auto 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 {
font-size: 42px;
font-weight: 500;
color: #d9e1e8;
line-height: 1; }
@media screen and (max-width: 600px) {
.intro {
padding-top: 20px; }
.intro h1 {
font-size: 28px; } }
font-size: 28px;
}
}
.thumbnail-grid {
display: flex;
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 {
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 {
width: 100%; } }
.thumbnail-grid li .cover {
display: block;
background: #282d37;
border-radius: 4px 4px 0 0;
width: 100%;
height: 220px;
text-decoration: none;
font-weight: 600;
background-size: cover; }
.thumbnail-grid li .overlay {
height: 100%; }
.thumbnail-grid li h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
position: relative;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
text-align: center;
font-size: 26px;
line-height: 1.58;
padding: 20px; }
.thumbnail-grid li .article-information {
padding: 20px;
background: #303643;
border-radius: 0 0 4px 4px;
font-size: 16px;
letter-spacing: -.003em;
line-height: 1.58; }
.thumbnail-grid li .article-information .author {
float: left; }
.thumbnail-grid li .article-information .author strong {
font-weight: 600;
color: #687590; }
.thumbnail-grid li .article-information .author a {
text-decoration: none;
color: inherit; }
.thumbnail-grid li .article-information .author a i {
font-weight: initial; }
.thumbnail-grid li .article-information time {
float: right;
color: #687590; }
.thumbnail-grid li .article-information .summary {
margin-top: 46px;
clear: both;
height: 80px;
overflow: hidden;
text-overflow: ellipsis; }
width: 100%;
}
}
.thumbnail-grid li .cover {
display: flex;
background: #282d37;
border-radius: 4px 4px 0 0;
width: 100%;
height: auto;
min-height: 220px;
text-decoration: none;
font-weight: 600;
background-size: cover;
justify-content: center;
}
@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;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
text-align: center;
font-size: 26px;
line-height: 1.58;
padding: 20px;
}
.thumbnail-grid li .article-information {
padding: 20px;
background: #303643;
border-radius: 0 0 4px 4px;
font-size: 16px;
letter-spacing: -0.003em;
line-height: 1.58;
}
.thumbnail-grid li .article-information .author {
float: left;
}
.thumbnail-grid li .article-information .author strong {
font-weight: 600;
color: #687590;
}
.thumbnail-grid li .article-information .author a {
text-decoration: none;
color: inherit;
}
.thumbnail-grid li .article-information .author a i {
font-weight: initial;
}
.thumbnail-grid li .article-information time {
float: right;
color: #687590;
}
.thumbnail-grid li .article-information .summary {
margin-top: 46px;
clear: both;
height: 80px;
overflow: hidden;
text-overflow: ellipsis;
}
.related-articles {
margin-top: 30px; }
margin-top: 30px;
}
.article main {
max-width: 600px;
margin: 0 auto; }
margin: 0 auto;
}
.article h1 {
font-size: 36px;
line-height: 1.08;
......@@ -238,17 +291,19 @@ body {
padding-top: 35px;
margin-left: -2.63px;
text-align: center;
position: relative; }
.article h1::before {
display: block;
content: "";
border-top: 2px solid #2b90d9;
width: 100px;
height: 0;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%); }
position: relative;
}
.article h1::before {
display: block;
content: "";
border-top: 2px solid #2b90d9;
width: 100px;
height: 0;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.article h2 {
font-size: 21px;
line-height: 1.22;
......@@ -256,7 +311,8 @@ body {
color: #9baec8;
margin-top: 25px;
margin-left: -1.75px;
text-align: center; }
text-align: center;
}
.article h3 {
font-size: 26px;
margin-left: -1.63px;
......@@ -265,7 +321,8 @@ body {
margin-top: 50px;
margin-bottom: 30px;
font-weight: 600;
color: #d9e1e8; }
color: #d9e1e8;
}
.article blockquote {
color: #d9e1e8;
font-size: 16px;
......@@ -275,168 +332,213 @@ body {
padding-left: 20px;
margin-left: -23px;
padding-bottom: 2px;
margin-bottom: 26px; }
.article blockquote p:last-child {
margin-bottom: 0; }
margin-bottom: 26px;
}
.article blockquote p:last-child {
margin-bottom: 0;
}
.article p {
color: #d9e1e8;
font-size: 16px;
line-height: 28px;
font-weight: normal;
margin-bottom: 26px;
hyphens: auto; }
hyphens: auto;
}
.article a {
color: #79b9e7; }
color: #79b9e7;
}
.article img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
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 {
margin-bottom: 50px; }
margin-bottom: 50px;
}
.article .image-pull-left {
float: left; }
float: left;
}
.article em {
font-style: italic; }
font-style: italic;
}
.article ul {
counter-reset: post;
margin-bottom: 26px; }
margin-bottom: 26px;
}
.article ul li {
margin-left: 30px;
margin-bottom: 14px;
color: #d9e1e8;
font-size: 16px;
line-height: 28px; }
.article ul li::before {
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 78px;
margin-left: -78px;
text-align: right;
padding-top: 4px;
padding-right: 15px;
content: '\2022'; }
line-height: 28px;
}
.article ul li::before {
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 78px;
margin-left: -78px;
text-align: right;
padding-top: 4px;
padding-right: 15px;
content: "•";
}
.article figure figcaption {
margin-top: 8px;
text-align: center; }
.article figure figcaption,
.article figure figcaption p {
color: #687590; }
text-align: center;
}
.article figure figcaption,
.article figure figcaption p {
color: #687590;
}
.article-header {
padding: 50px 0; }
.article-header .image-large {
margin-top: 50px;
margin-bottom: 0; }
padding: 50px 0;
}
.article-header .image-large {
margin-top: 50px;
margin-bottom: 0;
}
.footer {
padding-bottom: 30px; }
.footer .legal {
margin-top: 30px; }
.footer .legal a {
color: #687590;
text-decoration: none; }
padding-bottom: 30px;
}
.footer .legal {
margin-top: 30px;
}
.footer .legal a {
color: #687590;
text-decoration: none;
}
.entry-nav {
overflow: hidden;
margin-bottom: 30px; }
.entry-nav a {
color: #79b9e7;
display: inline-block;
border: 1px solid #303643;
padding: 10px 14px;
border-radius: 4px;
font-weight: 500;
text-decoration: none; }
.entry-nav .prev-entry {
float: left; }
.entry-nav .next-entry {
float: right; }
margin-bottom: 30px;
}
.entry-nav a {
color: #79b9e7;
display: inline-block;
border: 1px solid #303643;
padding: 10px 14px;
border-radius: 4px;
font-weight: 500;
text-decoration: none;
}
.entry-nav .prev-entry {
float: left;
}
.entry-nav .next-entry {
float: right;
}
.pagination {
display: -ms-flexbox;
display: flex;
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 {
flex: 0 0 auto;
padding: 0 15px; }
.pagination a {
color: #79b9e7;
display: inline-block;
border: 1px solid #303643;
padding: 10px 14px;
border-radius: 4px;
font-weight: 500;
text-decoration: none; }
.pagination .disabled a {
color: #687590; }
.pagination .active a {
border-color: #79b9e7; }
padding: 0 5px;
}
}
.pagination a {
color: #79b9e7;
display: inline-block;
border: 1px solid #303643;
padding: 10px 14px;
border-radius: 4px;
font-weight: 500;
text-decoration: none;
}
.pagination .disabled a {
color: #687590;
}
.pagination .active a {
border-color: #79b9e7;
}
.cta-banner {
background: #2b90d9;
border-radius: 4px;
text-align: center;
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; }
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;
color: #2b90d9;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: inherit;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
line-height: 36px;
padding: 4px 16px;
margin: 0 auto;
border: 0;
cursor: pointer;
}
.cta-banner > a.secondary {
padding: 2px 14px;
border: 2px solid #fff;
background: transparent;
margin-left: 4px;
color: #fff;
}
@media screen and (max-width: 375px) {
.cta-banner > a {
font-weight: 500;
color: #2b90d9;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: inherit;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
line-height: 36px;
padding: 4px 16px;