diff --git a/src/assets/scss/CFP/header.scss b/src/assets/scss/CFP/header.scss index bbfd1bc..7db2540 100644 --- a/src/assets/scss/CFP/header.scss +++ b/src/assets/scss/CFP/header.scss @@ -6,7 +6,7 @@ $width-svg-topic: 515px; $width-svg-cfp: 368px; $width-svg-date: 207px; $width-svg-location: 227px; -$width-svg-news: 188px; +$width-svg-news: 259px; #cfp-header { padding-left: 20px; @@ -57,7 +57,7 @@ $width-svg-news: 188px; } .cfp-news { order: 3; - margin-bottom: 72px; + margin-bottom: 60px; flex: 1; position: relative; @@ -108,7 +108,7 @@ $width-svg-news: 188px; display: flex; flex-direction: row; justify-content: center; - margin-bottom: 0; + margin-bottom: 12px; } } } @@ -188,6 +188,7 @@ $width-svg-news: 188px; } } .cfp-news { + margin-bottom: 16px; } } } @@ -239,7 +240,7 @@ $width-svg-news: 188px; } } .cfp-news { - //empty + margin-bottom: 2px; } } } diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss index 21732da..0d73dc2 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -1,12 +1,12 @@ @import '../hyperpoint'; +@import '../color'; $fontFamily: Noto Sans TC; -$fontColor: #226BB4; +$fontColor: $mid-blue; -// General settings: +// General settings: // font-size and paragraph spacing for headers and paragraph text #cfp-intro { margin-top: 90px; - padding: 96px 0 0 0; h1, h2, @@ -16,9 +16,6 @@ $fontColor: #226BB4; p { line-height: 1.75; - } - - p:not(:last-child) { margin-bottom: 2em; } @@ -40,11 +37,12 @@ $fontColor: #226BB4; font-weight: 900; } } -.introduction{ - height: 2250px; - overflow: hidden; - padding-bottom: 0; +.introduction { + height: 2400px; + overflow: hidden; + padding-bottom: 0; } + // Utiliy #cfp-intro { .mr-2 { @@ -59,8 +57,8 @@ $fontColor: #226BB4; } #cfp-intro { + .box-back { - // margin-top: -120px; // width: 880px; margin-bottom: -40em; font-family: $fontFamily; @@ -71,7 +69,7 @@ $fontColor: #226BB4; .first-box { transform: rotate(15deg); - box-shadow: 0 3px 12px 0 rgba(89,120,206,.56); + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); border-radius: 30px; position: relative; bottom: 550px; @@ -125,9 +123,9 @@ $fontColor: #226BB4; .box-bluearea { width: 150vw; height: 450px; - background: rgba(34, 107, 180,1); + background: rgba(34, 107, 180, 1); right: 25%; - position:relative; + position: relative; z-index: -1; transform: rotate(15deg); opacity: 1; @@ -139,31 +137,31 @@ $fontColor: #226BB4; color: $fontColor; width: 900px; - padding: 20px; - height: 2200px; + padding: 20px 20px 168px 20px; + height: 2350px; .about-topic { margin-bottom: 2em; - position:relative; + position: relative; bottom: 75px; z-index: 2; left: 50px; } .second-box { - transform: rotate(15deg); - box-shadow: 0 3px 12px 0 rgba(89,120,206,.56); - border-radius: 30px; - position: relative; - bottom: 1100px; - right: 120px; - z-index: 0; + transform: rotate(15deg); + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 30px; + position: relative; + bottom: 1100px; + right: 120px; + z-index: 0; } .cfp-deadline { margin-bottom: 2em; margin-bottom: 2em; - position:relative; + position: relative; z-index: 2; left: 50px; bottom: 75px; @@ -176,7 +174,7 @@ $fontColor: #226BB4; } .give-me-money { - position:relative; + position: relative; z-index: 2; left: 50px; bottom: 75px; diff --git a/src/components/CFP/Header.vue b/src/components/CFP/Header.vue index 73eb941..8234243 100644 --- a/src/components/CFP/Header.vue +++ b/src/components/CFP/Header.vue @@ -57,7 +57,7 @@