Newer
Older
article {
@include drop-shadow;
color: $color-text;
background-color: $color-text-background;
border-radius: $border-radius;
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
padding: 2rem;
@include medium-is-phone {
padding: 1rem;
}
max-width: 60rem;
position: relative;
/* Having auto-margins will wiggle the article into the center */
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
/* Last article needs no bottom margin */
&:last-child {
margin-bottom: 0;
}
h1, h2, h3 {
@include font-heading;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
&:not(:first-child) {
margin-top: 2rem;
margin-bottom: 0.5rem;
}
}
h4, h5, h6 {
margin-top: 0.4rem;
margin-bottom: 0.2rem;
&:not(:first-child) {
margin-top: 1.6rem;
margin-bottom: 0.4rem;
}
}
figure {
figcaption {
@include font-subscript;
margin-top: 0.5rem;
text-align: left;
}
}
/* Lists should be indented a bit
* Also the flex allows them to deal with adjacent floats.
*/
ul, ol {
display: flex;
flex-flow: column nowrap;
margin-left: 1rem;
}
p {
margin-top: 0.25rem;
margin-bottom: 0.50rem;
}
mjx-container {
overflow: auto;
// Padding required to prevent a vertical scrollbar showing up
padding: 0.25rem;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
blockquote {
/* Setting a flex display to allow the proper border rendering
* if placed next to a floating element. */
display: flex;
color: $color-helmoltz-gray;
border-left: 2px solid $color-content-light-gray;
padding-left: 0.5rem;
margin-left: 0;
margin-right: 0;
}
code,
pre {
font-family: "mononoki";
font-size: 0.75rem;
}
video {
display: block;
/* Ensure videos stay within their container */
max-width: 100%;
max-height: 100%;
}
}