t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Update] apply RWD for home (max-width: 900,750,500,410,360)

Browse Source
This commit is contained in:
barrystone 2021-04-01 05:42:29 +08:00
parent 6c50b53760
commit 5630c81ea6
4 changed files with 182 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/header.scss
View File

@ -209,7 +209,6 @@ $font-header-apply: 'Noto Serif CJK TC -Black';
&__right { &__right {
float: right; float: right;
width: 80%; width: 80%;
// background-color: lightslategrey;
} }
&-links { &-links {
@ -219,7 +218,6 @@ $font-header-apply: 'Noto Serif CJK TC -Black';
visibility: hidden; visibility: hidden;
} }
// background-color: lightyellow;
@include headerLinksMobilePosition; @include headerLinksMobilePosition;
left: 40%; left: 40%;
select { select {

205
src/assets/scss/home/home.scss
View File

@ -1,9 +1,9 @@
@import "../color.scss"; @import '../color.scss';
@import "../breakpoint.scss"; @import '../breakpoint.scss';
$font-home: "Noto Serif CJK TC -SemiBold"; $font-home: 'Noto Serif CJK TC -SemiBold';
$font-home-h1: "Noto Serif CJK TC -Bold"; $font-home-h1: 'Noto Serif CJK TC -Bold';
$font-home-h2: "Letter Gothic Std Bold"; $font-home-h2: 'Letter Gothic Std Bold';
$font-home-button: "Noto Serif CJK TC -Black"; $font-home-button: 'Noto Serif CJK TC -Black';
//default screen size width: 1440px //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) { @media screen and (min-width: $max-width-big-0) {
height: 700px; 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 { @mixin sectionContentHeight {
height: 1900px; height: 1900px;
@media screen and (max-width: $max-width-medium-1) {
height: 1950px;
}
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
height: 2050px; height: 2050px;
} }
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
height: 2150px; height: 2150px;
} }
@media screen and (max-width: $max-width-medium-1) {
height: 1950px;
}
} }
// ------------------------------------------- // -------------------------------------------
//home__title //home__title
@mixin homeTitleFontsize { @mixin homeTitleFontsize {
font-size: 18pt; font-size: 18pt;
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
font-size: 22pt; font-size: 22pt;
} }
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
font-size: 25pt; 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 { @mixin homeTitleTopicWidth {
width: 500px; width: 500px;
@media screen and (min-width: $max-width-big) { @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) { @media screen and (min-width: $max-width-big-0) {
width: 700px; 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 //home__info
@ -59,28 +117,43 @@ $font-home-button: "Noto Serif CJK TC -Black";
@media screen and (max-width: $max-width-big-1) { @media screen and (max-width: $max-width-big-1) {
width: 85%; width: 85%;
} }
@media screen and (max-width: $max-width-small-1) {
width: 92%;
}
} }
@mixin homeInfoPaddingBottom { @mixin homeInfoPaddingBottom {
padding-bottom: 75px; padding-bottom: 75px;
@media screen and (max-width: $max-width-medium-1) { @media screen and (max-width: $max-width-medium-1) {
padding-bottom: 50px; padding-bottom: 50px;
} }
@media screen and (max-width: $max-width-small-3) {
padding-bottom: 30px;
}
} }
@mixin homeInfoContainerWidth { @mixin homeInfoContainerWidth {
width: 75%; width: 75%;
@media screen and (max-width: $max-width-medium-0) { @media screen and (max-width: $max-width-medium-0) {
width: 80%; width: 80%;
} }
@media screen and (max-width: $max-width-medium-1) {
width: 85%;
}
@media screen and (max-width: $max-width-small-0) { @media screen and (max-width: $max-width-small-0) {
width: 90%; 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 { @mixin homeInfoTittleModifiedWidth {
@media screen and (max-width: $max-width-medium-0) { @media screen and (max-width: $max-width-medium-0) {
width: 90%; width: 90%;
} }
@media screen and (max-width: $max-width-medium-1) { @media screen and (max-width: $max-width-medium-1) {
width: 80%; width: 75%;
} }
} }
@mixin homeInfoTitleH1Fontsize { @mixin homeInfoTitleH1Fontsize {
@ -91,6 +164,15 @@ $font-home-button: "Noto Serif CJK TC -Black";
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
font-size: 35pt; 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 { @mixin homeInfoTitleH2Fontsize {
&--small { &--small {
@ -124,6 +206,56 @@ $font-home-button: "Noto Serif CJK TC -Black";
font-size: 40pt; 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 { @mixin homeInfoParagraphFontsize {
font-size: 12pt; font-size: 12pt;
@ -133,34 +265,54 @@ $font-home-button: "Noto Serif CJK TC -Black";
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
font-size: 18pt; 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 { @mixin homeInfoButtonBox {
height: 50px; height: 50px;
width: 245px; width: 245px;
margin-top: 40px; 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) { @media screen and (min-width: $max-width-big) {
transform: scale(1.2) translateX(8%) translateY(20%); transform: scale(1.2) translateX(8%) translateY(20%);
} }
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
transform: scale(1.4) translateX(14%) translateY(25%); 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 <img> //home__info <img>
@mixin homeInfoImgWidth { @mixin homeInfoImgWidth {
width: 120px; width: 120px;
@media screen and (max-width: $max-width-medium-0) {
width: 110px;
}
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
width: 130px; width: 130px;
} }
@media screen and (min-width: $max-width-big-0) { @media screen and (min-width: $max-width-big-0) {
width: 150px; 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 { @mixin homeInfoSquareImgTranslate {
transform: translateX(-130%); transform: translateX(-130%);
@ -173,6 +325,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
@media screen and (max-width: $max-width-medium-0) { @media screen and (max-width: $max-width-medium-0) {
transform: translateX(100%) translateY(-12%); 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 { &-title {
margin-top: 20px; margin-top: 20px;
@include sectionTitleHeight; @include sectionTitleHeight;
// background-color: chartreuse;
} }
&-content { &-content {
@include sectionContentHeight; @include sectionContentHeight;
// background-color: cornsilk;
} }
} }
@ -193,12 +346,11 @@ $font-home-button: "Noto Serif CJK TC -Black";
font-family: $font-home; font-family: $font-home;
position: relative; position: relative;
&__title { &__title {
width: 75%; @include homeTitleWidth;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding-top: 10px; padding-top: 10px;
position: relative; position: relative;
// background-color: cornflowerblue;
&-box1 { &-box1 {
margin: 0 auto; margin: 0 auto;
@ -206,7 +358,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
margin-bottom: 20px; margin-bottom: 20px;
height: 80px; height: 80px;
width: 100%; width: 100%;
// background-color: chocolate;
p { p {
@include homeTitleFontsize; @include homeTitleFontsize;
} }
@ -219,7 +370,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
&-box2 { &-box2 {
text-align: center; text-align: center;
// background-color: chocolate;
height: 80px; height: 80px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
@ -227,6 +377,8 @@ $font-home-button: "Noto Serif CJK TC -Black";
p { p {
@include homeTitleFontsize; @include homeTitleFontsize;
} }
@include homeTitleBox2PDisplay;
} }
} }
@ -235,19 +387,15 @@ $font-home-button: "Noto Serif CJK TC -Black";
@include homeInfoPaddingBottom; @include homeInfoPaddingBottom;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
// background-color: darkseagreen;
// border: 1px solid blueviolet;
&-container { &-container {
@include homeInfoContainerWidth; @include homeInfoContainerWidth;
margin: 0 auto; margin: 0 auto;
// background-color: blanchedalmond;
} }
&-title { &-title {
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
// background-color: darkgray;
h1 { h1 {
@include homeInfoTitleH1Fontsize; @include homeInfoTitleH1Fontsize;
@ -279,8 +427,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
&-paragraph { &-paragraph {
clear: both; clear: both;
padding-top: 30px; @include homeInfoParagraphPadding;
// background-color: yellow;
p { p {
@include homeInfoParagraphFontsize; @include homeInfoParagraphFontsize;
line-height: 33px; line-height: 33px;

2
src/components/Header.vue
View File

@ -70,7 +70,7 @@
><a href="/2021/team">籌備團隊</a></option ><a href="/2021/team">籌備團隊</a></option
> >
</select> </select>
<div class="header-links--mobile-bg"></div> <!-- <div class="header-links--mobile-bg"></div> -->
</div> </div>
<div class="header-apply"> <div class="header-apply">
<a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank"> <a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank">

6
src/pages/Home.vue
View File

@ -9,9 +9,13 @@
<img src="~@/assets/images/home/home-topic.svg" width="100%" /> <img src="~@/assets/images/home/home-topic.svg" width="100%" />
</div> </div>
<div class="home__title-box2"> <div class="home__title-box2">
<p> <p class="home__title-box2--p1">
05/29 • 中央研究院－人文社會科學館 •免費報名 05/29 • 中央研究院－人文社會科學館 •免費報名
</p> </p>
<p class="home__title-box2--p2">
05/29 <br /><br />
中央研究院－人文社會科學館 •免費報名
</p>
</div> </div>
</div> </div>
</section> </section>