diff options
author | Volpeon <git@volpeon.ink> | 2021-11-21 08:08:14 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-11-21 08:08:14 +0100 |
commit | 5ede915c4990584fa0ae7747b9a5ad9a4e93acdd (patch) | |
tree | 175f4f34b47a1a122ed69a1581f7b19b65d29428 | |
parent | Fix list card post icon (diff) | |
download | volpeon.ink-5ede915c4990584fa0ae7747b9a5ad9a4e93acdd.tar.gz volpeon.ink-5ede915c4990584fa0ae7747b9a5ad9a4e93acdd.tar.bz2 volpeon.ink-5ede915c4990584fa0ae7747b9a5ad9a4e93acdd.zip |
Improved list structure again
-rw-r--r-- | assets/css/layouts/_card-list.scss (renamed from assets/css/components/_card-list.scss) | 19 | ||||
-rw-r--r-- | assets/css/scopes/_small.scss | 16 | ||||
-rw-r--r-- | assets/css/style.scss | 4 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 10 | ||||
-rw-r--r-- | templates/layouts/list.html | 6 | ||||
-rw-r--r-- | templates/partials/grid_card.html | 2 | ||||
-rw-r--r-- | templates/partials/list_card.html | 2 |
7 files changed, 30 insertions, 29 deletions
diff --git a/assets/css/components/_card-list.scss b/assets/css/layouts/_card-list.scss index aa6eef9..e6d1297 100644 --- a/assets/css/components/_card-list.scss +++ b/assets/css/layouts/_card-list.scss | |||
@@ -1,31 +1,14 @@ | |||
1 | @include namespace('card-list') { | 1 | @include namespace('card-list') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | ||
4 | --title: prop(--colors --fg-lo, $global: true), | ||
5 | --text: prop(--colors --fg-hi, $global: true), | ||
6 | ), | ||
7 | --dims: ( | 3 | --dims: ( |
8 | --col-width: 17em | 4 | --col-width: 17em |
9 | ) | 5 | ) |
10 | )); | 6 | )); |
11 | 7 | ||
12 | @include component(namespace()) { | 8 | @include layout(namespace()) { |
13 | margin-top: $line-height * 2rem; | 9 | margin-top: $line-height * 2rem; |
14 | font-size: 1rem; | 10 | font-size: 1rem; |
15 | 11 | ||
16 | @include element('title') { | ||
17 | color: prop(--colors --title); | ||
18 | } | ||
19 | |||
20 | @include element('text') { | ||
21 | color: prop(--colors --text); | ||
22 | line-height: 1.4; | ||
23 | |||
24 | p { | ||
25 | margin-top: $line-height * .25rem; | ||
26 | } | ||
27 | } | ||
28 | |||
29 | @include element('cards') { | 12 | @include element('cards') { |
30 | margin-top: $line-height * .625rem; | 13 | margin-top: $line-height * .625rem; |
31 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | 14 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss new file mode 100644 index 0000000..f7aa61c --- /dev/null +++ b/assets/css/scopes/_small.scss | |||
@@ -0,0 +1,16 @@ | |||
1 | @include namespace('small') { | ||
2 | @include store(( | ||
3 | --colors: ( | ||
4 | --fg: prop(--colors --fg-hi, $global: true), | ||
5 | ) | ||
6 | )); | ||
7 | |||
8 | @include scope(namespace()) { | ||
9 | color: prop(--colors --fg); | ||
10 | line-height: 1.4; | ||
11 | |||
12 | p { | ||
13 | margin-top: $line-height * .25rem; | ||
14 | } | ||
15 | } | ||
16 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index 754b91e..9c57b28 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -16,11 +16,13 @@ | |||
16 | @import 'components/header'; | 16 | @import 'components/header'; |
17 | @import 'components/footer'; | 17 | @import 'components/footer'; |
18 | @import 'components/card'; | 18 | @import 'components/card'; |
19 | @import 'components/card-list'; | 19 | |
20 | @import 'layouts/card-list'; | ||
20 | 21 | ||
21 | @import 'scopes/colored-links'; | 22 | @import 'scopes/colored-links'; |
22 | @import 'scopes/invisible-links'; | 23 | @import 'scopes/invisible-links'; |
23 | @import 'scopes/headlines'; | 24 | @import 'scopes/headlines'; |
25 | @import 'scopes/small'; | ||
24 | @import 'scopes/body'; | 26 | @import 'scopes/body'; |
25 | 27 | ||
26 | @import 'utils'; | 28 | @import 'utils'; |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 6f06a63..7d53cbe 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -4,21 +4,21 @@ | |||
4 | $body$ | 4 | $body$ |
5 | </header> | 5 | </header> |
6 | 6 | ||
7 | <div class="c-card-list"> | 7 | <div class="l-card-list"> |
8 | $for(list)$ | 8 | $for(list)$ |
9 | <section> | 9 | <section> |
10 | <h2 class="c-card-list__title s-invisible-links"> | 10 | <h2 class="s-invisible-links"> |
11 | <a href="$it.url.rel$">$it.title$</a> | 11 | <a href="$it.url.rel$">$it.title$</a> |
12 | </h2> | 12 | </h2> |
13 | $if(it.description)$ | 13 | $if(it.description)$ |
14 | <div class="c-card-list__text s-colored-links">$it.description$</div> | 14 | <div class="s-small s-colored-links">$it.description$</div> |
15 | $endif$ | 15 | $endif$ |
16 | $if(it.grid)$ | 16 | $if(it.grid)$ |
17 | <div class="c-card-list__cards c-card-list__cards--grid"> | 17 | <div class="l-card-list__cards l-card-list__cards--grid"> |
18 | $it.items:partials/grid_card()$ | 18 | $it.items:partials/grid_card()$ |
19 | </div> | 19 | </div> |
20 | $else$ | 20 | $else$ |
21 | <div class="c-card-list__cards"> | 21 | <div class="l-card-list__cards"> |
22 | $it.items:partials/list_card()$ | 22 | $it.items:partials/list_card()$ |
23 | </div> | 23 | </div> |
24 | $endif$ | 24 | $endif$ |
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index a7d72db..f3e5768 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html | |||
@@ -4,13 +4,13 @@ | |||
4 | $body$ | 4 | $body$ |
5 | </header> | 5 | </header> |
6 | 6 | ||
7 | <div class="c-card-list"> | 7 | <div class="l-card-list"> |
8 | $if(list_grid)$ | 8 | $if(list_grid)$ |
9 | <div class="c-card-list__cards c-card-list__cards--grid"> | 9 | <div class="l-card-list__cards l-card-list__cards--grid"> |
10 | $list:partials/grid_card()$ | 10 | $list:partials/grid_card()$ |
11 | </div> | 11 | </div> |
12 | $else$ | 12 | $else$ |
13 | <div class="c-card-list__cards"> | 13 | <div class="l-card-list__cards"> |
14 | $list:partials/list_card()$ | 14 | $list:partials/list_card()$ |
15 | </div> | 15 | </div> |
16 | $endif$ | 16 | $endif$ |
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index e1b7f78..9cd8463 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <a href="$it.url.rel$" class="c-card-list__card c-card"> | 1 | <a href="$it.url.rel$" class="l-card-list__card c-card"> |
2 | $if(it.indicator)$ | 2 | $if(it.indicator)$ |
3 | <div class="c-card__block c-card__block--indicator"></div> | 3 | <div class="c-card__block c-card__block--indicator"></div> |
4 | $endif$ | 4 | $endif$ |
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html index 1a085a0..b784c1e 100644 --- a/templates/partials/list_card.html +++ b/templates/partials/list_card.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <a href="$it.url.rel$" class="c-card-list__card c-card"> | 1 | <a href="$it.url.rel$" class="l-card-list__card c-card"> |
2 | $if(it.indicator)$ | 2 | $if(it.indicator)$ |
3 | <div class="c-card__block c-card__block--indicator"></div> | 3 | <div class="c-card__block c-card__block--indicator"></div> |
4 | $endif$ | 4 | $endif$ |