# Базовая стилизания
Базовая стилизация vuepress задается двумя файлами palette.styl и index.styl, которые должны рассполагаться в директории: .vuepress/styles/
...
├── docs
│ ├── .vuepress
│ │ ├── `styles`
│ │ │ ├── index.styl
│ │ │ └── palette.styl
...
1
2
3
4
5
6
7
2
3
4
5
6
7
# palette.styl
Чтобы применить простые переопределения к стилю по умолчанию или определить некоторые переменные для последующего использования, вы можете создать файл .vuepress/styles/palette.styl.
Есть несколько предопределенных переменных, которые вы можете настроить:
//.vuepress/styles/palette.styl
// default color changes
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
// responsive layouts
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px
// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ВНИМАНИЕ
Вы должны ТОЛЬКО переопределяете переменные в этом файле. Поскольку palette.styl будет импортирован в конец корневого конфигурационного файла Stylus, в качестве конфигурации его будут использовать несколько файлов, поэтому после того, как вы напишете здесь стили, ваш стиль будет дублирован несколько раз.
# index.styl
VuePress предоставляет удобный способ добавления дополнительных стилей. Для этого вы можете создать файл .vuepress/styles/index.styl. Это файл Stylus, но вы также можете использовать обычный синтаксис CSS.
Базовые файлы стилей по умолчанию находяться по адресу гита
Совет
Файл стиля index.styl для удобсва работы можно разделить на отдельные файлы и уже данные отдельные файлы импортировать в основной файл index.styl.
Список файлов описывающие стиль по-умолчанию:
index.styl- основной файл стилей, в котором подключаются все последующие файлы стилей;arrow.styl- файл стилей стелок;code.styl- файл оформления блоков кода;config.styl- файл подключения стиля по-умолчанию;custom-blocks.styl- файл оформления блоков (tip - совет, warning - внимание, danger - опасно, details - детали);mobile.styl- файл стилей мобильного представления;toc.styl- файл слилизации меню (предположительно);wrapper.styl- файл условия переключения стилей (мобильный <-> настольный)
Для версии vuepress 1.5 файлы стилей имеют следюще содержание:
**index.styl**
//.vuepress/styles/index.styl
@require './config'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
html, body
padding 0
margin 0
background-color #fff
body
font-family -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
font-size 16px
color $textColor
.page
padding-left $sidebarWidth
.navbar
position fixed
z-index 20
top 0
left 0
right 0
height $navbarHeight
background-color #fff
box-sizing border-box
border-bottom 1px solid $borderColor
.sidebar-mask
position fixed
z-index 9
top 0
left 0
width 100vw
height 100vh
display none
.sidebar
font-size 16px
background-color #fff
width $sidebarWidth
position fixed
z-index 10
margin 0
top $navbarHeight
left 0
bottom 0
box-sizing border-box
border-right 1px solid $borderColor
overflow-y auto
{$contentClass}:not(.custom)
@extend $wrapper
> *:first-child
margin-top $navbarHeight
a:hover
text-decoration underline
p.demo
padding 1rem 1.5rem
border 1px solid #ddd
border-radius 4px
img
max-width 100%
{$contentClass}.custom
padding 0
margin 0
img
max-width 100%
a
font-weight 500
color $accentColor
text-decoration none
p a code
font-weight 400
color $accentColor
kbd
background #eee
border solid 0.15rem #ddd
border-bottom solid 0.25rem #ddd
border-radius 0.15rem
padding 0 0.15em
blockquote
font-size 1rem
color #999;
border-left .2rem solid #dfe2e5
margin 1rem 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 $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 source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
p, ul, ol
line-height 1.7
hr
border 0
border-top 1px solid $borderColor
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
tr
border-top 1px solid #dfe2e5
&:nth-child(2n)
background-color #f6f8fa
th, td
border 1px solid #dfe2e5
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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
**arrow.styl**
//.vuepress/styles/arrow.styl
@require './config'
.arrow
display inline-block
width 0
height 0
&.up
border-left 4px solid transparent
border-right 4px solid transparent
border-bottom 6px solid $arrowBgColor
&.down
border-left 4px solid transparent
border-right 4px solid transparent
border-top 6px solid $arrowBgColor
&.right
border-top 4px solid transparent
border-bottom 4px solid transparent
border-left 6px solid $arrowBgColor
&.left
border-top 4px solid transparent
border-bottom 4px solid transparent
border-right 6px solid $arrowBgColor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
**code.styl**
//.vuepress/styles/code.styl
{$contentClass}
code
color lighten($textColor, 20%)
padding 0.25rem 0.5rem
margin 0
font-size 0.85em
background-color rgba(27,31,35,0.05)
border-radius 3px
.token
&.deleted
color #EC5975
&.inserted
color $accentColor
{$contentClass}
pre, pre[class*="language-"]
line-height 1.4
padding 1.25rem 1.5rem
margin 0.85rem 0
background-color $codeBgColor
border-radius 6px
overflow auto
code
color #fff
padding 0
background-color transparent
border-radius 0
div[class*="language-"]
position relative
background-color $codeBgColor
border-radius 6px
.highlight-lines
user-select none
padding-top 1.3rem
position absolute
top 0
left 0
width 100%
line-height 1.4
.highlighted
background-color rgba(0, 0, 0, 66%)
pre, pre[class*="language-"]
background transparent
position relative
z-index 1
&::before
position absolute
z-index 3
top 0.8em
right 1em
font-size 0.75rem
color rgba(255, 255, 255, 0.4)
&: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%
background-color rgba(0, 0, 0, 66%)
pre
padding-left $lineNumbersWrapperWidth + 1 rem
vertical-align middle
.line-numbers-wrapper
position absolute
top 0
width $lineNumbersWrapperWidth
text-align center
color rgba(255, 255, 255, 0.3)
padding 1.25rem 0
line-height 1.4
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 rgba(0, 0, 0, 66%)
background-color $codeBgColor
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"
@import '~prismjs/themes/prism-tomorrow.css'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
**config.styl**
//.vuepress/styles/config.styl
$contentClass = '.theme-default-content'
1
2
3
2
3
**custom-blocks.styl**
//.vuepress/styles/custom-blocks.styl
.custom-block
.custom-block-title
font-weight 600
margin-bottom -0.4rem
&.tip, &.warning, &.danger
padding .1rem 1.5rem
border-left-width .5rem
border-left-style solid
margin 1rem 0
&.tip
background-color #f3f5f7
border-color #42b983
&.warning
background-color rgba(255,229,100,.3)
border-color darken(#ffe564, 35%)
color darken(#ffe564, 70%)
.custom-block-title
color darken(#ffe564, 50%)
a
color $textColor
&.danger
background-color #ffe6e6
border-color darken(red, 20%)
color darken(red, 70%)
.custom-block-title
color darken(red, 40%)
a
color $textColor
&.details
display block
position relative
border-radius 2px
margin 1.6em 0
padding 1.6em
background-color #eee
h4
margin-top 0
figure, p
&:last-child
margin-bottom 0
padding-bottom 0
summary
outline none
cursor pointer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
**mobile.styl**
//.vuepress/styles/mobile.styl
@require './config'
$mobileSidebarWidth = $sidebarWidth * 0.82
// narrow desktop / iPad
@media (max-width: $MQNarrow)
.sidebar
font-size 15px
width $mobileSidebarWidth
.page
padding-left $mobileSidebarWidth
// wide mobile
@media (max-width: $MQMobile)
.sidebar
top 0
padding-top $navbarHeight
transform translateX(-100%)
transition transform .2s ease
.page
padding-left 0
.theme-container
&.sidebar-open
.sidebar
transform translateX(0)
&.no-navbar
.sidebar
padding-top: 0
// narrow mobile
@media (max-width: $MQMobileNarrow)
h1
font-size 1.9rem
{$contentClass}
div[class*="language-"]
margin 0.85rem -1.5rem
border-radius 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
**toc.styl**
//.vuepress/styles/toc.styl
.table-of-contents
.badge
vertical-align middle
1
2
3
4
5
2
3
4
5
**wrapper.styl**
//.vuepress/styles/wrapper.styl
$wrapper
max-width $contentWidth
margin 0 auto
padding 2rem 2.5rem
@media (max-width: $MQNarrow)
padding 2rem
@media (max-width: $MQMobileNarrow)
padding 1.5rem
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Совет
Код данных файлов помогает понять, какие измения стиля и как можно осуществить. При необходимости, основываясь на них можно написать свои файлы стилей.
# palette.styl и index.styl не могут объединиться в один
palette.styl отвечает за глобальные настройки цвета. Во время компиляции константы цвета темы должны быть сначала разрешены препроцессором, а затем применены к глобальному контексту.
Но для index.styl его работа заключается в переопределении стилей приложения по умолчанию. Согласно принципу приоритета CSS, более поздний стиль имеет более высокий приоритет, поэтому он должен быть сгенерирован в конце файла CSS.
Простая диаграмма, описывающая порядок компиляции стиля следующим образом:
# Примеры файлов стилей (для изучения)
Ниже приведены файлы стилей для изучения, код которыйх подманяет собою тему по умолчанию. Работают они не сволне коректно, но можно использовать базовый стиль файла и данные, как дополнительный ресурс для создания своего файла стиля.
**palette.styl**
//.vuepress/styles/palette.styl
/* ==================================================
константы темы vuepress по умолчанию переопределяют
================================================== */
/**
* НЕ добавляйте дополнительный стиль в этот файл
* все пользовательские стили должны быть помещены в `index.styl`
* эта таблица стилей описывает переменные/константы по умолчанию, которые позволяют редактировать
*/
// default color changes
$accentColor = #27b1ff;
$textColor = #4d606e;
$borderColor = lighten(#a5b4be, 50%);
$codeBgColor = #F3F8FA;
$codeHighlightColor = rgba(50, 50, 150, 0.05);
$arrowBgColor = $textColor;
// responsive layouts
$navbarHeight = 3.75rem;
$sidebarWidth = 20rem;
$contentWidth = 46.25rem;
// responsive breakpoints
$MQNarrow = 60rem;
$MQMobile = 45rem;
$MQMobileNarrow = 26.25rem;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
**index.styl**
// .vuepress/styles/index.styl
/* =================================================
Пользовательские стили и переопределения для темы vuepress по умолчанию
================================================== */
/**
* vuepress использует styl, «эффективный, динамичный и многофункциональный язык CSS, созданный для nodejs»
* styl поддерживает как отступ, так и обычный синтаксис CSS
* дополнительную информацию можно найти здесь: http://stylus-lang.com
* если вы обычно пишете код на Python, используйте синтаксис отступа стилуса!
* это препроцессор CSS, поэтому работает и обычный синтаксис CSS.
* /
/* prefect font families
========================================================================== */
// load fonts
@import url('https://rsms.me/inter/inter-ui.css')
@import url('https://use.typekit.net/cvp6pli.css')
// backup fonts
fallback-copy = -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
fallback-mono = Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
// font stacks
font-primary = 'Inter UI', fallback-copy
font-secondary = Arboria, fallback-copy
font-code = source-code-pro, fallback-mono
// font weights
font-bold = 700
font-normal = 400
font-light = 300
/* prefect color palette
========================================================================== */
// brand colors
color-blue-primary = #27b1ff
color-blue-secondary = #3b8dff
color-blue-tertiary = #1061d0
color-grey = #a5b4be
color-grey-dark = #4d606e
color-pink = #fe5196
color-orange = #e90
// neutrals
color-grey-bg = #fbfcfd
color-grey-border = #f6f6fc
color-white = #fff
color-black = #000
/* media query breakpoints
========================================================================== */
// media query block mixins
media-size(screensize)
@media screen and (max-width: screensize)
{block}
// breakpoint sizes
bp-sml = 26.25rem
bp-med = 45rem
bp-lrg = 60rem
/* type settings
========================================================================== */
html,
body
font: font-normal 16px/1.5 font-primary // set base font
p
font-size: 1em
line-height: 1.75
margin-bottom: 1.25em
ul,
ol
@extend p
li
line-height: 2
// selectors
headings = 'h1, h2, h3, h4, h5, h6' // headings selector
a-links = 'a, a:visited, a:active' // a tags
on-hover = '&:hover, &:focus' // hover styles
// headers
{headings}
color: color-grey-dark
font-family: font-secondary
font-weight: font-bold
line-height: 1.15
margin: 2.75rem 0 1rem
text-rendering: optimizeLegibility // enables native kerning
{a-links},
.header-anchor
font-size: 0.75em
font-weight: font-bold
h1
font-size: 3em
h2
font-size: 2.5em
/.features .feature &
font-weight: font-bold
h3
font-size: 2em
h4
font-size: 1.5em
h5
font-size: 1.25em
h6
font-size: 0.85em
// links
{a-links}
color: color-blue-primary
{on-hover}
color: color-blue-secondary
cursor: pointer
// font weight and styles
strong,
b
font-weight: font-bold
em,
i
font-style: italic
// disclaimer text
.disclaimer
font-size: 0.8em
font-style: italic
/* components
========================================================================== */
// top navigation
.navbar
{a-links}
color: color-grey-dark
{on-hover}
color: color-blue-primary
.logo
margin: 0 0.8rem 0 0;
+media-size(bp-med)
display: block
position: absolute
margin: 0
left: 50%
top: .7rem
.site-name
font-family: font-secondary
font-size: 1.625em !important
line-height: 1.3
// sidebar
.sidebar
&-link,
&-heading,
{a-links}
color: color-grey-dark
{on-hover}
color: color-grey
&.active
font-weight: 600 !important
&-heading
margin-bottom: 0.5rem
font-size: 1em !important
&:not(.open)
color: #999 !important
&-link
font-size: 0.95em !important
line-height: 1.3em !important
font-weight: inherit !important
padding: .35rem 1rem .35rem 1.25rem
&-links
li:not(:first-child)
margin-top: 0.15em !important
.theme-default-content:not(.custom)
max-width: 55rem
// footer
.footer
margin-top: 2.5em
.page
.page-edit,
.page-nav
max-width: 55rem
// badges
badge = 'span.badge'
// badge = '.badge[data-v-23988dc6], .badge[data-v-099ab69c]'
.theme-default-content
{badge}
border-radius: 0.25rem
padding: 0.125rem 0.5rem
margin-right: 0.125rem
font-size: 0.75em
height: 1.2em
line-height: 1.25em
&.tip, &.green
background-color: color-blue-primary
&.warn, &.warning, &.yellow
background-color: color-orange
&.error
background-color: color-pink
h1
{badge}
font-size: 0.325em
height: 1.325rem
line-height: 1.325
h2
{badge}
font-size: 0.375em
height: 1.325rem
line-height: 1.375
h3
{badge}
font-size: 0.45em
height: 1.2rem
line-height: 1.2
h4
{badge}
font-size: 0.5em
height: 1.1rem
line-height: 1.4
h5
{badge}
font-size:0.6em
height: 1.0rem
line-height: 1.2
// buttons
buttons = 'button, .action-button, .home .action .action-button'
{buttons}
background-color: color-blue-primary
border: none
border-bottom: 0.0625em solid color-blue-tertiary
color: color-white
font-family: font-primary
margin: 1em
{a-links}
color: color-white
{on-hover}
background-color: color-blue-secondary
cursor: pointer
// images
.theme-default-content:not(.custom),
.theme-default-content
img
display: block
height: auto
margin: 0 auto
.viz
&-xs
width: 25%
&-sm
width: 37.5%
&-md
width: 50%
&-lg
width: 62.5%
&-xl
width: 75%
&-padded
padding: 1rem 0 2rem
// auto-generated docs disclaimer
.auto-gen
font-style: italic
font-size: 0.825em
text-align: center
margin-top: 2rem
/* prefect code and syntax highlighting styles; overrides prism.js and vuepress theme
========================================================================== */
// selectors
div-pre = 'div, pre'
pre-code = 'pre, code'
lang = '[class*="language-"]'
// extends
.word-wrap
-ms-word-break: break-all
word-break: break-all
word-break: break-word
-webkit-hyphens: none
-moz-hyphens: none
-ms-hyphens: none
hyphens: none
.prefect-code
color: color-grey-dark
font-family: font-code
.prefect-spacing
@extend .word-wrap
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
line-height: 2
white-space: pre-wrap
tab-size: 4
.prefect-block
@extends .prefect-code, .prefect-spacing
// tables
table
> &
text-align: left
tr
background-color: color-white
&:nth-child(2n)
background-color: color-grey-bg + 75%
// custom blocks
.custom-block
&-title
font-weight: font-bold
&.tip
background-color: color-blue-primary + 95%
border-color: color-blue-secondary
.custom-block-title
color: color-blue-tertiary - 15%
pre{lang}
border: 1px solid (color-blue-secondary + 50%)
&.warning
background-color: color-orange + 95%
border-color: color-orange
.custom-block-title
color: color-orange - 15%
pre{lang}
border: 1px solid (color-orange + 50%)
&.danger
background-color: color-pink + 95%
border-color: color-pink
.custom-block-title
color: color-pink - 15%
pre{lang}
border: 1px solid (color-pink + 50%)
p
color: color-grey-dark
// begin styling code blocks
{pre-code}
@extend .prefect-code
&{lang}
background: transparent;
/pre{lang}
@extend .prefect-block;
padding: 1rem;
margin: 0.5rem 0;
:not(pre) > {pre-code}
&{lang}
background: color-grey-dark + 50%
:not(pre) > code{lang}
padding: 0.25rem
border-radius: 0.5em
white-space: normal
pre.vue-container
border-color: color-blue-primary
> code
background-color: color-blue-primary
color: color-black
font-size: 0.875em
em
color: color-grey
font-weight: font-light
// code blocks wrapped in a div inside vuepress content
.theme-default-content
div{lang}
border-radius: 0.375em
position: relative
pre{lang} &
background-color: color-grey-bg
{pre-code}
&{lang} &
@extend .prefect-code
background: transparent
z-index: 1
// top right language tag in code blocks
&:before
color: color-grey-dark;
font-size: 0.75em
position: absolute
right: 1rem
top: 0.8rem
z-index: 3
// code blocks within vuepress content but not wrapped in a div
.theme-default-content
pre,
pre{lang}
@extend .prefect-code
border-radius: 0.5em
border: solid 0.125em color-grey-border
margin: 0.85rem 0
padding: 1.25rem 1.5rem
code,
code{lang}
@extend .prefect-code
background-color: transparent
border-radius: 0
font-size: 0.95em
line-height: 1.75
padding: 0
// standalone code blocks within vuepress content
code,
code{lang}
@extend .prefect-block
background-color: color-grey-bg - 5%
border-radius: 0.25em
font-size: 1em
line-height: 2
padding: 0.0125rem 0.5rem
.token
&.deleted
color: color-blue-secondary
&.inserted
color: color-pink
// api resource documentation
sig-class = 'div[class="class-sig"]'
sig-method = 'div[class="method-sig"]'
.theme-default-content
{sig-class},
{sig-method}
@extend .prefect-block
// prefect classes
.prefect-sig,
.prefect-class
display: inline
font-weight: font-bold
.prefect-sig
font-style: italic
// source link
span.source a
clear: both
color: color-blue-tertiary
float: right
font-size: 0.875em
margin-top: 2.5rem
{on-hover}
font-weight: font-bold
{sig-class},
{sig-method}
background-color: color-blue-primary + 95%
border-top: 0.325em solid color-blue-secondary
font-size: 1.125em
line-height: 1.75
padding: 2.5rem 2rem 3.5rem 5.5rem
margin-top: 2rem
text-indent: -2.5em
{sig-method}
background-color: color-blue-tertiary + 95%
border-top: 0.325em solid (color-blue-tertiary + 65%)
font-size: 1.0625em
margin: 1rem 0
// styles text within methods tables
.methods
font-size: 0.875em
line-height: 1.625
margin: 1rem
// select and style py args lists and nested items
args-list = 'ul.args, ol.args'
{args-list}
li
line-height: 2.25
padding-left: 0.5em
text-indent: 0em
// tokens
.token
&.comment,
&.block-comment,
&.prolog,
&.doctype,
&.cdata
color: color-grey - 15%
font-style: italic
&.atrule,
&.attr-value,
&.keyword
color: color-blue-primary
font-style: italic
font-weight: font-bold
&.builtin
color: color-blue-primary
&.tag,
&.deleted,
&.number,
&.boolean,
&.property,
&.constant,
&.symbol
color: color-blue-secondary
&.function-name,
&.function,
&.class-name,
&.operator,
&.entity,
&.url
color: color-blue-secondary
font-weight: font-bold
&.punctuation
color: color-blue-tertiary
&.attr-name,
&.namespace,
&.selector,
&.decorator,
&.string,
&.car,
&.inserted
color: color-pink
&.important,
&.regex,
&.variable
color: color-orange
&.important,
&.bold
font-weight: font-bold
&.italic
font-style: italic
&.entity
cursor: help
&.namespace
opacity: 0.75
//style specific tokens
/.language-css .token.string,
/.style .token.string
color: color-blue-secondary
font-weight: font-bold
/* for code line highlighting */
div[class*="language-"] .highlight-lines {
font-size: 0.95em;
line-height: 1.75;
}
div[class*="language-"] .highlight-lines .highlighted {
background-color: $codeHighlightColor;
}
div[class*=language-] pre, div[class*=language-] pre[class*=language-] {
background: transparent;
position: relative;
z-index: 1;
}
/* prefect code snippet languages */
div[class~="language-bash"]
&:before
content: "sh"
div[class~="language-python"]
&:before
content: "py"
div[class~="language-graphql"]
&:before
content: "gql"
div[class~="language-json"]
&:before
content: "json"
.code-copy
height: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675