this repo has no description
hauleth.dev
1@import "variables";
2
3// .posts {
4// margin: 0 auto;
5// }
6
7.post {
8 width: 100%;
9 text-align: left;
10 margin: 20px auto;
11 padding: 20px 0;
12
13 @media (max-width: $tablet-max-width) {
14 max-width: 660px;
15 }
16
17 &:not(:last-of-type) {
18 border-bottom: 1px solid var(--border-color);
19 }
20
21 // %meta {
22 // font-size: 1rem;
23 // margin-bottom: 10px;
24 // color: var(--accent-alpha-70);
25 // }
26
27 // &-meta {
28 // @extend %meta;
29 // }
30 // &-meta-inline {
31 // @extend %meta;
32
33 // display: inline;
34 // }
35
36 &-meta {
37 font-size: 1rem;
38 margin-bottom: 10px;
39 color: var(--accent-alpha-70);
40 }
41
42 &-title {
43 --border: 3px dotted var(--accent);
44 position: relative;
45 color: var(--accent);
46 margin: 0 0 15px;
47 padding-bottom: 15px;
48 border-bottom: var(--border);
49
50 &:after {
51 content: '';
52 position: absolute;
53 bottom: 2px;
54 display: block;
55 width: 100%;
56 border-bottom: var(--border);
57 }
58
59 a {
60 text-decoration: none;
61 }
62 }
63
64 &-content {
65 margin-top: 30px;
66 }
67
68 ul {
69 list-style: none;
70
71 li:before {
72 content: '⦿';
73 position: absolute;
74 left: -20px;
75 color: var(--accent);
76 }
77 ul {
78
79 li:before {
80 content: '■';
81 position: absolute;
82 left: -20px;
83 color: var(--accent);
84 }
85
86 ul {
87
88 li:before {
89 content: '►';
90 position: absolute;
91 left: -20px;
92 color: var(--accent);
93 }
94 }
95 }
96 }
97}
98
99// TODO: try adapting this using a properly nested selector in the block above
100// for ul items.
101.tag-list {
102 @media(max-width: $phone-max-width) {
103 margin-left: 5%;
104 }
105}
106
107.footnote-definition {
108 color: var(--accent);
109
110 p {
111 display: inline;
112 color: var(--footnote-color);
113 }
114}