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 }
66
67 &-cover {
68 border: 20px solid var(--accent);
69 background: transparent;
70 margin: 40px 0;
71 padding: 20px;
72
73 @media (max-width: $phone-max-width) {
74 padding: 10px;
75 border-width: 10px;
76 }
77 }
78
79 ul {
80 list-style: "\29bf";
81
82 ul {
83 list-style: "\25a0";
84
85 ul { list-style: "\25ba"; }
86 }
87 }
88}
89
90// TODO: try adapting this using a properly nested selector in the block above
91// for ul items.
92.tag-list {
93 @media(max-width: $phone-max-width) {
94 margin-left: 5%;
95 }
96}
97
98.post--regulation {
99 h1 {
100 justify-content: center;
101 }
102
103 h2 {
104 justify-content: center;
105 margin-bottom: 10px;
106
107 &+ h2 {
108 margin-top: -10px;
109 margin-bottom: 20px;
110 }
111 }
112}
113
114.post-list {
115 .post-date {
116 color: var(--accent-alpha-70);
117 text-decoration: none;
118 }
119
120 a {
121 text-decoration: none;
122 }
123}
124
125.post-toc {
126 font-size: .8rem;
127
128 .toggleable { display: none; }
129
130 label {
131 color: var(--accent-alpha-70);
132 -webkit-user-select: none; /* Safari */
133 -ms-user-select: none; /* IE 10 and IE 11 */
134 user-select: none; /* Standard syntax */
135 }
136 label::before { content: '>'; margin-right: 1rem; }
137
138 input[type="checkbox"]:checked {
139 & ~ .toggleable { display: block; }
140 & ~ label::before { content: 'v'; }
141 }
142
143 a { text-decoration: none; }
144
145 a:hover { text-decoration: underline; }
146}
147
148.for-hire {
149 @media print {
150 display: none;
151 }
152
153 width: 100%;
154 text-align: center;
155 font-weight: bolder;
156
157 border: 1px white solid;
158 padding: 1em;
159 margin: 2em 0;
160}
161
162.webmentions .url-only {
163 line-break: anywhere;
164}