From 3acb6fdfd1fa9d38cf21d01f6a7fd0fade37e4da Mon Sep 17 00:00:00 2001 From: Kyle Ruane Date: Sat, 16 Mar 2019 16:41:10 -0400 Subject: [PATCH 1/2] Few mobile style updates --- assets/css/partials/_main.scss | 12 ++++++------ assets/css/partials/_mobile.scss | 8 ++++---- assets/css/partials/_scaffolding.scss | 4 ++-- assets/css/partials/_stream.scss | 14 +++++++------- assets/css/partials/_variables.scss | 5 +++++ 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/assets/css/partials/_main.scss b/assets/css/partials/_main.scss index 4029329f..f849459e 100644 --- a/assets/css/partials/_main.scss +++ b/assets/css/partials/_main.scss @@ -34,21 +34,21 @@ height: 100%; position: absolute; background: $color_white; - padding-top: 80px; + margin-top: 80px; width: 100%; @include xs { //width: 53%; width: calc(100% - 280px); - padding-top: 60px; + margin-top: 52px; } .marks-heading { color: $color_lightest; position: fixed; width: 100%; z-index: 200; - height: 60px; + height: 52px; left: 0; - top: 60px; + top: 52px; background: transparent; margin: 0; background: $color_white; @@ -86,7 +86,7 @@ font-size: 11px; line-height: 28px; background: $color_white; - height: 60px; + height: 52px; position: relative; @include sm { padding: 16px 20px 16px 30px; @@ -232,7 +232,7 @@ h2 { font-size: 13px; font-weight: 600; - margin: 7px 0; + margin: 3px 0; @include sm { font-size: 16px; margin: 9px 0; diff --git a/assets/css/partials/_mobile.scss b/assets/css/partials/_mobile.scss index 15b53e03..3da6ba60 100644 --- a/assets/css/partials/_mobile.scss +++ b/assets/css/partials/_mobile.scss @@ -3,7 +3,7 @@ .mobile-header { display: block; - height: 60px; + height: 52px; position: fixed; background: $color_darker; width: 100%; @@ -19,7 +19,7 @@ margin-top: -10px; left: 50%; margin-left: -29px; - width: 58px; + width: 64px; height: 18px; text-align: center; svg { @@ -28,8 +28,8 @@ } } .menu-activator { - width: 64px; - height: 60px; + width: 52px; + height: 52px; position: absolute; left: 0; top: 0; diff --git a/assets/css/partials/_scaffolding.scss b/assets/css/partials/_scaffolding.scss index 8fcf6c3b..c43206e7 100644 --- a/assets/css/partials/_scaffolding.scss +++ b/assets/css/partials/_scaffolding.scss @@ -60,7 +60,7 @@ body { position: absolute; width: 200%; height: 100%; - top: 60px; + top: 52px; left: -20%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; @@ -75,7 +75,7 @@ body { @include xs { width: calc(100% + 560px); left: -280px; - height: calc(100% - 60px); + height: calc(100% - 52px); } &.nav-active { left: 0; diff --git a/assets/css/partials/_stream.scss b/assets/css/partials/_stream.scss index 4587810f..28386cd2 100644 --- a/assets/css/partials/_stream.scss +++ b/assets/css/partials/_stream.scss @@ -2,7 +2,7 @@ .marks_list { .mark { border-bottom: 1px solid $color_lighter; - padding: 16px 52px 18px 52px; + padding: 18px 52px 20px 52px; position: relative; -webkit-transition: all .3s; transition: all .3s; @@ -61,15 +61,15 @@ h2 { margin: 0 0 4px; font-weight: 400; - font-size: 15px; + font-size: 17px; line-height: 1.25; @include sm { margin:0 0 10px; - font-size: 16px; - line-height: 1.4; + font-size: 18px; + line-height: 1.25; } @include md { - font-size: 18px; + font-size: 20px; } @include lg { font-size: 24px; @@ -203,8 +203,8 @@ fill: $color_dark_gray; } } - &:hover { - @include sm { + @include hoverable { + &:hover { border-color: transparentize($color_dark_gray, .1); i { opacity: .4; diff --git a/assets/css/partials/_variables.scss b/assets/css/partials/_variables.scss index 6e66c1ff..5b178d30 100644 --- a/assets/css/partials/_variables.scss +++ b/assets/css/partials/_variables.scss @@ -95,6 +95,11 @@ $nav_pane_lg: $nav_lg - $nav_rail_lg; @content; } } +@mixin hoverable { + @media (hover: hover) { + @content; + } +} @mixin drop-shadow-border() { box-shadow: 0 2px 3px 0 rgba(0,0,0,0.08), 0 1px 0 0 rgba(0,0,0,0.02); From b405dd28faca06971eb0197f439ebd923dac0f6e Mon Sep 17 00:00:00 2001 From: Kyle Ruane Date: Sat, 16 Mar 2019 17:25:25 -0400 Subject: [PATCH 2/2] Fix spacing on mobile search bar --- assets/css/partials/_main.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/css/partials/_main.scss b/assets/css/partials/_main.scss index f849459e..a081be3d 100644 --- a/assets/css/partials/_main.scss +++ b/assets/css/partials/_main.scss @@ -95,7 +95,7 @@ .search-bar { height: 100%; width: 100%; - padding: 14px 100px 16px 18px; + padding: 10px 100px 10px 18px; background: $color_white; position: absolute; display: none; @@ -133,9 +133,9 @@ button { display: block; height: 26px; - width: 42px; + width: 40px; background: $color_blue; - border-radius: 4px; + border-radius: 3px; color: $color_white; padding: 4px 10px 6px; text-align: center; @@ -143,10 +143,10 @@ font-weight: 600; font-size: 13px; position: absolute; - right: 48px; + right: 42px; top: 50%; margin-top: -13px; - box-shadow: 0 1px 3px 0 transparentize($color_darkest, .93), 0 2px 5px 0 transparentize($color_darkest, .9), 0 12px 40px -20px transparentize(white, .5) inset; + box-shadow: 0 1px 3px 0 transparentize($color_darkest, .96), 0 2px 5px 0 transparentize($color_darkest, .94), 0 12px 40px -20px transparentize(white, .5) inset; @include sm { height: 32px; margin-top: -17px; @@ -161,7 +161,7 @@ position: absolute; top: 50%; margin-top: -14px; - right: 12px; + right: 9px; border-radius: 50%; @include sm { width: 32px;