From 6c50b53760f22e8d0badbbbe9a03de1ccf956bc1 Mon Sep 17 00:00:00 2001 From: barrystone Date: Thu, 1 Apr 2021 03:27:47 +0800 Subject: [PATCH] [Update] apply RWD for header (min-width: 900,750,500,410,360) --- src/App.vue | 20 +-- src/assets/scss/header.scss | 220 ++++++++++++++++++++++++++--- src/components/FooterPrimary.vue | 154 ++++++++++---------- src/components/FooterSecondary.vue | 124 ++++++++-------- src/components/Header.vue | 12 +- src/pages/Agenda.vue | 2 +- src/pages/Home.vue | 6 +- src/pages/Sponsor.vue | 2 +- src/pages/Team.vue | 2 +- src/pages/Traffic.vue | 2 +- src/pages/Venue.vue | 2 +- 11 files changed, 363 insertions(+), 183 deletions(-) diff --git a/src/App.vue b/src/App.vue index d875017..9386809 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,26 +7,26 @@ diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss index e0072d2..38aa854 100644 --- a/src/assets/scss/header.scss +++ b/src/assets/scss/header.scss @@ -1,9 +1,55 @@ -@import "./color.scss"; -@import "./breakpoint.scss"; +@import './color.scss'; +@import './breakpoint.scss'; -$font-header-link: "Noto Serif CJK TC -Bold"; -$font-header-apply: "Noto Serif CJK TC -Black"; +$font-header-link: 'Noto Serif CJK TC -Bold'; +$font-header-apply: 'Noto Serif CJK TC -Black'; +@mixin headerWidth { + width: 88%; + @media screen and (max-width: $max-width-small-0) { + width: 92%; + } +} + +@mixin headerHeight { + height: 62px; + @media screen and (max-width: $max-width-medium-1) { + height: 75px; + } +} + +// ------------------------------------------- + +// header-logo +@mixin headerLogoPosition { + position: absolute; + left: 35px; + top: 50%; + + @media screen and (max-width: $max-width-small-1) { + left: 20px; + } + @media screen and (max-width: $max-width-small-3) { + left: 15px; + } +} +@mixin headerLogoWidth { + width: 150px; + + @media screen and (max-width: $max-width-small-1) { + width: 120px; + } + @media screen and (max-width: $max-width-small-2) { + width: 105px; + } + @media screen and (max-width: $max-width-small-3) { + width: 98px; + } +} + +// ------------------------------------------- + +// header-links @mixin headerLinksFontSize { font-size: 12pt; @media screen and (min-width: $max-width-big) { @@ -23,11 +69,10 @@ $font-header-apply: "Noto Serif CJK TC -Black"; width: 680px; } } - @mixin headerLinksMarginRight { margin-right: 92px; @media screen and (max-width: $max-width-medium-0) { - margin-right: -20px; + margin-right: -35px; } } @mixin headerLinksLiPadding { @@ -37,13 +82,110 @@ $font-header-apply: "Noto Serif CJK TC -Black"; } } +// ------------------------------------------- + +// header-apply +@mixin headerApplyWidthAndHeight { + width: 92px; + height: 38px; + @media screen and (max-width: $max-width-medium-1) { + width: 85px; + height: 43px; + } + @media screen and (max-width: $max-width-small-1) { + width: 75px; + height: 40px; + } + @media screen and (max-width: $max-width-small-2) { + width: 65px; + height: 38px; + } + @media screen and (max-width: $max-width-small-3) { + width: 55px; + height: 35px; + } +} +@mixin headerApplyFontsize { + font-size: 13pt; + @media screen and (max-width: $max-width-medium-1) { + font-size: 12pt; + } + @media screen and (max-width: $max-width-small-1) { + font-size: 11pt; + } + @media screen and (max-width: $max-width-small-2) { + font-size: 9pt; + } + @media screen and (max-width: $max-width-small-3) { + font-size: 8pt; + } +} + +// ------------------------------------------- + +// header-links--mobile +@mixin headerLinksMobilePosition { + position: relative; + left: 40%; + top: 12px; + + @media screen and (max-width: $max-width-small-0) { + left: 35%; + } + @media screen and (max-width: $max-width-small-1) { + left: 28%; + } +} +@mixin headerLinksMobileSelectWidth { + width: 150px; + @media screen and (max-width: $max-width-small-0) { + width: 120px; + } + @media screen and (max-width: $max-width-small-1) { + width: 110px; + } + @media screen and (max-width: $max-width-small-2) { + width: 95px; + } + @media screen and (max-width: $max-width-small-3) { + width: 85px; + } +} +@mixin headerLinksMobileSelectFontsize { + font-size: 14pt; + + @media screen and (max-width: $max-width-small-0) { + font-size: 13pt; + } + @media screen and (max-width: $max-width-small-2) { + font-size: 11pt; + } + @media screen and (max-width: $max-width-small-3) { + font-size: 9pt; + } +} +@mixin headerLinksMobileSelectPadding { + padding-left: 10px; + padding-bottom: 10px; + + @media screen and (max-width: $max-width-small-0) { + padding-left: 3px; + padding-bottom: 10px; + } + @media screen and (max-width: $max-width-small-3) { + padding-bottom: 7px; + } +} + +// ---------------------------------------------------------------------------------------------- + .header { z-index: 99; position: relative; top: 35px; - left: 6%; - width: 88%; - height: 62px; + margin: 0 auto; + @include headerWidth; + @include headerHeight; border-radius: 73px; box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22); background-color: $white; @@ -51,7 +193,6 @@ $font-header-apply: "Noto Serif CJK TC -Black"; &--sticky { position: sticky; z-index: 99; - left: 6%; margin-top: 60px; } &__left { @@ -60,16 +201,15 @@ $font-header-apply: "Noto Serif CJK TC -Black"; } &-logo { - position: absolute; - left: 35px; - top: 50%; + @include headerLogoPosition; + @include headerLogoWidth; transform: translateY(-50%); - width: 150px; } &__right { float: right; width: 80%; + // background-color: lightslategrey; } &-links { @@ -78,10 +218,49 @@ $font-header-apply: "Noto Serif CJK TC -Black"; display: none; visibility: hidden; } - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); + + // background-color: lightyellow; + @include headerLinksMobilePosition; + left: 40%; + select { + z-index: 99; + @include headerLinksMobileSelectWidth; + height: 60px; + @include headerLinksMobileSelectPadding; + font-family: $font-header-link; + @include headerLinksMobileSelectFontsize; + background-color: $white; + border: none; + border-bottom: 4px solid $indigo-blue; + + &:focus { + border: none; + outline: none; + } + + option { + text-align: center; + @include headerLinksMobileSelectFontsize; + } + } + select:focus ~ &-bg { + opacity: 1; + display: block; + transition: 0.3s linear; + } + + &-bg { + z-index: 90; + opacity: 0; + display: none; + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: rgba($black, 0.5); + backdrop-filter: blur(3px); + } } @media screen and (max-width: $max-width-medium-1) { display: none; @@ -126,8 +305,7 @@ $font-header-apply: "Noto Serif CJK TC -Black"; &-apply { font-family: $font-header-apply; - width: 92px; - height: 38px; + @include headerApplyWidthAndHeight; border-radius: 38px; background-color: $indigo-blue; position: absolute; @@ -136,7 +314,7 @@ $font-header-apply: "Noto Serif CJK TC -Black"; transform: translateY(-50%); a { - font-size: 13pt; + @include headerApplyFontsize; color: $white; position: absolute; top: 50%; diff --git a/src/components/FooterPrimary.vue b/src/components/FooterPrimary.vue index 715e131..68e26c6 100644 --- a/src/components/FooterPrimary.vue +++ b/src/components/FooterPrimary.vue @@ -1,87 +1,87 @@ diff --git a/src/components/FooterSecondary.vue b/src/components/FooterSecondary.vue index 8b7976f..f9b4f4f 100644 --- a/src/components/FooterSecondary.vue +++ b/src/components/FooterSecondary.vue @@ -1,72 +1,72 @@ diff --git a/src/components/Header.vue b/src/components/Header.vue index 7b4522d..e65623c 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -47,11 +47,12 @@ +
+
@@ -80,10 +82,10 @@ diff --git a/src/pages/Agenda.vue b/src/pages/Agenda.vue index f1b714e..2389169 100644 --- a/src/pages/Agenda.vue +++ b/src/pages/Agenda.vue @@ -1,6 +1,6 @@ diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue index 1a273a7..975930b 100644 --- a/src/pages/Sponsor.vue +++ b/src/pages/Sponsor.vue @@ -1,6 +1,6 @@