[Style] rwd for Intro (sm, md, lg)

src/assets/scss/CFP/bg.scss

@@ -17,7 +17,19 @@ $zm-korea-fish: -10;
 $zm-first-card: -9;
 $zm-blue-bar: -8;
 $zm-second-card: -7;
+$zm-third-card: -6;
 
+// general
+#cfp-bg {
+  .card {
+    transform: rotate(15deg);
+    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+    border-radius: 30px;
+    background: $white;
+  }
+}
+
+// lg
 #cfp-bg {
   width: 100vw;
   z-index: $z-section;
@@ -50,12 +62,11 @@ $zm-second-card: -7;
 
   .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;
+      width: 1000px;
+      height: 950px;
       z-index: $z-first-card;
     }
 
@@ -82,31 +93,19 @@ $zm-second-card: -7;
     }
 
     .card2-wrapper {
-      height: 1300px;
+      height: 1600px;
       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;
-      }
+        width: 1500px;
-    }
+        height: 1200px;
-  }
-}
-
-@media screen and (min-width: 1921px) {
-  #cfp-bg {
-    .korea-fish {
-      .radial {
-        margin-top: calc(576px - 30vw);
-        width: 100vw;
       }
     }
   }
@@ -128,9 +127,115 @@ $zm-second-card: -7;
         width: 1666px;
       }
     }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: 172px;
+        right: 108px;
+        width: 1400px; // enough
+        height: 1100px;
+        z-index: $zm-first-card;
+      }
+
+      .blue-bar {
+        z-index: $zm-blue-bar;
+        width: 3600px; // this is enough
+        height: 240px;
+        position: relative;
+        right: 160px;
+        top: 400px;
+
+        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: 900px;
+          top: 362px;
+          right: 90px;
+        }
+      }
+    }
   }
 }
 
+@include sm {
+  #cfp-bg {
+    .korea-fish {
+      .sitcon-apple {
+        margin-top: 320px;
+        width: 216px;
+      }
+      .ellipse {
+        margin-top: 280px;
+        width: 420px;
+      }
+      .radial {
+        margin-top: 0;
+        width: 1666px;
+      }
+    }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: 0px;
+        right: 180px;
+        height: 1500px;
+      }
+
+      .blue-bar {
+        position: relative;
+        right: 160px;
+        top: 240px;
+
+        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;
+          top: 198px;
+          right: 90px;
+        }
+      }
+    }
+  }
+}
+
+/*
+@media screen and (min-width: 1921px) {
+  #cfp-bg {
+    .korea-fish {
+      .radial {
+        margin-top: calc(576px - 30vw);
+        width: 100vw;
+      }
+    }
+  }
+}
+
+@include md {
+  
+}
+
 @include sm {
   #cfp-bg {
     .korea-fish {
@@ -168,3 +273,4 @@ $zm-second-card: -7;
     }
   }
 }
+*/

src/assets/scss/CFP/intro.scss

@@ -21,6 +21,10 @@ $fontColor: $mid-blue;
   .h1 {
     font-size: 42pt;
     font-weight: 900;
+
+    @include sm {
+      font-size: 38pt;
+    }
   }
 
   h2,
@@ -33,6 +37,9 @@ $fontColor: $mid-blue;
   .h3 {
     font-size: 22pt;
     font-weight: 900;
+    @include sm {
+      font-size: 19pt;
+    }
   }
 }
 
@@ -47,6 +54,9 @@ $fontColor: $mid-blue;
   .mt-1 {
     margin-top: 1em;
   }
+  .mb-1 {
+    margin-bottom: 1em;
+  }
 }
 
 #cfp-intro {
@@ -106,11 +116,11 @@ $fontColor: $mid-blue;
     padding-top: 180px;
 
     .about-topic {
-     // empty
+      // empty
     }
 
     .cfp-deadline {
-       margin-bottom: 2.5em;
+      margin-bottom: 2.5em;
 
       .cfp-deadline-content {
         margin-top: -1.5em;
@@ -130,89 +140,129 @@ $fontColor: $mid-blue;
   }
 }
 
-@include md {
+@include lg {
-  //for width 786px
   #cfp-intro {
-    h1,
+    padding-left: 135px;
-    h2,
+    padding-right: 135px;
-    h3 {
+    .box-back2 {
-      margin-bottom: 12pt;
+      width: initial;
-    }
-
-    p {
-      font-size: 14pt;
-      line-height: 1.75;
-      width: 85vw;
-    }
-
-    p:not(:last-child) {
-      margin-bottom: 2em;
     }
   }
+}
+
+@include md {
   #cfp-intro {
+    padding-top: 72px;
+    padding-bottom: 144px;
+    padding-left: 0px;
+    padding-right: 0px;
+    color: $fontColor;
+
+    .box {
+      width: 632px;
+      margin: 0 auto;
+    }
+
     .box-back {
-      margin-bottom: -42em;
+      padding-top: 120px;
-      margin-left: -6em;
+      padding-bottom: 90px;
-
-      .first-box {
-        transform: rotate(12deg) scale(1.2);
-        bottom: 520px;
-        left: 100px;
-      }
-
-      .introd-text {
-        top: 120px;
-      }
 
       .past-sitcon {
+        .cfp-img {
+          width: 180px; //225
+          height: 121px; //152
+        }
+
         .thumbnails {
           .thumb-wrapper {
-            width: 200.5px; //25vw;
+            &:not(:last-child) {
-            .thumb-title,
+              margin-right: 1em;
-            .thumb-subtitle {
-              width: 185.5px; //25vw;
             }
           }
         }
       }
     }
-  }
 
-  #cfp-intro {
-    .box-bluearea {
-      height: 200px;
-      z-index: 0;
-      transform: rotate(12deg);
-    }
-  }
-
-  #cfp-intro {
     .box-back2 {
-      margin-top: 1em;
+      padding-top: 280px;
-      margin-left: -2em;
 
-      .second-box {
+      .topic-intro {
-        transform: rotate(12deg);
+        .cfp-deadline {
-        bottom: 1030px;
+          .cfp-deadline-content {
-        left: -5em;
+            display: initial;
+          }
+        }
       }
-    }
-  }
 
-  #cfp-intro {
+      .give-me-money {
-    //button util
+        margin-top: 240px;
-    .mr-2 {
+      }
-      margin-right: 0.5em;
-    }
-    .ml-2 {
-      margin-left: 0.5em;
-    }
-    .mt-1 {
-      margin-top: 1em;
     }
   }
 }
 
+@include sm {
+  #cfp-intro {
+    padding-top: 96px;
+    padding-bottom: 60px;
+    padding-left: 36px;
+    padding-right: 36px;
+    color: $fontColor;
+
+    p {
+      font-size: 0.9em;
+    }
+
+    .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: 380px;
+
+      .topic-intro {
+        .cfp-deadline {
+          .cfp-deadline-content {
+            display: initial;
+          }
+        }
+      }
+
+      .give-me-money {
+        margin-top: 140px;
+      }
+    }
+  }
+}
+
+/*
 @include sm {
   //for width 600px
 
@@ -549,3 +599,4 @@ $fontColor: $mid-blue;
     }
   }
 }
+*/

src/assets/scss/hyperpoint.scss

@@ -23,6 +23,7 @@ $w414: 414px;
   }
 }
 
+// WTF is this
 @mixin ss {
   @media screen and (max-width: $w523 - 1px) {
     @content;
@@ -34,3 +35,15 @@ $w414: 414px;
     @content;
   }
 }
+
+.desktop-only {
+  @media screen and (max-width: $w1366 - 1px) {
+    display: none;
+  }
+}
+
+.mobile-only {
+  @media screen and (min-width: $w1366) {
+    display: none;
+  }
+}

src/components/CFP/Intro.vue

@@ -90,20 +90,40 @@
         <div class="cfp-deadline">
           <h3>徵稿時間</h3>
           <div class="cfp-deadline-content">
-            <span class="h3">01/15 ～ 02/22</span
+            <p class="desktop-only">
-            ><span class="ml-2 mr-2">詳細時程請見</span
+              <span class="h3">01/15 ～ 02/22</span
-            ><a
+              ><span class="ml-2 mr-2">詳細時程請見</span
-              class="btn btn-primary mr-2"
+              ><a
-              rel="noopener"
+                class="btn btn-primary mr-2"
-              href="/2021/cfp/news"
+                rel="noopener"
-              >投稿資訊</a
+                href="/2021/cfp/news"
-            ><a
+                >投稿資訊</a
-              class="btn btn-primary"
+              ><a
-              rel="noopener"
+                class="btn btn-primary"
-              target="_blank"
+                rel="noopener"
-              href="https://forms.gle/XoXJSD2P8dL8X8s2A"
+                target="_blank"
-              >我知道了，快讓我投稿！</a
+                href="https://forms.gle/XoXJSD2P8dL8X8s2A"
-            >
+                >我知道了，快讓我投稿！</a
+              >
+            </p>
+            <p class="mobile-only mb-1">
+              <span class="h3">01/15 ～ 02/22</span
+              ><span class="ml-2">詳細時程請見</span>
+            </p>
+            <p class="mobile-only">
+              <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
+              >
+            </p>
           </div>
         </div>
       </div>

src/pages/CFP.vue

@@ -7,28 +7,14 @@
         <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">
+        <div class="first-card 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>
+          <p class="desktop-only">Descendents of The Abacus</p>
+          <p class="mobile-only">Descendents of<br />The Abacus</p>
         </div>
         <div class="card2-wrapper">
-          <svg
+          <div class="second-card card" />
-            width="1500"
+          <div class="third-card card mobile-only" />
-            height="1200"
-            class="second-box second-card"
-          >
-            <rect
-              width="1500"
-              height="1200"
-              style="fill: rgb(255, 255, 255)"
-            ></rect>
-          </svg>
         </div>
       </div>
     </div>