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