From 5630c81ea6d9229d7e94952fe955f22e08004b14 Mon Sep 17 00:00:00 2001 From: barrystone Date: Thu, 1 Apr 2021 05:42:29 +0800 Subject: [PATCH] [Update] apply RWD for home (max-width: 900,750,500,410,360) --- src/assets/scss/header.scss | 2 - src/assets/scss/home/home.scss | 205 ++++++++++++++++++++++++++++----- src/components/Header.vue | 2 +- src/pages/Home.vue | 6 +- 4 files changed, 182 insertions(+), 33 deletions(-) diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss index 38aa854..6219f35 100644 --- a/src/assets/scss/header.scss +++ b/src/assets/scss/header.scss @@ -209,7 +209,6 @@ $font-header-apply: 'Noto Serif CJK TC -Black'; &__right { float: right; width: 80%; - // background-color: lightslategrey; } &-links { @@ -219,7 +218,6 @@ $font-header-apply: 'Noto Serif CJK TC -Black'; visibility: hidden; } - // background-color: lightyellow; @include headerLinksMobilePosition; left: 40%; select { diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss index b6e7b8a..41cb218 100644 --- a/src/assets/scss/home/home.scss +++ b/src/assets/scss/home/home.scss @@ -1,9 +1,9 @@ -@import "../color.scss"; -@import "../breakpoint.scss"; -$font-home: "Noto Serif CJK TC -SemiBold"; -$font-home-h1: "Noto Serif CJK TC -Bold"; -$font-home-h2: "Letter Gothic Std Bold"; -$font-home-button: "Noto Serif CJK TC -Black"; +@import '../color.scss'; +@import '../breakpoint.scss'; +$font-home: 'Noto Serif CJK TC -SemiBold'; +$font-home-h1: 'Noto Serif CJK TC -Bold'; +$font-home-h2: 'Letter Gothic Std Bold'; +$font-home-button: 'Noto Serif CJK TC -Black'; //default screen size width: 1440px @@ -17,31 +17,60 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (min-width: $max-width-big-0) { height: 700px; } + @media screen and (max-width: $max-width-small-1) { + height: 535px; + } + @media screen and (max-width: $max-width-small-3) { + height: 500px; + } } @mixin sectionContentHeight { height: 1900px; - @media screen and (max-width: $max-width-medium-1) { - height: 1950px; - } @media screen and (min-width: $max-width-big) { height: 2050px; } @media screen and (min-width: $max-width-big-0) { height: 2150px; } + @media screen and (max-width: $max-width-medium-1) { + height: 1950px; + } } // ------------------------------------------- //home__title @mixin homeTitleFontsize { font-size: 18pt; + @media screen and (min-width: $max-width-big) { font-size: 22pt; } @media screen and (min-width: $max-width-big-0) { font-size: 25pt; } + @media screen and (max-width: $max-width-small-0) { + font-size: 17pt; + } + @media screen and (max-width: $max-width-small-1) { + font-size: 15pt; + } + @media screen and (max-width: $max-width-small-2) { + font-size: 13pt; + } + @media screen and (max-width: $max-width-small-3) { + font-size: 11pt; + } } +@mixin homeTitleWidth { + width: 75%; + @media screen and (max-width: $max-width-big-1) { + width: 85%; + } + @media screen and (max-width: $max-width-small-1) { + width: 92%; + } +} + @mixin homeTitleTopicWidth { width: 500px; @media screen and (min-width: $max-width-big) { @@ -50,7 +79,36 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (min-width: $max-width-big-0) { width: 700px; } + @media screen and (max-width: $max-width-small-0) { + width: 400px; + } + @media screen and (max-width: $max-width-small-1) { + width: 340px; + } + @media screen and (max-width: $max-width-small-2) { + width: 320px; + } + @media screen and (max-width: $max-width-small-3) { + width: 270px; + } } +@mixin homeTitleBox2PDisplay { + &--p1 { + display: block; + } + &--p2 { + display: none; + } + @media screen and (max-width: $max-width-small-0) { + &--p1 { + display: none; + } + &--p2 { + display: block; + } + } +} + // ------------------------------------------- //home__info @@ -59,28 +117,43 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (max-width: $max-width-big-1) { width: 85%; } + @media screen and (max-width: $max-width-small-1) { + width: 92%; + } } @mixin homeInfoPaddingBottom { padding-bottom: 75px; @media screen and (max-width: $max-width-medium-1) { padding-bottom: 50px; } + @media screen and (max-width: $max-width-small-3) { + padding-bottom: 30px; + } } @mixin homeInfoContainerWidth { width: 75%; @media screen and (max-width: $max-width-medium-0) { width: 80%; } + @media screen and (max-width: $max-width-medium-1) { + width: 85%; + } @media screen and (max-width: $max-width-small-0) { width: 90%; } + @media screen and (max-width: $max-width-small-2) { + width: 94%; + } + @media screen and (max-width: $max-width-small-3) { + width: 98%; + } } @mixin homeInfoTittleModifiedWidth { @media screen and (max-width: $max-width-medium-0) { width: 90%; } @media screen and (max-width: $max-width-medium-1) { - width: 80%; + width: 75%; } } @mixin homeInfoTitleH1Fontsize { @@ -91,6 +164,15 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (min-width: $max-width-big-0) { font-size: 35pt; } + @media screen and (max-width: $max-width-small-0) { + font-size: 22pt; + } + @media screen and (max-width: $max-width-small-1) { + font-size: 20pt; + } + @media screen and (max-width: $max-width-small-1) { + font-size: 18pt; + } } @mixin homeInfoTitleH2Fontsize { &--small { @@ -124,6 +206,56 @@ $font-home-button: "Noto Serif CJK TC -Black"; font-size: 40pt; } } + @media screen and (max-width: $max-width-medium-0) { + &--small { + font-size: 14pt; + } + &--mid { + font-size: 17pt; + } + &--big { + font-size: 24pt; + } + } + @media screen and (max-width: $max-width-small-0) { + &--small { + font-size: 13pt; + } + &--mid { + font-size: 15pt; + } + &--big { + font-size: 21pt; + } + } + @media screen and (max-width: $max-width-small-1) { + &--big { + font-size: 16pt; + } + } + @media screen and (max-width: $max-width-small-2) { + &--small { + font-size: 11pt; + } + } + @media screen and (max-width: $max-width-small-2) { + &--small { + font-size: 9pt; + } + &--mid { + font-size: 12pt; + } + &--big { + font-size: 14pt; + } + } +} + +@mixin homeInfoParagraphPadding { + padding-top: 30px; + @media screen and (max-width: $max-width-small-1) { + padding-top: 20px; + } } @mixin homeInfoParagraphFontsize { font-size: 12pt; @@ -133,34 +265,54 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (min-width: $max-width-big-0) { font-size: 18pt; } + @media screen and (max-width: $max-width-small-0) { + font-size: 11pt; + } + @media screen and (max-width: $max-width-small-3) { + font-size: 10pt; + } } @mixin homeInfoButtonBox { height: 50px; width: 245px; margin-top: 40px; - // background-color: burlywood; - @media screen and (max-width: $max-width-medium-1) { - transform: scale(1.2) translateX(8%) translateY(5%); - } @media screen and (min-width: $max-width-big) { transform: scale(1.2) translateX(8%) translateY(20%); } @media screen and (min-width: $max-width-big-0) { transform: scale(1.4) translateX(14%) translateY(25%); } + @media screen and (max-width: $max-width-medium-1) { + transform: scale(1.2) translateX(8%) translateY(5%); + } + @media screen and (max-width: $max-width-small-1) { + transform: scale(1.1) translateX(5%) translateY(5%); + } + @media screen and (max-width: $max-width-small-1) { + transform: scale(0.9) translateX(-6%) translateY(-20%); + } } //home__info @mixin homeInfoImgWidth { width: 120px; - @media screen and (max-width: $max-width-medium-0) { - width: 110px; - } @media screen and (min-width: $max-width-big) { width: 130px; } @media screen and (min-width: $max-width-big-0) { width: 150px; } + @media screen and (max-width: $max-width-medium-0) { + width: 110px; + } + @media screen and (max-width: $max-width-small-1) { + width: 90px; + } + @media screen and (max-width: $max-width-small-2) { + width: 80px; + } + @media screen and (max-width: $max-width-small-3) { + width: 70px; + } } @mixin homeInfoSquareImgTranslate { transform: translateX(-130%); @@ -173,6 +325,9 @@ $font-home-button: "Noto Serif CJK TC -Black"; @media screen and (max-width: $max-width-medium-0) { transform: translateX(100%) translateY(-12%); } + @media screen and (max-width: $max-width-small-2) { + transform: translateX(90%) translateY(-12%); + } } // ---------------------------------------------------------------------------------------------- @@ -181,11 +336,9 @@ $font-home-button: "Noto Serif CJK TC -Black"; &-title { margin-top: 20px; @include sectionTitleHeight; - // background-color: chartreuse; } &-content { @include sectionContentHeight; - // background-color: cornsilk; } } @@ -193,12 +346,11 @@ $font-home-button: "Noto Serif CJK TC -Black"; font-family: $font-home; position: relative; &__title { - width: 75%; + @include homeTitleWidth; text-align: center; margin: 0 auto; padding-top: 10px; position: relative; - // background-color: cornflowerblue; &-box1 { margin: 0 auto; @@ -206,7 +358,6 @@ $font-home-button: "Noto Serif CJK TC -Black"; margin-bottom: 20px; height: 80px; width: 100%; - // background-color: chocolate; p { @include homeTitleFontsize; } @@ -219,7 +370,6 @@ $font-home-button: "Noto Serif CJK TC -Black"; &-box2 { text-align: center; - // background-color: chocolate; height: 80px; width: 100%; margin: 0 auto; @@ -227,6 +377,8 @@ $font-home-button: "Noto Serif CJK TC -Black"; p { @include homeTitleFontsize; } + + @include homeTitleBox2PDisplay; } } @@ -235,19 +387,15 @@ $font-home-button: "Noto Serif CJK TC -Black"; @include homeInfoPaddingBottom; margin: 0 auto; position: relative; - // background-color: darkseagreen; - // border: 1px solid blueviolet; &-container { @include homeInfoContainerWidth; margin: 0 auto; - // background-color: blanchedalmond; } &-title { margin: 0 auto; position: relative; - // background-color: darkgray; h1 { @include homeInfoTitleH1Fontsize; @@ -279,8 +427,7 @@ $font-home-button: "Noto Serif CJK TC -Black"; &-paragraph { clear: both; - padding-top: 30px; - // background-color: yellow; + @include homeInfoParagraphPadding; p { @include homeInfoParagraphFontsize; line-height: 33px; diff --git a/src/components/Header.vue b/src/components/Header.vue index e65623c..53e32a8 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -70,7 +70,7 @@ >籌備團隊 -
+
diff --git a/src/pages/Home.vue b/src/pages/Home.vue index d1c780a..93a92c9 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -9,9 +9,13 @@
-

+

05/29 • 中央研究院－人文社會科學館 •免費報名

+

+ 05/29

+ 中央研究院－人文社會科學館 •免費報名 +