[Style] Reorganize

src/assets/scss/CFP/card.scss

@@ -1,34 +0,0 @@
-@import '../breakpoint.scss';
-@import '../color.scss';
-
-.agenda.card:not(.container) {
-    a.image.container {
-        display: inline-block;
-        width: 100%;
-        line-height: 0; // prevent background overflow
-        background-color: #ffffff;
-        border-radius: 11px;
-        box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56);
-        
-        // smooth transition from hover -> default state
-        will-change: transform;
-        transform: scale(1.0);
-        transition-duration: .25s;
-
-        img {
-            border-radius: 11px;
-            width: 100%;
-        }
-
-        &:hover {
-            transform: scale(1.04);
-            transition-duration: .25s;
-        }
-    }
-
-    p.description {
-        line-height: 1.55em;
-        text-align: center;
-        font-weight: 900;
-    }
-}

src/assets/scss/CFP/intro.scss

@@ -1,7 +1,7 @@
 // font
 $fontFamily: 'Noto Sans TC', sans-serif;
 $fontStyle: normal;
-$light-blue: #3D93E9;
+$light-blue: #3d93e9;
 $fontColor: #226bb4;
 $buttonHoverColor: #ffffff;
 @mixin Font() {
@@ -33,7 +33,7 @@ $buttonLetterSpace: 0;
 $hyperlinkLetterSpace: 0;
 
 // background
-$buttonHoverBg: #226BB4;
+$buttonHoverBg: #226bb4;
 
 #cfp {
   .introduction-container {
@@ -193,7 +193,12 @@ $buttonHoverBg: #226BB4;
   }
 }
 
-h1, h2, h3, p, span {
+#cfp-intro {
+  h1,
+  h2,
+  h3,
+  p,
+  span {
     font-family: $fontFamily;
     color: $fontColor;
   }
@@ -514,7 +519,6 @@ p.small-tag {
       padding-top: -565px;
       margin-bottom: -665px;
     }
-  
   }
 
   .des-blue-bar {
@@ -581,7 +585,7 @@ p.small-tag {
 
     @media screen and(max-width: 414px) {
       margin-top: -20%;
-    transform: scale(0.60);
+      transform: scale(0.6);
     }
   }
 
@@ -680,3 +684,4 @@ p.small-tag {
       transform: scale(0.6);
     }
   }
+}

src/assets/scss/CFP/topic.scss

@@ -1,46 +0,0 @@
-@import '../breakpoint.scss';
-@import '../color.scss';
-
-.topic {
-    padding: 30px 0;
-
-    display: grid;
-    grid-template-columns: 256px min-content 1fr;
-
-    h3.title {
-        line-height: 1.67em;
-    }
-
-    .divider {
-        width: 0;
-        height: 100%;
-        border-left: 2px $mid-blue solid;
-        margin: 0 37px;
-    }
-
-    .title, .description {
-        display: flex;
-        align-items: center;
-    }
-}
-
-@include md {
-    .topic {
-        grid-template-columns: 1fr;
-        padding: 20px 0;
-
-        h3.title {
-            br[data-delimiter="："] {
-                display: none;
-            }
-        }
-
-        .divider {
-            width: 100%;
-            height: 0;
-            border-bottom: none;
-            border-top: 2px $mid-blue solid;
-            margin: 15px 0;
-        }
-    }
-}

src/assets/scss/news/agenda.scss

@@ -1,4 +1,4 @@
-@import '../color.scss';
+@import '../color';
 
 $fontColor: #226bb4; // added to solve unnamed color error
 
@@ -15,7 +15,7 @@ $fontColor: #226bb4; // added to solve unnamed color error
 // $color-slate-blue: #5f7a95;
 // $color-mid-blue: #226bb4;
 
-$fontFamily-NotoSansTC: "Noto Sans TC";
+$fontFamily-NotoSansTC: 'Noto Sans TC';
 
 //@mixin
 @mixin clearFloat() {
@@ -134,7 +134,6 @@ $limitWidth: 80vw;
         letter-spacing: normal;
         text-align: center;
         font-size: 34px;
-        
       }
       &-text {
         width: 100%;
@@ -143,7 +142,7 @@ $limitWidth: 80vw;
         text-align: left;
 
         font-size: 19px;
-        P {
+        p {
           color: $white;
           font-family: $fontFamily-NotoSansTC;
           margin: 15px 0;
@@ -167,8 +166,6 @@ $limitWidth: 80vw;
       //   }
     }
 
-
-
     // &__itemBox {
     //   float: left;
     //   padding: 26px 20px 34px 20px;

src/assets/scss/news/card.scss

@@ -0,0 +1,34 @@
+@import '../breakpoint';
+@import '../color';
+
+.agenda.card:not(.container) {
+  a.image.container {
+    display: inline-block;
+    width: 100%;
+    line-height: 0; // prevent background overflow
+    background-color: #ffffff;
+    border-radius: 11px;
+    box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56);
+
+    // smooth transition from hover -> default state
+    will-change: transform;
+    transform: scale(1);
+    transition-duration: 0.25s;
+
+    img {
+      border-radius: 11px;
+      width: 100%;
+    }
+
+    &:hover {
+      transform: scale(1.04);
+      transition-duration: 0.25s;
+    }
+  }
+
+  p.description {
+    line-height: 1.55em;
+    text-align: center;
+    font-weight: 900;
+  }
+}

src/assets/scss/news/header.scss

@@ -1,5 +1,5 @@
-@import 'hyperpoint.scss';
+@import '../hyperpoint';
-@import 'color.scss';
+@import '../color';
 
 // desktop mode
 #news-header {
@@ -27,14 +27,22 @@
           0px 0px 10px 0px rgba(0, 0, 0, 0.2);
 
         @keyframes jump {
-          0% {position: relative;bottom: 0px;}
+          0% {
-          50% {position: relative;bottom: 20px;}
+            position: relative;
-          100% {position: relative;bottom: 0px;}
+            bottom: 0px;
+          }
+          50% {
+            position: relative;
+            bottom: 20px;
+          }
+          100% {
+            position: relative;
+            bottom: 0px;
+          }
         }
 
         &:hover {
-          animation: jump .6s ease-in 0s infinite reverse;
+          animation: jump 0.6s ease-in 0s infinite reverse;
-          
         }
 
         .text-wrapper {

src/assets/scss/news/schedule.scss

@@ -5,7 +5,7 @@
 
 $fontFamily: Noto Sans CJK TC, monospace;
 
-#info-schedule {
+#news-schedule {
   max-width: 80vw;
   margin: 0 auto;
 
@@ -91,7 +91,7 @@ $fontFamily: Noto Sans CJK TC, monospace;
 }
 
 @include md {
-  #info-schedule {
+  #news-schedule {
     margin: 0 auto;
     font-size: 14px;
 

src/assets/scss/news/topic.scss

@@ -0,0 +1,47 @@
+@import '../breakpoint';
+@import '../color';
+
+.topic {
+  padding: 30px 0;
+
+  display: grid;
+  grid-template-columns: 256px min-content 1fr;
+
+  h3.title {
+    line-height: 1.67em;
+  }
+
+  .divider {
+    width: 0;
+    height: 100%;
+    border-left: 2px $mid-blue solid;
+    margin: 0 37px;
+  }
+
+  .title,
+  .description {
+    display: flex;
+    align-items: center;
+  }
+}
+
+@include md {
+  .topic {
+    grid-template-columns: 1fr;
+    padding: 20px 0;
+
+    h3.title {
+      br[data-delimiter='：'] {
+        display: none;
+      }
+    }
+
+    .divider {
+      width: 100%;
+      height: 0;
+      border-bottom: none;
+      border-top: 2px $mid-blue solid;
+      margin: 15px 0;
+    }
+  }
+}

src/components/news/Agenda.vue

@@ -211,32 +211,38 @@ export default class Agenda extends Vue {
   private QA = [
     {
       Q: '先備知識與目標受眾有何不同？',
-          A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
+      A:
+        '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
       v: false
     },
     {
       Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？',
-          A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
+      A:
+        '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
       v: false
     },
     {
       Q: '先備知識與目標受眾有何不同？',
-          A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
+      A:
+        '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
       v: false
     },
     {
       Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？',
-          A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
+      A:
+        '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
       v: false
     },
     {
       Q: '如果我入選第二階段，可以提供哪些補充資料？',
-          A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
+      A:
+        '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
       v: false
     },
     {
       Q: '還有疑問怎麼辦？',
-          A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
+      A:
+        '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
       v: false
     }
   ];
@@ -244,10 +250,9 @@ export default class Agenda extends Vue {
   private fade = (index: number) => {
     this.QA[index].v = !this.QA[index].v;
   }
-
 }
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/CFP/agenda';
+@import "@/assets/scss/news/agenda";
 </style>

src/components/news/AgendaCard.vue

@@ -20,5 +20,5 @@ export default class AgendaCard extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/CFP/card';
+@import '@/assets/scss/news/card';
 </style>

src/components/news/Header.vue

@@ -114,3 +114,7 @@ export default class CfpHeader extends Vue {
   }
 }
 </script>
+
+<style lang="scss">
+@import '@/assets/scss/news/header'
+</style>

src/components/news/Schedule.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="info-schedule">
+    <div>
         <!-- 重要時程 -->
         <section id="schedule">
             <h1>重要時程</h1>
@@ -77,5 +77,5 @@ export default class Schedule extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/CFP/schedule';
+@import '@/assets/scss/news/schedule';
 </style>

src/components/news/Topic.vue

@@ -21,5 +21,5 @@ export default class Topic extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/CFP/topic';
+@import '@/assets/scss/news/topic';
 </style>

src/pages/CFP.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="cfp" class="cfp cfp-background">
     <!-- CfpHeader id="cfp-header"/ -->
-    <IntrodContainer></IntrodContainer>
+    <IntrodContainer id="cfp-intro"></IntrodContainer>
     
   </div>
 </template>

src/pages/News.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="news">
       <NewsHeader id="news-header" />
-      <Schedule/>
+      <Schedule id="news-schedule"/>
-      <Agenda/>
+      <Agenda id="news-agenda"/>
     <!-- <Footer></Footer> should be put at App.vue (?) -->
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import NewsHeader from '@/components/NewsHeader.vue';
+import NewsHeader from '@/components/news/Header.vue';
-import Schedule from '../components/CFP/Schedule.vue';
+import Schedule from '@/components/news/Schedule.vue';
-import Agenda from '../components/CFP/Agenda.vue';
+import Agenda from '@/components/news/Agenda.vue';
 
 @Component({
   components: {
@@ -24,7 +24,3 @@ export default class News extends Vue {
   @Prop() private msg!: string;
 }
 </script>
-
-<style lang="scss">
-@import '@/assets/scss/news'
-</style>