Skip to content

Commit 3d695d8

Browse files
xoxysxoxys
authored
chore: harmonize some bg colors, borders and hints (#983)
1 parent 34d0bcf commit 3d695d8

10 files changed

+100
-110
lines changed

‎layouts/shortcodes/columns.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{- end }}
66

77

8-
<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
8+
<div class="gdoc-columns gdoc-columns--{{ $size }} flex gap-16 flex-mobile-column">
99
{{- range split .Inner "<--->" }}
1010
<div class="gdoc-columns__content gdoc-markdown--nested flex-even">
1111
{{ . | $.Page.RenderString -}}

‎layouts/shortcodes/hint.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44

55

66
<blockquote class="gdoc-hint {{ $type | lower }}">
7-
<div class="gdoc-hint__title flex align-center">
7+
<div class="gdoc-hint__title flex gap-8 align-center">
88
{{- with $icon -}}
99
<svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
1010
<span>{{ $title }}</span>
1111
{{- else -}}
12-
<i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
12+
<i class="fa {{ $type | lower }}"></i>
13+
<span>{{ $title }}</span>
1314
{{- end -}}
1415
</div>
1516
<div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>

‎src/sass/_asciidoc.scss

+46-27
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,33 @@
22
@use "defaults";
33

44
.admonitionblock {
5+
$root: &;
6+
7+
margin: defaults.$padding-16 0;
8+
padding: 0;
9+
10+
border: defaults.$border-1 solid var(--accent-color);
11+
border-left: defaults.$border-4 solid var(--accent-color);
12+
border-radius: defaults.$border-radius;
13+
514
@each $name, $color in defaults.$hint-colors {
615
&.#{$name} {
7-
border-left-color: $color;
8-
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
16+
border-color: $color;
917
color: defaults.$body-font-color;
18+
19+
td.icon {
20+
background-color: color.adjust($color, $alpha: -0.9);
21+
border-start-start-radius: inherit;
22+
border-start-end-radius: inherit;
23+
position: relative;
24+
z-index: -10;
25+
outline: color.adjust($color, $alpha: -0.9);
26+
}
1027
}
1128
}
1229

13-
& {
14-
margin: defaults.$padding-16 0;
15-
padding: 0;
16-
17-
border-left: defaults.$border-4 solid var(--accent-color);
18-
border-radius: defaults.$border-radius;
30+
.table-wrap {
31+
margin: 0;
1932
}
2033

2134
table {
@@ -35,28 +48,34 @@
3548
font-weight: bold;
3649

3750
&.icon {
38-
.title {
39-
display: flex;
40-
align-items: center;
41-
}
42-
43-
i.fa::after {
44-
content: attr(title);
45-
font-style: normal;
46-
padding-left: defaults.$padding-24;
47-
}
48-
49-
i.fa {
50-
color: defaults.$black;
51-
background-size: auto 90%;
52-
background-repeat: no-repeat;
53-
filter: invert(30%);
54-
margin-left: -5px;
55-
}
51+
margin-left: -5px;
5652

5753
@each $name, $icon in defaults.$hint-icons {
5854
i.fa.icon-#{$name} {
59-
background-image: url(img/geekdoc-stack.svg##{$icon});
55+
width: defaults.$font-size-24;
56+
height: defaults.$font-size-24;
57+
position: relative;
58+
59+
&::before {
60+
content: "";
61+
position: absolute;
62+
left: 0;
63+
top: 50%;
64+
transform: translateY(-50%);
65+
width: defaults.$font-size-24;
66+
height: defaults.$font-size-24;
67+
mask-image: url(img/geekdoc-stack.svg##{$icon});
68+
mask-repeat: no-repeat;
69+
mask-size: contain;
70+
background-color: var(--body-font-color);
71+
}
72+
73+
&::after {
74+
color: var(--body-font-color);
75+
content: attr(title);
76+
font-style: normal;
77+
padding-left: defaults.$padding-32;
78+
}
6079
}
6180
}
6281
}

‎src/sass/_base.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -354,8 +354,8 @@ svg.gdoc-icon {
354354
background: var(--body-background);
355355
border-radius: defaults.$border-radius;
356356
box-shadow:
357-
0 1px 3px 0 var(--accent-color-dark),
358-
0 1px 2px 0 var(--accent-color);
357+
0 1px 3px 0 var(--accent-color),
358+
0 1px 2px 0 var(--accent-color-lite);
359359
position: absolute;
360360
margin: 0;
361361
padding: defaults.$padding-8 defaults.$padding-4 !important;
@@ -578,6 +578,10 @@ svg.gdoc-icon {
578578
text-decoration: underline;
579579
color: var(--footer-link-color);
580580

581+
&:hover {
582+
text-decoration: none;
583+
}
584+
581585
&:visited {
582586
color: var(--footer-link-color-visited);
583587
}

‎src/sass/_chroma_base.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020

2121
/* LineTable */
2222
.chroma .lntable {
23-
border: defaults.$border-1 solid var(--code-accent-color);
2423
border-radius: defaults.$border-radius;
2524
border-spacing: 0;
2625
padding: 0;
@@ -39,7 +38,7 @@
3938
.chroma .lntable td:first-child {
4039
code {
4140
background-color: var(--code-accent-color-lite);
42-
border-right: defaults.$border-1 solid var(--code-accent-color);
41+
font-size: defaults.$font-size-12;
4342
padding-left: 0;
4443
padding-right: 0;
4544
border-radius: 0;

‎src/sass/_color_mode.scss

+4-35
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@
1919
--link-color: #{defaults.$link-color};
2020
--link-color-visited: #{defaults.$link-color-visited};
2121

22-
--hint-link-color: #{defaults.$link-color};
23-
--hint-link-color-visited: #{defaults.$link-color-visited};
24-
25-
--accent-color-dark: #{defaults.$gray-400};
2622
--accent-color: #{defaults.$gray-200};
2723
--accent-color-lite: #{defaults.$gray-100};
2824

@@ -40,16 +36,10 @@
4036
}
4137

4238
.gdoc-markdown {
43-
.gdoc-hint,
4439
.gdoc-props__tag,
4540
.admonitionblock {
4641
filter: none;
4742
}
48-
49-
.gdoc-hint__title,
50-
.admonitionblock table td:first-child {
51-
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
52-
}
5343
}
5444
}
5545

@@ -68,10 +58,6 @@
6858
--link-color: #{defaults.$link-color-dark};
6959
--link-color-visited: #{defaults.$link-color-visited-dark};
7060

71-
--hint-link-color: #{defaults.$link-color};
72-
--hint-link-color-visited: #{defaults.$link-color-visited};
73-
74-
--accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
7561
--accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
7662
--accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
7763

@@ -89,7 +75,6 @@
8975
}
9076

9177
.gdoc-markdown {
92-
.gdoc-hint,
9378
.gdoc-props__tag,
9479
.admonitionblock {
9580
filter: saturate(2.5) brightness(0.85);
@@ -98,22 +83,6 @@
9883
.gdoc-progress__bar {
9984
filter: saturate(0.85) brightness(0.85);
10085
}
101-
102-
.gdoc-hint,
103-
.admonitionblock {
104-
a {
105-
color: var(--hint-link-color);
106-
107-
&:visited {
108-
color: var(--hint-link-color-visited);
109-
}
110-
}
111-
}
112-
113-
.gdoc-hint__title,
114-
.admonitionblock table td:first-child {
115-
background-color: color.scale(defaults.$gray-600, $alpha: -85%);
116-
}
11786
}
11887
}
11988

@@ -124,7 +93,7 @@
12493
--code-background: #{defaults.$code-background-dark};
12594
--code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
12695
--code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
127-
--code-font-color: #{defaults.$code-font-color-dark};
96+
--code-font-color: #{defaults.$gray-300};
12897

12998
--code-copy-background: #{defaults.$code-background-dark};
13099
--code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
@@ -140,11 +109,11 @@
140109
--code-background: #{defaults.$code-background};
141110
--code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
142111
--code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
143-
--code-font-color: #{defaults.$code-font-color};
112+
--code-font-color: #{defaults.$gray-700};
144113

145114
--code-copy-background: #{defaults.$code-background};
146-
--code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
147-
--code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
115+
--code-copy-font-color: #{defaults.$gray-500};
116+
--code-copy-border-color: #{defaults.$gray-400};
148117
--code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
149118
}
150119
}

‎src/sass/_defaults.scss

+9-10
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,18 @@ $border-1: 1px !default;
2828
$border-2: 1.5px !default;
2929
$border-4: 3px !default;
3030

31-
$border-radius: 0.15rem !default;
31+
$border-radius: 0.3rem !default;
3232

3333
// Grayscale
3434
$white: rgba(255, 255, 255, 1) !default;
35-
$gray-100: rgba(248, 249, 250, 1) !default;
36-
$gray-200: rgba(233, 236, 239, 1) !default;
37-
$gray-300: rgba(222, 226, 230, 1) !default;
38-
$gray-400: rgba(206, 212, 218, 1) !default;
39-
$gray-500: rgba(173, 181, 189, 1) !default;
40-
$gray-600: rgba(134, 142, 150, 1) !default;
41-
$gray-700: rgba(73, 80, 87, 1) !default;
42-
$gray-800: rgba(52, 58, 64, 1) !default;
43-
$gray-900: rgba(33, 37, 41, 1) !default;
35+
$gray-100: rgba(244, 246, 247, 1) !default;
36+
$gray-200: rgba(217, 219, 221, 1) !default;
37+
$gray-300: rgba(189, 192, 195, 1) !default;
38+
$gray-400: rgba(162, 165, 169, 1) !default;
39+
$gray-500: rgba(134, 137, 142, 1) !default;
40+
$gray-600: rgba(107, 110, 116, 1) !default;
41+
$gray-700: rgba(79, 83, 90, 1) !default;
42+
$gray-800: rgba(52, 56, 64, 1) !default;
4443
$black: rgba(0, 0, 0, 1) !default;
4544

4645
$link-color: rgba(10, 83, 154, 1) !default;

‎src/sass/_markdown.scss

+6-5
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
line-height: normal;
3939

4040
&:hover {
41-
text-decoration: underline;
41+
text-decoration: none;
4242
}
4343
}
4444

@@ -56,15 +56,15 @@
5656
}
5757

5858
&__link--code {
59-
text-decoration: none;
59+
text-decoration: underline;
6060
code {
6161
color: inherit !important;
6262
}
6363

6464
&:hover {
6565
background: none;
6666
color: var(--link-color) !important;
67-
text-decoration: underline;
67+
text-decoration: none;
6868
}
6969

7070
&:visited,
@@ -120,6 +120,7 @@
120120
padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
121121
(defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
122122

123+
border: defaults.$border-1 solid var(--accent-color);
123124
border-left: defaults.$border-4 solid var(--accent-color);
124125
border-radius: defaults.$border-radius;
125126
}
@@ -174,7 +175,7 @@
174175
}
175176

176177
code {
177-
padding: defaults.$padding-4 defaults.$padding-8;
178+
padding: defaults.$padding-2 defaults.$padding-4;
178179
}
179180

180181
pre,
@@ -183,7 +184,7 @@
183184
border-radius: defaults.$border-radius;
184185
color: var(--code-font-color);
185186
font-size: defaults.$font-size-14;
186-
line-height: defaults.$padding-16;
187+
line-height: defaults.$padding-20;
187188
}
188189

189190
pre code {

0 commit comments

Comments
 (0)