summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-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.scss16
-rw-r--r--assets/css/style.scss4
-rw-r--r--templates/layouts/categorized_list.html10
-rw-r--r--templates/layouts/list.html6
-rw-r--r--templates/partials/grid_card.html2
-rw-r--r--templates/partials/list_card.html2
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$