apply RWD for home and header (max-width: 1300, 1100),add mobile header
This commit is contained in:
barrystone
parent
add1f3bc82
commit
27b71b73c7
@ -6,7 +6,7 @@ $max-width-4: 415px;
|
||||
|
||||
$max-width-35: 480px;
|
||||
|
||||
//agenda.scsss breakpoint
|
||||
//agenda.scsss and home.scss breakpoint
|
||||
$max-width-big-0: 1800px;
|
||||
$max-width-big: 1500px;
|
||||
$max-width-medium-0: 1100px;
|
||||
@ -16,6 +16,9 @@ $max-width-small-1: 500px;
|
||||
$max-width-small-2: 410px;
|
||||
$max-width-small-3: 360px;
|
||||
|
||||
// home.scss breakpoint
|
||||
$max-width-big-1: 1300px;
|
||||
|
||||
@mixin xs {
|
||||
@media (max-width: $max-width-4) {
|
||||
@content;
|
||||
|
||||
@ -15,6 +15,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
||||
}
|
||||
@mixin headerLinksWidth {
|
||||
width: 600px;
|
||||
|
||||
@media screen and (min-width: $max-width-big) {
|
||||
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 {
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
top: 40px;
|
||||
top: 35px;
|
||||
left: 6%;
|
||||
width: 88%;
|
||||
height: 62px;
|
||||
@ -59,10 +73,25 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
||||
}
|
||||
|
||||
&-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;
|
||||
float: right;
|
||||
@include headerLinksWidth;
|
||||
margin-right: 92px;
|
||||
@include headerLinksMarginRight;
|
||||
height: 100%;
|
||||
height: 50px;
|
||||
top: 6px;
|
||||
@ -77,10 +106,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 22px 20px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
text-align: left;
|
||||
@include headerLinksLiPadding;
|
||||
|
||||
a {
|
||||
@include headerLinksFontSize;
|
||||
|
||||
@ -10,6 +10,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
//section
|
||||
@mixin sectionTitleHeight {
|
||||
height: 583px;
|
||||
|
||||
@media screen and (min-width: $max-width-big) {
|
||||
height: 635px;
|
||||
}
|
||||
@ -19,6 +20,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
}
|
||||
@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;
|
||||
}
|
||||
@ -50,6 +54,35 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
// -------------------------------------------
|
||||
|
||||
//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 {
|
||||
font-size: 26pt;
|
||||
@media screen and (min-width: $max-width-big) {
|
||||
@ -106,6 +139,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
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%);
|
||||
}
|
||||
@ -117,7 +153,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
@mixin homeInfoImgWidth {
|
||||
width: 120px;
|
||||
@media screen and (max-width: $max-width-medium-0) {
|
||||
width: 80px;
|
||||
width: 110px;
|
||||
}
|
||||
@media screen and (min-width: $max-width-big) {
|
||||
width: 130px;
|
||||
@ -126,6 +162,19 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
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 {
|
||||
@ -146,18 +195,18 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
&__title {
|
||||
width: 75%;
|
||||
text-align: center;
|
||||
// background-color: cornflowerblue;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
// background-color: cornflowerblue;
|
||||
|
||||
&-box1 {
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
// background-color: chocolate;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
// background-color: chocolate;
|
||||
p {
|
||||
@include homeTitleFontsize;
|
||||
}
|
||||
@ -182,29 +231,27 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 75%;
|
||||
padding-bottom: 75px;
|
||||
@include homeInfoWidth;
|
||||
@include homeInfoPaddingBottom;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
// background-color: darkseagreen;
|
||||
// border: 1px solid blueviolet;
|
||||
margin: 0 auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
&-container {
|
||||
width: 75%;
|
||||
margin-left: 15%;
|
||||
@include homeInfoContainerWidth;
|
||||
margin: 0 auto;
|
||||
// background-color: blanchedalmond;
|
||||
}
|
||||
|
||||
&-title {
|
||||
// width: 80%;
|
||||
margin: 0 auto;
|
||||
// background-color: darkgray;
|
||||
position: relative;
|
||||
// height: 100px;
|
||||
// background-color: darkgray;
|
||||
|
||||
h1 {
|
||||
font-family: $font-home-h1;
|
||||
@include homeInfoTitleH1Fontsize;
|
||||
font-family: $font-home-h1;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
@ -216,9 +263,22 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
&-h2 {
|
||||
@include homeInfoTitleH2Fontsize;
|
||||
}
|
||||
|
||||
&--1 {
|
||||
float: right;
|
||||
width: 100%;
|
||||
@include homeInfoTittleModifiedWidth;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
float: left;
|
||||
width: 80%;
|
||||
@include homeInfoTittleModifiedWidth;
|
||||
}
|
||||
}
|
||||
|
||||
&-paragraph {
|
||||
clear: both;
|
||||
padding-top: 30px;
|
||||
// background-color: yellow;
|
||||
p {
|
||||
@ -252,16 +312,16 @@ $font-home-button: "Noto Serif CJK TC -Black";
|
||||
&-squareImg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translateX(-130%);
|
||||
@include homeInfoImgWidth;
|
||||
@include homeInfoSquareImgTranslate;
|
||||
}
|
||||
|
||||
&-appleImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateX(25%) translateY(-12%);
|
||||
@include homeInfoImgWidth;
|
||||
@include homeInfoAppleImgTranslate;
|
||||
}
|
||||
|
||||
&-sponsorsImg {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<!-- <div id="topHeader" class="header"> -->
|
||||
<div id="topHeader" class="header header--sticky">
|
||||
<div class="header header--sticky">
|
||||
<div class="header__left">
|
||||
<div class="header-logo">
|
||||
<a href="/2021/">
|
||||
@ -12,12 +11,6 @@
|
||||
<div class="header-links">
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
id="1"
|
||||
class="header-link__input"
|
||||
name="checlbox"
|
||||
/>
|
||||
<a
|
||||
href="/2021/agenda"
|
||||
v-bind:class="onRoute('Agenda') ? 'header-link--active' : ''"
|
||||
@ -54,6 +47,29 @@
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<a href="">
|
||||
報名去
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<section class="section-content">
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<div class="home__info-title home__info-title--1">
|
||||
<img
|
||||
class="home-squareImg"
|
||||
src="~@/assets/images/home/home-icon-square.svg"
|
||||
@ -40,7 +40,7 @@
|
||||
</section>
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<div class="home__info-title home__info-title--2">
|
||||
<img
|
||||
class="home-appleImg"
|
||||
src="~@/assets/images/home/home-icon-apple.svg"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user