mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Add download modal to front page (#113)
Add download modal to front page
This commit is contained in:
Simon M
GitHub
parent
28fec5af9f
commit
51eb55eb50
5
.gitignore
vendored
5
.gitignore
vendored
@ -15,5 +15,6 @@ npm-debug.log
|
||||
# Compiled site
|
||||
/public/
|
||||
|
||||
# Custom VSC workspace
|
||||
*.code-workspace
|
||||
# Ignore Visual Studio Code files
|
||||
*.code-workspace
|
||||
.vscode/launch.json
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -10961,6 +10961,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"sweetalert2": {
|
||||
"version": "9.7.1",
|
||||
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.7.1.tgz",
|
||||
"integrity": "sha512-ytBEyqRmZQsEFuPsYcuEXpruj9AgT32ELEBWGnioflsqbxHMMM8/Ghm1+hi4hsZ1PU7cp9TFFWe06WveGfwWKw=="
|
||||
},
|
||||
"table": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
|
||||
@ -11773,6 +11778,14 @@
|
||||
"loader-utils": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"vue-sweetalert2": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-3.0.1.tgz",
|
||||
"integrity": "sha512-njjJeqvwX/lQSVRcteafD/0VV5C66RT5awbZELfet93o71+HnYrQY4n3eU8DB8WYaSBvCKtgaoEjlk3lqHYM4w==",
|
||||
"requires": {
|
||||
"sweetalert2": "9.x"
|
||||
}
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
"iso-639-1": "^2.1.0",
|
||||
"lodash.groupby": "^4.6.0",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"material-design-icons": "^3.0.1"
|
||||
"material-design-icons": "^3.0.1",
|
||||
"vue-sweetalert2": "^3.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
<div class="download-button stable">
|
||||
<span class="download-area">
|
||||
<MaterialIcon
|
||||
name="download-get_app download-icons"
|
||||
icon-name="get_app"
|
||||
name="download-cloud_download download-icons"
|
||||
icon-name="cloud_download"
|
||||
/>
|
||||
<span class="download-text-stable download-text"
|
||||
>Stable release</span
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
<style scoped lang="stylus">
|
||||
*
|
||||
font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
|
||||
font-family $buttonFontFamily
|
||||
|
||||
ul
|
||||
margin 0.625em 0 0
|
||||
@ -62,8 +62,8 @@ a.download-link
|
||||
text-decoration none
|
||||
.download-button
|
||||
align-items center
|
||||
background-color #2e84bf
|
||||
border-radius 0.3125em
|
||||
background-color $accentColor
|
||||
border-radius $buttonBorderRadius
|
||||
cursor pointer
|
||||
display flex
|
||||
height 3.75em
|
||||
@ -71,11 +71,11 @@ a.download-link
|
||||
padding 0 1em
|
||||
width 11.25em
|
||||
&.stable
|
||||
background-color #2e84bf
|
||||
background-color $accentColor
|
||||
&:hover
|
||||
filter brightness(110%)
|
||||
&.dev
|
||||
background-color #476582
|
||||
background-color $accentColorSecondary
|
||||
&:hover
|
||||
filter brightness(110%)
|
||||
.download-area
|
||||
@ -87,15 +87,15 @@ a.download-link
|
||||
color #ffffff
|
||||
font-size 0.875em
|
||||
max-width 2em
|
||||
.download-get_app
|
||||
margin-left 0.188em
|
||||
margin-right 0.25em
|
||||
.download-cloud_download
|
||||
margin-left 0.2em
|
||||
margin-right 0.5em
|
||||
.download-bug_report
|
||||
margin-right 0.25em
|
||||
.download-text-stable
|
||||
margin-right 0.375em
|
||||
.download-text-dev
|
||||
margin-right 0.063em
|
||||
margin-right 0.05em
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div :class="name" class="material-holder">
|
||||
<i
|
||||
v-if="legacy"
|
||||
:class="iconName"
|
||||
class="material-legacy-icons mdi"
|
||||
></i>
|
||||
<i v-else class="material-icons">{{ iconName }}</i>
|
||||
<i v-if="iconOnly" class="material-icons">{{ iconName }}</i>
|
||||
<div v-else-if="legacy" :class="name" class="material-holder">
|
||||
<i :class="iconName" class="material-legacy-icons mdi"></i>
|
||||
</div>
|
||||
<div v-else :class="name" class="material-holder">
|
||||
<i class="material-icons">{{ iconName }}</i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -19,6 +18,10 @@
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
iconOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legacy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -35,36 +38,33 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.material-holder {
|
||||
color: #476582;
|
||||
margin: 0;
|
||||
font-size: 0.85em;
|
||||
border-radius: 3px;
|
||||
display: inline;
|
||||
}
|
||||
<style lang="stylus" scoped>
|
||||
.material-holder
|
||||
color #476582
|
||||
margin 0
|
||||
font-size 0.85em
|
||||
border-radius 3px
|
||||
display inline
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-size: 1.35em;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.material-icons
|
||||
font-family 'Material Icons'
|
||||
font-size 1.35em
|
||||
font-style normal
|
||||
position relative
|
||||
top 0.2rem
|
||||
font-weight normal
|
||||
line-height 1
|
||||
letter-spacing normal
|
||||
text-transform none
|
||||
display inline-block
|
||||
white-space nowrap
|
||||
word-wrap normal
|
||||
direction ltr
|
||||
font-feature-settings 'liga'
|
||||
-webkit-font-smoothing antialiased
|
||||
|
||||
.material-legacy-icons {
|
||||
font-family: "Material Design Icons";
|
||||
font-size: 1.35em;
|
||||
font-style: normal;
|
||||
}
|
||||
.material-legacy-icons
|
||||
font-family 'Material Design Icons'
|
||||
font-size 1.35em
|
||||
font-style normal
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import './styles/fonts.styl'
|
||||
import './styles/animations.styl'
|
||||
import 'sweetalert2/dist/sweetalert2.min.css';
|
||||
|
||||
import { VueAgile } from 'vue-agile'
|
||||
import { VueAgile } from 'vue-agile';
|
||||
import VueSweetalert2 from 'vue-sweetalert2';
|
||||
|
||||
export default ({
|
||||
Vue, // the version of Vue being used in the VuePress app
|
||||
@ -9,5 +12,6 @@ export default ({
|
||||
siteData // site metadata
|
||||
}) => {
|
||||
// eslint-disable-next-line vue/match-component-file-name
|
||||
Vue.component('Agile', VueAgile)
|
||||
Vue.component('Agile', VueAgile);
|
||||
Vue.use(VueSweetalert2);
|
||||
};
|
||||
|
||||
BIN
src/.vuepress/public/assets/media/catalogues.png
Normal file
BIN
src/.vuepress/public/assets/media/catalogues.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
src/.vuepress/public/assets/media/manga.png
Normal file
BIN
src/.vuepress/public/assets/media/manga.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
BIN
src/.vuepress/public/assets/media/my-library.png
Normal file
BIN
src/.vuepress/public/assets/media/my-library.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
2608
src/.vuepress/styles/animations.styl
Normal file
2608
src/.vuepress/styles/animations.styl
Normal file
File diff suppressed because it is too large
Load Diff
@ -5,13 +5,19 @@ user-select()
|
||||
-ms-user-select arguments
|
||||
user-select arguments
|
||||
|
||||
font-feature-settings()
|
||||
-webkit-font-feature-settings arguments
|
||||
-moz-font-feature-settings arguments
|
||||
-ms-font-feature-settings arguments
|
||||
font-feature-settings arguments
|
||||
|
||||
// Custom block containers
|
||||
.custom-block
|
||||
&.tip
|
||||
&.warning
|
||||
&.error
|
||||
&.danger
|
||||
border-radius 0.4rem
|
||||
border-radius $containerBorderRadius
|
||||
&.aside
|
||||
color transparentify($textColor, 0.4)
|
||||
font-size 0.9rem
|
||||
@ -19,8 +25,8 @@ user-select()
|
||||
|
||||
// Guide container
|
||||
.guide
|
||||
background-color $containerBackground
|
||||
border-radius 0.4rem
|
||||
background-color $containerBackgroundColor
|
||||
border-radius $containerBorderRadius
|
||||
margin 1rem 0
|
||||
padding 0.1rem 1.5rem
|
||||
.title
|
||||
@ -28,8 +34,8 @@ user-select()
|
||||
|
||||
// Expander container
|
||||
.expander
|
||||
background-color $containerBackground
|
||||
border-radius 0.4rem
|
||||
background-color $containerBackgroundColor
|
||||
border-radius $containerBorderRadius
|
||||
margin 1rem 0
|
||||
padding 1rem 1.5rem
|
||||
.expansion
|
||||
@ -40,7 +46,7 @@ user-select()
|
||||
|
||||
// File tree
|
||||
.file-tree
|
||||
font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
|
||||
font-family $codeFontFamily
|
||||
font-size 0.85rem
|
||||
list-style none
|
||||
padding 0
|
||||
@ -104,21 +110,56 @@ user-select()
|
||||
background-color $badgeVersionColor !important
|
||||
|
||||
// Index changes
|
||||
main.home
|
||||
.home
|
||||
max-width $homePageWidth
|
||||
.hero img
|
||||
max-height 8em
|
||||
.action a.nav-link.action-button.secondary
|
||||
border-bottom none
|
||||
border-radius 0.3125em
|
||||
font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
|
||||
max-height $heroImageHeight
|
||||
.action
|
||||
user-select none
|
||||
a
|
||||
border-radius $buttonBorderRadius
|
||||
cursor pointer
|
||||
font-family $buttonFontFamily
|
||||
font-size 1.125em
|
||||
width 10.5rem
|
||||
.material-icons
|
||||
font-size 1.125em
|
||||
color #ffffff
|
||||
margin-right 2px
|
||||
.feature
|
||||
text-align center
|
||||
p
|
||||
height 5em
|
||||
img
|
||||
max-height 28em
|
||||
max-width 100%
|
||||
|
||||
// Index download modal
|
||||
.download-container
|
||||
button
|
||||
user-select none
|
||||
.download-stable-button
|
||||
.download-dev-button
|
||||
.download-confirm-button
|
||||
border-radius $buttonBorderRadius
|
||||
font-family $buttonFontFamily
|
||||
font-size 1.125em
|
||||
margin-top 0.5em
|
||||
height 3rem
|
||||
width 8.5rem
|
||||
&:focus
|
||||
outline none
|
||||
outline-style solid
|
||||
.download-confirm-button
|
||||
.download-title
|
||||
border-bottom-width 0
|
||||
.download-footer
|
||||
border-top-width 0
|
||||
padding-top 0
|
||||
.download-dev-button
|
||||
background-color $accentColorSecondary
|
||||
|
||||
// Navbar Changes
|
||||
.navbar
|
||||
img.logo
|
||||
/* Bring navbar-name closer to navbar-logo */
|
||||
margin-right 0
|
||||
.site-name.can-hide
|
||||
/* Display navbar-name even for small screens */
|
||||
@media (max-width: $MQMobile)
|
||||
@ -130,4 +171,4 @@ main.home
|
||||
|
||||
// Bold class
|
||||
.bold
|
||||
font-weight bold
|
||||
font-weight bold
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// Colors
|
||||
$accentColor = #2E84BF
|
||||
$accentColorSecondary = #476582
|
||||
$textColor = #2c3e50
|
||||
$borderColor = #eaecef
|
||||
$codeBgColor = #282c34
|
||||
@ -8,15 +9,19 @@ $badgeTipColor = $accentColor
|
||||
$badgeWarningColor = darken(#ffe564, 35%)
|
||||
$badgeErrorColor = #DA5961
|
||||
$badgeVersionColor = #000000
|
||||
$containerBackground = #f0f4f8
|
||||
|
||||
$containerBackgroundColor = #f0f4f8
|
||||
// Layout
|
||||
$navbarHeight = 3.6rem
|
||||
$sidebarWidth = 20rem
|
||||
$contentWidth = 46.25rem
|
||||
$homePageWidth = 60rem
|
||||
|
||||
$homePageWidth = 70rem
|
||||
$heroImageHeight = 8rem
|
||||
$containerBorderRadius = 0.4rem
|
||||
$buttonBorderRadius = 0.25rem
|
||||
// Responsive breakpoints
|
||||
$MQNarrow = 959px
|
||||
$MQMobile = 767px
|
||||
$MQMobileNarrow = 419px
|
||||
// Fonts
|
||||
$buttonFontFamily = 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
|
||||
$codeFontFamily = source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
|
||||
|
||||
@ -5,32 +5,29 @@
|
||||
v-if="data.heroImage"
|
||||
:src="$withBase(data.heroImage)"
|
||||
:alt="data.heroAlt || 'hero'"
|
||||
>
|
||||
/>
|
||||
|
||||
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
|
||||
<h1 v-if="data.heroText !== null" id="main-title">
|
||||
{{ data.heroText || $title || "Tachiyomi" }}
|
||||
</h1>
|
||||
|
||||
<p class="description">
|
||||
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
|
||||
{{
|
||||
data.tagline ||
|
||||
$description ||
|
||||
"Free and open source manga reader for Android."
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="action"
|
||||
v-if="data.actionText && data.actionLink"
|
||||
>
|
||||
<DownloadButtons
|
||||
/>
|
||||
|
||||
<NavLink
|
||||
class="action-button secondary"
|
||||
:item="actionLink"
|
||||
/>
|
||||
<p class="action" v-if="data.actionText && data.actionLink">
|
||||
<a @click="showDownloads" class="action-button download">
|
||||
Download ↓
|
||||
</a>
|
||||
<NavLink class="action-button secondary" :item="actionLink" />
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="features"
|
||||
v-if="data.features && data.features.length"
|
||||
>
|
||||
<div class="features" v-if="data.features && data.features.length">
|
||||
<div
|
||||
class="feature"
|
||||
v-for="(feature, index) in data.features"
|
||||
@ -38,43 +35,42 @@
|
||||
>
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
<img v-if="feature.image" :src="$withBase(feature.image)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Content class="theme-default-content custom"/>
|
||||
<Content class="theme-default-content custom" />
|
||||
|
||||
<footer
|
||||
class="footer"
|
||||
v-if="data.footer"
|
||||
>
|
||||
<footer class="footer" v-if="data.footer">
|
||||
{{ data.footer }}
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from '@parent-theme/components/NavLink.vue';
|
||||
import NavLink from "@parent-theme/components/NavLink.vue";
|
||||
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
|
||||
const RELEASE_URL = 'https://api.github.com/repos/inorichi/tachiyomi/releases/latest';
|
||||
const RELEASE_URL =
|
||||
"https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
|
||||
|
||||
export default {
|
||||
components: { NavLink },
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
tagName: '',
|
||||
browserDownloadUrl: '',
|
||||
}
|
||||
tagName: "",
|
||||
browserDownloadUrl: ""
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
data () {
|
||||
data() {
|
||||
return this.$page.frontmatter;
|
||||
},
|
||||
|
||||
actionLink () {
|
||||
actionLink() {
|
||||
return {
|
||||
link: this.data.actionLink,
|
||||
text: this.data.actionText
|
||||
@ -82,179 +78,200 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
async mounted () {
|
||||
methods: {
|
||||
showDownloads() {
|
||||
this.$swal({
|
||||
title: "Download",
|
||||
text: "Select which version to use",
|
||||
confirmButtonText: "Stable",
|
||||
confirmButtonAriaLabel: "Stable",
|
||||
cancelButtonText: "Dev",
|
||||
cancelButtonAriaLabel: "Dev",
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
focusConfirm: false,
|
||||
customClass: {
|
||||
actions: "download-actions",
|
||||
cancelButton: "download-dev-button",
|
||||
closeButton: "download-close-button",
|
||||
confirmButton: "download-stable-button",
|
||||
container: "download-container",
|
||||
content: "download-content",
|
||||
header: "download-header",
|
||||
icon: "download-icon",
|
||||
popup: "download-popup",
|
||||
title: "download-title"
|
||||
},
|
||||
showClass: {
|
||||
popup: "animated zoomIn fastest"
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animated zoomOut faster"
|
||||
}
|
||||
}).then(result => {
|
||||
if (result.value) {
|
||||
this.$swal({
|
||||
title: "Downloading",
|
||||
text: "Stable version is being downloaded.",
|
||||
icon: "success",
|
||||
focusConfirm: false,
|
||||
focusCancel: false,
|
||||
timer: 5000,
|
||||
timerProgressBar: true,
|
||||
customClass: {
|
||||
confirmButton: "download-confirm-button",
|
||||
container: "download-container"
|
||||
},
|
||||
showClass: {
|
||||
popup: "animated pulse faster"
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animated zoomOut faster"
|
||||
}
|
||||
});
|
||||
window.location.assign(
|
||||
this.$data.browserDownloadUrl ||
|
||||
"https://github.com/inorichi/tachiyomi/releases/latest"
|
||||
);
|
||||
} else if (result.dismiss === "cancel") {
|
||||
this.$swal({
|
||||
title: "Downloading",
|
||||
text: "Development version is being downloaded.",
|
||||
icon: "success",
|
||||
focusConfirm: false,
|
||||
focusCancel: false,
|
||||
timer: 5000,
|
||||
timerProgressBar: true,
|
||||
customClass: {
|
||||
confirmButton: "download-confirm-button",
|
||||
container: "download-container"
|
||||
},
|
||||
showClass: {
|
||||
popup: "animated pulse faster"
|
||||
},
|
||||
hideClass: {
|
||||
popup: "animated zoomOut faster"
|
||||
}
|
||||
});
|
||||
window.location.assign("http://tachiyomi.kanade.eu/latest");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const { data } = await axios.get(RELEASE_URL);
|
||||
// Maybe eventually some release has more than the apk in assets.
|
||||
const apkAsset = data.assets.find(a => a.name.includes('.apk'));
|
||||
const apkAsset = data.assets.find(a => a.name.includes(".apk"));
|
||||
// Set the values.
|
||||
this.$data.tagName = data.tag_name;
|
||||
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
// Use Stylus to use the layout variables.
|
||||
.home {
|
||||
padding: $navbarHeight 2rem 0;
|
||||
max-width: 960px;
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
.home
|
||||
display block
|
||||
margin 0 auto
|
||||
padding $navbarHeight 2rem 0
|
||||
.hero
|
||||
text-align center
|
||||
img
|
||||
display block
|
||||
margin 3rem auto 1.5rem
|
||||
max-width 100%
|
||||
h1
|
||||
font-size 3rem
|
||||
h1
|
||||
.description
|
||||
.action
|
||||
margin 1.8rem auto
|
||||
.description
|
||||
color lighten($textColor, 40%)
|
||||
font-size 1.6rem
|
||||
line-height 1.3
|
||||
max-width 35rem
|
||||
.action-button
|
||||
background-color $accentColor
|
||||
border-bottom 1px solid darken($accentColor, 10%)
|
||||
box-sizing border-box
|
||||
color #fff
|
||||
display inline-block
|
||||
padding 0.8rem 1.6rem
|
||||
transition background-color 0.1s ease
|
||||
&:hover
|
||||
background-color lighten($accentColor, 10%)
|
||||
&.secondary
|
||||
background-color darken($borderColor, 5%)
|
||||
border-bottom-color darken($borderColor, 15%)
|
||||
color lighten($textColor, 25%)
|
||||
&:hover
|
||||
background-color lighten($borderColor, 5%)
|
||||
svg + span
|
||||
margin-left 0.5rem
|
||||
svg
|
||||
height 1em
|
||||
width 1em
|
||||
& + .action-button
|
||||
margin-left 0.5rem
|
||||
.features
|
||||
align-content stretch
|
||||
align-items flex-start
|
||||
border-top 1px solid $borderColor
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
justify-content space-between
|
||||
margin-top 2.5rem
|
||||
padding 1.2rem 0
|
||||
.feature
|
||||
flex-basis 30%
|
||||
flex-grow 1
|
||||
max-width 30%
|
||||
h2
|
||||
border-bottom none
|
||||
color lighten($textColor, 10%)
|
||||
font-size 1.4rem
|
||||
font-weight 500
|
||||
padding-bottom 0
|
||||
p
|
||||
color lighten($textColor, 25%)
|
||||
.footer
|
||||
border-top 1px solid $borderColor
|
||||
color lighten($textColor, 25%)
|
||||
padding 2.5rem
|
||||
text-align center
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
@media (max-width: $MQMobile)
|
||||
.home
|
||||
.features
|
||||
flex-direction column
|
||||
.feature
|
||||
max-width 100%
|
||||
padding 0 2.5rem
|
||||
.hero
|
||||
.action-button + .action-button
|
||||
margin-left 0
|
||||
margin-top 0.5rem
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 280px;
|
||||
display: block;
|
||||
margin: 3rem auto 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h1, .description, .action {
|
||||
margin: 1.8rem auto;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 35rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3;
|
||||
color: lighten($textColor, 40%);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
background-color: $accentColor;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color .1s ease;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid darken($accentColor, 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($accentColor, 10%);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: darken($borderColor, 5%);
|
||||
color: lighten($textColor, 25%);
|
||||
border-bottom-color: darken($borderColor, 15%);
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($borderColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
svg + span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
& + .action-button {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
border-top: 1px solid $borderColor;
|
||||
padding: 1.2rem 0;
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.feature {
|
||||
flex-grow: 1;
|
||||
flex-basis: 30%;
|
||||
max-width: 30%;
|
||||
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
color: lighten($textColor, 10%);
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten($textColor, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2.5rem;
|
||||
border-top: 1px solid $borderColor;
|
||||
text-align: center;
|
||||
color: lighten($textColor, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.home {
|
||||
.features {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature {
|
||||
max-width: 100%;
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
.action-button + .action-button {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobileNarrow) {
|
||||
.home {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
.hero {
|
||||
img {
|
||||
max-height: 210px;
|
||||
margin: 2rem auto 1.2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1, .description, .action {
|
||||
margin: 1.2rem auto;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
|
||||
.feature h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
.home
|
||||
padding-left 1.5rem
|
||||
padding-right 1.5rem
|
||||
.hero
|
||||
img
|
||||
margin 2rem auto 1.2rem
|
||||
h1
|
||||
font-size 2rem
|
||||
h1
|
||||
.description
|
||||
.action
|
||||
margin 1.2rem auto
|
||||
.description
|
||||
font-size 1.2rem
|
||||
.action-button
|
||||
font-size 1rem
|
||||
padding 0.6rem 1.2rem
|
||||
.feature h2
|
||||
font-size 1.25rem
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
---
|
||||
home: true
|
||||
lang: en-US
|
||||
heroImage: /assets/media/hero.png
|
||||
heroImage: /assets/media/logo.svg
|
||||
actionText: Get started →
|
||||
actionLink: /help/guides/getting-started
|
||||
features:
|
||||
- title: Extensions
|
||||
details: Online reading from sources such as KissManga, MangaDex and more.
|
||||
details: Online reading from sources such as MangaDex, KissManga and hundreds more.
|
||||
image: /assets/media/my-library.png
|
||||
- title: Tracking
|
||||
details: MyAnimeList, AniList, Kitsu and Shikimori support.
|
||||
details: Automatically keep track of your manga with MyAnimeList, AniList, Kitsu and Shikimori.
|
||||
image: /assets/media/catalogues.png
|
||||
- title: Configurable
|
||||
details: Reader with multiple viewers, reading directions and other settings.
|
||||
image: /assets/media/manga.png
|
||||
footer: Apache Licensed | Copyright © 2015-present Javier Tomás
|
||||
---
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user