[Fix] CFP rwd
This commit is contained in:
parent
ca4e9bdeb8
commit
c39f8ca536
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user