From 2d23cbfac3b6c4eab99bfc67f994bbc67325277d Mon Sep 17 00:00:00 2001
From: hyperbola <hyperbola.cs07@gmail.com>
Date: Wed, 20 Jan 2021 16:57:06 +0800
Subject: [PATCH] [Style] Reorganize Intro; desktop simple bg complete

---
 src/assets/scss/CFP/bg.scss     |  79 +++++++++-
 src/assets/scss/CFP/header.scss |   2 +-
 src/assets/scss/CFP/intro.scss  | 263 ++++++++++++--------------------
 src/components/CFP/Intro.vue    | 246 ++++++++++++++---------------
 src/pages/CFP.vue               |  43 +++++-
 5 files changed, 327 insertions(+), 306 deletions(-)

diff --git a/src/assets/scss/CFP/bg.scss b/src/assets/scss/CFP/bg.scss
index 0f4a7d7..b20decf 100644
--- a/src/assets/scss/CFP/bg.scss
+++ b/src/assets/scss/CFP/bg.scss
@@ -1,37 +1,102 @@
-@import '../hyperpoint';
+@import "../hyperpoint";
+@import "../color";
 
 #cfp {
   position: relative;
 }
 
-// The Korea Fish
+// z-indecies
+$z-section: -1;
+$z-korea-fish: -10;
+$z-first-card: -8;
+$z-blue-bar: -9;
+$z-second-card: -8;
+// for mobile
+$zm-section: -1;
+$zm-korea-fish: -10;
+$zm-first-card: -9;
+$zm-blue-bar: -8;
+$zm-second-card: -7;
 
 #cfp-bg {
   width: 100vw;
-  z-index: -1;
+  z-index: $z-section;
   position: absolute;
-  // left: -12px; // offset
 
   .korea-fish {
-    top: 0;
-    left: 0;
-    width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    height: 960px;
+
     .sitcon-apple {
       position: absolute;
       margin-top: 360px;
       width: 250px;
+      z-index: -10;
     }
     .ellipse {
       position: absolute;
       margin-top: 200px;
       width: 640px;
+      z-index: -10;
     }
     .radial {
       width: 1920px;
       position: absolute;
+      z-index: -10;
+    }
+  }
+
+  .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;
+      z-index: $z-first-card;
+    }
+
+    .blue-bar {
+      z-index: $z-blue-bar;
+      width: 3600px; // this is enough
+      height: 300px;
+      background: rgba(34, 107, 180, 1);
+      position: relative;
+      right: 160px;
+      top: 300px;
+      transform: rotate(15deg);
+      opacity: 1;
+
+      p {
+        padding-top: 160px;
+        padding-left: 240px;
+        color: $white;
+        font-size: 48pt;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        z-index: $z-blue-bar;
+      }
+    }
+
+    .card2-wrapper {
+      height: 1300px;
+      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;
+      }
     }
   }
 }
diff --git a/src/assets/scss/CFP/header.scss b/src/assets/scss/CFP/header.scss
index 4a0b6c5..ce9b4c2 100644
--- a/src/assets/scss/CFP/header.scss
+++ b/src/assets/scss/CFP/header.scss
@@ -16,7 +16,7 @@ $width-svg-news: 259px;
   img.svg {
     height: auto;
   }
-  z-index: 1;
+  // z-index: 1;
 
   .spot-box {
     padding-bottom: 260px;
diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss
index 3bcd8dd..5a4ccdc 100644
--- a/src/assets/scss/CFP/intro.scss
+++ b/src/assets/scss/CFP/intro.scss
@@ -1,13 +1,11 @@
-@import '../hyperpoint';
-@import '../color';
+@import "../hyperpoint";
+@import "../color";
 $fontFamily: Noto Sans TC;
 $fontColor: $mid-blue;
 
 // General settings:
 //    font-size and paragraph spacing for headers and paragraph text
 #cfp-intro {
-  margin-top: 90px;
-
   h1,
   h2,
   h3 {
@@ -37,22 +35,6 @@ $fontColor: $mid-blue;
     font-weight: 900;
   }
 }
-.introduction {
-  height: 2400px;
-  overflow: hidden;
-  padding-bottom: 0;
-}
-@media screen and (max-width: 1021px) {
-  .introduction {
-    height: 2230px;
-  }
-}
-@media screen and (max-width: 891px) {
-  .introduction {
-    height: 2200px;
-  }
-}
-
 
 // Utiliy
 #cfp-intro {
@@ -68,41 +50,22 @@ $fontColor: $mid-blue;
 }
 
 #cfp-intro {
+  padding-top: 72px;
+  padding-bottom: 72px;
+  padding-left: 135px;
+  color: $fontColor;
 
   .box-back {
-    // width: 880px;
-    margin-bottom: -40em;
-    font-family: $fontFamily;
-    color: $fontColor;
+    padding-top: 180px;
+    padding-bottom: 180px;
+    width: 800px;
 
-    width: 700px;
-    padding: 20px;
-
-    .first-box {
-      transform: rotate(15deg);
-      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-      border-radius: 30px;
-      position: relative;
-      bottom: 620px;
-      right: 50px;
-      z-index: 0;
-    }
-    .introd-text {
-      position: relative;
-      top: 200px;
-      left: 150px;
-      z-index: 2;
-    }
     .about-sitcon {
-      margin-bottom: 0 auto 2em;
+      // empty
     }
 
     .past-sitcon {
-      margin-bottom: 2em;
-      width: 60vw;
-      height: 13em;
-
-      .cfp-img{
+      .cfp-img {
         width: 180px; //225
         height: 121px; //152
       }
@@ -111,6 +74,7 @@ $fontColor: $mid-blue;
         display: flex;
         flex-direction: row;
         padding: 0.25em 0;
+        margin-bottom: 2em;
 
         .thumb-wrapper {
           .thumb-title,
@@ -126,62 +90,28 @@ $fontColor: $mid-blue;
           }
 
           &:not(:last-child) {
-            margin-right: 1em;
+            margin-right: 2em;
           }
         }
       }
     }
-    
+
     .join-discuss {
       // empty
     }
   }
 
-  .box-bluearea {
-    width: 150vw;
-    height: 450px;
-    background: rgba(34, 107, 180, 1);
-    right: 25%;
-    position: relative;
-    z-index: -1;
-    transform: rotate(15deg);
-    opacity: 1;
-  }
-
   .box-back2 {
-    // width: 760px;
-    font-family: $fontFamily;
-    color: $fontColor;
-
-    width: 900px;
-    padding: 20px 20px 168px 20px;
-    height: 2350px;
+    width: 1050px;
+    padding-top: 180px;
 
     .about-topic {
-      margin-bottom: 2em;
-      position: relative;
-      bottom: 75px;
-      z-index: 2;
-      left: 50px;
-    }
-
-    .second-box {
-      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;
+     // empty
     }
 
     .cfp-deadline {
-      margin-bottom: 2em;
-      margin-bottom: 2em;
-      position: relative;
-      z-index: 2;
-      left: 50px;
-      bottom: 75px;
+       margin-bottom: 2.5em;
+
       .cfp-deadline-content {
         margin-top: -1.5em;
         display: flex;
@@ -189,12 +119,8 @@ $fontColor: $mid-blue;
         align-items: flex-end;
       }
     }
-    
+
     .give-me-money {
-      position: relative;
-      z-index: 2;
-      left: 50px;
-      bottom: 75px;
       .whisper {
         font-weight: 900;
         font-size: 1.25em;
@@ -204,8 +130,9 @@ $fontColor: $mid-blue;
   }
 }
 
-@include md{ //for width 786px
-  #cfp-intro{
+@include md {
+  //for width 786px
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -215,21 +142,21 @@ $fontColor: $mid-blue;
     p {
       font-size: 14pt;
       line-height: 1.75;
-      width:85vw;
+      width: 85vw;
     }
 
     p:not(:last-child) {
       margin-bottom: 2em;
     }
   }
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -42em;
-      margin-left:-6em;
-  
+      margin-left: -6em;
+
       .first-box {
         transform: rotate(12deg) scale(1.2);
-        bottom: 590px;
+        bottom: 520px;
         left: 100px;
       }
 
@@ -240,10 +167,10 @@ $fontColor: $mid-blue;
       .past-sitcon {
         .thumbnails {
           .thumb-wrapper {
-            width:200.5px;//25vw;
+            width: 200.5px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:185.5px; //25vw;
+              width: 185.5px; //25vw;
             }
           }
         }
@@ -251,26 +178,25 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 200px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
       margin-top: 1em;
       margin-left: -2em;
-  
+
       .second-box {
-          transform: rotate(12deg);
-          bottom: 1030px;
-          left:-5em;
+        transform: rotate(12deg);
+        bottom: 1030px;
+        left: -5em;
       }
     }
-    
   }
 
   #cfp-intro {
@@ -287,9 +213,10 @@ $fontColor: $mid-blue;
   }
 }
 
-@include sm { //for width 600px
+@include sm {
+  //for width 600px
 
-  #cfp-intro{
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -299,7 +226,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 13pt;
       line-height: 1.5;
-      width:70vw;
+      width: 70vw;
     }
 
     p:not(:last-child) {
@@ -307,11 +234,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left:-5em;
-  
+      margin-left: -5em;
+
       .first-box {
         transform: rotate(12deg) scale(1.1);
         bottom: 610px;
@@ -322,18 +249,18 @@ $fontColor: $mid-blue;
       }
 
       .past-sitcon {
-        margin-bottom:-1em;
+        margin-bottom: -1em;
         .thumbnails {
           .thumb-wrapper {
-            width:122.5px;//25vw;
+            width: 122.5px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:132.5px; //25vw;
+              width: 132.5px; //25vw;
             }
           }
         }
 
-        .cfp-img{
+        .cfp-img {
           width: 128.5px; //225
           height: 80px; //152
           margin-left: 0em;
@@ -342,24 +269,24 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 300px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
-      margin-top:-6em;
+      margin-top: -6em;
       .second-box {
-          transform: rotate(12deg);
-          bottom: 1060px;
+        transform: rotate(12deg);
+        bottom: 1060px;
       }
     }
   }
-  
+
   #cfp-intro {
     //button util
     .mr-2 {
@@ -375,7 +302,7 @@ $fontColor: $mid-blue;
 }
 
 @include ss {
-  #cfp-intro{
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -403,7 +330,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 12pt;
       line-height: 1.65;
-      width:80vw;
+      width: 80vw;
     }
 
     p:not(:last-child) {
@@ -411,11 +338,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left:-7em;
-  
+      margin-left: -7em;
+
       .first-box {
         transform: rotate(12deg);
         bottom: 640px;
@@ -425,20 +352,20 @@ $fontColor: $mid-blue;
         top: 100px;
       }
       .past-sitcon {
-        margin-top:1em;
+        margin-top: 1em;
       }
       .past-sitcon {
         .thumbnails {
           .thumb-wrapper {
-            width:122.5px;//25vw;
+            width: 122.5px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:132.5px; //25vw;
+              width: 132.5px; //25vw;
             }
           }
         }
 
-        .cfp-img{
+        .cfp-img {
           width: 128.5px; //225
           height: 80px; //152
           margin-left: 0em;
@@ -447,26 +374,26 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 280px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
       margin-top: -5em;
       margin-left: -1em;
-  
+
       .second-box {
-          transform: rotate(12deg) scale(0.65);
-          bottom: 1270px;
-          left:-14em;
+        transform: rotate(12deg) scale(0.65);
+        bottom: 1270px;
+        left: -14em;
       }
     }
-    
+
     .give-me-money {
       top: 2em;
       .whisper {
@@ -477,7 +404,7 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .past-sitcon {
       margin-bottom: 2em;
       width: 40vw;
@@ -489,10 +416,10 @@ $fontColor: $mid-blue;
         padding: 0.25em 0;
 
         .thumb-wrapper {
-          width:225px;//25vw;
+          width: 225px; //25vw;
           .thumb-title,
           .thumb-subtitle {
-            width:190px; //25vw;
+            width: 190px; //25vw;
             text-align: center;
             margin: 0;
             font-size: 0.8em;
@@ -514,7 +441,7 @@ $fontColor: $mid-blue;
 }
 
 @include xs {
-  #cfp-intro{
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -542,7 +469,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 11pt;
       line-height: 1.65;
-      width:80vw;
+      width: 80vw;
     }
 
     p:not(:last-child) {
@@ -550,11 +477,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left:-8em;
-  
+      margin-left: -8em;
+
       .first-box {
         transform: rotate(12deg);
         bottom: 620px;
@@ -564,24 +491,24 @@ $fontColor: $mid-blue;
         top: 100px;
       }
       .past-sitcon {
-        margin-top:1em;
-        
+        margin-top: 1em;
+
         .thumbnails {
           margin-left: -0.5em;
           padding: 0.25em 0;
-  
+
           .thumb-wrapper {
-            width:110px;//25vw;
+            width: 110px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:130px; //25vw;
+              width: 130px; //25vw;
               text-align: center;
               margin: 0;
               font-size: 0.1em;
               line-height: 10em;
               font-weight: 900;
             }
-            .cfp-img{
+            .cfp-img {
               width: 110.5px; //225
               height: 63px; //152
               margin-left: 0.6em;
@@ -592,26 +519,26 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 220px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
       margin-top: 3em;
       margin-left: -1em;
-  
+
       .second-box {
-          transform: rotate(12deg) scale(0.63);
-          bottom: 1250px;
-          left:-15em;
+        transform: rotate(12deg) scale(0.63);
+        bottom: 1250px;
+        left: -15em;
       }
     }
-    
+
     .give-me-money {
       top: 2em;
       .whisper {
@@ -621,4 +548,4 @@ $fontColor: $mid-blue;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CFP/Intro.vue b/src/components/CFP/Intro.vue
index e5d11b0..7c3379f 100644
--- a/src/components/CFP/Intro.vue
+++ b/src/components/CFP/Intro.vue
@@ -1,147 +1,149 @@
 <template>
   <main class="introduction-container">
-    <div class="introduction">
-      <div class="box-back box">
-        <div class="introd-text">
-        <div class="about-sitcon">
-          <h2>關於 SITCON</h2>
+    <!--<div class="introduction">-->
+    <div class="box-back box">
+      <!--<div class="introd-text">-->
+      <div class="about-sitcon">
+        <h2>關於 SITCON</h2>
+        <p>
+          學生計算機年會（SITCON）自 2013
+          年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+        </p>
+      </div>
+      <!-- TODO fix thumbnails style -->
+      <div class="past-sitcon">
+        <h3>歷屆年會網站</h3>
+        <div class="thumbnails">
+          <div class="thumb-wrapper">
+            <!-- TODO add thumb -->
+            <img class="cfp-img" src="@/assets/images/CFP/2020.png" />
+            <p class="thumb-title text-center">SITCON 2020<br /></p>
+            <p class="thumb-subtitle text-center">#define</p>
+          </div>
+          <div class="thumb-wrapper">
+            <!-- TODO add thumb -->
+            <img class="cfp-img" src="@/assets/images/CFP/2019.png" />
+            <p class="thumb-title text-center">SITCON 2019<br /></p>
+            <p class="thumb-subtitle text-center">開箱演算法</p>
+          </div>
+          <div class="thumb-wrapper">
+            <!-- TODO add thumb -->
+            <img class="cfp-img" src="@/assets/images/CFP/2018.png" />
+            <p class="thumb-title text-center">SITCON 2018<br /></p>
+            <!-- TODO alignment is not good -->
+            <p class="thumb-subtitle text-center small">
+              POPULAR COMPUTER SCIENCE
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="join-discuss">
+        <h3>參與討論！</h3>
+        <div class="discuss-section">
           <p>
-            學生計算機年會（SITCON）自 2013
-            年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+            SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
+            上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
+            並貢獻你的想法！
+          </p>
+          <p>
+            若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
+            的會議記錄。
           </p>
         </div>
-        <!-- TODO fix thumbnails style -->
-        <div class="past-sitcon">
-          <h3>歷屆年會網站</h3>
-          <div class="thumbnails">
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <img class="cfp-img" src="@/assets/images/CFP/2020.png" />
-              <p class="thumb-title text-center">SITCON 2020<br /></p>
-              <p class="thumb-subtitle text-center">#define</p>
-            </div>
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <img class="cfp-img" src="@/assets/images/CFP/2019.png" />
-              <p class="thumb-title text-center">SITCON 2019<br /></p>
-              <p class="thumb-subtitle text-center">開箱演算法</p>
-            </div>
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <img class="cfp-img" src="@/assets/images/CFP/2018.png" />
-              <p class="thumb-title text-center">SITCON 2018<br /></p>
-              <!-- TODO alignment is not good -->
-              <p class="thumb-subtitle text-center small">
-                POPULAR COMPUTER SCIENCE
-              </p>
-            </div>
-          </div>
+        <div class="link-group mt-1">
+          <a
+            rel="noopener"
+            target="_blank"
+            class="btn btn-primary mr-2"
+            href="https://groups.google.com/g/sitcon-general"
+            >SITCON 論壇</a
+          >
+          <a
+            rel="noopener"
+            target="_blank"
+            class="btn btn-primary"
+            href="https://hackmd.io/@SITCON/SITCON2021"
+            >會議記錄</a
+          >
         </div>
-        <div class="join-discuss">
-          <h3>參與討論！</h3>
-          <div class="discuss-section">
-            <p>
-              SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
-              上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
-              並貢獻你的想法！
-            </p>
-            <p>
-              若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
-              的會議記錄。
-            </p>
-          </div>
-          <div class="link-group mt-1">
-            <a
-              rel="noopener"
-              target="_blank"
-              class="btn btn-primary mr-2"
-              href="https://groups.google.com/g/sitcon-general"
-              >SITCON 論壇</a
-            >
-            <a
-              rel="noopener"
-              target="_blank"
-              class="btn btn-primary"
-              href="https://hackmd.io/@SITCON/SITCON2021"
-              >會議記錄</a
-            >
-          </div>
-        </div>
-        </div>
-        <svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>
       </div>
-<!-- ==================================================================================================== -->
-      <div class="box-bluearea">
-      </div>
-      <div class="box-back2 box">
-      <div class="introd-text">
-        <div class="topic-intro">
-          <div class="about-topic">
-            <h2>2021 年會主題</h2>
-            <h1>算盤的後裔</h1>
-            <p>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
-            </p>
-            <p>
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
-            </p>
-          </div>
+      <!--</div>-->
+      <!--<svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>-->
+    </div>
+    <!-- ==================================================================================================== -->
+    <!--<div class="box-bluearea">-->
 
-          <div class="cfp-deadline">
-            <h3>徵稿時間</h3>
-            <div class="cfp-deadline-content">
-              <span class="h3">01/15 ～ 02/22</span
-              ><span class="ml-2 mr-2">詳細時程請見</span
-              ><a class="btn btn-primary mr-2" rel="noopener" href="/2021/cfp/news"
-                >投稿資訊</a
-              ><a
-                class="btn btn-primary"
-                rel="noopener"
-                target="_blank"
-                href="https://forms.gle/XoXJSD2P8dL8X8s2A"
-                >我知道了，快讓我投稿！</a
-              >
-            </div>
-          </div>
-          </div>
+    <div class="box-back2 box">
+      <!--<div class="introd-text">-->
+      <div class="topic-intro">
+        <div class="about-topic">
+          <h2>2021 年會主題</h2>
+          <h1>算盤的後裔</h1>
+          <p>
+            千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+          </p>
+          <p>
+            人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
+          </p>
         </div>
-        <div class="give-me-money">
-          <p class="whisper">最後...</p>
-          <h2>SITCON 贊助徵求</h2>
-          <p>
-            SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
-            如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
-            的運作，讓更多交流產生！
-          </p>
-          <p>
-            企業合作歡迎聯繫
-            <a
-              class="context-hyperlink"
-              href="mailto:contact@sitcon.org"
+
+        <div class="cfp-deadline">
+          <h3>徵稿時間</h3>
+          <div class="cfp-deadline-content">
+            <span class="h3">01/15 ～ 02/22</span
+            ><span class="ml-2 mr-2">詳細時程請見</span
+            ><a
+              class="btn btn-primary mr-2"
               rel="noopener"
-              target="_blank"
-              >contact@sitcon.org</a
-            >
-          </p>
-          <div>
-            <a
+              href="/2021/cfp/news"
+              >投稿資訊</a
+            ><a
               class="btn btn-primary"
               rel="noopener"
               target="_blank"
-              href="http://bit.ly/donatesitcon2021"
-              >個人贊助方案</a
+              href="https://forms.gle/XoXJSD2P8dL8X8s2A"
+              >我知道了，快讓我投稿！</a
             >
           </div>
-          
         </div>
-        <svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>
+      </div>
+      <div class="give-me-money">
+        <p class="whisper">最後...</p>
+        <h2>SITCON 贊助徵求</h2>
+        <p>
+          SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
+          如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
+          的運作，讓更多交流產生！
+        </p>
+        <p>
+          企業合作歡迎聯繫
+          <a
+            class="context-hyperlink"
+            href="mailto:contact@sitcon.org"
+            rel="noopener"
+            target="_blank"
+            >contact@sitcon.org</a
+          >
+        </p>
+        <div>
+          <a
+            class="btn btn-primary"
+            rel="noopener"
+            target="_blank"
+            href="http://bit.ly/donatesitcon2021"
+            >個人贊助方案</a
+          >
+        </div>
+        <!--</div>-->
+        <!--<svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>-->
       </div>
     </div>
+    <!--</div>-->
   </main>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 @Component
 export default class IntrodContainer extends Vue {}
 </script>
diff --git a/src/pages/CFP.vue b/src/pages/CFP.vue
index 40cf031..ecdcdad 100644
--- a/src/pages/CFP.vue
+++ b/src/pages/CFP.vue
@@ -6,23 +6,50 @@
         <img class="ellipse" src="~@/assets/images/CFP/ellipse.svg" />
         <img class="sitcon-apple" src="~@/assets/images/CFP/sitcon-apple.svg" />
       </div>
+      <div class="cards">
+        <svg width="1000" height="950" class="first-bozzx first-card">
+          <rect
+            width="1000"
+            height="950"
+            style="fill: rgb(255, 255, 255)"
+          ></rect>
+        </svg>
+        <div class="box-bluearea blue-bar">
+          <p>Descendents of The Abacus</p>
+        </div>
+        <div class="card2-wrapper">
+          <svg
+            width="1500"
+            height="1200"
+            class="second-box second-card"
+          >
+            <rect
+              width="1500"
+              height="1200"
+              style="fill: rgb(255, 255, 255)"
+            ></rect>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="cfp-fg">
+      <!-- WTF = = -->
+      <CfpHeader id="cfp-header" />
+      <Intro id="cfp-intro" />
     </div>
-    <!-- WTF = = -->
-    <CfpHeader id="cfp-header" />
-    <Intro id="cfp-intro"></Intro>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import CfpHeader from '@/components/CFP/Header.vue';
-import Intro from '@/components/CFP/Intro.vue';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import CfpHeader from "@/components/CFP/Header.vue";
+import Intro from "@/components/CFP/Intro.vue";
 
 @Component({
   components: {
     CfpHeader,
-    Intro
-  }
+    Intro,
+  },
 })
 export default class CFP extends Vue {
   @Prop() private msg!: string;