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

apply RWD for home and header (max-width: 1300, 1100),add mobile header

Browse Source
This commit is contained in:
barrystone 2021-03-31 17:34:12 +08:00
parent add1f3bc82
commit 27b71b73c7
5 changed files with 138 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/scss/breakpoint.scss
View File

@ -6,7 +6,7 @@ $max-width-4: 415px;
$max-width-35: 480px; $max-width-35: 480px;
//agenda.scsss breakpoint //agenda.scsss and home.scss breakpoint
$max-width-big-0: 1800px; $max-width-big-0: 1800px;
$max-width-big: 1500px; $max-width-big: 1500px;
$max-width-medium-0: 1100px; $max-width-medium-0: 1100px;
@ -16,6 +16,9 @@ $max-width-small-1: 500px;
$max-width-small-2: 410px; $max-width-small-2: 410px;
$max-width-small-3: 360px; $max-width-small-3: 360px;
// home.scss breakpoint
$max-width-big-1: 1300px;
@mixin xs { @mixin xs {
@media (max-width: $max-width-4) { @media (max-width: $max-width-4) {
@content; @content;

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

@ -15,6 +15,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
} }
@mixin headerLinksWidth { @mixin headerLinksWidth {
width: 600px; width: 600px;
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
width: 630px; width: 630px;
} }
@ -23,10 +24,23 @@ $font-header-apply: "Noto Serif CJK TC -Black";
} }
} }
@mixin headerLinksMarginRight {
margin-right: 92px;
@media screen and (max-width: $max-width-medium-0) {
margin-right: -20px;
}
}
@mixin headerLinksLiPadding {
padding: 22px 20px;
@media screen and (max-width: $max-width-medium-0) {
padding: 22px 8px;
}
}
.header { .header {
z-index: 99; z-index: 99;
position: relative; position: relative;
top: 40px; top: 35px;
left: 6%; left: 6%;
width: 88%; width: 88%;
height: 62px; height: 62px;
@ -59,10 +73,25 @@ $font-header-apply: "Noto Serif CJK TC -Black";
} }
&-links { &-links {
&--mobile {
@media screen and (min-width: $max-width-medium-1) {
display: none;
visibility: hidden;
}
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: $max-width-medium-1) {
display: none;
visibility: hidden;
}
font-family: $font-header-link; font-family: $font-header-link;
float: right; float: right;
@include headerLinksWidth; @include headerLinksWidth;
margin-right: 92px; @include headerLinksMarginRight;
height: 100%; height: 100%;
height: 50px; height: 50px;
top: 6px; top: 6px;
@ -77,10 +106,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
float: left; float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding: 22px 20px;
height: 100%; height: 100%;
display: block; display: block;
text-align: left; text-align: left;
@include headerLinksLiPadding;
a { a {
@include headerLinksFontSize; @include headerLinksFontSize;

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

@ -10,6 +10,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
//section //section
@mixin sectionTitleHeight { @mixin sectionTitleHeight {
height: 583px; height: 583px;
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
height: 635px; height: 635px;
} }
@ -19,6 +20,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
} }
@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;
} }
@ -50,6 +54,35 @@ $font-home-button: "Noto Serif CJK TC -Black";
// ------------------------------------------- // -------------------------------------------
//home__info //home__info
@mixin homeInfoWidth {
width: 75%;
@media screen and (max-width: $max-width-big-1) {
width: 85%;
}
}
@mixin homeInfoPaddingBottom {
padding-bottom: 75px;
@media screen and (max-width: $max-width-medium-1) {
padding-bottom: 50px;
}
}
@mixin homeInfoContainerWidth {
width: 75%;
@media screen and (max-width: $max-width-medium-0) {
width: 80%;
}
@media screen and (max-width: $max-width-small-0) {
width: 90%;
}
}
@mixin homeInfoTittleModifiedWidth {
@media screen and (max-width: $max-width-medium-0) {
width: 90%;
}
@media screen and (max-width: $max-width-medium-1) {
width: 80%;
}
}
@mixin homeInfoTitleH1Fontsize { @mixin homeInfoTitleH1Fontsize {
font-size: 26pt; font-size: 26pt;
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
@ -106,6 +139,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
width: 245px; width: 245px;
margin-top: 40px; margin-top: 40px;
// background-color: burlywood; // 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%);
} }
@ -117,7 +153,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
@mixin homeInfoImgWidth { @mixin homeInfoImgWidth {
width: 120px; width: 120px;
@media screen and (max-width: $max-width-medium-0) { @media screen and (max-width: $max-width-medium-0) {
width: 80px; width: 110px;
} }
@media screen and (min-width: $max-width-big) { @media screen and (min-width: $max-width-big) {
width: 130px; width: 130px;
@ -126,6 +162,19 @@ $font-home-button: "Noto Serif CJK TC -Black";
width: 150px; width: 150px;
} }
} }
@mixin homeInfoSquareImgTranslate {
transform: translateX(-130%);
@media screen and (max-width: $max-width-medium-0) {
transform: translateX(-110%);
}
}
@mixin homeInfoAppleImgTranslate {
transform: translateX(150%) translateY(-12%);
@media screen and (max-width: $max-width-medium-0) {
transform: translateX(100%) translateY(-12%);
}
}
// ---------------------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------------------
.section { .section {
@ -146,18 +195,18 @@ $font-home-button: "Noto Serif CJK TC -Black";
&__title { &__title {
width: 75%; width: 75%;
text-align: center; text-align: center;
// background-color: cornflowerblue;
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;
margin-top: 50px; margin-top: 50px;
margin-bottom: 20px; margin-bottom: 20px;
// background-color: chocolate;
height: 80px; height: 80px;
width: 100%; width: 100%;
// background-color: chocolate;
p { p {
@include homeTitleFontsize; @include homeTitleFontsize;
} }
@ -182,29 +231,27 @@ $font-home-button: "Noto Serif CJK TC -Black";
} }
&__info { &__info {
width: 75%; @include homeInfoWidth;
padding-bottom: 75px; @include homeInfoPaddingBottom;
margin: 0 auto;
position: relative;
// background-color: darkseagreen; // background-color: darkseagreen;
// border: 1px solid blueviolet; // border: 1px solid blueviolet;
margin: 0 auto;
position: relative;
&-container { &-container {
width: 75%; @include homeInfoContainerWidth;
margin-left: 15%; margin: 0 auto;
// background-color: blanchedalmond; // background-color: blanchedalmond;
} }
&-title { &-title {
// width: 80%;
margin: 0 auto; margin: 0 auto;
// background-color: darkgray;
position: relative; position: relative;
// height: 100px; // background-color: darkgray;
h1 { h1 {
font-family: $font-home-h1;
@include homeInfoTitleH1Fontsize; @include homeInfoTitleH1Fontsize;
font-family: $font-home-h1;
padding-top: 25px; padding-top: 25px;
} }
@ -216,9 +263,22 @@ $font-home-button: "Noto Serif CJK TC -Black";
&-h2 { &-h2 {
@include homeInfoTitleH2Fontsize; @include homeInfoTitleH2Fontsize;
} }
&--1 {
float: right;
width: 100%;
@include homeInfoTittleModifiedWidth;
}
&--2 {
float: left;
width: 80%;
@include homeInfoTittleModifiedWidth;
}
} }
&-paragraph { &-paragraph {
clear: both;
padding-top: 30px; padding-top: 30px;
// background-color: yellow; // background-color: yellow;
p { p {
@ -252,16 +312,16 @@ $font-home-button: "Noto Serif CJK TC -Black";
&-squareImg { &-squareImg {
position: absolute; position: absolute;
left: 0; left: 0;
transform: translateX(-130%);
@include homeInfoImgWidth; @include homeInfoImgWidth;
@include homeInfoSquareImgTranslate;
} }
&-appleImg { &-appleImg {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
transform: translateX(25%) translateY(-12%);
@include homeInfoImgWidth; @include homeInfoImgWidth;
@include homeInfoAppleImgTranslate;
} }
&-sponsorsImg { &-sponsorsImg {

32
src/components/Header.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<!-- <div id="topHeader" class="header"> --> <div class="header header--sticky">
<div id="topHeader" class="header header--sticky">
<div class="header__left"> <div class="header__left">
<div class="header-logo"> <div class="header-logo">
<a href="/2021/"> <a href="/2021/">
@ -12,12 +11,6 @@
<div class="header-links"> <div class="header-links">
<ul> <ul>
<li> <li>
<input
type="radio"
id="1"
class="header-link__input"
name="checlbox"
/>
<a <a
href="/2021/agenda" href="/2021/agenda"
v-bind:class="onRoute('Agenda') ? 'header-link--active' : ''" v-bind:class="onRoute('Agenda') ? 'header-link--active' : ''"
@ -54,6 +47,29 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="header-links--mobile">
<select onchange="location = this.value;">
<option value="/">年會主題</option>
<option value="/agenda" :selected="onRoute('Agenda') ? true : false">
<a href="/2021/agenda">議程與活動</a></option
>
<option
value="/traffic"
:selected="onRoute('Traffic') ? true : false"
>
<a href="/2021/traffic">交通方式</a></option
>
<option value="/venue" :selected="onRoute('Venue') ? true : false"
><a href="/2021/venue">會場地圖</a></option
>
<option value="/sponsor" :selected="onRoute('Sponsor') ? true : false"
><a href="/2021/sponsor">贊助資訊</a></option
>
<option value="/team" :selected="onRoute('Team') ? true : false"
><a href="/2021/team">籌備團隊</a></option
>
</select>
</div>
<div class="header-apply"> <div class="header-apply">
<a href=""> <a href="">
報名去 報名去

4
src/pages/Home.vue
View File

@ -18,7 +18,7 @@
<section class="section-content"> <section class="section-content">
<section class="home__info"> <section class="home__info">
<div class="home__info-container"> <div class="home__info-container">
<div class="home__info-title"> <div class="home__info-title home__info-title--1">
<img <img
class="home-squareImg" class="home-squareImg"
src="~@/assets/images/home/home-icon-square.svg" src="~@/assets/images/home/home-icon-square.svg"
@ -40,7 +40,7 @@
</section> </section>
<section class="home__info"> <section class="home__info">
<div class="home__info-container"> <div class="home__info-container">
<div class="home__info-title"> <div class="home__info-title home__info-title--2">
<img <img
class="home-appleImg" class="home-appleImg"
src="~@/assets/images/home/home-icon-apple.svg" src="~@/assets/images/home/home-icon-apple.svg"