mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 15:41:59 +01:00
Switch to Stylus and cleanup related code (#112)
* Switch to Stylus and Cleanup - Switched all to Stylus - Removed redundant classes - Remove index.styl import as it was causing duplicates - Filled palette.styl with the default settings - Switched Mobile responsive breakpoint to 767px - Reverted the border color on tip containers * Fix indentation in DownloadButtons.vue * Add user-select variable for DownloadButtons.vue * Convert layout PX to REM
This commit is contained in:
Simon M
GitHub
parent
6a2f51f5cf
commit
67fb4473ca
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="no-select download-list">
|
<ul class="download-list">
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="download-link"
|
class="download-link"
|
||||||
@ -42,77 +42,60 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="stylus">
|
||||||
* {
|
*
|
||||||
font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont,
|
font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
|
||||||
"Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
|
|
||||||
"Helvetica Neue", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul
|
||||||
width: 100%;
|
margin 0.625em 0 0
|
||||||
text-align: center;
|
padding 0
|
||||||
margin: 0.625em 0 0 0;
|
text-align center
|
||||||
padding: 0;
|
user-select none
|
||||||
}
|
width 100%
|
||||||
|
|
||||||
li {
|
li
|
||||||
display: inline-block;
|
display inline-block
|
||||||
margin: 0.3125em 0.625em 0.3125em 0.625em;
|
margin 0.3125em 0.625em
|
||||||
}
|
|
||||||
|
|
||||||
a.download-link {
|
a.download-link
|
||||||
&:hover {
|
&:hover
|
||||||
text-decoration: none;
|
text-decoration none
|
||||||
}
|
.download-button
|
||||||
.download-button {
|
align-items center
|
||||||
display: flex;
|
background-color #2e84bf
|
||||||
cursor: pointer;
|
border-radius 0.3125em
|
||||||
justify-content: center;
|
cursor pointer
|
||||||
align-items: center;
|
display flex
|
||||||
background-color: #2e84bf;
|
height 3.75em
|
||||||
width: 11.25em;
|
justify-content center
|
||||||
height: 3.75em;
|
padding 0 1em
|
||||||
border-radius: 0.3125em;
|
width 11.25em
|
||||||
padding: 0 1em 0 1em;
|
&.stable
|
||||||
&.stable {
|
background-color #2e84bf
|
||||||
background-color: #2e84bf;
|
&:hover
|
||||||
&:hover {
|
filter brightness(110%)
|
||||||
filter: brightness(110%);
|
&.dev
|
||||||
}
|
background-color #476582
|
||||||
}
|
&:hover
|
||||||
&.dev {
|
filter brightness(110%)
|
||||||
background-color: #476582;
|
.download-area
|
||||||
&:hover {
|
align-items center
|
||||||
filter: brightness(110%);
|
color #ffffff
|
||||||
}
|
display flex
|
||||||
}
|
font-size 1.125em
|
||||||
.download-area {
|
.download-icons
|
||||||
font-size: 1.125em;
|
color #ffffff
|
||||||
color: #ffffff;
|
font-size 0.875em
|
||||||
display: flex;
|
max-width 2em
|
||||||
align-items: center;
|
.download-get_app
|
||||||
.download-icons {
|
margin-left 0.188em
|
||||||
color: #ffffff;
|
margin-right 0.25em
|
||||||
max-width: 2em;
|
.download-bug_report
|
||||||
font-size: 0.875em;
|
margin-right 0.25em
|
||||||
}
|
.download-text-stable
|
||||||
.download-get_app {
|
margin-right 0.375em
|
||||||
margin-left: 0.188em;
|
.download-text-dev
|
||||||
margin-right: 0.25em;
|
margin-right 0.063em
|
||||||
}
|
|
||||||
.download-bug_report {
|
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
|
||||||
.download-text-stable {
|
|
||||||
margin-right: 0.375em;
|
|
||||||
}
|
|
||||||
.download-text-dev {
|
|
||||||
margin-right: 0.063em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -85,84 +85,51 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="stylus">
|
||||||
.extension {
|
.anchor
|
||||||
display: flex;
|
margin-top -3.9em
|
||||||
align-items: center;
|
padding-top 3.9em
|
||||||
padding: 0.4em 0.2em;
|
.extension
|
||||||
|
align-items center
|
||||||
&:hover {
|
display flex
|
||||||
.header-anchor {
|
padding 0.4em 0.2em
|
||||||
opacity: 1;
|
.header-anchor
|
||||||
}
|
font-size 1.2em
|
||||||
}
|
&:hover .header-anchor
|
||||||
|
opacity 1
|
||||||
.header-anchor {
|
img
|
||||||
font-size: 1.2em;
|
margin-right 0.5em
|
||||||
}
|
.extension-text
|
||||||
|
flex 1
|
||||||
img {
|
.down
|
||||||
margin-right: 0.5em;
|
color #6c757d
|
||||||
}
|
font-family monospace
|
||||||
|
font-size 0.8rem
|
||||||
.extension-text {
|
.button
|
||||||
flex: 1;
|
background-color #2e84bf
|
||||||
|
border-bottom 1px solid #2977ac
|
||||||
.down {
|
border-radius 4px
|
||||||
font-size: 0.8rem;
|
box-sizing border-box
|
||||||
font-family: monospace;
|
color #fff
|
||||||
color: #6c757d;
|
display inline-block
|
||||||
}
|
font-size 0.8em
|
||||||
}
|
padding 0.5rem
|
||||||
|
text-transform uppercase
|
||||||
.button {
|
transition background-color 0.1s ease
|
||||||
display: inline-block;
|
&:hover
|
||||||
font-size: 0.8em;
|
background-color #3992cf
|
||||||
color: #fff;
|
text-decoration none !important
|
||||||
background-color: #2e84bf;
|
.material-holder
|
||||||
padding: 0.5rem;
|
color #fff
|
||||||
border-radius: 4px;
|
+ span
|
||||||
transition: background-color 0.1s ease;
|
margin-left 0.25rem
|
||||||
box-sizing: border-box;
|
&:not(:last-child)
|
||||||
border-bottom: 1px solid #2977ac;
|
border-bottom 1px solid #eaecef
|
||||||
text-transform: uppercase;
|
&:target
|
||||||
|
.extension
|
||||||
&:hover {
|
background #f1f8ff
|
||||||
background-color: #3992cf;
|
@media (max-width: 767px)
|
||||||
text-decoration: none !important;
|
.extension-text .down
|
||||||
}
|
.button span
|
||||||
|
display none
|
||||||
.material-holder {
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
+ span {
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
margin-top: -3.9em;
|
|
||||||
padding-top: 3.9em;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
border-bottom: 1px solid #eaecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
.extension {
|
|
||||||
background: #f1f8ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.extension {
|
|
||||||
.extension-text .down,
|
|
||||||
.button span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -17,7 +17,7 @@ module.exports = [
|
|||||||
{
|
{
|
||||||
type: "expander",
|
type: "expander",
|
||||||
before: info =>
|
before: info =>
|
||||||
`<details class="expander content"><summary class="expander expansion">${info}</summary>`,
|
`<details class="expander"><summary class="expansion">${info}</summary>`,
|
||||||
after: "</details>"
|
after: "</details>"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import './styles/index.scss';
|
import './styles/fonts.styl'
|
||||||
import './styles/fonts.scss'
|
|
||||||
|
|
||||||
import { VueAgile } from 'vue-agile'
|
import { VueAgile } from 'vue-agile'
|
||||||
|
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "Material Icons";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot");
|
|
||||||
src: local('Material Icons'),
|
|
||||||
local('MaterialIcons-Regular'),
|
|
||||||
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"),
|
|
||||||
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format("woff"),
|
|
||||||
url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype"),
|
|
||||||
url("~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular") format("svg");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Material Design Icons";
|
|
||||||
src: url("~@mdi/font/fonts/materialdesignicons-webfont.eot");
|
|
||||||
src: local('Material Design Icons'),
|
|
||||||
local('Material-Design-Icons'),
|
|
||||||
url("~@mdi/font/fonts/materialdesignicons-webfont.woff2") format("woff2"),
|
|
||||||
url("~@mdi/font/fonts/materialdesignicons-webfont.woff") format("woff"),
|
|
||||||
url("~@mdi/font/fonts/materialdesignicons-webfont.ttf") format("truetype");
|
|
||||||
}
|
|
||||||
11
src/.vuepress/styles/fonts.styl
Normal file
11
src/.vuepress/styles/fonts.styl
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@font-face
|
||||||
|
font-family 'Material Icons'
|
||||||
|
font-style normal
|
||||||
|
font-weight 400
|
||||||
|
src url('~material-design-icons/iconfont/MaterialIcons-Regular.eot')
|
||||||
|
src local('Material Icons'), local('MaterialIcons-Regular'), url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'), url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'), url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype'), url('~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular') format('svg')
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-family 'Material Design Icons'
|
||||||
|
src url('~@mdi/font/fonts/materialdesignicons-webfont.eot')
|
||||||
|
src local('Material Design Icons'), local('Material-Design-Icons'), url('~@mdi/font/fonts/materialdesignicons-webfont.woff2') format('woff2'), url('~@mdi/font/fonts/materialdesignicons-webfont.woff') format('woff'), url('~@mdi/font/fonts/materialdesignicons-webfont.ttf') format('truetype')
|
||||||
@ -1,125 +0,0 @@
|
|||||||
.centered {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-block.tip {
|
|
||||||
border-color: #2E84BF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home .hero img {
|
|
||||||
max-height: 120px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.default-indicator {
|
|
||||||
background-color: #2E84BF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.version-indicator {
|
|
||||||
background-color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-tree {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
|
|
||||||
li, ul {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
&.file {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before, &::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
border-top: 1px solid black;
|
|
||||||
top: 0.7em;
|
|
||||||
width: 0.5em;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child::after {
|
|
||||||
height: 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
top: 0px;
|
|
||||||
border-left: 1px solid black;
|
|
||||||
height: 100%;
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > li:first-child::before, & > li:first-child::after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-tree, .file-tree ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-by-side {
|
|
||||||
display: flex;
|
|
||||||
align-content: middle;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > * + * {
|
|
||||||
border-left: 1px solid #aaa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.side-by-side {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > * + * {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 1em;
|
|
||||||
border-left: none;
|
|
||||||
border-top: 1px solid #aaa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-select {
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.nav-link.action-button.secondary {
|
|
||||||
margin-top: .5em;
|
|
||||||
font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
||||||
font-size: 1.125em;
|
|
||||||
border-radius: .3125em;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
@ -1,37 +1,123 @@
|
|||||||
.guide
|
// Custom rules
|
||||||
margin 1rem 0
|
user-select()
|
||||||
padding .1rem 1.5rem
|
-webkit-user-select arguments
|
||||||
border-radius 0.4rem
|
-moz-user-select arguments
|
||||||
background-color #f0f4f8
|
-ms-user-select arguments
|
||||||
.title
|
user-select arguments
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
|
// Custom block containers
|
||||||
.custom-block
|
.custom-block
|
||||||
|
&.tip
|
||||||
|
&.warning
|
||||||
|
&.error
|
||||||
|
&.danger
|
||||||
|
border-radius 0.4rem
|
||||||
&.aside
|
&.aside
|
||||||
color transparentify($textColor, 0.4)
|
color transparentify($textColor, 0.4)
|
||||||
font-size 0.9rem
|
font-size 0.9rem
|
||||||
text-align right
|
text-align right
|
||||||
|
|
||||||
customBlockBorderRadius = '.custom-block.tip, .custom-block.warning, .custom-block.error'
|
// Guide container
|
||||||
|
.guide
|
||||||
{customBlockBorderRadius}
|
background-color $containerBackground
|
||||||
border-radius 0rem 0.4rem 0.4rem 0rem
|
border-radius 0.4rem
|
||||||
|
margin 1rem 0
|
||||||
.expander.content
|
padding 0.1rem 1.5rem
|
||||||
.expander.expansion
|
.title
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
.expander.content
|
// Expander container
|
||||||
|
.expander
|
||||||
|
background-color $containerBackground
|
||||||
|
border-radius 0.4rem
|
||||||
margin 1rem 0
|
margin 1rem 0
|
||||||
padding 1rem 1.5rem
|
padding 1rem 1.5rem
|
||||||
border-radius 0.4rem
|
.expansion
|
||||||
background-color #f0f4f8
|
|
||||||
|
|
||||||
.expander.expansion:focus
|
|
||||||
outline none !important
|
|
||||||
|
|
||||||
.expander.expansion
|
|
||||||
-webkit-user-select none
|
|
||||||
-moz-user-select none
|
|
||||||
-ms-user-select none
|
|
||||||
user-select none
|
user-select none
|
||||||
|
font-weight bold
|
||||||
|
&:focus
|
||||||
|
outline none
|
||||||
|
|
||||||
|
// File tree
|
||||||
|
.file-tree
|
||||||
|
font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
|
||||||
|
font-size 0.85rem
|
||||||
|
list-style none
|
||||||
|
padding 0
|
||||||
|
li
|
||||||
|
ul
|
||||||
|
position relative
|
||||||
|
li
|
||||||
|
font-weight bold
|
||||||
|
margin 0
|
||||||
|
padding-left 1rem
|
||||||
|
&.file
|
||||||
|
font-weight normal
|
||||||
|
&::before
|
||||||
|
&::after
|
||||||
|
content ''
|
||||||
|
left 0
|
||||||
|
position absolute
|
||||||
|
&::before
|
||||||
|
border-top 1px solid #000000
|
||||||
|
height 0
|
||||||
|
top 0.7em
|
||||||
|
width 0.5em
|
||||||
|
&:last-child::after
|
||||||
|
height 0.7em
|
||||||
|
&::after
|
||||||
|
border-left 1px solid #000000
|
||||||
|
height 100%
|
||||||
|
top 0
|
||||||
|
width 0
|
||||||
|
ul
|
||||||
|
list-style none
|
||||||
|
margin-left 1em
|
||||||
|
padding 0
|
||||||
|
& > li:first-child::before
|
||||||
|
& > li:first-child::after
|
||||||
|
content none
|
||||||
|
|
||||||
|
.side-by-side
|
||||||
|
align-content middle
|
||||||
|
display flex
|
||||||
|
justify-content center
|
||||||
|
& > *
|
||||||
|
width 50%
|
||||||
|
& > * + *
|
||||||
|
border-left 1px solid #aaaaaa
|
||||||
|
@media (max-width: $MQMobile)
|
||||||
|
flex-direction column
|
||||||
|
& > *
|
||||||
|
width 100%
|
||||||
|
& > * + *
|
||||||
|
border-left none
|
||||||
|
border-top 1px solid #aaaaaa
|
||||||
|
margin-top 0
|
||||||
|
padding-top 1em
|
||||||
|
|
||||||
|
// Badge styling
|
||||||
|
.badge
|
||||||
|
&.default-indicator
|
||||||
|
background-color $accentColor !important
|
||||||
|
&.version-indicator
|
||||||
|
background-color $badgeVersionColor !important
|
||||||
|
|
||||||
|
// Index changes
|
||||||
|
main.home
|
||||||
|
.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
|
||||||
|
font-size 1.125em
|
||||||
|
margin-top 0.5em
|
||||||
|
|
||||||
|
// Center align class
|
||||||
|
.centered
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
// Bold class
|
||||||
|
.bold
|
||||||
|
font-weight bold
|
||||||
|
|||||||
@ -1 +1,22 @@
|
|||||||
|
// Colors
|
||||||
$accentColor = #2E84BF
|
$accentColor = #2E84BF
|
||||||
|
$textColor = #2c3e50
|
||||||
|
$borderColor = #eaecef
|
||||||
|
$codeBgColor = #282c34
|
||||||
|
$arrowBgColor = #ccc
|
||||||
|
$badgeTipColor = $accentColor
|
||||||
|
$badgeWarningColor = darken(#ffe564, 35%)
|
||||||
|
$badgeErrorColor = #DA5961
|
||||||
|
$badgeVersionColor = #000000
|
||||||
|
$containerBackground = #f0f4f8
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
$navbarHeight = 3.6rem
|
||||||
|
$sidebarWidth = 20rem
|
||||||
|
$contentWidth = 46.25rem
|
||||||
|
$homePageWidth = 60rem
|
||||||
|
|
||||||
|
// Responsive breakpoints
|
||||||
|
$MQNarrow = 959px
|
||||||
|
$MQMobile = 767px
|
||||||
|
$MQMobileNarrow = 419px
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user