[Add] add FooterPrimary and rename Footer(FooterSecondary) in App.vue

src/App.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="app">
-    <Header v-if="headerVisible()" v-bind:route="$route" />
+    <Header v-if="isRoot()" v-bind:route="$route" />
     <router-view />
-    <Footer />
+    <FooterPrimary v-if="isRoot()" v-bind:route="$route" />
+    <FooterSecondary v-if="!isRoot()" v-bind:route="$route" />
   </div>
 </template>
 <script lang="ts">
@@ -10,16 +11,18 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 
 // components
 import Header from "@/components/Header.vue";
-import Footer from "@/components/Footer.vue";
+import FooterSecondary from "@/components/FooterSecondary.vue";
+import FooterPrimary from "@/components/FooterPrimary.vue";
 
 @Component({
   components: {
     Header,
-    Footer,
+    FooterPrimary,
+    FooterSecondary,
   },
 })
 export default class App extends Vue {
-  public headerVisible(): boolean {
+  public isRoot(): boolean {
     if (
       this.$route.name == "CFP" ||
       this.$route.name === "news" ||

src/assets/scss/color.scss

@@ -8,4 +8,5 @@ $sky-blue: #9dc5ec;
 
 //home
 $indigo-blue: #1060ff;
+// $indigo-blue-dark: #000098;
 $black: black;

src/assets/scss/footer-primary.scss

@@ -0,0 +1,188 @@
+@import "breakpoint.scss";
+
+// varible declare
+$fontColor: white;
+
+//for footer-primary
+$backgroundColor: #000098;
+
+$fontFamily: "Noto Sans TC", monospace;
+
+@mixin fontSize() {
+  font-size: 14pt;
+  line-height: 2;
+  @include xl {
+  }
+  @include lg {
+  }
+  @include md {
+  }
+  @include sm {
+    font-size: 14pt;
+  }
+  @include xs {
+    font-size: 12pt;
+  }
+}
+
+@mixin iconSize() {
+  font-size: 2.2em;
+  margin-right: 36px;
+  @include xl {
+    font-size: 2.1em;
+    margin-right: 20px;
+  }
+  @include lg {
+  }
+  @include md {
+    font-size: 1.8em;
+  }
+  @include sm {
+  }
+  @include xs {
+    font-size: 1.6em;
+  }
+}
+
+@mixin footerLayout() {
+  // flex
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  & > .footer-right {
+    margin-left: 100px;
+  }
+
+  @include md {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    // height: 320px;
+    & > .footer-right {
+      margin-left: 0;
+    }
+    & > * {
+      margin-left: 0;
+      width: 80%;
+    }
+
+    .footer-left {
+      margin-bottom: 24px;
+    }
+
+    .footer-right {
+      padding-bottom: 0;
+    }
+  }
+
+  @include xs {
+    & > * {
+      width: 90%;
+    }
+  }
+}
+
+.footer-container {
+  background: $backgroundColor;
+  // position
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  margin-top: auto;
+
+  // size
+  width: 100vw;
+  padding-top: 45px;
+  padding-bottom: 45px;
+
+  position: relative;
+  z-index: 2;
+
+  .footer-left {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .footer-brand {
+      margin-bottom: 24px;
+    }
+  }
+
+  .footer-right {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 24px;
+
+    //for footer-primary
+    transform: translateY(10%);
+
+    .footer-context {
+      margin-bottom: 14px;
+    }
+  }
+
+  // layout
+  @include footerLayout;
+}
+
+.footer-community-icon {
+  .community-icon {
+    @include iconSize;
+    color: $fontColor;
+  }
+  .community-icon:first {
+    margin-left: 0;
+  }
+}
+
+.footer-context {
+  @include fontSize;
+  font-family: $fontFamily;
+  color: $fontColor;
+  font-weight: bold;
+}
+
+.footer-font-block {
+  // display flex
+  display: flex;
+  flex-direction: column;
+  // size
+  width: auto;
+}
+
+//for footer-primary (on below)
+@mixin sitesOverYearsLink() {
+  margin-right: 20px;
+
+  @media (max-width: 570px) {
+    margin-right: 10px;
+  }
+
+  @include subs {
+    margin-right: 30px;
+    margin-bottom: 10px;
+  }
+}
+@mixin sitesOverYears() {
+  height: 100px;
+  width: 480px;
+  @include subs {
+    width: 300px;
+  }
+}
+
+.footer-sitesOverYears {
+  @include sitesOverYears;
+  &__title {
+    margin-top: 20px;
+    height: 50px;
+  }
+  &__links {
+    a {
+      float: left;
+      color: $fontColor;
+      @include sitesOverYearsLink;
+    }
+  }
+}

src/components/FooterPrimary.vue

@@ -0,0 +1,90 @@
+<template>
+  <footer class="footer-container">
+    <div class="footer-left">
+      <p class="footer-brand footer-font-block">
+        <span class="footer-context">學生計算機年會</span>
+        <span class="footer-context"
+          >Students' Information Technology Conference</span
+        >
+      </p>
+      <p class="footer-contact footer-font-block">
+        <span class="footer-context">聯絡我們</span>
+        <span class="footer-context">contact@sitcon.org</span>
+      </p>
+    </div>
+    <div class="footer-right">
+      <div class="footer-community">
+        <p class="footer-context">社群媒體</p>
+        <p class="footer-community-icon-container">
+          <span class="footer-community-icon">
+            <a
+              target="_blank"
+              rel="noopener"
+              v-for="community in communityLink"
+              :href="community.link"
+              :key="community.title"
+            >
+              <FontawesomeIcon
+                class="community-icon"
+                :icon="['fab', community.icon]"
+              />
+            </a>
+          </span>
+        </p>
+      </div>
+      <div class="footer-sitesOverYears">
+        <div class="footer-sitesOverYears__title">
+          <p class="footer-context">歷年網站</p>
+        </div>
+        <div class="footer-sitesOverYears__links">
+          <a href="https://sitcon.org/2020/">2020</a>
+          <a href="https://sitcon.org/2019/">2019</a>
+          <a href="https://sitcon.org/2018/">2018</a>
+          <a href="https://sitcon.org/2017/">2017</a>
+          <a href="https://sitcon.org/2016/">2016</a>
+          <a href="https://sitcon.org/2015/">2015</a>
+          <a href="https://sitcon.org/2014/">2014</a>
+          <a href="https://sitcon.org/2013/">2013</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component
+export default class CFP extends Vue {
+  private communityLink = [
+    {
+      title: "facebook",
+      icon: "facebook-f",
+      link: "https://sitcon.org/fb",
+    },
+    {
+      title: "flickr",
+      icon: "flickr",
+      link: "https://sitcon.org/flickr",
+    },
+    {
+      title: "telegram",
+      icon: "telegram-plane",
+      link: "https://sitcon.org/tg",
+    },
+    {
+      title: "twitter",
+      icon: "twitter",
+      link: "https://sitcon.org/twitter",
+    },
+    {
+      title: "youtube",
+      icon: "youtube",
+      link: "https://sitcon.org/yt",
+    },
+  ];
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/footer-primary";
+</style>

src/components/FooterSecondary.vue

@@ -37,39 +37,39 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 @Component
 export default class CFP extends Vue {
   private communityLink = [
     {
-      title: 'facebook',
+      title: "facebook",
-      icon: 'facebook-f',
+      icon: "facebook-f",
-      link: 'https://sitcon.org/fb'
+      link: "https://sitcon.org/fb",
     },
     {
-      title: 'flickr',
+      title: "flickr",
-      icon: 'flickr',
+      icon: "flickr",
-      link: 'https://sitcon.org/flickr'
+      link: "https://sitcon.org/flickr",
     },
     {
-      title: 'telegram',
+      title: "telegram",
-      icon: 'telegram-plane',
+      icon: "telegram-plane",
-      link: 'https://sitcon.org/tg'
+      link: "https://sitcon.org/tg",
     },
     {
-      title: 'twitter',
+      title: "twitter",
-      icon: 'twitter',
+      icon: "twitter",
-      link: 'https://sitcon.org/twitter'
+      link: "https://sitcon.org/twitter",
     },
     {
-      title: 'youtube',
+      title: "youtube",
-      icon: 'youtube',
+      icon: "youtube",
-      link: 'https://sitcon.org/yt'
+      link: "https://sitcon.org/yt",
-    }
+    },
   ];
 }
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/footer';
+@import "@/assets/scss/footer-secondary";
 </style>

src/pages/Home.vue

@@ -1,8 +1,5 @@
 <template>
   <div id="home" class="home">
-    <header>
-      <!-- <Header /> -->
-    </header>
     <section class="section-title">
       <div class="home__title">
         <div class="home__title-box1">
@@ -109,19 +106,14 @@
         width="100%"
       />
     </section>
-    <!-- <section class="section-sponsors">
-    </section> -->
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import Header from "@/components/Header.vue";
 
 @Component({
-  components: {
+  components: {},
-    Header,
-  },
 })
 export default class CFP extends Vue {
   @Prop() private msg!: string;