Merge branch 'dev2' of https://github.com/sitcon-tw/2021 into dev2

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;
       }
     }
   }

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{
+.introduction {
-    height: 2250px;
+  height: 2400px;
-    overflow: hidden;
+  overflow: hidden;
-    padding-bottom: 0;
+  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;
+    padding: 20px 20px 168px 20px;
-    height: 2200px;
+    height: 2350px;
 
     .about-topic {
       margin-bottom: 2em;
-      position:relative;
+      position: relative;
       bottom: 75px;
       z-index: 2;
       left: 50px;
     }
 
     .second-box {
-        transform: rotate(15deg);
+      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;
+      border-radius: 30px;
-        position: relative;
+      position: relative;
-        bottom: 1100px;
+      bottom: 1100px;
-        right: 120px;
+      right: 120px;
-        z-index: 0;
+      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;

src/components/CFP/Header.vue

@@ -57,7 +57,7 @@
       <div class="cfp-news">
         <a href="/cfp/news" rel="noopener">
           <div class="btn-news-wrapper">
-            <img src="~@/assets/images/burnfont/btn-news.svg" />
+            <img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
           </div>
         </a>
       </div>