mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +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>
|
||||
<ul class="no-select download-list">
|
||||
<ul class="download-list">
|
||||
<li>
|
||||
<a
|
||||
class="download-link"
|
||||
@ -42,77 +42,60 @@
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", sans-serif;
|
||||
}
|
||||
<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
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0.625em 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul
|
||||
margin 0.625em 0 0
|
||||
padding 0
|
||||
text-align center
|
||||
user-select none
|
||||
width 100%
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0.3125em 0.625em 0.3125em 0.625em;
|
||||
}
|
||||
li
|
||||
display inline-block
|
||||
margin 0.3125em 0.625em
|
||||
|
||||
a.download-link {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.download-button {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #2e84bf;
|
||||
width: 11.25em;
|
||||
height: 3.75em;
|
||||
border-radius: 0.3125em;
|
||||
padding: 0 1em 0 1em;
|
||||
&.stable {
|
||||
background-color: #2e84bf;
|
||||
&:hover {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
}
|
||||
&.dev {
|
||||
background-color: #476582;
|
||||
&:hover {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
}
|
||||
.download-area {
|
||||
font-size: 1.125em;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.download-icons {
|
||||
color: #ffffff;
|
||||
max-width: 2em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.download-get_app {
|
||||
margin-left: 0.188em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.download-bug_report {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.download-text-stable {
|
||||
margin-right: 0.375em;
|
||||
}
|
||||
.download-text-dev {
|
||||
margin-right: 0.063em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a.download-link
|
||||
&:hover
|
||||
text-decoration none
|
||||
.download-button
|
||||
align-items center
|
||||
background-color #2e84bf
|
||||
border-radius 0.3125em
|
||||
cursor pointer
|
||||
display flex
|
||||
height 3.75em
|
||||
justify-content center
|
||||
padding 0 1em
|
||||
width 11.25em
|
||||
&.stable
|
||||
background-color #2e84bf
|
||||
&:hover
|
||||
filter brightness(110%)
|
||||
&.dev
|
||||
background-color #476582
|
||||
&:hover
|
||||
filter brightness(110%)
|
||||
.download-area
|
||||
align-items center
|
||||
color #ffffff
|
||||
display flex
|
||||
font-size 1.125em
|
||||
.download-icons
|
||||
color #ffffff
|
||||
font-size 0.875em
|
||||
max-width 2em
|
||||
.download-get_app
|
||||
margin-left 0.188em
|
||||
margin-right 0.25em
|
||||
.download-bug_report
|
||||
margin-right 0.25em
|
||||
.download-text-stable
|
||||
margin-right 0.375em
|
||||
.download-text-dev
|
||||
margin-right 0.063em
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -85,84 +85,51 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.extension {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4em 0.2em;
|
||||
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.extension-text {
|
||||
flex: 1;
|
||||
|
||||
.down {
|
||||
font-size: 0.8rem;
|
||||
font-family: monospace;
|
||||
color: #6c757d;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
color: #fff;
|
||||
background-color: #2e84bf;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s ease;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #2977ac;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: #3992cf;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.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 lang="stylus">
|
||||
.anchor
|
||||
margin-top -3.9em
|
||||
padding-top 3.9em
|
||||
.extension
|
||||
align-items center
|
||||
display flex
|
||||
padding 0.4em 0.2em
|
||||
.header-anchor
|
||||
font-size 1.2em
|
||||
&:hover .header-anchor
|
||||
opacity 1
|
||||
img
|
||||
margin-right 0.5em
|
||||
.extension-text
|
||||
flex 1
|
||||
.down
|
||||
color #6c757d
|
||||
font-family monospace
|
||||
font-size 0.8rem
|
||||
.button
|
||||
background-color #2e84bf
|
||||
border-bottom 1px solid #2977ac
|
||||
border-radius 4px
|
||||
box-sizing border-box
|
||||
color #fff
|
||||
display inline-block
|
||||
font-size 0.8em
|
||||
padding 0.5rem
|
||||
text-transform uppercase
|
||||
transition background-color 0.1s ease
|
||||
&:hover
|
||||
background-color #3992cf
|
||||
text-decoration none !important
|
||||
.material-holder
|
||||
color #fff
|
||||
+ span
|
||||
margin-left 0.25rem
|
||||
&:not(:last-child)
|
||||
border-bottom 1px solid #eaecef
|
||||
&:target
|
||||
.extension
|
||||
background #f1f8ff
|
||||
@media (max-width: 767px)
|
||||
.extension-text .down
|
||||
.button span
|
||||
display none
|
||||
</style>
|
||||
|
||||
@ -17,7 +17,7 @@ module.exports = [
|
||||
{
|
||||
type: "expander",
|
||||
before: info =>
|
||||
`<details class="expander content"><summary class="expander expansion">${info}</summary>`,
|
||||
`<details class="expander"><summary class="expansion">${info}</summary>`,
|
||||
after: "</details>"
|
||||
}
|
||||
],
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import './styles/index.scss';
|
||||
import './styles/fonts.scss'
|
||||
import './styles/fonts.styl'
|
||||
|
||||
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
|
||||
margin 1rem 0
|
||||
padding .1rem 1.5rem
|
||||
border-radius 0.4rem
|
||||
background-color #f0f4f8
|
||||
.title
|
||||
font-weight bold
|
||||
// Custom rules
|
||||
user-select()
|
||||
-webkit-user-select arguments
|
||||
-moz-user-select arguments
|
||||
-ms-user-select arguments
|
||||
user-select arguments
|
||||
|
||||
// Custom block containers
|
||||
.custom-block
|
||||
&.tip
|
||||
&.warning
|
||||
&.error
|
||||
&.danger
|
||||
border-radius 0.4rem
|
||||
&.aside
|
||||
color transparentify($textColor, 0.4)
|
||||
font-size 0.9rem
|
||||
text-align right
|
||||
|
||||
customBlockBorderRadius = '.custom-block.tip, .custom-block.warning, .custom-block.error'
|
||||
|
||||
{customBlockBorderRadius}
|
||||
border-radius 0rem 0.4rem 0.4rem 0rem
|
||||
|
||||
.expander.content
|
||||
.expander.expansion
|
||||
// Guide container
|
||||
.guide
|
||||
background-color $containerBackground
|
||||
border-radius 0.4rem
|
||||
margin 1rem 0
|
||||
padding 0.1rem 1.5rem
|
||||
.title
|
||||
font-weight bold
|
||||
|
||||
.expander.content
|
||||
// Expander container
|
||||
.expander
|
||||
background-color $containerBackground
|
||||
border-radius 0.4rem
|
||||
margin 1rem 0
|
||||
padding 1rem 1.5rem
|
||||
border-radius 0.4rem
|
||||
background-color #f0f4f8
|
||||
|
||||
.expander.expansion:focus
|
||||
outline none !important
|
||||
|
||||
.expander.expansion
|
||||
-webkit-user-select none
|
||||
-moz-user-select none
|
||||
-ms-user-select none
|
||||
.expansion
|
||||
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
|
||||
$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