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;
8
9 @media (max-width: $tablet-max-width) {
10 max-width: 660px;
11 }
12
13 &:not(:last-of-type) {
14 border-bottom: 1px solid var(--border-color);
15 }
16
17 &-meta {
18 margin-bottom: 10px;
19 color: var(--accent-alpha-70);
20 }
21
22 &-title {
23 --border: 3px dotted var(--accent);
24 position: relative;
25 color: var(--accent);
26 margin: 0 0 15px;
27 padding-bottom: 15px;
28 border-bottom: var(--border);
29
30 &:after {
31 content: '';
32 position: absolute;
33 bottom: 2px;
34 display: block;
35 width: 100%;
36 border-bottom: var(--border);
37 }
38
39 a {
40 text-decoration: none;
41 }
42 }
43
44 &-tags {
45 display: block;
46 margin-bottom: 20px;
47 opacity: .5;
48
49 a {
50 text-decoration: none;
51 }
52 }
53
54 &-content {
55 margin-top: 30px;
56 }
57
58 &-cover {
59 border: 20px solid var(--accent);
60 background: transparent;
61 margin: 40px 0;
62 padding: 20px;
63
64 @media (max-width: $phone-max-width) {
65 padding: 10px;
66 border-width: 10px;
67 }
68 }
69
70 ul {
71 list-style: none;
72
73 li:before {
74 content: '⦿';
75 position: absolute;
76 left: -20px;
77 color: var(--accent);
78 }
79 ul {
80
81 li:before {
82 content: '■';
83 position: absolute;
84 left: -20px;
85 color: var(--accent);
86 }
87
88 ul {
89
90 li:before {
91 content: '►';
92 position: absolute;
93 left: -20px;
94 color: var(--accent);
95 }
96 }
97 }
98 }
99}
100
101// TODO: try adapting this using a properly nested selector in the block above
102// for ul items.
103.tag-list {
104 @media(max-width: $phone-max-width) {
105 margin-left: 5%;
106 }
107}
108
109.post--regulation {
110 h1 {
111 justify-content: center;
112 }
113
114 h2 {
115 justify-content: center;
116 margin-bottom: 10px;
117
118 &+ h2 {
119 margin-top: -10px;
120 margin-bottom: 20px;
121 }
122 }
123}
124
125.post-list {
126 .post-date {
127 color: var(--accent-alpha-70);
128 text-decoration: none;
129 }
130
131 a {
132 text-decoration: none;
133 }
134
135 .post-list-title {
136 text-decoration: underline;
137 }
138
139 .post-tag {
140 text-decoration: underline;
141 }
142}