Skip to content

Commit ec6a4b3

Browse files
Andy ChenQingWei-Li
Andy Chen
authored andcommitted
feat: Add new theme "dolphin" (#735)
Dolphin is a blue theme based on the theme vue, using the font Thasadith -- https://fonts.google.com/specimen/Thasadith as default.
1 parent 071793e commit ec6a4b3

File tree

1 file changed

+228
-0
lines changed

1 file changed

+228
-0
lines changed

src/themes/dolphin.styl

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
@import url('https://fonts.googleapis.com/css?family=Thasadith:400,400i,700')
2+
3+
$color-primary = #00ffff
4+
$color-bg = #f0ffff
5+
$color-text = #34495e
6+
$sidebar-width = 300px
7+
8+
@import 'basic/_layout'
9+
@import 'basic/_coverpage'
10+
11+
body
12+
background-color $color-bg
13+
14+
/* sidebar */
15+
.sidebar
16+
background-color $color-bg
17+
color #364149
18+
19+
li
20+
margin 6px 0 6px 0
21+
22+
ul li a
23+
color #505d6b
24+
font-size 14px
25+
font-weight normal
26+
overflow hidden
27+
text-decoration none
28+
text-overflow ellipsis
29+
white-space nowrap
30+
31+
&:hover
32+
text-decoration underline
33+
34+
ul li ul
35+
padding 0
36+
37+
ul li.active > a
38+
border-right 2px solid
39+
color var(--theme-color, $color-primary)
40+
font-weight 600
41+
42+
.app-sub-sidebar
43+
li
44+
&::before
45+
content '-'
46+
padding-right 4px
47+
float left
48+
49+
/* markdown content found on pages */
50+
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
51+
color #2c3e50
52+
font-weight 600
53+
54+
.markdown-section a
55+
color var(--theme-color, $color-primary)
56+
font-weight 600
57+
58+
&:hover
59+
text-decoration underline
60+
61+
.markdown-section h1
62+
font-size 2rem
63+
margin 0 0 1rem
64+
65+
.markdown-section h2
66+
font-size 1.75rem
67+
margin 45px 0 0.8rem
68+
69+
.markdown-section h3
70+
font-size 1.5rem
71+
margin 40px 0 0.6rem
72+
73+
.markdown-section h4
74+
font-size 1.25rem
75+
76+
.markdown-section h5
77+
font-size 1rem
78+
79+
.markdown-section h6
80+
color #777
81+
font-size 1rem
82+
83+
.markdown-section figure, .markdown-section p
84+
margin 1.2em 0
85+
86+
.markdown-section p, .markdown-section ul, .markdown-section ol
87+
line-height 1.6rem
88+
word-spacing 0.05rem
89+
90+
.markdown-section ul, .markdown-section ol
91+
padding-left 1.5rem
92+
93+
.markdown-section blockquote
94+
border-left 4px solid var(--theme-color, $color-primary)
95+
color #858585
96+
margin 2em 0
97+
padding-left 20px
98+
99+
.markdown-section blockquote p
100+
font-weight 600
101+
margin-left 0
102+
103+
.markdown-section iframe
104+
margin 1em 0
105+
106+
.markdown-section em
107+
color #7f8c8d
108+
109+
.markdown-section code
110+
background-color #f8f8f8
111+
border-radius 2px
112+
color #e96900
113+
font-family 'Roboto Mono', Monaco, courier, monospace
114+
font-size 0.8rem
115+
margin 0 2px
116+
padding 3px 5px
117+
white-space pre-wrap
118+
119+
.markdown-section pre
120+
-moz-osx-font-smoothing initial
121+
-webkit-font-smoothing initial
122+
background-color #f8f8f8
123+
font-family 'Roboto Mono', Monaco, courier, monospace
124+
line-height 1.5rem
125+
margin 1.2em 0
126+
overflow auto
127+
padding 0 1.4rem
128+
position relative
129+
word-wrap normal
130+
131+
/* code highlight */
132+
.token.comment, .token.prolog, .token.doctype, .token.cdata
133+
color #8e908c
134+
135+
.token.namespace
136+
opacity 0.7
137+
138+
.token.boolean, .token.number
139+
color #c76b29
140+
141+
.token.punctuation
142+
color #525252
143+
144+
.token.property
145+
color #c08b30
146+
147+
.token.tag
148+
color #2973b7
149+
150+
.token.string
151+
color var(--theme-color, $color-primary)
152+
153+
.token.selector
154+
color #6679cc
155+
156+
.token.attr-name
157+
color #2973b7
158+
159+
.token.entity, .token.url, .language-css .token.string, .style .token.string
160+
color #22a2c9
161+
162+
.token.attr-value, .token.control, .token.directive, .token.unit
163+
color var(--theme-color, $color-primary)
164+
165+
.token.keyword, .token.function
166+
color #e96900
167+
168+
.token.statement, .token.regex, .token.atrule
169+
color #22a2c9
170+
171+
.token.placeholder, .token.variable
172+
color #3d8fd1
173+
174+
.token.deleted
175+
text-decoration line-through
176+
177+
.token.inserted
178+
border-bottom 1px dotted #202746
179+
text-decoration none
180+
181+
.token.italic
182+
font-style italic
183+
184+
.token.important, .token.bold
185+
font-weight bold
186+
187+
.token.important
188+
color #c94922
189+
190+
.token.entity
191+
cursor help
192+
193+
.markdown-section pre > code
194+
-moz-osx-font-smoothing initial
195+
-webkit-font-smoothing initial
196+
background-color #f8f8f8
197+
border-radius 2px
198+
color #525252
199+
display block
200+
font-family 'Roboto Mono', Monaco, courier, monospace
201+
font-size 0.8rem
202+
line-height inherit
203+
margin 0 2px
204+
max-width inherit
205+
overflow inherit
206+
padding 2.2em 5px
207+
white-space inherit
208+
209+
.markdown-section code::after, .markdown-section code::before
210+
letter-spacing 0.05rem
211+
212+
code .token
213+
-moz-osx-font-smoothing initial
214+
-webkit-font-smoothing initial
215+
min-height 1.5rem
216+
217+
pre::after
218+
color #ccc
219+
content attr(data-lang)
220+
font-size 0.6rem
221+
font-weight 600
222+
height 15px
223+
line-height 15px
224+
padding 5px 10px 0
225+
position absolute
226+
right 0
227+
text-align right
228+
top 0

0 commit comments

Comments
 (0)