microflash / vuepress-theme-succinct Goto Github PK

View Code? Open in Web Editor NEW

30.0 30.0 3.0 1.07 MB

A slightly opinionated theme for Vuepress

Home Page: https://succinct.mflash.dev

License: MIT License

Vue 66.87% JavaScript 7.83% Stylus 25.30%

documentation-tool vuepress vuepress-theme

vuepress-theme-succinct's People

Stargazers

Watchers

Forkers

derbalkon distubejs kubade220

vuepress-theme-succinct's Issues

Migrate to Vuepress 2

Since VuePress 2 is now in beta, kickoff the theme for this version.

@vuepress/plugin-medium-zoom doesn't work

Describe the bug
@vuepress/plugin-medium-zoom doesn't work with vuepress-theme-succint enabled

To Reproduce
Steps to reproduce the behavior:

npm install -D @vuepress/plugin-medium-zoom
Configure the succint theme
npm run dev
https://localhost:8080
Click on images should zoom it

Environment (please complete the following information):

OS: Windows 10 (built and deployed on GH actions)

Change the switch button to icon button?

I hope there is an option to change the button to an icon, like for example day and night icon.

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

Error: Cannot find module 'vuepress-theme-succinct/package.json'

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"
  }
}

Add support for i18n

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.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.