From 796c6b1c44ef698607a970458d153b851d212389 Mon Sep 17 00:00:00 2001 From: barrystone Date: Tue, 30 Mar 2021 21:17:43 +0800 Subject: [PATCH] [Update] apply RWD for home and header (min-width: 1500, 1800) --- src/assets/scss/header.scss | 31 +++++- src/assets/scss/home/home.scss | 179 ++++++++++++++++++++++++++++----- src/components/Header.vue | 6 +- src/pages/Home.vue | 20 ++-- 4 files changed, 191 insertions(+), 45 deletions(-) diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss index e79a3de..82aaff2 100644 --- a/src/assets/scss/header.scss +++ b/src/assets/scss/header.scss @@ -1,7 +1,28 @@ @import "./color.scss"; +@import "./breakpoint.scss"; + $font-header-link: "Noto Serif CJK TC -Bold"; $font-header-apply: "Noto Serif CJK TC -Black"; +@mixin headerLinksFontSize { + font-size: 12pt; + @media screen and (min-width: $max-width-big) { + font-size: 13.5pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 15pt; + } +} +@mixin headerLinksWidth { + width: 600px; + @media screen and (min-width: $max-width-big) { + width: 630px; + } + @media screen and (min-width: $max-width-big-0) { + width: 680px; + } +} + .header { position: relative; z-index: 99; @@ -29,17 +50,21 @@ $font-header-apply: "Noto Serif CJK TC -Black"; left: 35px; top: 50%; transform: translateY(-50%); + width: 150px; } &__right { float: right; width: 80%; + // background-color: lightgoldenrodyellow; } &-links { + // background-color: lightgray; font-family: $font-header-link; float: right; - width: 600px; + @include headerLinksWidth; + // width: 600px; margin-right: 92px; height: 100%; height: 50px; @@ -64,7 +89,7 @@ $font-header-apply: "Noto Serif CJK TC -Black"; // } a { - font-size: 12pt; + @include headerLinksFontSize; color: $black; padding-bottom: 15px; } @@ -89,8 +114,8 @@ $font-header-apply: "Noto Serif CJK TC -Black"; transform: translateY(-50%); a { - color: $white; font-size: 13pt; + color: $white; position: absolute; top: 50%; left: 40%; diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss index ee79b04..c940fe1 100644 --- a/src/assets/scss/home/home.scss +++ b/src/assets/scss/home/home.scss @@ -1,17 +1,141 @@ @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 + +//section +@mixin sectionTitleHeight { + height: 583px; + @media screen and (min-width: $max-width-big) { + height: 635px; + } + @media screen and (min-width: $max-width-big-0) { + height: 700px; + } +} +@mixin sectionContentHeight { + height: 1900px; + @media screen and (min-width: $max-width-big) { + height: 2050px; + } + @media screen and (min-width: $max-width-big-0) { + height: 2150px; + } +} +// ------------------------------------------- + +//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; + } +} +@mixin homeTitleTopicWidth { + width: 500px; + @media screen and (min-width: $max-width-big) { + width: 600px; + } + @media screen and (min-width: $max-width-big-0) { + width: 700px; + } +} +// ------------------------------------------- + +//home__info +@mixin homeInfoTitleH1Fontsize { + font-size: 26pt; + @media screen and (min-width: $max-width-big) { + font-size: 30pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 35pt; + } +} +@mixin homeInfoTitleH2Fontsize { + &--small { + font-size: 19pt; + } + &--mid { + font-size: 23pt; + } + &--big { + font-size: 31pt; + } + @media screen and (min-width: $max-width-big) { + &--small { + font-size: 22pt; + } + &--mid { + font-size: 27pt; + } + &--big { + font-size: 35pt; + } + } + @media screen and (min-width: $max-width-big-0) { + &--small { + font-size: 26pt; + } + &--mid { + font-size: 32pt; + } + &--big { + font-size: 40pt; + } + } +} +@mixin homeInfoParagraphFontsize { + font-size: 12pt; + @media screen and (min-width: $max-width-big) { + font-size: 15pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 18pt; + } +} +@mixin homeInfoButtonBox { + height: 50px; + width: 245px; + margin-top: 40px; + // background-color: burlywood; + @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%); + } +} +//home__info +@mixin homeInfoImgWidth { + width: 120px; + @media screen and (max-width: $max-width-medium-0) { + width: 80px; + } + @media screen and (min-width: $max-width-big) { + width: 130px; + } + @media screen and (min-width: $max-width-big-0) { + width: 150px; + } +} +// ---------------------------------------------------------------------------------------------- + .section { &-title { margin-top: 150px; - height: 583px; + @include sectionTitleHeight; // background-color: chartreuse; } &-content { - height: 1900px; + @include sectionContentHeight; // background-color: cornsilk; } } @@ -20,7 +144,9 @@ $font-home-button: "Noto Serif CJK TC -Black"; font-family: $font-home; position: relative; &__title { - width: 600px; + // width: 600px; + width: 75%; + // width: 60%; text-align: center; // background-color: cornflowerblue; margin: 0 auto; @@ -33,24 +159,28 @@ $font-home-button: "Noto Serif CJK TC -Black"; margin-bottom: 20px; // background-color: chocolate; height: 80px; - width: 600px; + // width: 600px; + width: 100%; p { - font-size: 18pt; + @include homeTitleFontsize; } } &-topic { + margin: 0 auto; + @include homeTitleTopicWidth; } &-box2 { text-align: center; // background-color: chocolate; height: 80px; - width: 600px; + // width: 600px; + width: 100%; margin: 0 auto; margin-top: 80px; p { - font-size: 18pt; + @include homeTitleFontsize; } } } @@ -67,33 +197,28 @@ $font-home-button: "Noto Serif CJK TC -Black"; &-container { width: 75%; margin-left: 15%; + // background-color: blanchedalmond; } &-title { + // width: 80%; + margin: 0 auto; // background-color: darkgray; + position: relative; // height: 100px; h1 { font-family: $font-home-h1; - font-size: 26pt; + @include homeInfoTitleH1Fontsize; padding-top: 25px; } h2 { font-family: $font-home-h2; - // font-size: 32pt; padding-top: 25px; } &-h2 { - &--small { - font-size: 19pt; - } - &--mid { - font-size: 23pt; - } - &--big { - font-size: 31pt; - } + @include homeInfoTitleH2Fontsize; } } @@ -101,7 +226,7 @@ $font-home-button: "Noto Serif CJK TC -Black"; padding-top: 30px; // background-color: yellow; p { - font-size: 12pt; + @include homeInfoParagraphFontsize; line-height: 33px; a { text-decoration: underline; @@ -111,16 +236,14 @@ $font-home-button: "Noto Serif CJK TC -Black"; } &-buttonsBox { - height: 50px; - width: 245px; - margin-top: 40px; - // background-color: burlywood; + @include homeInfoButtonBox; } } &-button { - font-family: $font-home-button; + // transform: scale(2); font-size: 12.5pt; + font-family: $font-home-button; position: relative; top: 15px; color: $white; @@ -134,12 +257,16 @@ $font-home-button: "Noto Serif CJK TC -Black"; &-squareImg { position: absolute; left: 0; + transform: translateX(-130%); + @include homeInfoImgWidth; } &-appleImg { position: absolute; - top: -30px; - right: 80px; + top: 0; + right: 0; + transform: translateX(25%) translateY(-12%); + @include homeInfoImgWidth; } &-sponsorsImg { diff --git a/src/components/Header.vue b/src/components/Header.vue index 0bf96cd..dc99714 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -4,11 +4,7 @@
diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 7b4fd95..2108094 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -6,7 +6,7 @@

SITCON 學生計算機年會 2021

- +

@@ -17,13 +17,12 @@

-
+

算盤的後裔

Descendants of the abacus

@@ -40,13 +39,12 @@
-
+

關於 SITCON

Students' Information Technology Conference