Skip to content

Commit 74bd820

Browse files
committed
Icon: Update quote icons
1 parent 13afdba commit 74bd820

File tree

10 files changed

+85
-82
lines changed

10 files changed

+85
-82
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Blockquote with all children centered.
2+
.blockquote-center {
3+
position: relative;
4+
margin: 40px 0;
5+
padding: 0;
6+
border-left: none;
7+
text-align: center;
8+
9+
&::before, &::after {
10+
position: absolute;
11+
content: ' ';
12+
display: block;
13+
width: 100%;
14+
height: 24px;
15+
opacity: 0.2;
16+
background-repeat: no-repeat;
17+
background-position: 0 -6px;
18+
background-size: 22px 22px;
19+
}
20+
&::before {
21+
top: -20px;
22+
background-image: url($center-quote-left);
23+
border-top: 1px solid $grey-light;
24+
}
25+
&::after {
26+
bottom: -20px;
27+
background-image: url($center-quote-right);
28+
border-bottom: 1px solid $grey-light;
29+
background-position: 100% 8px;
30+
}
31+
32+
p, div { text-align: center; }
33+
}

source/css/_common/_component/posts-collapse.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
.posts-collapse {
1414

15-
margin-left: $posts-collpase-left;
15+
margin-left: $posts-collapse-left;
1616
+mobile() { margin: 0 20px; }
1717

1818
.collection-title {

source/css/_common/_core/helpers.styl

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -46,38 +46,4 @@
4646
}
4747

4848

49-
// Blockquote with all children centered.
50-
.blockquote-center {
51-
position: relative;
52-
margin: 40px 0;
53-
padding: 0;
54-
border-left: none;
55-
text-align: center;
56-
57-
&::before, &::after {
58-
position: absolute;
59-
content: ' ';
60-
display: block;
61-
width: 100%;
62-
height: 24px;
63-
opacity: 0.2;
64-
background-image: url($center-quote-right);
65-
background-repeat: no-repeat;
66-
background-position: 0 -7px;
67-
background-size: 24px 24px;
68-
}
69-
&::before {
70-
top: -20px;
71-
border-top: 1px solid $grey-light;
72-
}
73-
&::after {
74-
bottom: -20px;
75-
border-bottom: 1px solid $grey-light;
76-
background-position: 100% 7px;
77-
}
78-
79-
p, div { text-align: center; }
80-
}
81-
82-
8349
.use-motion .motion-element { opacity: 0; }

source/css/_common/_section/header.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
.site-subtitle {
4444
margin-top: 10px;
4545
font-size: 13px;
46-
color: $grey-dark;
46+
color: $site-subtitle-color;
4747
}
4848

4949
.use-motion {

source/css/_common/_section/sidebar.styl

Lines changed: 15 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@
3030
background: white;
3131
margin-top: 3px;
3232

33-
&:first-child {
34-
margin-top: 0;
35-
}
33+
&:first-child { margin-top: 0; }
3634
}
3735

3836
.sidebar {
@@ -78,13 +76,13 @@
7876

7977
.site-author-name {
8078
margin: 5px 0 0;
81-
color: $whitesmoke;
79+
color: $site-author-name-color;
8280
}
8381

8482
.site-description {
8583
margin-top: 5px;
8684
font-size: 14px;
87-
color: $black-light;
85+
color: $site-description-color;
8886
}
8987

9088
.site-state {
@@ -97,23 +95,17 @@
9795
padding: 0 15px;
9896
border-left: 1px solid #333;
9997

100-
&:first-child {
101-
border-left: none;
102-
}
98+
&:first-child { border-left: none; }
10399

104-
a {
105-
border-bottom: none;
106-
}
100+
a { border-bottom: none; }
107101
}
108102
.site-state-item-count {
109103
display: block;
110104
text-align: center;
111105
font-size: 18px;
112106
}
113107

114-
.site-state-item-name {
115-
font-size: 13px;
116-
}
108+
.site-state-item-name { font-size: 13px; }
117109

118110
.feed-link {
119111
margin-top: 20px;
@@ -134,16 +126,12 @@
134126
color:white;
135127
background: rgb(252, 100, 35);
136128

137-
i {
138-
color: white;
139-
}
129+
i { color: white; }
140130
}
141131
}
142132
}
143133

144-
.links-of-author {
145-
margin-top: 20px;
146-
}
134+
.links-of-author { margin-top: 20px; }
147135

148136
.links-of-author a {
149137
display: inline-block;
@@ -177,25 +165,17 @@
177165
border-bottom: 1px solid transparent;
178166
font-size: 15px;
179167

180-
&:hover {
181-
color: $whitesmoke;
182-
}
183-
}
184-
.page-post-detail .sidebar-nav-toc {
185-
padding: 0 5px;
168+
&:hover { color: $whitesmoke; }
186169
}
170+
.page-post-detail .sidebar-nav-toc { padding: 0 5px; }
187171

188-
.page-post-detail .sidebar-nav-overview {
189-
margin-left: 10px;
190-
}
172+
.page-post-detail .sidebar-nav-overview { margin-left: 10px; }
191173

192174
.sidebar-nav .sidebar-nav-active {
193175
color: $sidebar-highlight;
194176
border-bottom-color: $sidebar-highlight;
195177

196-
&:hover {
197-
color: $sidebar-highlight;
198-
}
178+
&:hover { color: $sidebar-highlight; }
199179
}
200180

201181
.sidebar-panel { display: none; }
@@ -228,17 +208,11 @@
228208
}
229209
}
230210

231-
.post-toc .nav .nav-child {
232-
display: none;
233-
}
211+
.post-toc .nav .nav-child { display: none; }
234212

235-
.post-toc .nav .active .nav-child {
236-
display: block;
237-
}
213+
.post-toc .nav .active .nav-child { display: block; }
238214

239-
.post-toc .nav .active > a {
240-
color: $grey-light;
241-
}
215+
.post-toc .nav .active > a { color: $grey-light; }
242216

243217
.post-toc .nav .active-current > a {
244218
color: $sidebar-highlight;

source/css/_variables/Mist.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ $brand-color = $black-deep
77
$brand-hover-color = $brand-color
88

99
$site-meta-text-align = left;
10-
$posts-collpase-left = 0
10+
$posts-collapse-left = 0

source/css/_variables/base.styl

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ $brand-color = white
188188
$brand-hover-color = white
189189
$brand-bg = $black-deep
190190
$brand-font-family = $font-family-base
191+
$site-subtitle-color = $grey-dark
191192

192193
// Menu
193194
$menu-link-border = transparent
@@ -197,15 +198,16 @@ $menu-link-hover-border = $black-deep
197198

198199
// Posts Collpase
199200
// --------------------------------------------------
200-
$posts-collpase-left = 55px
201-
$posts-collpase-left-mobile = 5px
201+
$posts-collapse-left = 55px
202+
$posts-collapse-left-mobile = 5px
202203

203204

204205

205206
// Section Sidebar
206207
// Variables for sidebar section elements.
207208
// --------------------------------------------------
208-
209+
$site-author-name-color = $whitesmoke
210+
$site-description-color = $black-light
209211
$sidebar-highlight = $blue-bright
210212

211213

@@ -215,7 +217,8 @@ $sidebar-highlight = $blue-bright
215217
// --------------------------------------------------
216218

217219
// blockquote-center icon
218-
$center-quote-right = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDM0aDZsNC04di0xMmgtMTJ2MTJoNnptMTYgMGg2bDQtOHYtMTJoLTEydjEyaDZ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+"
220+
$center-quote-left = '../images/quote-l.svg'
221+
$center-quote-right = '../images/quote-r.svg'
219222

220223
// Indicator for post toc
221224
$post-toc-indicator-top = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI2IDI2IiBoZWlnaHQ9IjI2cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjI2cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMC4wNDYsMjQuNDE4IDIuMTMsMjYuNTAyIDEyLjk2NywxNS42NjYgMjMuODAzLDI2LjUwMiAyNS44ODcsMjQuNDE4IDEyLjk2NywxMS40OTggICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMC4wNDYsMTMuNDE4IDIuMTMsMTUuNTAyIDEyLjk2Nyw0LjY2NiAyMy44MDMsMTUuNTAyIDI1Ljg4NywxMy40MTggMTIuOTY3LDAuNDk4ICAiLz48L2c+PC9zdmc+"

source/css/main.styl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ for $mixin in $mixins
5151

5252

5353
// Components
54+
@import "_common/_component/blockquote-center";
5455
@import "_common/_component/buttons";
5556
@import "_common/_component/posts";
5657
@import "_common/_component/posts-expand";
@@ -66,6 +67,7 @@ for $mixin in $mixins
6667
@import "_common/_component/jiathis";
6768

6869

70+
6971
// Page specific styles
7072
@import "_common/_page/home";
7173
@import "_common/_page/archive";

source/images/quote-l.svg

Lines changed: 13 additions & 0 deletions
Loading

source/images/quote-r.svg

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)