[Update] apply RWD for header (min-width: 900,750,500,410,360)

src/App.vue

@@ -7,26 +7,26 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch } from 'vue-property-decorator';
 
 // components
-import Header from "@/components/Header.vue";
-import FooterSecondary from "@/components/FooterSecondary.vue";
-import FooterPrimary from "@/components/FooterPrimary.vue";
+import Header from '@/components/Header.vue';
+import FooterSecondary from '@/components/FooterSecondary.vue';
+import FooterPrimary from '@/components/FooterPrimary.vue';
 
 @Component({
   components: {
     Header,
     FooterPrimary,
-    FooterSecondary,
-  },
+    FooterSecondary
+  }
 })
 export default class App extends Vue {
   public isRoot(): boolean {
     if (
-      this.$route.name == "CFP" ||
-      this.$route.name === "news" ||
-      this.$route.name === "ocfp-news"
+      this.$route.name === 'CFP' ||
+      this.$route.name === 'news' ||
+      this.$route.name === 'ocfp-news'
     )
       return false;
     else return true;
@@ -34,5 +34,5 @@ export default class App extends Vue {
 }
 </script>
 <style lang="scss">
-@import "@/assets/scss/main.scss";
+@import '@/assets/scss/main.scss';
 </style>

src/assets/scss/header.scss

@@ -1,9 +1,55 @@
-@import "./color.scss";
-@import "./breakpoint.scss";
+@import './color.scss';
+@import './breakpoint.scss';
 
-$font-header-link: "Noto Serif CJK TC -Bold";
-$font-header-apply: "Noto Serif CJK TC -Black";
+$font-header-link: 'Noto Serif CJK TC -Bold';
+$font-header-apply: 'Noto Serif CJK TC -Black';
 
+@mixin headerWidth {
+  width: 88%;
+  @media screen and (max-width: $max-width-small-0) {
+    width: 92%;
+  }
+}
+
+@mixin headerHeight {
+  height: 62px;
+  @media screen and (max-width: $max-width-medium-1) {
+    height: 75px;
+  }
+}
+
+// -------------------------------------------
+
+// header-logo
+@mixin headerLogoPosition {
+  position: absolute;
+  left: 35px;
+  top: 50%;
+
+  @media screen and (max-width: $max-width-small-1) {
+    left: 20px;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    left: 15px;
+  }
+}
+@mixin headerLogoWidth {
+  width: 150px;
+
+  @media screen and (max-width: $max-width-small-1) {
+    width: 120px;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    width: 105px;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    width: 98px;
+  }
+}
+
+// -------------------------------------------
+
+// header-links
 @mixin headerLinksFontSize {
   font-size: 12pt;
   @media screen and (min-width: $max-width-big) {
@@ -23,11 +69,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
     width: 680px;
   }
 }
-
 @mixin headerLinksMarginRight {
   margin-right: 92px;
   @media screen and (max-width: $max-width-medium-0) {
-    margin-right: -20px;
+    margin-right: -35px;
   }
 }
 @mixin headerLinksLiPadding {
@@ -37,13 +82,110 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   }
 }
 
+// -------------------------------------------
+
+// header-apply
+@mixin headerApplyWidthAndHeight {
+  width: 92px;
+  height: 38px;
+  @media screen and (max-width: $max-width-medium-1) {
+    width: 85px;
+    height: 43px;
+  }
+  @media screen and (max-width: $max-width-small-1) {
+    width: 75px;
+    height: 40px;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    width: 65px;
+    height: 38px;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    width: 55px;
+    height: 35px;
+  }
+}
+@mixin headerApplyFontsize {
+  font-size: 13pt;
+  @media screen and (max-width: $max-width-medium-1) {
+    font-size: 12pt;
+  }
+  @media screen and (max-width: $max-width-small-1) {
+    font-size: 11pt;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    font-size: 9pt;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    font-size: 8pt;
+  }
+}
+
+// -------------------------------------------
+
+// header-links--mobile
+@mixin headerLinksMobilePosition {
+  position: relative;
+  left: 40%;
+  top: 12px;
+
+  @media screen and (max-width: $max-width-small-0) {
+    left: 35%;
+  }
+  @media screen and (max-width: $max-width-small-1) {
+    left: 28%;
+  }
+}
+@mixin headerLinksMobileSelectWidth {
+  width: 150px;
+  @media screen and (max-width: $max-width-small-0) {
+    width: 120px;
+  }
+  @media screen and (max-width: $max-width-small-1) {
+    width: 110px;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    width: 95px;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    width: 85px;
+  }
+}
+@mixin headerLinksMobileSelectFontsize {
+  font-size: 14pt;
+
+  @media screen and (max-width: $max-width-small-0) {
+    font-size: 13pt;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    font-size: 11pt;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    font-size: 9pt;
+  }
+}
+@mixin headerLinksMobileSelectPadding {
+  padding-left: 10px;
+  padding-bottom: 10px;
+
+  @media screen and (max-width: $max-width-small-0) {
+    padding-left: 3px;
+    padding-bottom: 10px;
+  }
+  @media screen and (max-width: $max-width-small-3) {
+    padding-bottom: 7px;
+  }
+}
+
+// ----------------------------------------------------------------------------------------------
+
 .header {
   z-index: 99;
   position: relative;
   top: 35px;
-  left: 6%;
-  width: 88%;
-  height: 62px;
+  margin: 0 auto;
+  @include headerWidth;
+  @include headerHeight;
   border-radius: 73px;
   box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
   background-color: $white;
@@ -51,7 +193,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   &--sticky {
     position: sticky;
     z-index: 99;
-    left: 6%;
     margin-top: 60px;
   }
   &__left {
@@ -60,16 +201,15 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   }
 
   &-logo {
-    position: absolute;
-    left: 35px;
-    top: 50%;
+    @include headerLogoPosition;
+    @include headerLogoWidth;
     transform: translateY(-50%);
-    width: 150px;
   }
 
   &__right {
     float: right;
     width: 80%;
+    // background-color: lightslategrey;
   }
 
   &-links {
@@ -78,10 +218,49 @@ $font-header-apply: "Noto Serif CJK TC -Black";
         display: none;
         visibility: hidden;
       }
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
+
+      // background-color: lightyellow;
+      @include headerLinksMobilePosition;
+      left: 40%;
+      select {
+        z-index: 99;
+        @include headerLinksMobileSelectWidth;
+        height: 60px;
+        @include headerLinksMobileSelectPadding;
+        font-family: $font-header-link;
+        @include headerLinksMobileSelectFontsize;
+        background-color: $white;
+        border: none;
+        border-bottom: 4px solid $indigo-blue;
+
+        &:focus {
+          border: none;
+          outline: none;
+        }
+
+        option {
+          text-align: center;
+          @include headerLinksMobileSelectFontsize;
+        }
+      }
+      select:focus ~ &-bg {
+        opacity: 1;
+        display: block;
+        transition: 0.3s linear;
+      }
+
+      &-bg {
+        z-index: 90;
+        opacity: 0;
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+        background-color: rgba($black, 0.5);
+        backdrop-filter: blur(3px);
+      }
     }
     @media screen and (max-width: $max-width-medium-1) {
       display: none;
@@ -126,8 +305,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
 
   &-apply {
     font-family: $font-header-apply;
-    width: 92px;
-    height: 38px;
+    @include headerApplyWidthAndHeight;
     border-radius: 38px;
     background-color: $indigo-blue;
     position: absolute;
@@ -136,7 +314,7 @@ $font-header-apply: "Noto Serif CJK TC -Black";
     transform: translateY(-50%);
 
     a {
-      font-size: 13pt;
+      @include headerApplyFontsize;
       color: $white;
       position: absolute;
       top: 50%;

src/components/Header.vue

@@ -47,11 +47,12 @@
           </li>
         </ul>
       </div>
+
       <div class="header-links--mobile">
         <select onchange="location = this.value;">
-          <option value="/">年會主題</option>
+          <option value="/"> 年會主題</option>
           <option value="/agenda" :selected="onRoute('Agenda') ? true : false">
-            <a href="/2021/agenda">議程與活動</a></option
+            <a href="/2021/agenda"> 議程與活動</a></option
           >
           <option
             value="/traffic"
@@ -69,6 +70,7 @@
             ><a href="/2021/team">籌備團隊</a></option
           >
         </select>
+        <div class="header-links--mobile-bg"></div>
       </div>
       <div class="header-apply">
         <a href="https://sitcon.kktix.cc/events/sitcon2021" target="_blank">
@@ -80,10 +82,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue } from 'vue-property-decorator';
 
 @Component({
-  props: ["route"],
+  props: ['route']
 })
 export default class Header extends Vue {
   mounted() {
@@ -96,5 +98,5 @@ export default class Header extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/header";
+@import '@/assets/scss/header';
 </style>

src/pages/Agenda.vue

@@ -1,6 +1,6 @@
 <template> </template>
 <script>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
 export default class Agenda extends Vue {}

src/pages/Home.vue

@@ -108,10 +108,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({
-  components: {},
+  components: {}
 })
 export default class CFP extends Vue {
   @Prop() private msg!: string;
@@ -119,5 +119,5 @@ export default class CFP extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/home/home";
+@import '@/assets/scss/home/home';
 </style>

src/pages/Sponsor.vue

@@ -1,6 +1,6 @@
 <template> </template>
 <script>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
 export default class Sponsor extends Vue {}

src/pages/Team.vue

@@ -1,6 +1,6 @@
 <template> </template>
 <script>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
 export default class Team extends Vue {}

src/pages/Traffic.vue

@@ -1,6 +1,6 @@
 <template> </template>
 <script>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
 export default class Traffic extends Vue {}

src/pages/Venue.vue

@@ -1,6 +1,6 @@
 <template> </template>
 <script>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component({})
 export default class Venue extends Vue {}