[Update] complete home without RWD

src/assets/scss/home/home.scss

@@ -1,26 +1,27 @@
+@import "../color.scss";
 $font-home: "Noto Serif CJK TC -SemiBold";
 $font-home-h1: "Noto Serif CJK TC -Bold";
 $font-home-h2: "Letter Gothic Std Bold";
+$font-home-button: "Noto Serif CJK TC -Black";
 
 .section {
   &-title {
     margin-top: 150px;
-    height: 500px;
+    height: 583px;
     // background-color: chartreuse;
   }
   &-content {
-    height: 1000px;
+    height: 1900px;
     // background-color: cornsilk;
   }
 }
 
 .home {
-  // font-family: "Courier New", Courier, monospace;
   font-family: $font-home;
   position: relative;
-  text-align: center;
   &__title {
     width: 600px;
+    text-align: center;
     // background-color: cornflowerblue;
     margin: 0 auto;
     padding-top: 10px;
@@ -42,6 +43,7 @@ $font-home-h2: "Letter Gothic Std Bold";
     }
 
     &-box2 {
+      text-align: center;
       // background-color: chocolate;
       height: 80px;
       width: 600px;
@@ -54,28 +56,94 @@ $font-home-h2: "Letter Gothic Std Bold";
   }
 
   &__info {
-    width: 60%;
+    width: 75%;
+    padding-bottom: 75px;
     // background-color: darkseagreen;
+    // border: 1px solid blueviolet;
     margin: 0 auto;
 
+    position: relative;
+
     &-container {
-      width: 95%;
+      width: 75%;
-      margin-left: 5%;
+      margin-left: 15%;
     }
 
     &-title {
       // background-color: darkgray;
-      height: 100px;
+      // height: 100px;
-
       h1 {
         font-family: $font-home-h1;
         font-size: 26pt;
+        padding-top: 25px;
       }
 
       h2 {
         font-family: $font-home-h2;
-        font-size: 28pt;
+        // font-size: 32pt;
+        padding-top: 25px;
+      }
+
+      &-h2 {
+        &--small {
+          font-size: 19pt;
+        }
+        &--mid {
+          font-size: 23pt;
+        }
+        &--big {
+          font-size: 31pt;
+        }
       }
     }
+
+    &-paragraph {
+      padding-top: 30px;
+      // background-color: yellow;
+      p {
+        font-size: 12pt;
+        line-height: 33px;
+        a {
+          text-decoration: underline;
+          color: $indigo-blue;
+        }
+      }
+    }
+
+    &-buttonsBox {
+      height: 50px;
+      width: 245px;
+      margin-top: 40px;
+      // background-color: burlywood;
+    }
+  }
+
+  &-button {
+    font-family: $font-home-button;
+    font-size: 12.5pt;
+    position: relative;
+    top: 15px;
+    color: $white;
+    background-color: $indigo-blue;
+    padding: 6px 17px 8px 17px;
+    border-radius: 32px;
+    box-shadow: 0 3px 10px 0 rgba(0, 0, 255, 0.18);
+    margin-right: 20px;
+  }
+
+  &-squareImg {
+    position: absolute;
+    left: 0;
+  }
+
+  &-appleImg {
+    position: absolute;
+    top: -30px;
+    right: 80px;
+  }
+
+  &-sponsorsImg {
+    position: absolute;
+    bottom: 0;
   }
 }

src/pages/Home.vue

@@ -9,11 +9,7 @@
           <p>SITCON 學生計算機年會 2021</p>
         </div>
         <div class="home__title-topic">
-          <img
+          <img src="~@/assets/images/home/home-topic.svg" width="500" />
-            class="sitcon-apple"
-            src="~@/assets/images/home/home-topic.svg"
-            width="500"
-          />
         </div>
         <div class="home__title-box2">
           <p>
@@ -24,31 +20,62 @@
     </section>
     <section class="section-content">
       <section class="home__info">
+        <img
+          class="home-squareImg"
+          src="~@/assets/images/home/home-icon-square.svg"
+          width="120"
+        />
         <div class="home__info-container">
           <div class="home__info-title">
             <h1>算盤的後裔</h1>
-            <h2>Descendants of the abacus</h2>
+            <h2 class="home__info-title-h2--big">Descendants of the abacus</h2>
           </div>
           <div class="home__info-paragraph">
             <p>
               千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              <br />
               俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              <br />
+              <br />
               人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
             </p>
           </div>
         </div>
       </section>
+      <section class="home__info">
+        <img
+          class="home-appleImg"
+          src="~@/assets/images/home/home-icon-apple.svg"
+          width="120"
+        />
+        <div class="home__info-container">
+          <div class="home__info-title">
+            <h1>關於 SITCON</h1>
+            <h2 class="home__info-title-h2--small">
+              Students' Information Technology Conference
+            </h2>
+          </div>
+          <div class="home__info-paragraph">
+            <p>
+              學生計算機年會（SITCON）自 2013
+              年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+            </p>
+          </div>
+        </div>
+      </section>
       <section class="home__info">
         <div class="home__info-container">
           <div class="home__info-title">
-            <h1 class="home__info-title--1">算盤的後裔</h1>
+            <h1>行為準則</h1>
-            <h2 class="home__info-title--2">Descendants of the abacus</h2>
+            <h2 class="home__info-title-h2--mid">Code of Conduct</h2>
           </div>
           <div class="home__info-paragraph">
             <p>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              SITCON
-              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+              SITCON，我們要求所有參與者閱讀年會的<a href=""
+                >行為準則（Code of Conduct）</a
+              >，共同創造一個友善的環境。
             </p>
           </div>
         </div>
@@ -56,34 +83,34 @@
       <section class="home__info">
         <div class="home__info-container">
           <div class="home__info-title">
-            <h1 class="home__info-title--1">算盤的後裔</h1>
+            <h1>參與討論</h1>
-            <h2 class="home__info-title--2">Descendants of the abacus</h2>
+            <h2 class="home__info-title-h2--mid">Join the community</h2>
           </div>
           <div class="home__info-paragraph">
             <p>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              SITCON
-              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+              SITCON 的郵件論壇並貢獻你的想法！
-            </p>
+              <br />
-          </div>
+              <br />
-        </div>
+              若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
-      </section>
+              的會議記錄。
-      <section class="home__info">
-        <div class="home__info-container">
-          <div class="home__info-title">
-            <h1 class="home__info-title--1">算盤的後裔</h1>
-            <h2 class="home__info-title--2">Descendants of the abacus</h2>
-          </div>
-          <div class="home__info-paragraph">
-            <p>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
-              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
             </p>
           </div>
+          <div class="home__info-buttonsBox">
+            <a href="" class="home-button">郵件論壇</a>
+            <a href="" class="home-button">會議記錄</a>
+          </div>
         </div>
       </section>
+      <img
+        class="home-sponsorsImg"
+        src="~@/assets/images/home/home-sponsors.png"
+        width="100%"
+      />
     </section>
+    <!-- <section class="section-sponsors">
+    </section> -->
   </div>
 </template>