From ad2fb089e14b329942c6f188e90e11686ea11818 Mon Sep 17 00:00:00 2001 From: lostinlight Date: Wed, 21 Mar 2018 05:27:07 +0300 Subject: [PATCH] Tweak mobile styles --- .../starter/source/assets/scss/modules/_chronicles.scss | 8 +++++++- themes/starter/source/assets/scss/modules/_index.scss | 7 +------ themes/starter/source/assets/scss/partials/_layout.scss | 9 +++++---- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/themes/starter/source/assets/scss/modules/_chronicles.scss b/themes/starter/source/assets/scss/modules/_chronicles.scss index 6309a19..92cd9e2 100644 --- a/themes/starter/source/assets/scss/modules/_chronicles.scss +++ b/themes/starter/source/assets/scss/modules/_chronicles.scss @@ -180,6 +180,12 @@ $taglist: (diaspora, $diaspora), .post__preview:not(.wanted):not(.featured) { flex: 100% 0 0; - height: 170px; + height: 200px; + } +} + +@media screen and (max-width: $mq-small) { + .contents.chronicles { + padding-top: 7em; } } diff --git a/themes/starter/source/assets/scss/modules/_index.scss b/themes/starter/source/assets/scss/modules/_index.scss index c7836e6..4ab9edb 100644 --- a/themes/starter/source/assets/scss/modules/_index.scss +++ b/themes/starter/source/assets/scss/modules/_index.scss @@ -42,7 +42,6 @@ height: 80px; flex: 40% 0 0; border: 3px solid $white; - box-shadow: inset 3px 3px 0 3px white; border-radius: 50%; } @@ -305,12 +304,12 @@ @media screen and (max-width: $mq-xsmall) { .grid__item { flex: 100% 0 0; + align-self: flex-end; } .grid__item__image { width: 40px; height: 40px; - margin-left: 4em; } .grid__item__image, @@ -318,10 +317,6 @@ flex: initial; } - .grid__item__title { - margin-top: -1em; - } - .grid__card { display: none; } diff --git a/themes/starter/source/assets/scss/partials/_layout.scss b/themes/starter/source/assets/scss/partials/_layout.scss index 4018aa0..7c3d125 100644 --- a/themes/starter/source/assets/scss/partials/_layout.scss +++ b/themes/starter/source/assets/scss/partials/_layout.scss @@ -304,14 +304,15 @@ ol { .no-js { position: absolute; - top: 0; + top: 4em; left: 50%; - transform: translate(-50%, 0); + transform: translateX(-50%); width: 70%; - background: $grey; + background: $white; color: $black; padding: .4em 1em; text-align: center; + z-index: $zIndex--4; } @media screen and (max-width: $mq-medium) { @@ -357,5 +358,5 @@ ol { @media screen and (max-width: $mq-xsmall) { body { font-size: 90%; } - .no-js {left: 0; transform: translate(0, 0); width: 100%; padding: .6em 14% .6em 2em; z-index: $zIndex--4;} + .no-js {left: 0; transform: translate(0, 0); width: 100%; padding: .6em 14% .6em 2em;} }