From c39f8ca53629d570a62e36b7aa205837394a69a4 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Wed, 20 Jan 2021 19:21:38 +0800 Subject: [PATCH] [Fix] CFP rwd --- src/assets/scss/CFP/bg.scss | 125 ++++++++++++++++++++++++++++++-- src/assets/scss/CFP/intro.scss | 113 ++++++++++++++++++++++++++--- src/assets/scss/hyperpoint.scss | 4 +- src/assets/scss/util.scss | 5 ++ 4 files changed, 227 insertions(+), 20 deletions(-) diff --git a/src/assets/scss/CFP/bg.scss b/src/assets/scss/CFP/bg.scss index bf9f6d9..08a5b47 100644 --- a/src/assets/scss/CFP/bg.scss +++ b/src/assets/scss/CFP/bg.scss @@ -105,7 +105,7 @@ $zm-third-card: -6; top: 240px; right: 240px; width: 1500px; - height: 1200px; + height: 1800px; } } } @@ -201,17 +201,13 @@ $zm-third-card: -6; 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; + height: 950px; top: 198px; right: 90px; } @@ -220,6 +216,123 @@ $zm-third-card: -6; } } +@media screen and (max-width: 540px) { + #cfp-bg { + .cards { + .first-card { + height: 1450px; + } + .card2-wrapper { + .second-card { + height: 880px; + } + } + } + } +} + +@media screen and (max-width: 480px) { + #cfp-bg { + .cards { + .card2-wrapper { + .second-card { + height: 960px; + } + } + } + } +} + +@include xs { + #cfp-bg { + .korea-fish { + .sitcon-apple { + margin-top: 216px; + width: 120px; + } + .ellipse { + margin-top: 180px; + width: 240px; + } + .radial { + margin-top: -180px; + width: 1666px; + } + } + + .cards { + .first-card { + position: relative; + top: -180px; + right: 180px; + height: 1400px; + } + + .blue-bar { + position: relative; + right: 160px; + top: 60px; + } + + .card2-wrapper { + margin-top: -600px; + + .second-card { + position: relative; + height: 940px; + top: 318px; + right: 90px; + } + } + } + } +} + +@media screen and (max-width: 380px) { + #cfp-bg { + .cards { + .first-card { + height: 1400px; + } + .card2-wrapper { + .second-card { + height: 1050px; + } + } + } + } +} + +@media screen and (max-width: 360px) { + #cfp-bg { + .cards { + .first-card { + height: 1400px; + } + .card2-wrapper { + .second-card { + height: 1000px; + } + } + } + } +} + +@media screen and (max-width: 320px) { + #cfp-bg { + .cards { + .first-card { + height: 1500px; + } + .card2-wrapper { + .second-card { + height: 1050px; + } + } + } + } +} + /* @media screen and (min-width: 1921px) { #cfp-bg { diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss index e6cd0e3..b2ab12f 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -1,7 +1,5 @@ @import "../hyperpoint"; @import "../color"; -$fontFamily: Noto Sans TC; -$fontColor: $mid-blue; // General settings: // font-size and paragraph spacing for headers and paragraph text @@ -63,7 +61,7 @@ $fontColor: $mid-blue; padding-top: 72px; padding-bottom: 72px; padding-left: 135px; - color: $fontColor; + color: $mid-blue; .box-back { padding-top: 180px; @@ -156,7 +154,6 @@ $fontColor: $mid-blue; padding-bottom: 144px; padding-left: 0px; padding-right: 0px; - color: $fontColor; .box { width: 632px; @@ -184,9 +181,15 @@ $fontColor: $mid-blue; } .box-back2 { - padding-top: 280px; + padding-top: 320px; .topic-intro { + .about-topic { + h1, + h2 { + text-align: right; + } + } .cfp-deadline { .cfp-deadline-content { display: initial; @@ -201,17 +204,31 @@ $fontColor: $mid-blue; } } +@media screen and (max-width: 768px) { + #cfp-intro { + .box-back2 { + + .topic-intro { + .cfp-deadline { + .cfp-deadline-content { + } + } + } + + .give-me-money { + margin-top: 200px; + } + } + } +} + @include sm { #cfp-intro { padding-top: 96px; padding-bottom: 60px; padding-left: 36px; padding-right: 36px; - color: $fontColor; - - p { - font-size: 0.9em; - } + font-size: 0.9em; .box { width: initial; @@ -221,7 +238,7 @@ $fontColor: $mid-blue; .box-back { padding-top: 0px; padding-bottom: 90px; - height: 1240px; + // height: 1240px; .past-sitcon { .cfp-img { @@ -247,6 +264,66 @@ $fontColor: $mid-blue; .box-back2 { padding-top: 380px; + .give-me-money { + margin-top: 140px; + } + } + } +} + +@media screen and (max-width: 540px) { + #cfp-intro { + .box-back2 { + padding-top: 360px; + + .give-me-money { + margin-top: 180px; + } + } + } +} + +@include xs { + #cfp-intro { + padding-top: 126px; + padding-bottom: 60px; + padding-left: 24px; + padding-right: 24px; + + .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: 300px; + .topic-intro { .cfp-deadline { .cfp-deadline-content { @@ -256,7 +333,19 @@ $fontColor: $mid-blue; } .give-me-money { - margin-top: 140px; + margin-top: 180px; + } + } + } +} + +@media screen and (max-width: 360px) { + #cfp-intro { + .box-back2 { + padding-top: 240px; + + .give-me-money { + margin-top: 180px; } } } diff --git a/src/assets/scss/hyperpoint.scss b/src/assets/scss/hyperpoint.scss index 5452c6d..c957512 100644 --- a/src/assets/scss/hyperpoint.scss +++ b/src/assets/scss/hyperpoint.scss @@ -37,13 +37,13 @@ $w414: 414px; } .desktop-only { - @media screen and (max-width: $w1366 - 1px) { + @media screen and (max-width: $w1024 - 1px) { display: none; } } .mobile-only { - @media screen and (min-width: $w1366) { + @media screen and (min-width: $w1024) { display: none; } } diff --git a/src/assets/scss/util.scss b/src/assets/scss/util.scss index 74040c3..9c7a396 100644 --- a/src/assets/scss/util.scss +++ b/src/assets/scss/util.scss @@ -1,4 +1,5 @@ @import 'color'; +@import 'hyperpoint'; .text-center { text-align: center; @@ -40,6 +41,10 @@ display: inline-block; padding: 0.85em 1.25em; + @include sm { + padding: 0.5em 0.85em; + } + font-size: 1.1em; font-weight: 900; border: none;