Merge branch 'wft-dont-use-px-with-font-size' into dev2

src/assets/scss/CFP/intro.scss

@@ -10,11 +10,12 @@ $buttonHoverColor: #ffffff;
 @mixin hyperlinkFont() {
   text-decoration: underline;
 }
+
 // font size
-$h1FontSize: 30px;
-$h2FontSize: 24px;
-$h3FontSize: 16px;
-$contextFontSize: 13px;
+$h1FontSize: 42pt;
+$h2FontSize: 27pt;
+$h3FontSize: 20pt;
+// $contextFontSize: 13px;
 $buttonFontSize: 24px;
 
 $mh1FontSize: 26px;
@@ -36,6 +37,16 @@ $hyperlinkLetterSpace: 0;
 $buttonHoverBg: #226bb4;
 
 #cfp {
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 2em;
+  }
+
+  p {
+    line-height: 2;
+  }
+
   .introduction-container {
     overflow-x: hidden;
     overflow-y: hidden;
@@ -62,24 +73,24 @@ $buttonHoverBg: #226bb4;
 
   .about-section {
     // font
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     letter-spacing: $contextLetterSpace;
-    line-height: 42px;
+    //line-height: 42px;
     width: 90%;
 
     @media screen and(max-width: 414px) {
-      font-size: $mcontextFontSize;
+      // font-size: $mcontextFontSize;
       width: 160%;
     }
   }
 
   .discuss-section {
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     letter-spacing: $contextLetterSpace;
-    line-height: 42px;
+    // line-height: 42px;
 
     @media screen and(max-width: 414px) {
-      font-size: $mcontextFontSize;
+      // font-size: $mcontextFontSize;
       width: 80%;
     }
   }
@@ -88,11 +99,11 @@ $buttonHoverBg: #226bb4;
     // size
     margin-top: 130px;
     // font
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     letter-spacing: $contextLetterSpace;
-    line-height: 42px;
+    // line-height: 42px;
 
-    width: 1100px;
+    // width: 1100px;
 
     @media screen and(max-width: 414px) {
       margin-top: 50%;
@@ -105,9 +116,9 @@ $buttonHoverBg: #226bb4;
     margin-top: 70px;
     height: 325px;
     // font
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     letter-spacing: $contextLetterSpace;
-    line-height: 42px;
+    // line-height: 42px;
 
     @media screen and(max-width: 414px) {
       margin-top: 40%;
@@ -122,7 +133,7 @@ $buttonHoverBg: #226bb4;
     font-size: $buttonFontSize;
     font-weight: 900;
     letter-spacing: $buttonLetterSpace;
-    line-height: 30px;
+    // line-height: 30px;
     // size
     margin-right: 37px;
     padding: 12px 15px 12px 15px;
@@ -184,12 +195,12 @@ $buttonHoverBg: #226bb4;
     margin-right: 35px;
     // align
     vertical-align: bottom;
-    line-height: 30px;
+    // line-height: 16pt;
 
     @media screen and(max-width:414px) {
-      font-size: 30px;
+      font-size: 16pt;
       margin-right: 10px;
-      line-height: 50px;
+      //line-height: 1.5;
       vertical-align: middle;
     }
   }
@@ -208,7 +219,7 @@ $buttonHoverBg: #226bb4;
   h1 {
     // font
     font-size: $h1FontSize;
-    line-height: 70px;
+    //@function: 70px;
     font-weight: 900;
     letter-spacing: $titleLetterSpace;
 
@@ -216,7 +227,7 @@ $buttonHoverBg: #226bb4;
       font-size: $enlargeFontSize;
 
       @media screen and (max-width: 414px) {
-        line-height: 50px;
+        // line-height: 50px;
         margin-bottom: 50px;
       }
     }
@@ -226,7 +237,7 @@ $buttonHoverBg: #226bb4;
     }
 
     @media screen and (max-width: 414px) {
-      line-height: 60px;
+      // line-height: 60px;
     }
   }
 
@@ -242,20 +253,20 @@ $buttonHoverBg: #226bb4;
 
   h2 {
     // font
-    font-size: $h2FontSize;
+    // font-size: $h2FontSize;
     letter-spacing: $titleLetterSpace;
     font-weight: 900;
-    line-height: 70px;
-    margin: 0px;
+    //line-height: 70px;
+    // margin: 0px;
   }
 
   h3 {
     // Font
-    font-size: $h3FontSize;
+    // font-size: $h3FontSize;
     letter-spacing: $titleLetterSpace;
     font-weight: 900;
-    line-height: 15px;
-    margin: 0px;
+    //line-height: 15px;
+    // margin: 0px;
   }
 
   .about-section > .context {
@@ -266,20 +277,22 @@ $buttonHoverBg: #226bb4;
     margin-right: 30%;
   }
 
+  /*
   .context {
     // font
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     line-height: 30px;
     letter-spacing: $contextLetterSpace;
     font-weight: normal;
   }
+  */
 
   .detail {
     // display
     display: inline;
     // font
-    font-size: $contextFontSize;
-    line-height: 20px;
+    // font-size: $contextFontSize;
+    // line-height: 20px;
     letter-spacing: $contextLetterSpace;
     font-weight: normal;
     // align
@@ -288,17 +301,17 @@ $buttonHoverBg: #226bb4;
 
     @media screen and (max-width: 414px) {
       margin-right: 25%;
-      line-height: 35px;
-      font-size: $mcontextFontSize;
+      //line-height: 35px;
+      // font-size: $mcontextFontSize;
     }
   }
 
   .context-span {
     // font
-    font-size: $contextFontSize;
+    // font-size: $contextFontSize;
     font-weight: 900;
     letter-spacing: $contextLetterSpace;
-    line-height: 42px;
+    //line-height: 42px;
   }
 
   .context-hyperlink {
@@ -307,13 +320,13 @@ $buttonHoverBg: #226bb4;
     letter-spacing: $hyperlinkLetterSpace;
     color: $light-blue;
     font-weight: normal;
-    line-height: 42px;
+    //line-height: 42px;
   }
 
   p.tag {
     // font
     font-size: 14px;
-    line-height: 15px;
+    // line-height: 15px;
     letter-spacing: 0;
     font-weight: 900;
     // align
@@ -328,7 +341,7 @@ $buttonHoverBg: #226bb4;
 
   p.tag.sub {
     font-size: 12px;
-    line-height: 10px;
+    // line-height: 10px;
 
     @media screen and (max-width: 414px) {
       font-size: 12px;
@@ -343,7 +356,7 @@ $buttonHoverBg: #226bb4;
     text-align: center;
 
     @media screen and (max-width: 414px) {
-      line-height: 12px;
+      //  line-height: 12px;
       font-size: 10px;
     }
   }
@@ -369,7 +382,7 @@ $buttonHoverBg: #226bb4;
 
   .thumbnails {
     // box
-    margin-left: -20.5px;
+    // margin-left: -20.5px;
 
     @media screen and (max-width: 414px) {
       margin-left: -9px;
@@ -692,3 +705,117 @@ $buttonHoverBg: #226bb4;
     }
   }
 }
+
+// General settings: font-size and paragraph spacing
+#cfp-intro {
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 1em;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 1em;
+    line-height: 1.75;
+  }
+
+  h1,
+  .h1 {
+    font-size: 42pt;
+    font-weight: 900;
+  }
+
+  h2,
+  .h2 {
+    font-size: 26pt;
+    font-weight: 900;
+  }
+
+  h3,
+  .h3 {
+    font-size: 22pt;
+    font-weight: 900;
+  }
+}
+
+// Utiliy
+#cfp-intro {
+  .mr-2 {
+    margin-right: 2em;
+  }
+  .ml-2 {
+    margin-left: 2em;
+  }
+  .mt-1 {
+    margin-top: 1em;
+  }
+}
+
+#cfp-intro {
+  .box-back {
+    margin-top: -120px;
+    width: 880px;
+
+    .about-sitcon {
+      margin-bottom: 2em;
+    }
+
+    .past-sitcon {
+      margin-bottom: 2em;
+
+      .thumbnails {
+        display: flex;
+        flex-direction: row;
+        padding: 0.25em 0;
+
+        .thumb-wrapper {
+          .thumb-title,
+          .thumb-subtitle {
+            margin: 0;
+            font-size: 0.8em;
+            line-height: 1.75em;
+            font-weight: 900;
+          }
+
+          .small {
+            font-size: 0.6em;
+          }
+
+          &:not(:last-child) {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    .join-discuss {
+      // empty
+    }
+  }
+
+  .box-back2 {
+    width: 760px;
+
+    .about-topic {
+      margin-bottom: 1em;
+    }
+
+    .cfp-deadline {
+      margin-bottom: 7em;
+      .cfp-deadline-content {
+        margin-top: -1.5em;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+      }
+    }
+
+    .give-me-money {
+      .whisper {
+        font-weight: 900;
+        font-size: 1.25em;
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+}

src/assets/scss/main.scss

@@ -23,13 +23,14 @@
 
 body {
   width: 100vw;
+  height: 100vh;
+
   position: relative;
   overflow-x: hidden;
+  
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  font-size: 14pt;
-  margin:0;
+  font-size: 13pt;
 }
 
 #app {

src/assets/scss/util.scss

@@ -1,3 +1,5 @@
+@import 'color';
+
 .text-center {
   text-align: center;
   .ignore {
@@ -33,3 +35,28 @@
 .d-inline-block {
   display: inline-block;
 }
+
+.btn {
+  display: inline-block;
+  padding: 0.85em 1.25em;
+
+  font-size: 1.1em;
+  font-weight: 900;
+  border: none;
+  border-radius: 8px;
+
+  &.btn-primary {
+    background-color: #ffffff;
+    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+    transition-duration: 0.2s;
+    color: $mid-blue;
+
+    &:hover {
+      // box
+      background-color: $mid-blue;
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
+      // font
+      color: $white;
+    }
+  }
+}

src/components/CFP/Intro.vue

@@ -1,9 +1,7 @@
 <template>
-    <main class="introduction-container">
-
-        <div class="introduction">
-
-            <img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/>
+  <main class="introduction-container">
+    <div class="introduction">
+      <img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/>
             <img src="@/assets/images/cfp/Group 10.svg" class="sitcon-icon"/>
             <img src="@/assets/images/cfp/Path 733.svg" class="sitcon-pic-2021"/>
             <img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh"/>
@@ -19,65 +17,72 @@
             <svg width="1200" height="1000" class="first-box">
               <rect width="1200" height="1000" style="fill:#ffffff;" />
             </svg>
-            <div class="box-back">
-                <h1>關於 SITCON</h1>
-                <div class="about-section">
-                    <p class="context">
-                        學生計算機年會（SITCON）自 2013
-                        年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
-                    </p>
-                </div>
-
-                <h2>歷屆年會網站</h2>
-                <div class="thumbnails">
-                    <table class="img-table">
-                        <tr>
-                            <td class="td-width" onclick="window.location.href='/2020'">
-                                <img class="cfp-img" src="@/assets/images/cfp/2020.png" />
-                                <p class="tag">SITCON 2020<br /></p>
-                                <p class="tag sub">#define</p>
-                            </td>
-                            <td class="td-width" onclick="window.location.href='/2019'">
-                                <img class="cfp-img" src="@/assets/images/cfp/2019.png" />
-                                <p class="tag">SITCON 2019<br /></p>
-                                <p class="tag sub">開箱演算法</p>
-                            </td>
-                            <td class="td-width" onclick="window.location.href='/2018'">
-                                <img class="cfp-img" src="@/assets/images/cfp/2018.png" />
-                                <p class="tag">SITCON 2018<br /></p>
-                                <p class="small-tag">POPULAR COMPUTER SCIENCE</p>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
-                <h2>參與討論！</h2>
-                <div class="discuss-section">
-                    <p class="context">
-                        SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
-                        上進行<br />
-                        討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
-                        並貢獻你的想法！
-                    </p>
-                    <p class="context" style="margin-top: 22px; margin-bottom: 22px">
-                        若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
-                        的會議記錄。
-                    </p>
-                </div>
-                <div>
-                    <button
-                        class="buttons"
-                        onclick="window.location.href='https://groups.google.com/g/sitcon-general'"
-                    ><h3>SITCON 論壇</h3></button>
-                    <button
-                        class="buttons"
-                        onclick="window.location.href='https://hackmd.io/@SITCON/SITCON2021'"
-                    ><h3>會議記錄</h3></button>
-                </div>
+      <div class="box-back box">
+        <div class="about-sitcon">
+          <h2>關於 SITCON</h2>
+          <p>
+            學生計算機年會（SITCON）自 2013
+            年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+          </p>
+        </div>
+        <div class="past-sitcon">
+          <h3>歷屆年會網站</h3>
+          <div class="thumbnails">
+            <div class="thumb-wrapper">
+              <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>
-            
-            <!-- first part -->
-            <!-- second part -->
-            <img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
+            <div class="thumb-wrapper">
+              <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">
+              <img class="cfp-img" src="@/assets/images/cfp/2018.png" />
+              <p class="thumb-title text-center">SITCON 2018<br /></p>
+              <!-- TODO align 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 是個開放的社群，許多籌備的相關事項都會在公開的 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>
+
+      <!-- first part -->
+      <!-- second part -->
+      <img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
             <svg width="1500" height="1500" class="second-box">
               <rect width="1500" height="1500" style="fill:#ffffff;" />
             </svg>
@@ -87,65 +92,93 @@
             <svg width="1500" height="900" class="hiden-box">
               <rect width="1500" height="900" style="fill:#ffffff;" />
             </svg>
-            <div class="box-back2" style="margin-top: 1000px;">
-                <div class="topic-intro">
-                    <!-- <h1 class="right"></h1> -->
-                    <h1 class="right">
-                        2021 年會主題<br/>
-                        <span class="enlarge">算盤的後裔</span>
-                    </h1>
-                    <p class="context">
-                        千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
-                    </p>
-                    <p class="context">
-                        人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
-                    </p>
-                    <img src="@/assets/images/cfp/paper/paper.png" class="paper-image" />
-                    <h2>徵稿時間</h2>
-                    <div>
-                        <h2 class="date">01/15 ~ 02/22</h2>
-                        <p class="detail">
-                            詳細時程請見
-                        </p>
-                        <div class="button-post">
-                            <button
-                                class="buttons"
-                                onclick="window.location.href='/cfp/news'"
-                            ><h3>投稿資訊</h3></button>
-                            <!-- NOTE: this button's hover won't work because paper.png is too big -->
-                            <button
-                                class="buttons"
-                                onclick="window.location.href='https://forms.gle/XoXJSD2P8dL8X8s2A'"
-                            ><h3>不用說了，快讓我投稿！</h3></button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="last-part">
-                    <h3>最後...</h3>
-                    <h1>SITCON 贊助徵求</h1>
-                    <!--style="margin-top:-30px;"-->
-                    <p class="context">
-                        SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
-                        如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
-                        的運作，讓更多交流產生！
-                    </p>
-                    <p class="context">
-                        企業合作歡迎聯繫
-                        <a class="context-hyperlink" href="mailto:contact@sitcon.org">contact@sitcon.org</a>
-                    </p>
-                    <div>
-                        <button
-                            class="buttons"
-                            onclick="window.location.href='http://bit.ly/donatesitcon2021'"
-                        ><h3>個人贊助方案</h3></button>
-                    </div>
-                </div>
-                <!-- second part -->
+
+      <div class="box-back2 box" style="margin-top: 1000px">
+        <div class="topic-intro">
+          <div class="about-topic">
+            <h2>2021 年會主題</h2>
+            <h1>算盤的後裔</h1>
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+            </p>
+            <p>
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
+            </p>
+          </div>
+
+          <!-- TODO This cover the button -->
+          <img
+            src="@/assets/images/cfp/paper/paper.png"
+            class="paper-image"
+            style="z-index: 999"
+          />
+
+          <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="/news"
+                >投稿資訊</a
+              ><a
+                class="btn btn-primary"
+                rel="noopener"
+                target="_blank"
+                href="https://forms.gle/XoXJSD2P8dL8X8s2A"
+                ><!-- TODO Omit some characters to fit the size -->快讓我投稿！</a
+              >
             </div>
-            
+            <!--
+            <div>
+              <h3 class="date">01/15 ~ 02/22</h3>
+              <p class="detail">詳細時程請見</p>
+              <div class="button-post">
+                <button class="buttons" onclick="window.location.href='/news'">
+                  <h3>投稿資訊</h3>
+                </button>
+                <button
+                  class="buttons"
+                  onclick="window.location.href='https://forms.gle/XoXJSD2P8dL8X8s2A'"
+                >
+                  <h3>不用說了，快讓我投稿！</h3>
+                </button>
+              </div>
+            </div>
+            -->
+          </div>
         </div>
-    </main>
+
+        <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>
+      </div>
+    </div>
+  </main>
 </template>
 
 <script lang="ts">
@@ -155,5 +188,5 @@ export default class IntrodContainer extends Vue {}
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/CFP/intro';
+@import "@/assets/scss/CFP/intro";
 </style>