this repo has no description
hauleth.dev
1@import "variables";
2
3.post {
4 width: 100%;
5 text-align: left;
6 margin: 20px auto;
7 padding: 20px 0 0 0;
8
9 @media (max-width: $tablet-max-width) {
10 margin: 0 auto;
11 max-width: 660px;
12 }
13
14 &:first-of-type {
15 padding-top: 0;
16 }
17
18 &:not(:last-of-type) {
19 border-bottom: 1px solid var(--border-color);
20 }
21
22 &-meta {
23 margin-bottom: 10px;
24 color: var(--accent-alpha-70);
25 a { text-decoration: none; }
26 a:hover { text-decoration: underline; }
27 }
28
29 &-title {
30 --border: 3px dotted var(--accent);
31 position: relative;
32 color: var(--accent);
33 margin: 0 0 15px;
34 padding-bottom: 15px;
35 border-bottom: var(--border);
36
37 &:after {
38 content: '';
39 position: absolute;
40 bottom: 2px;
41 display: block;
42 width: 100%;
43 border-bottom: var(--border);
44 }
45
46 a {
47 text-decoration: none;
48 }
49 }
50
51 &.on-list &-title { --border: none; }
52
53 &-tags {
54 display: block;
55 margin-bottom: 20px;
56 opacity: .5;
57
58 a {
59 text-decoration: none;
60 }
61 }
62
63 &-content {
64 margin-top: 30px;
65 position: relative;
66 }
67
68 &-cover {
69 border: 20px solid var(--accent);
70 background: transparent;
71 margin: 40px 0;
72 padding: 20px;
73
74 @media (max-width: $phone-max-width) {
75 padding: 10px;
76 border-width: 10px;
77 }
78 }
79
80 ul {
81 list-style: "\29bf";
82
83 ul {
84 list-style: "\25a0";
85
86 ul { list-style: "\25ba"; }
87 }
88 }
89}
90
91// TODO: try adapting this using a properly nested selector in the block above
92// for ul items.
93.tag-list {
94 @media(max-width: $phone-max-width) {
95 margin-left: 5%;
96 }
97}
98
99.post--regulation {
100 h1 {
101 justify-content: center;
102 }
103
104 h2 {
105 justify-content: center;
106 margin-bottom: 10px;
107
108 &+ h2 {
109 margin-top: -10px;
110 margin-bottom: 20px;
111 }
112 }
113}
114
115.post-list {
116 .post-date {
117 color: var(--accent-alpha-70);
118 text-decoration: none;
119 }
120
121 a {
122 text-decoration: none;
123 }
124}
125
126.post-toc {
127 font-size: .8rem;
128
129 .toggleable { display: none; }
130
131 label {
132 color: var(--accent-alpha-70);
133 -webkit-user-select: none; /* Safari */
134 -ms-user-select: none; /* IE 10 and IE 11 */
135 user-select: none; /* Standard syntax */
136 }
137 label::before { content: '>'; margin-right: 1rem; }
138
139 input[type="checkbox"]:checked {
140 & ~ .toggleable { display: block; }
141 & ~ label::before { content: 'v'; }
142 }
143
144 a { text-decoration: none; }
145
146 a:hover { text-decoration: underline; }
147}
148
149.for-hire {
150 @media print {
151 display: none;
152 }
153
154 width: 100%;
155 text-align: center;
156 font-weight: bolder;
157
158 border: 1px white solid;
159 padding: 1em;
160 margin: 2em 0;
161}
162
163.webmentions .url-only {
164 line-break: anywhere;
165}
166
167.halmos {
168 text-align: right;
169 font-size: 1.5em;
170}
171
172.footnote-definition {
173 @media (min-width: #{$tablet-max-width + 1px}) {
174 position: absolute;
175 left: 105%;
176
177 width: 10vw;
178
179 margin-top: -7rem;
180 }
181
182 margin-top: 1rem;
183
184 font-size: .8em;
185
186 p {
187 padding-left: .5rem;
188 display: inline;
189 }
190
191 // For some reason `:last-of-type` doesn't work
192 &:has(+ .halmos) {
193 margin-bottom: -.5rem;
194 }
195}