]>
Commit | Line | Data |
---|---|---|
9fa01778 XL |
1 | /* Base styles and content styles */ |
2 | ||
3 | @import 'variables.css'; | |
4 | ||
e74abb32 XL |
5 | :root { |
6 | /* Browser default font-size is 16px, this way 1 rem = 10px */ | |
7 | font-size: 62.5%; | |
8 | } | |
9 | ||
9fa01778 XL |
10 | html { |
11 | font-family: "Open Sans", sans-serif; | |
12 | color: var(--fg); | |
13 | background-color: var(--bg); | |
14 | text-size-adjust: none; | |
15 | } | |
16 | ||
17 | body { | |
18 | margin: 0; | |
e74abb32 | 19 | font-size: 1.6rem; |
9fa01778 XL |
20 | overflow-x: hidden; |
21 | } | |
22 | ||
23 | code { | |
e74abb32 | 24 | font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important; |
9fa01778 XL |
25 | font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ |
26 | } | |
27 | ||
f9f354fc XL |
28 | /* Don't change font size in headers. */ |
29 | h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { | |
30 | font-size: unset; | |
31 | } | |
32 | ||
9fa01778 XL |
33 | .left { float: left; } |
34 | .right { float: right; } | |
e74abb32 XL |
35 | .boring { opacity: 0.6; } |
36 | .hide-boring .boring { display: none; } | |
9fa01778 | 37 | .hidden { display: none; } |
9fa01778 XL |
38 | |
39 | h2, h3 { margin-top: 2.5em; } | |
40 | h4, h5 { margin-top: 2em; } | |
41 | ||
42 | .header + .header h3, | |
43 | .header + .header h4, | |
dc9dc135 | 44 | .header + .header h5 { |
9fa01778 XL |
45 | margin-top: 1em; |
46 | } | |
47 | ||
dc9dc135 XL |
48 | h1 a.header:target::before, |
49 | h2 a.header:target::before, | |
50 | h3 a.header:target::before, | |
51 | h4 a.header:target::before { | |
9fa01778 XL |
52 | display: inline-block; |
53 | content: "ยป"; | |
54 | margin-left: -30px; | |
55 | width: 30px; | |
56 | } | |
57 | ||
e74abb32 XL |
58 | h1 a.header:target, |
59 | h2 a.header:target, | |
60 | h3 a.header:target, | |
61 | h4 a.header:target { | |
62 | scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); | |
63 | } | |
64 | ||
9fa01778 XL |
65 | .page { |
66 | outline: 0; | |
67 | padding: 0 var(--page-padding); | |
f9f354fc | 68 | margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ |
9fa01778 XL |
69 | } |
70 | .page-wrapper { | |
71 | box-sizing: border-box; | |
72 | } | |
dc9dc135 | 73 | .js:not(.sidebar-resizing) .page-wrapper { |
9fa01778 XL |
74 | transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ |
75 | } | |
76 | ||
77 | .content { | |
78 | overflow-y: auto; | |
79 | padding: 0 15px; | |
80 | padding-bottom: 50px; | |
81 | } | |
82 | .content main { | |
83 | margin-left: auto; | |
84 | margin-right: auto; | |
85 | max-width: var(--content-max-width); | |
86 | } | |
f9f354fc XL |
87 | .content p { line-height: 1.45em; } |
88 | .content ol { line-height: 1.45em; } | |
89 | .content ul { line-height: 1.45em; } | |
9fa01778 XL |
90 | .content a { text-decoration: none; } |
91 | .content a:hover { text-decoration: underline; } | |
92 | .content img { max-width: 100%; } | |
93 | .content .header:link, | |
94 | .content .header:visited { | |
95 | color: var(--fg); | |
96 | } | |
97 | .content .header:link, | |
98 | .content .header:visited:hover { | |
99 | text-decoration: none; | |
100 | } | |
101 | ||
102 | table { | |
103 | margin: 0 auto; | |
104 | border-collapse: collapse; | |
105 | } | |
106 | table td { | |
107 | padding: 3px 20px; | |
108 | border: 1px var(--table-border-color) solid; | |
109 | } | |
110 | table thead { | |
111 | background: var(--table-header-bg); | |
112 | } | |
113 | table thead td { | |
114 | font-weight: 700; | |
115 | border: none; | |
116 | } | |
e74abb32 XL |
117 | table thead th { |
118 | padding: 3px 20px; | |
119 | } | |
9fa01778 XL |
120 | table thead tr { |
121 | border: 1px var(--table-header-bg) solid; | |
122 | } | |
123 | /* Alternate background colors for rows */ | |
124 | table tbody tr:nth-child(2n) { | |
125 | background: var(--table-alternate-bg); | |
126 | } | |
127 | ||
128 | ||
129 | blockquote { | |
130 | margin: 20px 0; | |
131 | padding: 0 20px; | |
132 | color: var(--fg); | |
133 | background-color: var(--quote-bg); | |
134 | border-top: .1em solid var(--quote-border); | |
135 | border-bottom: .1em solid var(--quote-border); | |
136 | } | |
137 | ||
138 | ||
139 | :not(.footnote-definition) + .footnote-definition, | |
140 | .footnote-definition + :not(.footnote-definition) { | |
141 | margin-top: 2em; | |
142 | } | |
143 | .footnote-definition { | |
144 | font-size: 0.9em; | |
145 | margin: 0.5em 0; | |
146 | } | |
147 | .footnote-definition p { | |
148 | display: inline; | |
149 | } | |
150 | ||
151 | .tooltiptext { | |
152 | position: absolute; | |
153 | visibility: hidden; | |
154 | color: #fff; | |
155 | background-color: #333; | |
156 | transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ | |
157 | left: -8px; /* Half of the width of the icon */ | |
158 | top: -35px; | |
159 | font-size: 0.8em; | |
160 | text-align: center; | |
161 | border-radius: 6px; | |
162 | padding: 5px 8px; | |
163 | margin: 5px; | |
164 | z-index: 1000; | |
165 | } | |
166 | .tooltipped .tooltiptext { | |
167 | visibility: visible; | |
168 | } |