vuepress-theme-justskiv
Version:
A flat and clean Blog Theme for VuePress site
411 lines (354 loc) • 9.15 kB
text/stylus
{$contentClass}, {$descClass}
blockquote
background: var(--theme-accent-color-005);
border-left: 3px solid #ccc;
border-radius 3px
margin: 1.5em 0;
padding: .5em 10px 1em;
quotes: "\201C""\201D""\2018""\2019";
&:before
quotes: "“" "“";
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
table
max-width: 100%;
display: block;
border-collapse collapse
margin: 1rem 0;
overflow-x: auto
tr
border-top: 1px solid #dfe2e5
tr:nth-child(2n)
background-color: var(--theme-bg-tertiary-color)
th
white-space: nowrap;
font-weight: 700;
td,th
border: 1px solid #dfe2e5;
padding: .6em 1em
pre, pre[class*="language-"]
border 1px solid var(--theme-border-color)
line-height 1.5
padding 1.25rem 1.5rem
margin 0.85rem 0
border-radius 6px
overflow auto
code
padding 0
background-color transparent
border-radius 0
div[class*="language-"]
position relative
border-radius 6px
.highlight-lines
user-select none
padding-top 1.3rem
position absolute
top 0
left 0
width 100%
line-height 1.5
.highlighted
opacity: .2
background-color var(--theme-highlight-02)
pre, pre[class*="language-"]
background var(--theme-accent-color-005)
position relative
z-index 1
&::before
position absolute
z-index 3
top 0.8em
right 1em
font-size 0.75rem
color var(--theme-highlight-03-085)
&:not(.line-numbers-mode)
.line-numbers-wrapper
display none
&.line-numbers-mode
.highlight-lines .highlighted
position relative
&:before
content ' '
position absolute
z-index 3
left 0
top 0
display block
width $lineNumbersWrapperWidth
height 100%
opacity: .2
background-color var(--theme-highlight-02)
pre
padding-left $lineNumbersWrapperWidth + 1 rem
vertical-align middle
.line-numbers-wrapper
position absolute
top 0
width $lineNumbersWrapperWidth
text-align center
color var(--theme-highlight-03-085)
padding 1.25rem 0
line-height 1.5
br
user-select none
.line-number
position relative
z-index 4
user-select none
font-size 0.85em
&::after
content ''
position absolute
z-index 2
top 0
left 0
width $lineNumbersWrapperWidth
height 100%
border-radius 6px 0 0 6px
border-right 1px solid var(--theme-highlight-02-048)
background: var(--theme-highlight-01-048)
for lang in $codeLang
div{'[class~="language-' + lang + '"]'}
&:before
content ('' + lang)
div[class~="language-javascript"]
&:before
content "js"
div[class~="language-typescript"]
&:before
content "ts"
div[class~="language-markup"]
&:before
content "html"
div[class~="language-markdown"]
&:before
content "md"
div[class~="language-json"]:before
content "json"
div[class~="language-ruby"]:before
content "rb"
div[class~="language-python"]:before
content "py"
div[class~="language-bash"]:before
content "sh"
div[class~="language-php"]:before
content "php"
code
color: var(--theme-highlight-04);
padding: .25rem .5rem;
margin: 0;
font-size: .85em;
background-color: var(--theme-accent-color-005);
border-radius: 3px;
// ========== mode ===========
code[class*="language-"],
pre[class*="language-"] {
color: var(--theme-highlight-04);
background: none;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
background: var(--theme-highlight-02);
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
background: var(--theme-highlight-02);
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: var(--theme-highlight-00);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em 0.3em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--theme-highlight-03);
}
.token.punctuation {
color: var(--theme-highlight-04);
}
.token.delimiter.important,
.token.selector .parent,
.token.tag,
.token.tag .token.punctuation {
color: var(--theme-highlight-05);
}
.token.attr-name,
.token.boolean,
.token.boolean.important,
.token.number,
.token.constant,
.token.selector .token.attribute {
color: var(--theme-highlight-06);
}
.token.class-name,
.token.key,
.token.parameter,
.token.property,
.token.property-access,
.token.variable {
color: var(--theme-highlight-07);
}
.token.attr-value,
.token.inserted,
.token.color,
.token.selector .token.value,
.token.string,
.token.string .token.url-link {
color: var(--theme-highlight-08);
}
.token.builtin,
.token.keyword-array,
.token.package,
.token.regex {
color: var(--theme-highlight-09);
}
.token.function,
.token.selector .token.class,
.token.selector .token.id {
color: var(--theme-highlight-0a);
}
.token.atrule .token.rule,
.token.combinator,
.token.keyword,
.token.operator,
.token.pseudo-class,
.token.pseudo-element,
.token.selector,
.token.unit {
color: var(--theme-highlight-0b);
}
.token.deleted,
.token.important {
color: var(--theme-highlight-0c);
}
.token.keyword-this,
.token.this {
color: var(--theme-highlight-07);
}
.token.important,
.token.keyword-this,
.token.this,
.token.bold {
font-weight: bold;
}
.token.delimiter.important {
font-weight: inherit;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.language-markdown .token.title,
.language-markdown .token.title .token.punctuation {
color: var(--theme-highlight-07);
font-weight: bold;
}
.language-markdown .token.blockquote.punctuation {
color: var(--theme-highlight-09);
}
.language-markdown .token.code {
color: var(--theme-highlight-05);
}
.language-markdown .token.hr.punctuation {
color: var(--theme-highlight-07);
}
.language-markdown .token.url > .token.content {
color: var(--theme-highlight-08);
}
.language-markdown .token.url-link {
color: var(--theme-highlight-06);
}
.language-markdown .token.list.punctuation {
color: var(--theme-highlight-09);
}
.language-markdown .token.table-header {
color: var(--theme-highlight-04);
}
.language-json .token.operator {
color: var(--theme-highlight-04);
}
.language-scss .token.variable {
color: var(--theme-highlight-05);
}
/* overrides color-values for the Show Invisibles plugin
* https://prismjs.com/plugins/show-invisibles/
*/
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before,
.token.space:before {
color: var(--theme-highlight-03);
}
/* overrides color-values for the Match Braces plugin
* https://prismjs.com/plugins/match-braces/
*/
.rainbow-braces .token.punctuation.brace-level-1,
.rainbow-braces .token.punctuation.brace-level-5,
.rainbow-braces .token.punctuation.brace-level-9 {
color: var(--theme-highlight-06);
}
.rainbow-braces .token.punctuation.brace-level-2,
.rainbow-braces .token.punctuation.brace-level-6,
.rainbow-braces .token.punctuation.brace-level-10 {
color: var(--theme-highlight-09);
}
.rainbow-braces .token.punctuation.brace-level-3,
.rainbow-braces .token.punctuation.brace-level-7,
.rainbow-braces .token.punctuation.brace-level-11 {
color: var(--theme-highlight-07);
}
.rainbow-braces .token.punctuation.brace-level-4,
.rainbow-braces .token.punctuation.brace-level-8,
.rainbow-braces .token.punctuation.brace-level-12 {
color: var(--theme-highlight-0a);
}
// 流程图
.vuepress-flowchart
overflow auto
// hr
hr
margin: 2.5em auto;
width: 4px;
height: 4px;
border: 0;
border-radius: 3px;
background-color: currentColor;
box-shadow: 1em 0 0 0 currentColor,-1em 0 0 0 currentColor