mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Move social links to footer
This commit is contained in:
arkon
parent
d51f77ac58
commit
42cbc2095c
@ -59,6 +59,7 @@ export default {
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.filters-list
|
||||
display flex
|
||||
|
||||
@ -1,28 +1,20 @@
|
||||
<script>
|
||||
import AlgoliaSearchBox from "@theme/components/AlgoliaSearchBox.vue";
|
||||
import NavBar from "@theme/components/NavBar.vue";
|
||||
import PageFooter from "@theme/components/PageFooter.vue";
|
||||
import ClipboardListIcon from "vue-material-design-icons/ClipboardList.vue";
|
||||
import ClipboardSearchIcon from "vue-material-design-icons/ClipboardSearch.vue";
|
||||
import DiscordIcon from "vue-material-design-icons/Discord.vue";
|
||||
import FacebookIcon from "vue-material-design-icons/Facebook.vue";
|
||||
import FaqIcon from "vue-material-design-icons/FrequentlyAskedQuestions.vue";
|
||||
import GithubIcon from "vue-material-design-icons/Github.vue";
|
||||
import LifebuoyIcon from "vue-material-design-icons/Lifebuoy.vue";
|
||||
import RedditIcon from "vue-material-design-icons/Reddit.vue";
|
||||
import SourceForkIcon from "vue-material-design-icons/SourceFork.vue";
|
||||
import TwitterIcon from "vue-material-design-icons/Twitter.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
PageFooter,
|
||||
AlgoliaSearchBox,
|
||||
ClipboardListIcon,
|
||||
SourceForkIcon,
|
||||
DiscordIcon,
|
||||
TwitterIcon,
|
||||
FacebookIcon,
|
||||
RedditIcon,
|
||||
GithubIcon,
|
||||
LifebuoyIcon,
|
||||
ClipboardSearchIcon,
|
||||
FaqIcon,
|
||||
@ -88,62 +80,13 @@ export default {
|
||||
<p>{{ helpItem.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="helpItem.linkExt"
|
||||
:href="helpItem.linkExt"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabindex="1"
|
||||
>
|
||||
<div class="card" :class="'card__' + helpItem.title">
|
||||
<header v-if="helpItem.discord">
|
||||
<DiscordIcon />
|
||||
<span>
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
<OutboundLink />
|
||||
</span>
|
||||
</header>
|
||||
<header v-if="helpItem.twitter">
|
||||
<TwitterIcon />
|
||||
<span>
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
<OutboundLink />
|
||||
</span>
|
||||
</header>
|
||||
<header v-if="helpItem.facebook">
|
||||
<FacebookIcon />
|
||||
<span>
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
<OutboundLink />
|
||||
</span>
|
||||
</header>
|
||||
<header v-else-if="helpItem.reddit">
|
||||
<RedditIcon />
|
||||
<span>
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
<OutboundLink />
|
||||
</span>
|
||||
</header>
|
||||
<header v-else-if="helpItem.github">
|
||||
<GithubIcon />
|
||||
<span>
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
<OutboundLink />
|
||||
</span>
|
||||
</header>
|
||||
<header v-else-if="helpItem.icon">
|
||||
<MaterialIcon :icon="helpItem.icon" icon-only />
|
||||
<h3>{{ helpItem.title }}</h3>
|
||||
</header>
|
||||
<p>{{ helpItem.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="bottom" />
|
||||
</div>
|
||||
</main>
|
||||
<PageFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -208,11 +151,6 @@ export default {
|
||||
> span
|
||||
display block
|
||||
span
|
||||
.icon.outbound
|
||||
display inline-block
|
||||
visibility hidden
|
||||
vertical-align baseline
|
||||
right 10px
|
||||
h3
|
||||
display inline-block
|
||||
margin-left 1.8rem
|
||||
@ -230,38 +168,6 @@ export default {
|
||||
position relative
|
||||
.material-design-icon
|
||||
color $accentColor
|
||||
&.discord-icon
|
||||
color $discordAccentColor
|
||||
&.twitter-icon
|
||||
color $twitterAccentColor
|
||||
&.facebook-icon
|
||||
color $facebookAccentColor
|
||||
&.reddit-icon
|
||||
color $redditAccentColor
|
||||
&.github-icon
|
||||
color $githubAccentColor
|
||||
.icon.outbound
|
||||
visibility visible
|
||||
&__Discord:hover
|
||||
border-bottom 2px solid $discordAccentColor
|
||||
h3
|
||||
color $discordAccentColor
|
||||
&__Twitter:hover
|
||||
border-bottom 2px solid $twitterAccentColor
|
||||
h3
|
||||
color $discordAccentColor
|
||||
&__Facebook:hover
|
||||
border-bottom 2px solid $facebookAccentColor
|
||||
h3
|
||||
color $discordAccentColor
|
||||
&__Reddit:hover
|
||||
border-bottom 2px solid $redditAccentColor
|
||||
h3
|
||||
color $redditAccentColor
|
||||
&__GitHub:hover
|
||||
border-bottom 2px solid $githubAccentColor
|
||||
h3
|
||||
color $githubAccentColor
|
||||
.column
|
||||
border 1px solid #cfd4db
|
||||
border-radius 6px
|
||||
@ -313,18 +219,8 @@ export default {
|
||||
.material-icons,
|
||||
.material-design-icon
|
||||
font-size 1.6em
|
||||
&.discord-icon
|
||||
color $discordAccentColor
|
||||
&.reddit-icon
|
||||
color $redditAccentColor
|
||||
&.github-icon
|
||||
color $githubAccentColor
|
||||
span
|
||||
display inline-block
|
||||
.icon.outbound
|
||||
visibility visible
|
||||
right 0
|
||||
top -4px
|
||||
h3
|
||||
margin-left 0
|
||||
margin-bottom 0
|
||||
@ -342,15 +238,6 @@ export default {
|
||||
top unset
|
||||
.material-design-icon
|
||||
color $accentColorSecondary
|
||||
&__Discord
|
||||
h3
|
||||
color $discordAccentColor
|
||||
&__Reddit
|
||||
h3
|
||||
color $redditAccentColor
|
||||
&__GitHub
|
||||
h3
|
||||
color $githubAccentColor
|
||||
.row
|
||||
grid-template-columns repeat(1, 1fr)
|
||||
.navbar
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import PageFooter from "@theme/components/PageFooter.vue";
|
||||
import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue";
|
||||
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
|
||||
|
||||
@ -8,6 +9,7 @@ export default {
|
||||
components: {
|
||||
CloudDownloadIcon,
|
||||
BookOpenVariantIcon,
|
||||
PageFooter,
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -92,19 +94,7 @@ export default {
|
||||
|
||||
<Content class="theme-default-content custom" />
|
||||
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<div class="copyright">
|
||||
<a href="https://www.apache.org/licenses/LICENSE-2.0">Open-source Apache Licensed</a>
|
||||
| Copyright © 2015{{ " - " + new Date().getFullYear() }} Javier Tomás |
|
||||
<a href="/privacy">Privacy policy</a>
|
||||
</div>
|
||||
<div class="netlify">
|
||||
<a target="_blank" href="https://www.netlify.com/">This site is powered by Netlify</a>
|
||||
<img src="../../public/assets/netlify.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<PageFooter />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@ -205,33 +195,6 @@ export default {
|
||||
&--dark
|
||||
position absolute
|
||||
box-shadow 0 10px 50px 0px #ddd
|
||||
footer
|
||||
position relative
|
||||
.footer
|
||||
padding 2.5rem
|
||||
border-top 1px solid $borderColor
|
||||
text-align center
|
||||
.copyright
|
||||
font-size 0.9rem
|
||||
a
|
||||
color $textColor
|
||||
font-weight normal
|
||||
&:hover
|
||||
text-decoration underline
|
||||
.netlify
|
||||
margin-top 1rem
|
||||
font-size 0.8rem
|
||||
a
|
||||
color $accentColorSecondary
|
||||
&:hover
|
||||
color #24827a
|
||||
img
|
||||
-ms-transform rotate(360deg)
|
||||
-webkit-transform rotate(360deg)
|
||||
transform rotate(360deg)
|
||||
margin-bottom -2px
|
||||
width 1em
|
||||
height 1em
|
||||
|
||||
@keyframes fade
|
||||
0%
|
||||
|
||||
120
src/.vuepress/theme/components/PageFooter.vue
Normal file
120
src/.vuepress/theme/components/PageFooter.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<script>
|
||||
import DiscordIcon from "vue-material-design-icons/Discord.vue";
|
||||
import FacebookIcon from "vue-material-design-icons/Facebook.vue";
|
||||
import GithubIcon from "vue-material-design-icons/Github.vue";
|
||||
import RedditIcon from "vue-material-design-icons/Reddit.vue";
|
||||
import TwitterIcon from "vue-material-design-icons/Twitter.vue";
|
||||
|
||||
export default {
|
||||
name: "PageFooter",
|
||||
|
||||
components: {
|
||||
DiscordIcon,
|
||||
TwitterIcon,
|
||||
FacebookIcon,
|
||||
RedditIcon,
|
||||
GithubIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<div class="copyright">
|
||||
Copyright © 2015{{ " - " + new Date().getFullYear() }} Javier Tomás |
|
||||
<a href="https://www.apache.org/licenses/LICENSE-2.0">Open-source Apache Licensed</a>
|
||||
|
|
||||
<a href="/privacy">Privacy policy</a>
|
||||
</div>
|
||||
<div class="social">
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://discord.gg/tachiyomi">
|
||||
<DiscordIcon />
|
||||
Discord
|
||||
<OutboundLink />
|
||||
</a>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/tachiyomiorg">
|
||||
<TwitterIcon />
|
||||
Twitter
|
||||
<OutboundLink />
|
||||
</a>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://facebook.com/tachiyomiorg">
|
||||
<FacebookIcon />
|
||||
Facebook
|
||||
<OutboundLink />
|
||||
</a>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://reddit.com/r/Tachiyomi">
|
||||
<RedditIcon />
|
||||
Reddit
|
||||
<OutboundLink />
|
||||
</a>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/tachiyomiorg">
|
||||
<GithubIcon />
|
||||
GitHub
|
||||
<OutboundLink />
|
||||
</a>
|
||||
</div>
|
||||
<div class="netlify">
|
||||
<a target="_blank" href="https://www.netlify.com/">This site is powered by Netlify</a>
|
||||
<img src="../../public/assets/netlify.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.footer
|
||||
padding 2.5rem
|
||||
border-top 1px solid $borderColor
|
||||
text-align center
|
||||
.copyright
|
||||
font-size 0.9rem
|
||||
a
|
||||
color $textColor
|
||||
font-weight normal
|
||||
&:hover
|
||||
text-decoration underline
|
||||
.social
|
||||
margin 1rem 0
|
||||
a
|
||||
display inline-block
|
||||
margin 0 0.5rem
|
||||
white-space no-wrap
|
||||
.icon.outbound
|
||||
visibility hidden
|
||||
&:hover
|
||||
.material-design-icon
|
||||
color $accentColor
|
||||
&.discord-icon
|
||||
color $discordAccentColor
|
||||
&.twitter-icon
|
||||
color $twitterAccentColor
|
||||
&.facebook-icon
|
||||
color $facebookAccentColor
|
||||
&.reddit-icon
|
||||
color $redditAccentColor
|
||||
&.github-icon
|
||||
color $githubAccentColor
|
||||
.icon.outbound
|
||||
visibility visible
|
||||
.netlify
|
||||
margin-top 1rem
|
||||
font-size 0.8rem
|
||||
a
|
||||
color $accentColorSecondary
|
||||
&:hover
|
||||
color #24827a
|
||||
img
|
||||
-ms-transform rotate(360deg)
|
||||
-webkit-transform rotate(360deg)
|
||||
transform rotate(360deg)
|
||||
margin-bottom -2px
|
||||
width 1em
|
||||
height 1em
|
||||
|
||||
@media screen and (max-width $MQMobile)
|
||||
.footer
|
||||
.social
|
||||
.icon.outbound
|
||||
visibility visible
|
||||
</style>
|
||||
@ -26,26 +26,6 @@ help:
|
||||
description: Help contribute to the app
|
||||
link: /help/contribution/
|
||||
contribution: true
|
||||
- title: Discord
|
||||
description: Primary communication platform
|
||||
linkExt: https://discord.gg/tachiyomi
|
||||
discord: true
|
||||
- title: Twitter
|
||||
description: Official Twitter account
|
||||
linkExt: https://twitter.com/tachiyomiorg
|
||||
twitter: true
|
||||
- title: Facebook
|
||||
description: Official Facebook account
|
||||
linkExt: https://facebook.com/tachiyomiorg
|
||||
facebook: true
|
||||
- title: Reddit
|
||||
description: Official subreddit
|
||||
linkExt: https://reddit.com/r/Tachiyomi
|
||||
reddit: true
|
||||
- title: GitHub
|
||||
description: Code organization
|
||||
linkExt: https://github.com/tachiyomiorg
|
||||
github: true
|
||||
---
|
||||
|
||||
# Help Center
|
||||
|
||||
Loading…
Reference in New Issue
Block a user