From ca4e9bdeb85015e53eae417f7530ced57b285013 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Wed, 20 Jan 2021 18:41:59 +0800 Subject: [PATCH] [Style] rwd for Intro (sm, md, lg) --- src/assets/scss/CFP/bg.scss | 144 ++++++++++++++++++++++---- src/assets/scss/CFP/intro.scss | 175 +++++++++++++++++++++----------- src/assets/scss/hyperpoint.scss | 13 +++ src/components/CFP/Intro.vue | 48 ++++++--- src/pages/CFP.vue | 24 +---- 5 files changed, 290 insertions(+), 114 deletions(-) diff --git a/src/assets/scss/CFP/bg.scss b/src/assets/scss/CFP/bg.scss index b20decf..bf9f6d9 100644 --- a/src/assets/scss/CFP/bg.scss +++ b/src/assets/scss/CFP/bg.scss @@ -17,7 +17,19 @@ $zm-korea-fish: -10; $zm-first-card: -9; $zm-blue-bar: -8; $zm-second-card: -7; +$zm-third-card: -6; +// general +#cfp-bg { + .card { + transform: rotate(15deg); + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 30px; + background: $white; + } +} + +// lg #cfp-bg { width: 100vw; z-index: $z-section; @@ -50,12 +62,11 @@ $zm-second-card: -7; .cards { .first-card { - transform: rotate(15deg); - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 30px; position: relative; top: 72px; right: 0px; + width: 1000px; + height: 950px; z-index: $z-first-card; } @@ -82,31 +93,19 @@ $zm-second-card: -7; } .card2-wrapper { - height: 1300px; + height: 1600px; overflow: hidden; position: relative; margin-top: -300px; z-index: $z-second-card; - + .second-card { - transform: rotate(15deg); - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 30px; z-index: $z-second-card; position: relative; top: 240px; right: 240px; - } - } - } -} - -@media screen and (min-width: 1921px) { - #cfp-bg { - .korea-fish { - .radial { - margin-top: calc(576px - 30vw); - width: 100vw; + width: 1500px; + height: 1200px; } } } @@ -128,9 +127,115 @@ $zm-second-card: -7; width: 1666px; } } + + .cards { + .first-card { + position: relative; + top: 172px; + right: 108px; + width: 1400px; // enough + height: 1100px; + z-index: $zm-first-card; + } + + .blue-bar { + z-index: $zm-blue-bar; + width: 3600px; // this is enough + height: 240px; + position: relative; + right: 160px; + top: 400px; + + p { + padding-top: 20px; + padding-left: 180px; + z-index: $zm-blue-bar; + } + } + + .card2-wrapper { + z-index: $zm-second-card; + + .second-card { + z-index: $zm-second-card; + position: relative; + height: 900px; + top: 362px; + right: 90px; + } + } + } } } +@include sm { + #cfp-bg { + .korea-fish { + .sitcon-apple { + margin-top: 320px; + width: 216px; + } + .ellipse { + margin-top: 280px; + width: 420px; + } + .radial { + margin-top: 0; + width: 1666px; + } + } + + .cards { + .first-card { + position: relative; + top: 0px; + right: 180px; + height: 1500px; + } + + .blue-bar { + position: relative; + right: 160px; + top: 240px; + + p { + padding-top: 20px; + padding-left: 180px; + z-index: $zm-blue-bar; + } + } + + .card2-wrapper { + z-index: $zm-second-card; + + .second-card { + z-index: $zm-second-card; + position: relative; + height: 1000px; + top: 198px; + right: 90px; + } + } + } + } +} + +/* +@media screen and (min-width: 1921px) { + #cfp-bg { + .korea-fish { + .radial { + margin-top: calc(576px - 30vw); + width: 100vw; + } + } + } +} + +@include md { + +} + @include sm { #cfp-bg { .korea-fish { @@ -168,3 +273,4 @@ $zm-second-card: -7; } } } +*/ diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss index 5a4ccdc..e6cd0e3 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -21,6 +21,10 @@ $fontColor: $mid-blue; .h1 { font-size: 42pt; font-weight: 900; + + @include sm { + font-size: 38pt; + } } h2, @@ -33,6 +37,9 @@ $fontColor: $mid-blue; .h3 { font-size: 22pt; font-weight: 900; + @include sm { + font-size: 19pt; + } } } @@ -47,6 +54,9 @@ $fontColor: $mid-blue; .mt-1 { margin-top: 1em; } + .mb-1 { + margin-bottom: 1em; + } } #cfp-intro { @@ -106,11 +116,11 @@ $fontColor: $mid-blue; padding-top: 180px; .about-topic { - // empty + // empty } .cfp-deadline { - margin-bottom: 2.5em; + margin-bottom: 2.5em; .cfp-deadline-content { margin-top: -1.5em; @@ -130,89 +140,129 @@ $fontColor: $mid-blue; } } -@include md { - //for width 786px +@include lg { #cfp-intro { - h1, - h2, - h3 { - margin-bottom: 12pt; - } - - p { - font-size: 14pt; - line-height: 1.75; - width: 85vw; - } - - p:not(:last-child) { - margin-bottom: 2em; + padding-left: 135px; + padding-right: 135px; + .box-back2 { + width: initial; } } +} + +@include md { #cfp-intro { + padding-top: 72px; + padding-bottom: 144px; + padding-left: 0px; + padding-right: 0px; + color: $fontColor; + + .box { + width: 632px; + margin: 0 auto; + } + .box-back { - margin-bottom: -42em; - margin-left: -6em; - - .first-box { - transform: rotate(12deg) scale(1.2); - bottom: 520px; - left: 100px; - } - - .introd-text { - top: 120px; - } + padding-top: 120px; + padding-bottom: 90px; .past-sitcon { + .cfp-img { + width: 180px; //225 + height: 121px; //152 + } + .thumbnails { .thumb-wrapper { - width: 200.5px; //25vw; - .thumb-title, - .thumb-subtitle { - width: 185.5px; //25vw; + &:not(:last-child) { + margin-right: 1em; } } } } } - } - #cfp-intro { - .box-bluearea { - height: 200px; - z-index: 0; - transform: rotate(12deg); - } - } - - #cfp-intro { .box-back2 { - margin-top: 1em; - margin-left: -2em; + padding-top: 280px; - .second-box { - transform: rotate(12deg); - bottom: 1030px; - left: -5em; + .topic-intro { + .cfp-deadline { + .cfp-deadline-content { + display: initial; + } + } } - } - } - #cfp-intro { - //button util - .mr-2 { - margin-right: 0.5em; - } - .ml-2 { - margin-left: 0.5em; - } - .mt-1 { - margin-top: 1em; + .give-me-money { + margin-top: 240px; + } } } } +@include sm { + #cfp-intro { + padding-top: 96px; + padding-bottom: 60px; + padding-left: 36px; + padding-right: 36px; + color: $fontColor; + + p { + font-size: 0.9em; + } + + .box { + width: initial; + margin: 0; + } + + .box-back { + padding-top: 0px; + padding-bottom: 90px; + height: 1240px; + + .past-sitcon { + .cfp-img { + width: 180px; //225 + height: 121px; //152 + } + + .thumbnails { + display: flex; + flex-direction: column; + align-items: start; + + .thumb-wrapper { + &:not(:last-child) { + margin-right: 0; + margin-bottom: 1em; + } + } + } + } + } + + .box-back2 { + padding-top: 380px; + + .topic-intro { + .cfp-deadline { + .cfp-deadline-content { + display: initial; + } + } + } + + .give-me-money { + margin-top: 140px; + } + } + } +} + +/* @include sm { //for width 600px @@ -549,3 +599,4 @@ $fontColor: $mid-blue; } } } +*/ diff --git a/src/assets/scss/hyperpoint.scss b/src/assets/scss/hyperpoint.scss index c150ec1..5452c6d 100644 --- a/src/assets/scss/hyperpoint.scss +++ b/src/assets/scss/hyperpoint.scss @@ -23,6 +23,7 @@ $w414: 414px; } } +// WTF is this @mixin ss { @media screen and (max-width: $w523 - 1px) { @content; @@ -34,3 +35,15 @@ $w414: 414px; @content; } } + +.desktop-only { + @media screen and (max-width: $w1366 - 1px) { + display: none; + } +} + +.mobile-only { + @media screen and (min-width: $w1366) { + display: none; + } +} diff --git a/src/components/CFP/Intro.vue b/src/components/CFP/Intro.vue index 7c3379f..98fab04 100644 --- a/src/components/CFP/Intro.vue +++ b/src/components/CFP/Intro.vue @@ -90,20 +90,40 @@

徵稿時間

- 01/15 ～ 02/22詳細時程請見投稿資訊我知道了，快讓我投稿！ +

+ 01/15 ～ 02/22詳細時程請見投稿資訊我知道了，快讓我投稿！ +

+

+ 01/15 ～ 02/22詳細時程請見 +

+

+ 投稿資訊快讓我投稿！ +

diff --git a/src/pages/CFP.vue b/src/pages/CFP.vue index ecdcdad..b248e20 100644 --- a/src/pages/CFP.vue +++ b/src/pages/CFP.vue @@ -7,28 +7,14 @@
- - - +
-

Descendents of The Abacus

+

Descendents of The Abacus

+

Descendents of
The Abacus

- - - +
+