microflash / vuepress-theme-succinct Goto Github PK
View Code? Open in Web Editor NEWA slightly opinionated theme for Vuepress
Home Page: https://succinct.mflash.dev
License: MIT License
A slightly opinionated theme for Vuepress
Home Page: https://succinct.mflash.dev
License: MIT License
page.json
{
"name": "docs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev blogs",
"docs:build": "vuepress build blogs",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"vuepress-theme-succinct": "^1.0.0-alpha.23"
}
}
Since VuePress 2 is now in beta, kickoff the theme for this version.
Excuse me, I did modified my config.js follow your guide as you see here, but I don't have the ability to change light-dark mode as well as the letters' colors seem wrong
Here is my code in .vuepress/config.js
const {
description
} = require('../../package')
module.exports = {
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/medium-zoom',
'@vuepress/last-updated',
{
dateOptions:{
hour12: true
}
},
'@vuepress/active-header-links',
'check-md'
],
base: "/Genetics/",
title: 'Sinh học chuyên lớp 9',
description: 'Tổng hợp kiến thức Sinh học chuyên lớp 9',
theme: 'vuepress-theme-succinct',
globalUIComponents: [
'ThemeManager'
],
head: [
['meta', {
name: 'theme-color',
content: '#3eaf7c'
}],
['meta', {
name: 'apple-mobile-web-app-capable',
content: 'yes'
}],
['meta', {
name: 'apple-mobile-web-app-status-bar-style',
content: 'black'
}],
["link", {
rel: "'stylesheet",
href: "/styles/website.css"
},]
],
themeConfig: {
nextLinks: true,
prevLinks: true,
navbar: true,
search: true,
searchMaxSuggestions: 10,
searchPlaceholder: 'Search',
logo: '/img/icon-nocircle.png',
repo: 'https://github.com/HBioT/Genetics_HBioT.github.io',
editLinks: false,
docsDir: '',
editLinkText: '',
lastUpdated: true,
nav: [{
text: 'Phân môn',
ariaLabel: 'Language Menu',
items: [{
text: 'Di truyền học',
link: '/img/icon-nocircle.png'
}, ]
}],
sidebar: [{
title: 'Kiến thức cơ bản',
collapsable: false,
sidebarDepth: 1,
children: [
'/basic/DNA',
'/basic/RNA',
'/basic/Caculation',
]
},
{
title: 'Hoạt động sống của tế bào',
collapsable: true,
sidebarDepth: 1,
children: [
'/living/meiosis',
'/living/mitosis',
'/living/translation',
'/living/transcription',
]
},
{
title: 'Quy luật di truyền',
collapsable: true,
sidebarDepth: 1,
children: [
'/laws/first',
'/laws/second',
'/laws/third',
'/laws/epistasis',
'/laws/linkage',
'/laws/mother',
'/laws/sex',
]
},
{
title: 'Kiến thức bổ sung',
collapsable: true,
sidebarDepth: 1,
children: [
'/misc/chemist',
]
},
],
},
}
Here is the code in .vuepress > styles > palette.styl:
/**
* Custom palette here.
*
* ref:https://v1.vuepress.vuejs.org/zh/config/#palette-styl
*/
$bodyFontSize = 16px
$fallbackTheme = 'light'
$dropShadowColor = #111112
// colors - light theme
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$bodyBgColor = #fff
$badgeTipColor = #e7f1ec
$badgeWarningColor = #f8f2d1
$badgeErrorColor = #ffdadc
// colors - dark theme
$accentColorDark = #3eaf7c
$textColorDark = #e2e1db
$borderColorDark = #4c525c
$codeBgColorDark = #1a1c22
$arrowBgColorDark = #555
$bodyBgColorDark = #25262b
$badgeTipColorDark = #1b4b35
$badgeWarningColorDark = #574e21
$badgeErrorColorDark = #692025
// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px
// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px
and here is what shown inside the .vuepress/styles/index.styl:
@require './config'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
for f in $themeFont
@import url(f)
[data-theme='light']
--accentColor $accentColor
--textColor $textColor
--textMutedColor lighten($textColor, 25%)
--selectionColor transparentify($textColor, $bodyBgColor, 0.1)
--headerColor lighten($textColor, 10%)
--descriptionColor lighten($textColor, 40%)
--borderColor $borderColor
--codeColor lighten($textColor, 20%)
--codeBgColor $codeBgColor
--codeBgHighlightColor tint($codeBgColor, 10%)
--arrowBgColor $arrowBgColor
--bodyBgColor $bodyBgColor
--bodyComplementColor darken($bodyBgColor, 2%)
--badgeTipColor $badgeTipColor
--badgeWarningColor $badgeWarningColor
--badgeWarningTextColor darken($badgeWarningColor, 70%)
--badgeWarningTitleColor darken($badgeWarningColor, 50%)
--badgeErrorColor $badgeErrorColor
--badgeErrorTextColor darken($badgeErrorColor, 70%)
--badgeErrorTitleColor darken($badgeErrorColor, 50%)
--actionBtnBorderColor darken($accentColor, 10%)
--actionBtnHoverBorderColor lighten($accentColor, 10%)
--navItemHoverColor lighten($accentColor, 8%)
[data-theme='dark']
--accentColor $accentColorDark
--textColor $textColorDark
--textMutedColor darken($textColorDark, 25%)
--selectionColor transparentify($textColorDark, $bodyBgColorDark, 0.1)
--headerColor darken($textColorDark, 5%)
--descriptionColor darken($textColorDark, 10%)
--borderColor $borderColorDark
--codeColor darken($textColorDark, 20%)
--codeBgColor $codeBgColorDark
--codeBgHighlightColor tint($codeBgColorDark, 3%)
--arrowBgColor $arrowBgColorDark
--bodyBgColor $bodyBgColorDark
--bodyComplementColor lighten($bodyBgColorDark, 5%)
--badgeTipColor $badgeTipColorDark
--badgeWarningColor $badgeWarningColorDark
--badgeWarningTextColor lighten($badgeWarningColorDark, 70%)
--badgeWarningTitleColor lighten($badgeWarningColorDark, 50%)
--badgeErrorColor $badgeErrorColorDark
--badgeErrorTextColor lighten($badgeErrorColorDark, 70%)
--badgeErrorTitleColor lighten($badgeErrorColorDark, 50%)
--actionBtnBorderColor darken($accentColorDark, 10%)
--actionBtnHoverBorderColor darken($accentColorDark, 10%)
--navItemHoverColor darken($accentColorDark, 8%)
*
&::-webkit-scrollbar, &::-webkit-scrollbar-track
background-color $bodyComplementColorDefault
background-color var(--bodyComplementColor)
&::-webkit-scrollbar-thumb
background-color $selectionColorDefault
background-color var(--selectionColor)
&::-webkit-scrollbar-button
background-color $bodyComplementColorDefault
background-color var(--bodyComplementColor)
scrollbar-color $selectionColorDefault $bodyComplementColorDefault
scrollbar-color var(--selectionColor) var(--bodyComplementColor)
scroll-behavior smooth
@media screen and (prefers-reduced-motion: true)
scroll-behavior auto
&::-moz-selection
background $selectionColorDefault
background var(--selectionColor)
&::selection
background $selectionColorDefault
background var(--selectionColor)
html, body
padding 0
margin 0
background-color $bodyBgColorDefault
background-color var(--bodyBgColor)
body, .theme-container
font-family $bodyFontFamily, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-rendering optimizeLegibility
font-size $bodyFontSize
if $textSizeAdjust
text-size-adjust 100%
color $textColorDefault
color var(--textColor)
.page
padding-left $sidebarWidth
.navbar
position fixed
z-index 20
top 0
left 0
right 0
height $navbarHeight
background-color $bodyBgColorDefault
background-color var(--bodyBgColor)
box-sizing border-box
border-bottom 1px solid $borderColorDefault
border-bottom 1px solid var(--borderColor)
.sidebar-mask
position fixed
z-index 9
top 0
left 0
width 100vw
height 100vh
display none
.sidebar
font-size 16px
background-color $bodyBgColorDefault
background-color var(--bodyBgColor)
width $sidebarWidth
position fixed
z-index 10
margin 0
top $navbarHeight
left 0
bottom 0
box-sizing border-box
border-right 1px solid $borderColorDefault
border-right 1px solid var(--borderColor)
overflow-y auto
.search-box
input
color $textMutedColorDefault !important
color var(--textMutedColor) !important
border-color $borderColorDefault !important
border-color var(--borderColor) !important
background-color $bodyBgColorDefault !important
background-color var(--bodyBgColor) !important
&:focus
border-color $accentColorDefault !important
border-color var(--accentColor) !important
.suggestions
background $bodyBgColorDefault !important
background var(--bodyBgColor) !important
border-color $borderColorDefault !important
border-color var(--borderColor) !important
.suggestion
a
color $textMutedColorDefault !important
color var(--textMutedColor) !important
&.focused
background-color $bodyComplementColorDefault !important
background-color var(--bodyComplementColor) !important
a
color $accentColorDefault !important
color var(--accentColor) !important
{$contentClass}:not(.custom)
@extend $wrapper
> *:first-child
margin-top $navbarHeight
a:hover
text-decoration underline
p.demo
padding 1rem 1.5rem
border 1px solid $borderColorDefault
border 1px solid var(--borderColor)
border-radius 4px
img
max-width 100%
{$contentClass}.custom
padding 0
margin 0
img
max-width 100%
a
font-weight 500
color $accentColorDefault
color var(--accentColor)
text-decoration none
p a code
font-weight 400
color $accentColorDefault
color var(--accentColor)
kbd
background $textMutedColorDefault
background var(--textMutedColor)
border solid 0.15rem $borderColorDefault
border solid 0.15rem var(--borderColor)
border-bottom solid 0.25rem $borderColorDefault
border-bottom solid 0.25rem var(--borderColor)
border-radius 0.15rem
padding 0 0.15em
blockquote
font-size inherit
color $textMutedColorDefault
color var(--textMutedColor)
border-left .2rem solid $borderColorDefault
border-left .2rem solid var(--borderColor)
margin 0.5rem 0
padding .25rem 0 .25rem 1rem
& > p
margin 0
ul, ol
padding-left 1.2em
strong
font-weight 600
h1, h2, h3, h4, h5, h6
font-weight 600
line-height 1.25
{$contentClass}:not(.custom) > &
margin-top (0.5rem - $navbarHeight)
padding-top ($navbarHeight + 1rem)
margin-bottom 0
&:first-child
margin-top -1.5rem
margin-bottom 1rem
+ p, + pre, + .custom-block
margin-top 2rem
&:hover .header-anchor
opacity: 1
h1
font-size 2.2rem
h2
font-size 1.65rem
padding-bottom .3rem
border-bottom 1px solid $borderColorDefault
border-bottom 1px solid var(--borderColor)
h3
font-size 1.35rem
a.header-anchor
font-size 0.85em
float left
margin-left -0.87em
padding-right 0.23em
margin-top 0.125em
opacity 0
&:hover
text-decoration none
code, kbd, .line-number
font-family $monoFontFamily, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
p, ul, ol, th, td
line-height 1.7
hr
border 0
border-top 1px solid $borderColorDefault
border-top 1px solid var(--borderColor)
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
tr
border-top 1px solid $borderColorDefault
border-top 1px solid var(--borderColor)
&:nth-child(2n)
background-color $bodyComplementColorDefault
background-color var(--bodyComplementColor)
th, td
border 1px solid $borderColorDefault
border 1px solid var(--borderColor)
padding .6em 1em
.theme-container
&.sidebar-open
.sidebar-mask
display: block
&.no-navbar
{$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
margin-top 1.5rem
padding-top 0
.sidebar
top 0
@media (min-width: ($MQMobile + 1px))
.theme-container.no-sidebar
.sidebar
display none
.page
padding-left 0
@require 'mobile.styl'
PS: I'm using the newest version of Opera
I hope there is an option to change the button to an icon, like for example day and night icon.
Is your feature request related to a problem? Please describe.
Currently, the labels for the toggling the theme are hard coded in English.
Describe the solution you'd like
The labels should respect Vuepress' i18n configuration and pick up the corresponding translations.
Describe the bug
@vuepress/plugin-medium-zoom doesn't work with vuepress-theme-succint enabled
To Reproduce
Steps to reproduce the behavior:
Environment (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.