summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_outer-button.scss2
-rw-r--r--assets/css/components/_post-list.scss56
2 files changed, 57 insertions, 1 deletions
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index e54c83d..21f78f4 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -26,7 +26,7 @@
26 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-size: 1rem; 27 font-size: 1rem;
28 font-weight: 700; 28 font-weight: 700;
29 letter-spacing: 1px; 29 letter-spacing: .5px;
30 text-decoration: none; 30 text-decoration: none;
31 text-transform: uppercase; 31 text-transform: uppercase;
32 32
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
new file mode 100644
index 0000000..7787efd
--- /dev/null
+++ b/assets/css/components/_post-list.scss
@@ -0,0 +1,56 @@
1@include namespace('post-list') {
2 @include store((
3 --colors: (
4 --cat: (
5 --fg: prop(--colors --fg-lo, $global: true),
6 ),
7 --post: (
8 --bg: prop(--colors --bg-lo, $global: true),
9 --border: prop(--colors --obj-hi, $global: true),
10 ),
11 --meta: (
12 --fg: prop(--colors --fg-hi, $global: true),
13 )
14 ),
15 --dims: (
16 --pad-x: 1em,
17 --pad-y: .6em,
18 )
19 ));
20
21 @include component(namespace()) {
22 @include element('category-header') {
23 color: prop(--colors --cat --fg);
24 font-size: 1 / 16 * 14em;
25 letter-spacing: 1px;
26 text-transform: uppercase;
27
28 @include next-element('post') {
29 margin-top: $line-height * .5rem;
30 }
31 }
32
33 @include element('post') {
34 display: flex;
35 align-items: baseline;
36 padding: prop(--dims --pad-y) prop(--dims --pad-x);
37 background-color: prop(--colors --post --bg);
38
39 @include next-twin-element {
40 border-top: 1px solid prop(--colors --post --border);
41 }
42 }
43
44 @include element('post-title') {
45 margin-right: 1em;
46 font-size: 1 / 16 * 17em;
47 }
48
49 @include element('post-date') {
50 flex: 0 0 auto;
51 margin-left: auto;
52 color: prop(--colors --meta --fg);
53 font-size: 1 / 16 * 14em;
54 }
55 }
56}