t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[fixed] fixed footer in cfp color

Browse Source
This commit is contained in:
mysper 2021-03-31 10:58:05 +08:00
parent acdd7ac920
commit add1f3bc82
4 changed files with 393 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
src/assets/scss/footer-primary.scss
View File

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

223
src/assets/scss/footer-secondary.scss
View File

@ -6,143 +6,142 @@ $backgroundColor: #1f4163;
$fontFamily: 'Noto Sans TC', monospace; $fontFamily: 'Noto Sans TC', monospace;
@mixin fontSize() { @mixin fontSize() {
font-size: 14pt; font-size: 14pt;
line-height: 2; line-height: 2;
@include xl { @include xl {
} }
@include lg { @include lg {
} }
@include md { @include md {
} }
@include sm { @include sm {
font-size: 14pt; font-size: 14pt;
} }
@include xs { @include xs {
font-size: 12pt; font-size: 12pt;
} }
} }
@mixin iconSize() { @mixin iconSize() {
font-size: 2.2em; font-size: 2.2em;
margin-right: 36px; margin-right: 36px;
@include xl { @include xl {
font-size: 2.1em; font-size: 2.1em;
margin-right: 20px; margin-right: 20px;
} }
@include lg { @include lg {
} }
@include md { @include md {
font-size: 1.8em; font-size: 1.8em;
} }
@include sm { @include sm {
} }
@include xs { @include xs {
font-size: 1.6em; font-size: 1.6em;
} }
} }
@mixin footerLayout() { @mixin footerLayout() {
// flex // flex
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
& > .footer-right { & > .footer-right {
margin-left: 100px; margin-left: 100px;
} }
@include md { @include md {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
// height: 320px; // height: 320px;
& > .footer-right { & > .footer-right {
margin-left: 0; margin-left: 0;
} }
& > * { & > * {
margin-left: 0; margin-left: 0;
width: 80%; width: 80%;
} }
.footer-left { .footer-left {
margin-bottom: 24px; margin-bottom: 24px;
} }
.footer-right { .footer-right {
padding-bottom: 0; padding-bottom: 0;
} }
} }
@include xs { @include xs {
& > * { & > * {
width: 90%; width: 90%;
} }
} }
} }
.footer-container-secondary {
background: $backgroundColor;
// position
// position: absolute;
// bottom: 0;
// left: 0;
margin-top: auto;
.footer-container { // size
background: $backgroundColor; width: 100vw;
// position padding-top: 45px;
// position: absolute; padding-bottom: 45px;
// bottom: 0;
// left: 0;
margin-top: auto;
// size position: relative;
width: 100vw; z-index: 2;
padding-top: 45px;
padding-bottom: 45px;
position: relative; .footer-left {
z-index: 2; display: inline-flex;
flex-direction: column;
justify-content: center;
//margin-left: 100px;
.footer-left { .footer-brand {
display: inline-flex; margin-bottom: 24px;
flex-direction: column; }
justify-content: center; }
//margin-left: 100px;
.footer-brand { .footer-right {
margin-bottom: 24px; display: inline-flex;
} flex-direction: column;
} justify-content: center;
padding-bottom: 24px;
//margin-left: 100px;
.footer-right { .footer-context {
display: inline-flex; margin-bottom: 14px;
flex-direction: column; }
justify-content: center; }
padding-bottom: 24px;
//margin-left: 100px;
.footer-context { // layout
margin-bottom: 14px; @include footerLayout;
}
}
// layout
@include footerLayout;
} }
.footer-community-icon { .footer-community-icon {
.community-icon { .community-icon {
@include iconSize; @include iconSize;
color: $fontColor; color: $fontColor;
} }
.community-icon:first { .community-icon:first {
margin-left: 0; margin-left: 0;
} }
} }
.footer-context { .footer-context {
@include fontSize; @include fontSize;
font-family: $fontFamily; font-family: $fontFamily;
color: $fontColor; color: $fontColor;
font-weight: bold; font-weight: bold;
} }
.footer-font-block { .footer-font-block {
// display flex // display flex
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// size // size
width: auto; width: auto;
} }

158
src/components/FooterPrimary.vue
View File

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

128
src/components/FooterSecondary.vue
View File

@ -1,75 +1,75 @@
<template> <template>
<footer class="footer-container"> <footer class="footer-container-secondary">
<div class="footer-left"> <div class="footer-left">
<p class="footer-brand footer-font-block"> <p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span> <span class="footer-context">學生計算機年會</span>
<span class="footer-context" <span class="footer-context"
>Students' Information Technology Conference</span >Students' Information Technology Conference</span
> >
</p> </p>
<p class="footer-contact footer-font-block"> <p class="footer-contact footer-font-block">
<span class="footer-context">聯絡我們</span> <span class="footer-context">聯絡我們</span>
<span class="footer-context">contact@sitcon.org</span> <span class="footer-context">contact@sitcon.org</span>
</p> </p>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<div class="footer-community"> <div class="footer-community">
<p class="footer-context">社群媒體</p> <p class="footer-context">社群媒體</p>
<p class="footer-community-icon-container"> <p class="footer-community-icon-container">
<span class="footer-community-icon"> <span class="footer-community-icon">
<a <a
target="_blank" target="_blank"
rel="noopener" rel="noopener"
v-for="community in communityLink" v-for="community in communityLink"
:href="community.link" :href="community.link"
:key="community.title" :key="community.title"
> >
<FontawesomeIcon <FontawesomeIcon
class="community-icon" class="community-icon"
:icon="['fab', community.icon]" :icon="['fab', community.icon]"
/> />
</a> </a>
</span> </span>
</p> </p>
</div> </div>
</div> </div>
</footer> </footer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from 'vue-property-decorator';
@Component @Component
export default class CFP extends Vue { export default class CFP extends Vue {
private communityLink = [ 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> </script>
<style lang="scss"> <style lang="scss">
@import "@/assets/scss/footer-secondary"; @import '@/assets/scss/footer-secondary';
</style> </style>