-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
asides.scss
124 lines (106 loc) · 2.5 KB
/
asides.scss
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
// @use 'variables/colors';
// @use 'variables/theme';
body {
--aside-background: transparent;
--aside-background-hover: var(--background-modifier-hover);
--aside-text-color: var(--text-muted);
--aside-border-color: var(--background-modifier-border);
}
.callout[data-callout~=aside] {
--callout-color: 0, 0, 0;
--callout-icon: none;
--move: 0;
background-color: var(--aside-background);
position: relative;
float: right;
clear: both;
margin: 0;
padding: 0;
max-width: 50%;
padding-top: 4px;
margin-left: 1em;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 4px;
margin-top: 4px;
font-size: 80%;
line-height: 1.6;
color: var(--aside-text-color);
border-radius: 0;
&[data-callout-metadata~='+'] {
--move: calc(40% - 1em);
}
&[data-callout-metadata~='++'] {
--move: calc(30% - 1em);
}
&[data-callout-metadata~='+++'] {
--move: calc(20% - 1em);
}
&[data-callout-metadata~='++++'] {
--move: calc(10% - 1em);
}
&[data-callout-metadata~='+++++'] {
--move: -1em;
}
&:hover {
border-radius: var(--callout-radius);
}
.callout-title {
display: none;
}
.callout-content {
padding: 0 ;
& > p {
margin-top: 0;
margin-block-start: 4px;
margin-block-end: 8px;
}
}
}
.callout[data-callout-metadata~=right] {
float: right;
clear: right;
margin-right: calc(-50% + var(--move));
margin-left: 1em;
.aside-border & {
border-left: 1px solid var(--aside-border-color);
}
}
.callout[data-callout-metadata~=left] {
float: left;
clear: left;
margin-right: 1em;
margin-left: calc(-50% + var(--move));
border-left: none;
.aside-border & {
border-right: 1px solid var(--aside-border-color);
}
}
/* Aside counter
—————————————————————————————————————————————————————————*/
.markdown-rendered {
counter-reset: sidenote-counter;
}
.el-div[data-callout~=aside] {
counter-increment: sidenote-counter;
&:hover > .callout[data-callout~=aside]{
background-color: var(--aside-background-hover);
}
}
/* Counter before the sidenote in the margin. */
.aside-counter .callout[data-callout~=aside] .callout-content::before {
content: counter(sidenote-counter)".";
position: relative;
float: left;
padding-right: 4px;
vertical-align: baseline;
font-size: 100%;
font-weight: bold;
}
/* Counter in the main body. */
.aside-counter .el-div[data-callout~=aside]::after {
content: counter(sidenote-counter);
vertical-align: super;
font-size: 80%;
font-weight: bold;
}