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