[Update] apply RWD for home and header (min-width: 1500, 1800)

src/assets/scss/header.scss

@@ -1,7 +1,28 @@
 @import "./color.scss";
+@import "./breakpoint.scss";
+
 $font-header-link: "Noto Serif CJK TC -Bold";
 $font-header-apply: "Noto Serif CJK TC -Black";
 
+@mixin headerLinksFontSize {
+  font-size: 12pt;
+  @media screen and (min-width: $max-width-big) {
+    font-size: 13.5pt;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    font-size: 15pt;
+  }
+}
+@mixin headerLinksWidth {
+  width: 600px;
+  @media screen and (min-width: $max-width-big) {
+    width: 630px;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    width: 680px;
+  }
+}
+
 .header {
   position: relative;
   z-index: 99;
@@ -29,17 +50,21 @@ $font-header-apply: "Noto Serif CJK TC -Black";
     left: 35px;
     top: 50%;
     transform: translateY(-50%);
+    width: 150px;
   }
 
   &__right {
     float: right;
     width: 80%;
+    // background-color: lightgoldenrodyellow;
   }
 
   &-links {
+    // background-color: lightgray;
     font-family: $font-header-link;
     float: right;
-    width: 600px;
+    @include headerLinksWidth;
+    // width: 600px;
     margin-right: 92px;
     height: 100%;
     height: 50px;
@@ -64,7 +89,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
         // }
 
         a {
-          font-size: 12pt;
+          @include headerLinksFontSize;
           color: $black;
           padding-bottom: 15px;
         }
@@ -89,8 +114,8 @@ $font-header-apply: "Noto Serif CJK TC -Black";
     transform: translateY(-50%);
 
     a {
-      color: $white;
       font-size: 13pt;
+      color: $white;
       position: absolute;
       top: 50%;
       left: 40%;

src/assets/scss/home/home.scss

@@ -1,17 +1,141 @@
 @import "../color.scss";
+@import "../breakpoint.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";
 
+//default screen size width: 1440px
+
+//section
+@mixin sectionTitleHeight {
+  height: 583px;
+  @media screen and (min-width: $max-width-big) {
+    height: 635px;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    height: 700px;
+  }
+}
+@mixin sectionContentHeight {
+  height: 1900px;
+  @media screen and (min-width: $max-width-big) {
+    height: 2050px;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    height: 2150px;
+  }
+}
+// -------------------------------------------
+
+//home__title
+@mixin homeTitleFontsize {
+  font-size: 18pt;
+  @media screen and (min-width: $max-width-big) {
+    font-size: 22pt;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    font-size: 25pt;
+  }
+}
+@mixin homeTitleTopicWidth {
+  width: 500px;
+  @media screen and (min-width: $max-width-big) {
+    width: 600px;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    width: 700px;
+  }
+}
+// -------------------------------------------
+
+//home__info
+@mixin homeInfoTitleH1Fontsize {
+  font-size: 26pt;
+  @media screen and (min-width: $max-width-big) {
+    font-size: 30pt;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    font-size: 35pt;
+  }
+}
+@mixin homeInfoTitleH2Fontsize {
+  &--small {
+    font-size: 19pt;
+  }
+  &--mid {
+    font-size: 23pt;
+  }
+  &--big {
+    font-size: 31pt;
+  }
+  @media screen and (min-width: $max-width-big) {
+    &--small {
+      font-size: 22pt;
+    }
+    &--mid {
+      font-size: 27pt;
+    }
+    &--big {
+      font-size: 35pt;
+    }
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    &--small {
+      font-size: 26pt;
+    }
+    &--mid {
+      font-size: 32pt;
+    }
+    &--big {
+      font-size: 40pt;
+    }
+  }
+}
+@mixin homeInfoParagraphFontsize {
+  font-size: 12pt;
+  @media screen and (min-width: $max-width-big) {
+    font-size: 15pt;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    font-size: 18pt;
+  }
+}
+@mixin homeInfoButtonBox {
+  height: 50px;
+  width: 245px;
+  margin-top: 40px;
+  // background-color: burlywood;
+  @media screen and (min-width: $max-width-big) {
+    transform: scale(1.2) translateX(8%) translateY(20%);
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    transform: scale(1.4) translateX(14%) translateY(25%);
+  }
+}
+//home__info  <img>
+@mixin homeInfoImgWidth {
+  width: 120px;
+  @media screen and (max-width: $max-width-medium-0) {
+    width: 80px;
+  }
+  @media screen and (min-width: $max-width-big) {
+    width: 130px;
+  }
+  @media screen and (min-width: $max-width-big-0) {
+    width: 150px;
+  }
+}
+// ----------------------------------------------------------------------------------------------
+
 .section {
   &-title {
     margin-top: 150px;
-    height: 583px;
+    @include sectionTitleHeight;
     // background-color: chartreuse;
   }
   &-content {
-    height: 1900px;
+    @include sectionContentHeight;
     // background-color: cornsilk;
   }
 }
@@ -20,7 +144,9 @@ $font-home-button: "Noto Serif CJK TC -Black";
   font-family: $font-home;
   position: relative;
   &__title {
-    width: 600px;
+    // width: 600px;
+    width: 75%;
+    // width: 60%;
     text-align: center;
     // background-color: cornflowerblue;
     margin: 0 auto;
@@ -33,24 +159,28 @@ $font-home-button: "Noto Serif CJK TC -Black";
       margin-bottom: 20px;
       // background-color: chocolate;
       height: 80px;
-      width: 600px;
+      // width: 600px;
+      width: 100%;
       p {
-        font-size: 18pt;
+        @include homeTitleFontsize;
       }
     }
 
     &-topic {
+      margin: 0 auto;
+      @include homeTitleTopicWidth;
     }
 
     &-box2 {
       text-align: center;
       // background-color: chocolate;
       height: 80px;
-      width: 600px;
+      // width: 600px;
+      width: 100%;
       margin: 0 auto;
       margin-top: 80px;
       p {
-        font-size: 18pt;
+        @include homeTitleFontsize;
       }
     }
   }
@@ -67,33 +197,28 @@ $font-home-button: "Noto Serif CJK TC -Black";
     &-container {
       width: 75%;
       margin-left: 15%;
+      // background-color: blanchedalmond;
     }
 
     &-title {
+      // width: 80%;
+      margin: 0 auto;
       // background-color: darkgray;
+      position: relative;
       // height: 100px;
       h1 {
         font-family: $font-home-h1;
-        font-size: 26pt;
+        @include homeInfoTitleH1Fontsize;
         padding-top: 25px;
       }
 
       h2 {
         font-family: $font-home-h2;
-        // font-size: 32pt;
         padding-top: 25px;
       }
 
       &-h2 {
-        &--small {
+        @include homeInfoTitleH2Fontsize;
-          font-size: 19pt;
-        }
-        &--mid {
-          font-size: 23pt;
-        }
-        &--big {
-          font-size: 31pt;
-        }
       }
     }
 
@@ -101,7 +226,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
       padding-top: 30px;
       // background-color: yellow;
       p {
-        font-size: 12pt;
+        @include homeInfoParagraphFontsize;
         line-height: 33px;
         a {
           text-decoration: underline;
@@ -111,16 +236,14 @@ $font-home-button: "Noto Serif CJK TC -Black";
     }
 
     &-buttonsBox {
-      height: 50px;
+      @include homeInfoButtonBox;
-      width: 245px;
-      margin-top: 40px;
-      // background-color: burlywood;
     }
   }
 
   &-button {
-    font-family: $font-home-button;
+    // transform: scale(2);
     font-size: 12.5pt;
+    font-family: $font-home-button;
     position: relative;
     top: 15px;
     color: $white;
@@ -134,12 +257,16 @@ $font-home-button: "Noto Serif CJK TC -Black";
   &-squareImg {
     position: absolute;
     left: 0;
+    transform: translateX(-130%);
+    @include homeInfoImgWidth;
   }
 
   &-appleImg {
     position: absolute;
-    top: -30px;
+    top: 0;
-    right: 80px;
+    right: 0;
+    transform: translateX(25%) translateY(-12%);
+    @include homeInfoImgWidth;
   }
 
   &-sponsorsImg {

src/components/Header.vue

@@ -4,11 +4,7 @@
     <div class="header__left">
       <div class="header-logo">
         <a href="/2021/">
-          <img
+          <img src="~@/assets/images/home/home-headerIcon.svg" width="100%" />
-            class="sitcon-apple"
-            src="~@/assets/images/home/home-headerIcon.svg"
-            height="35"
-          />
         </a>
       </div>
     </div>

src/pages/Home.vue

@@ -6,7 +6,7 @@
           <p>SITCON 學生計算機年會 2021</p>
         </div>
         <div class="home__title-topic">
-          <img src="~@/assets/images/home/home-topic.svg" width="500" />
+          <img src="~@/assets/images/home/home-topic.svg" width="100%" />
         </div>
         <div class="home__title-box2">
           <p>
@@ -17,13 +17,12 @@
     </section>
     <section class="section-content">
       <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
             <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 class="home__info-title-h2--big">Descendants of the abacus</h2>
           </div>
@@ -40,13 +39,12 @@
         </div>
       </section>
       <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
             <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