From add1f3bc8206dcc29f714b0d78ef6cbb26438623 Mon Sep 17 00:00:00 2001
From: mysper <anthony.a3202@gmail.com>
Date: Wed, 31 Mar 2021 10:58:05 +0800
Subject: [PATCH] [fixed] fixed footer in cfp color

---
 src/assets/scss/footer-primary.scss   | 279 +++++++++++++-------------
 src/assets/scss/footer-secondary.scss | 223 ++++++++++----------
 src/components/FooterPrimary.vue      | 158 +++++++--------
 src/components/FooterSecondary.vue    | 128 ++++++------
 4 files changed, 393 insertions(+), 395 deletions(-)

diff --git a/src/assets/scss/footer-primary.scss b/src/assets/scss/footer-primary.scss
index ee42df3..c7a54e4 100644
--- a/src/assets/scss/footer-primary.scss
+++ b/src/assets/scss/footer-primary.scss
@@ -1,4 +1,4 @@
-@import "breakpoint.scss";
+@import 'breakpoint.scss';
 
 // varible declare
 $fontColor: white;
@@ -6,184 +6,183 @@ $fontColor: white;
 //for footer-primary
 $backgroundColor: #000098;
 
-$fontFamily: "Noto Sans TC", monospace;
+$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;
-  }
+	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;
-  }
+	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;
-  }
+	// 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%;
-    }
+	@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-left {
+			margin-bottom: 24px;
+		}
 
-    .footer-right {
-      padding-bottom: 0;
-    }
-  }
+		.footer-right {
+			padding-bottom: 0;
+		}
+	}
 
-  @include xs {
-    & > * {
-      width: 90%;
-    }
-  }
+	@include xs {
+		& > * {
+			width: 90%;
+		}
+	}
 }
+.footer-container-primary {
+	background: $backgroundColor;
+	// position
+	// position: absolute;
+	// bottom: 0;
+	// left: 0;
+	margin-top: auto;
 
-.footer-container {
-  background: $backgroundColor;
-  // position
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
-  margin-top: auto;
+	// size
+	width: 100vw;
+	padding-top: 45px;
+	padding-bottom: 45px;
 
-  // size
-  width: 100vw;
-  padding-top: 45px;
-  padding-bottom: 45px;
+	position: relative;
+	z-index: 2;
 
-  position: relative;
-  z-index: 2;
+	.footer-left {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
 
-  .footer-left {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
+		.footer-brand {
+			margin-bottom: 24px;
+		}
+	}
 
-    .footer-brand {
-      margin-bottom: 24px;
-    }
-  }
+	.footer-right {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		padding-bottom: 24px;
 
-  .footer-right {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    padding-bottom: 24px;
+		//for footer-primary
+		transform: translateY(11%);
 
-    //for footer-primary
-    transform: translateY(11%);
+		.footer-context {
+			margin-bottom: 14px;
+		}
+	}
 
-    .footer-context {
-      margin-bottom: 14px;
-    }
-  }
-
-  // layout
-  @include footerLayout;
+	// layout
+	@include footerLayout;
 }
 
 .footer-community-icon {
-  .community-icon {
-    @include iconSize;
-    color: $fontColor;
-  }
-  .community-icon:first {
-    margin-left: 0;
-  }
+	.community-icon {
+		@include iconSize;
+		color: $fontColor;
+	}
+	.community-icon:first {
+		margin-left: 0;
+	}
 }
 
 .footer-context {
-  @include fontSize;
-  font-family: $fontFamily;
-  color: $fontColor;
-  font-weight: bold;
+	@include fontSize;
+	font-family: $fontFamily;
+	color: $fontColor;
+	font-weight: bold;
 }
 
 .footer-font-block {
-  // display flex
-  display: flex;
-  flex-direction: column;
-  // size
-  width: auto;
+	// display flex
+	display: flex;
+	flex-direction: column;
+	// size
+	width: auto;
 }
 
 //for footer-primary (on below)
 @mixin sitesOverYearsLink() {
-  margin-right: 20px;
+	margin-right: 20px;
 
-  @media (max-width: 570px) {
-    margin-right: 10px;
-  }
+	@media (max-width: 570px) {
+		margin-right: 10px;
+	}
 
-  @include subs {
-    margin-right: 30px;
-    margin-bottom: 10px;
-  }
+	@include subs {
+		margin-right: 30px;
+		margin-bottom: 10px;
+	}
 }
 @mixin sitesOverYears() {
-  height: 100px;
-  width: 480px;
-  @include subs {
-    width: 300px;
-    margin-bottom: 50px;
-  }
+	height: 100px;
+	width: 480px;
+	@include subs {
+		width: 300px;
+		margin-bottom: 50px;
+	}
 }
 
 .footer-sitesOverYears {
-  @include sitesOverYears;
-  &__title {
-    margin-top: 20px;
-    height: 50px;
-  }
-  &__links {
-    a {
-      float: left;
-      color: $fontColor;
-      @include sitesOverYearsLink;
-    }
-  }
+	@include sitesOverYears;
+	&__title {
+		margin-top: 20px;
+		height: 50px;
+	}
+	&__links {
+		a {
+			float: left;
+			color: $fontColor;
+			@include sitesOverYearsLink;
+		}
+	}
 }
diff --git a/src/assets/scss/footer-secondary.scss b/src/assets/scss/footer-secondary.scss
index 02ffff3..c54798d 100644
--- a/src/assets/scss/footer-secondary.scss
+++ b/src/assets/scss/footer-secondary.scss
@@ -6,143 +6,142 @@ $backgroundColor: #1f4163;
 $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;
-  }
+	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;
-  }
+	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;
-  }
+	// 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%;
-    }
+	@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-left {
+			margin-bottom: 24px;
+		}
 
-    .footer-right {
-      padding-bottom: 0;
-    }
-  }
+		.footer-right {
+			padding-bottom: 0;
+		}
+	}
 
-  @include xs {
-    & > * {
-      width: 90%;
-    }
-  }
+	@include xs {
+		& > * {
+			width: 90%;
+		}
+	}
 }
+.footer-container-secondary {
+	background: $backgroundColor;
+	// position
+	// position: absolute;
+	// bottom: 0;
+	// left: 0;
+	margin-top: auto;
 
-.footer-container {
-  background: $backgroundColor;
-  // position
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
-  margin-top: auto;
+	// size
+	width: 100vw;
+	padding-top: 45px;
+	padding-bottom: 45px;
 
-  // size
-  width: 100vw;
-  padding-top: 45px;
-  padding-bottom: 45px;
+	position: relative;
+	z-index: 2;
 
-  position: relative;
-  z-index: 2;
+	.footer-left {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		//margin-left: 100px;
 
-  .footer-left {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    //margin-left: 100px;
+		.footer-brand {
+			margin-bottom: 24px;
+		}
+	}
 
-    .footer-brand {
-      margin-bottom: 24px;
-    }
-  }
+	.footer-right {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		padding-bottom: 24px;
+		//margin-left: 100px;
 
-  .footer-right {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    padding-bottom: 24px;
-    //margin-left: 100px;
+		.footer-context {
+			margin-bottom: 14px;
+		}
+	}
 
-    .footer-context {
-      margin-bottom: 14px;
-    }
-  }
-
-  // layout
-  @include footerLayout;
+	// layout
+	@include footerLayout;
 }
 
 .footer-community-icon {
-  .community-icon {
-    @include iconSize;
-    color: $fontColor;
-  }
-  .community-icon:first {
-    margin-left: 0;
-  }
+	.community-icon {
+		@include iconSize;
+		color: $fontColor;
+	}
+	.community-icon:first {
+		margin-left: 0;
+	}
 }
 
 .footer-context {
-  @include fontSize;
-  font-family: $fontFamily;
-  color: $fontColor;
-  font-weight: bold;
+	@include fontSize;
+	font-family: $fontFamily;
+	color: $fontColor;
+	font-weight: bold;
 }
 
 .footer-font-block {
-  // display flex
-  display: flex;
-  flex-direction: column;
-  // size
-  width: auto;
+	// display flex
+	display: flex;
+	flex-direction: column;
+	// size
+	width: auto;
 }
diff --git a/src/components/FooterPrimary.vue b/src/components/FooterPrimary.vue
index 7919b12..715e131 100644
--- a/src/components/FooterPrimary.vue
+++ b/src/components/FooterPrimary.vue
@@ -1,90 +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>
+	<footer class="footer-container-primary">
+		<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";
+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",
-    },
-  ];
+	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";
+@import '@/assets/scss/footer-primary';
 </style>
diff --git a/src/components/FooterSecondary.vue b/src/components/FooterSecondary.vue
index f21321a..8b7976f 100644
--- a/src/components/FooterSecondary.vue
+++ b/src/components/FooterSecondary.vue
@@ -1,75 +1,75 @@
 <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>
-  </footer>
+	<footer class="footer-container-secondary">
+		<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>
+	</footer>
 </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",
-      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",
-    },
-  ];
+	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-secondary";
+@import '@/assets/scss/footer-secondary';
 </style>