From 7c765732b5ad0e9063bcf4dabccc56101e5d3532 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Sun, 6 Oct 2024 17:22:33 +0200 Subject: [PATCH] clean up mobile styles for fellows --- .../themes/blankslate-child/stylus/main.css | 56 ++++++++++++++++--- .../stylus/require/banner--main.styl | 40 ++++++------- .../stylus/require/header.styl | 36 +++++++++--- .../stylus/require/meta--fellows-single.styl | 21 ++++++- 4 files changed, 116 insertions(+), 37 deletions(-) diff --git a/wp-content/themes/blankslate-child/stylus/main.css b/wp-content/themes/blankslate-child/stylus/main.css index b6239abd..bd01acbb 100644 --- a/wp-content/themes/blankslate-child/stylus/main.css +++ b/wp-content/themes/blankslate-child/stylus/main.css @@ -122,6 +122,29 @@ body.logged-in[data-alert="true"] .wt_banner-alert__container { body.logged-in[data-alert="true"] .wt_header { top: 104px !important; } +@media all and (max-width: 768px) { + body.archive, + body.page-template { + margin-top: 56px; + } + body.logged-in { + margin-top: 46px; + } + body.logged-in .wt_header { + top: 46px; + } + body.logged-in .wt_header__nav--mobile, + body.logged-in .wt_header__secondary--mobile { + top: 46px; + } + body.logged-in.page-parent, + body.logged-in.page-child, + body.logged-in.single-languages, + body.logged-in.single-videos, + body.logged-in.archive { + margin-top: 102px; + } +} .wt_header { z-index: 10; display: flex; @@ -368,12 +391,6 @@ body.logged-in[data-alert="true"] .wt_header { } } @media all and (max-width: 768px) { - body { - padding-top: 102px; - } - body.logged-in .wt_header { - top: 46px; - } .wt_header__nav, .wt_header__secondary { display: none; @@ -390,7 +407,7 @@ body.logged-in[data-alert="true"] .wt_header { overflow-y: scroll; box-sizing: border-box; padding: 6rem; - background: rgba(255,255,255,0.97); + background: #fffcef; transition: 0.2s right ease-in-out; -ms-overflow-style: none; scrollbar-width: none; @@ -465,7 +482,7 @@ body.logged-in[data-alert="true"] .wt_header { display: none; z-index: 7; position: fixed; - top: 5rem; + top: 1rem; right: 1rem; } .wt_header.transparent-background .wt_header__mobile-buttons button:first-of-type { @@ -587,6 +604,9 @@ body.home .wt_banner { height: 15vh !important; margin-bottom: 0; } + .wt_banner p.caption { + white-space: pre-line; + } .wt_banner__copy { display: none; } @@ -2413,6 +2433,26 @@ text .wt_fellow__meta--links ul li { display: block !important; } +@media all and (max-width: 768px) { + .wt_fellow__meta { + max-width: initial; + } + .wt_fellow__meta .head { + flex-direction: column; + margin-bottom: 32px; + } + .wt_fellow__meta .head div.image, + .wt_fellow__meta .head div.name { + width: 100%; + } + .wt_fellow__meta .head div.image { + padding-bottom: 56.25%; + margin-bottom: 16px; + } + .wt_fellow__meta .head div.name { + padding: 0; + } +} .wt_fellow__bio { width: 90%; max-width: 600px; diff --git a/wp-content/themes/blankslate-child/stylus/require/banner--main.styl b/wp-content/themes/blankslate-child/stylus/require/banner--main.styl index 47b63314..a9705104 100644 --- a/wp-content/themes/blankslate-child/stylus/require/banner--main.styl +++ b/wp-content/themes/blankslate-child/stylus/require/banner--main.styl @@ -2,7 +2,7 @@ body &.home .wt_banner height calc(100vh/3*2) - + .wt_banner position relative width 100% @@ -14,7 +14,7 @@ body background-position center background-size cover background-repeat no-repeat - + &:before content '' position absolute @@ -23,7 +23,7 @@ body height 100% background rgba(0,0,0,.3) background linear-gradient(90deg, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, .3) 80%) - + &__copy position absolute top 50% @@ -31,28 +31,28 @@ body transform translateY(-50%) width 45rem margin-top 80px - + &--mobile display none - + .wt_text &--header text--header($parchment) - + &--body margin 3rem 0 text--body($parchment) - + strong text--strong($parchment) - + .wt_button--large button--large($parchment,$blue) - + i margin-left 0.5rem font-size 1.6rem - + p.caption position absolute bottom 0 @@ -60,7 +60,6 @@ body white-space pre text--strong($parchment) - @media all and (max-height:$shortScreen) and (orientation:landscape) .wt_banner height calc(100vh/5*3) @@ -68,37 +67,40 @@ body @media all and (max-width:$smallScreen) .wt_banner height calc(100vh/5*2.5) - + @media all and (max-width:$mobile) .wt_banner height 15vh !important margin-bottom 0 - + + p.caption + white-space pre-line + &__copy display none - + &--mobile display block margin-bottom 3rem box-sizing border-box padding 3rem background $purple - + .wt_text &--header text--header($parchment) font-size 4rem - + &--body margin 3rem 0 text--body($parchment) - + strong text--strong($parchment) - + .wt_button--large button--large($white,$purple) - + i margin-left 0.5rem font-size 1.6rem \ No newline at end of file diff --git a/wp-content/themes/blankslate-child/stylus/require/header.styl b/wp-content/themes/blankslate-child/stylus/require/header.styl index bdc980a7..e0501c6d 100644 --- a/wp-content/themes/blankslate-child/stylus/require/header.styl +++ b/wp-content/themes/blankslate-child/stylus/require/header.styl @@ -32,6 +32,31 @@ body .wt_header top 104px !important +@media all and (max-width:$mobile) + body + &.archive, + &.page-template + margin-top 56px + + &.logged-in + margin-top 46px + + .wt_header + top 46px + + .wt_header + &__nav, + &__secondary + &--mobile + top 46px + + &.page-parent, + &.page-child, + &.single-languages, + &.single-videos, + &.archive + margin-top 46px + 56px + .wt_header z-index 10 display flex @@ -268,13 +293,6 @@ body margin-right 3rem @media all and (max-width:$mobile) - body - padding-top 102px - - &.logged-in - .wt_header - top 46px - .wt_header &__nav, &__secondary @@ -291,7 +309,7 @@ body overflow-y scroll box-sizing border-box padding 6rem - background $whiteTransparent + background $parchment transition .2s right ease-in-out -ms-overflow-style none scrollbar-width none @@ -342,7 +360,7 @@ body display none z-index 7 position fixed - top 5rem + top 1rem right 1rem &.transparent-background diff --git a/wp-content/themes/blankslate-child/stylus/require/meta--fellows-single.styl b/wp-content/themes/blankslate-child/stylus/require/meta--fellows-single.styl index ad0135d8..5d31e4e8 100644 --- a/wp-content/themes/blankslate-child/stylus/require/meta--fellows-single.styl +++ b/wp-content/themes/blankslate-child/stylus/require/meta--fellows-single.styl @@ -104,4 +104,23 @@ &--links ul li - display block !important \ No newline at end of file + display block !important + +@media all and (max-width:$mobile) + .wt_fellow__meta + max-width initial + + .head + flex-direction column + margin-bottom 32px + + div.image, + div.name + width 100% + + div.image + padding-bottom 56.25% + margin-bottom 16px + + div.name + padding 0 \ No newline at end of file