diff options
| -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$ |
