diff options
| -rw-r--r-- | assets/css/_basics.scss | 2 | ||||
| -rw-r--r-- | assets/css/_vars.scss | 2 | ||||
| -rw-r--r-- | assets/css/components/_card-list.scss | 36 | ||||
| -rw-r--r-- | assets/css/scopes/_invisible-links.scss | 13 | ||||
| -rw-r--r-- | assets/css/style.scss | 1 | ||||
| -rw-r--r-- | content/profiles/index.md | 2 | ||||
| -rw-r--r-- | content/projects/emojis/index.md | 2 | ||||
| -rw-r--r-- | content/projects/index.md | 3 | ||||
| -rw-r--r-- | filters/icons.lua | 4 | ||||
| -rw-r--r-- | templates/layouts/categorized_list.html | 21 | ||||
| -rw-r--r-- | templates/partials/grid_card.html | 2 |
11 files changed, 40 insertions, 48 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 4d9f2f5..efa0279 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
| @@ -171,7 +171,7 @@ p { | |||
| 171 | 171 | ||
| 172 | :link, | 172 | :link, |
| 173 | :visited { | 173 | :visited { |
| 174 | color: prop(--colors --link --idle); | 174 | color: prop(--colors --link --default); |
| 175 | } | 175 | } |
| 176 | 176 | ||
| 177 | hr { | 177 | hr { |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index a8c7fdf..9e1b661 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
| @@ -80,7 +80,7 @@ $content--width: 46rem; | |||
| 80 | ), | 80 | ), |
| 81 | 81 | ||
| 82 | --link: ( | 82 | --link: ( |
| 83 | --idle: var(--colors--fg-lo), | 83 | --default: var(--colors--fg-lo), |
| 84 | --colored: ( | 84 | --colored: ( |
| 85 | --idle-h: 220, | 85 | --idle-h: 220, |
| 86 | --idle-s: 100%, | 86 | --idle-s: 100%, |
diff --git a/assets/css/components/_card-list.scss b/assets/css/components/_card-list.scss index 605c442..aa6eef9 100644 --- a/assets/css/components/_card-list.scss +++ b/assets/css/components/_card-list.scss | |||
| @@ -1,12 +1,8 @@ | |||
| 1 | @include namespace('card-list') { | 1 | @include namespace('card-list') { |
| 2 | @include store(( | 2 | @include store(( |
| 3 | --colors: ( | 3 | --colors: ( |
| 4 | --cat: ( | 4 | --title: prop(--colors --fg-lo, $global: true), |
| 5 | --fg: prop(--colors --fg-lo, $global: true), | 5 | --text: prop(--colors --fg-hi, $global: true), |
| 6 | ), | ||
| 7 | --meta: ( | ||
| 8 | --fg: prop(--colors --fg-hi, $global: true), | ||
| 9 | ) | ||
| 10 | ), | 6 | ), |
| 11 | --dims: ( | 7 | --dims: ( |
| 12 | --col-width: 17em | 8 | --col-width: 17em |
| @@ -17,36 +13,20 @@ | |||
| 17 | margin-top: $line-height * 2rem; | 13 | margin-top: $line-height * 2rem; |
| 18 | font-size: 1rem; | 14 | font-size: 1rem; |
| 19 | 15 | ||
| 20 | @include element('category-header') { | 16 | @include element('title') { |
| 21 | margin-top: $line-height * 2rem; | 17 | color: prop(--colors --title); |
| 22 | color: prop(--colors --cat --fg); | ||
| 23 | } | 18 | } |
| 24 | 19 | ||
| 25 | @include element('category-title') { | 20 | @include element('text') { |
| 26 | display: inline-block; | 21 | color: prop(--colors --text); |
| 27 | margin-top: 0; | 22 | line-height: 1.4; |
| 28 | margin-right: 1em; | ||
| 29 | |||
| 30 | :link, | ||
| 31 | :visited { | ||
| 32 | text-decoration: none; | ||
| 33 | |||
| 34 | &:hover { | ||
| 35 | text-decoration: underline; | ||
| 36 | } | ||
| 37 | } | ||
| 38 | } | ||
| 39 | |||
| 40 | @include element('category-description') { | ||
| 41 | display: block; | ||
| 42 | font-size: px-to-em(15px); | ||
| 43 | 23 | ||
| 44 | p { | 24 | p { |
| 45 | margin-top: $line-height * .25rem; | 25 | margin-top: $line-height * .25rem; |
| 46 | } | 26 | } |
| 47 | } | 27 | } |
| 48 | 28 | ||
| 49 | @include element('category-content') { | 29 | @include element('cards') { |
| 50 | margin-top: $line-height * .625rem; | 30 | margin-top: $line-height * .625rem; |
| 51 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | 31 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
| 52 | 32 | ||
diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss new file mode 100644 index 0000000..e4d149e --- /dev/null +++ b/assets/css/scopes/_invisible-links.scss | |||
| @@ -0,0 +1,13 @@ | |||
| 1 | @include namespace('invisible-links') { | ||
| 2 | @include scope(namespace()) { | ||
| 3 | :link, | ||
| 4 | :visited { | ||
| 5 | color: currentColor; | ||
| 6 | text-decoration: none; | ||
| 7 | |||
| 8 | &:hover { | ||
| 9 | text-decoration: underline; | ||
| 10 | } | ||
| 11 | } | ||
| 12 | } | ||
| 13 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index 67f44ed..754b91e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
| @@ -19,6 +19,7 @@ | |||
| 19 | @import 'components/card-list'; | 19 | @import 'components/card-list'; |
| 20 | 20 | ||
| 21 | @import 'scopes/colored-links'; | 21 | @import 'scopes/colored-links'; |
| 22 | @import 'scopes/invisible-links'; | ||
| 22 | @import 'scopes/headlines'; | 23 | @import 'scopes/headlines'; |
| 23 | @import 'scopes/body'; | 24 | @import 'scopes/body'; |
| 24 | 25 | ||
diff --git a/content/profiles/index.md b/content/profiles/index.md index 265a23b..0d8df9f 100644 --- a/content/profiles/index.md +++ b/content/profiles/index.md | |||
| @@ -2,5 +2,5 @@ | |||
| 2 | title: Profiles | 2 | title: Profiles |
| 3 | position: 1 | 3 | position: 1 |
| 4 | list_grid: true | 4 | list_grid: true |
| 5 | list_post_icon: icon-arrow-up-right | 5 | list_post_icon: arrow-up-right |
| 6 | --- | 6 | --- |
diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md index 58ad85b..728ade5 100644 --- a/content/projects/emojis/index.md +++ b/content/projects/emojis/index.md | |||
| @@ -1,5 +1,5 @@ | |||
| 1 | --- | 1 | --- |
| 2 | title: Emojis | 2 | title: Emojis |
| 3 | icon: smile | 3 | icon: smile |
| 4 | list_post_icon: icon-arrow-right | 4 | list_post_icon: arrow-right |
| 5 | --- | 5 | --- |
diff --git a/content/projects/index.md b/content/projects/index.md index 3b6b718..eaaf808 100644 --- a/content/projects/index.md +++ b/content/projects/index.md | |||
| @@ -4,3 +4,6 @@ position: 2 | |||
| 4 | list_grid: true | 4 | list_grid: true |
| 5 | list_limit: 4 | 5 | list_limit: 4 |
| 6 | --- | 6 | --- |
| 7 | |||
| 8 | A selection of projects I wasn't too lazy to create a page for. | ||
| 9 | You can find more projects on [git.vulpes.one](https://git.vulpes.one/). | ||
diff --git a/filters/icons.lua b/filters/icons.lua index 3800e5d..fb6a608 100644 --- a/filters/icons.lua +++ b/filters/icons.lua | |||
| @@ -3,8 +3,8 @@ function Str(el) | |||
| 3 | 3 | ||
| 4 | if icon then | 4 | if icon then |
| 5 | return pandoc.RawInline('html', | 5 | return pandoc.RawInline('html', |
| 6 | '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#' .. icon .. | 6 | '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#icon-' .. |
| 7 | '"></use></svg>') | 7 | icon .. '"></use></svg>') |
| 8 | end | 8 | end |
| 9 | 9 | ||
| 10 | return el | 10 | return el |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 690ab68..6f06a63 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
| @@ -7,23 +7,18 @@ $body$ | |||
| 7 | <div class="c-card-list"> | 7 | <div class="c-card-list"> |
| 8 | $for(list)$ | 8 | $for(list)$ |
| 9 | <section> | 9 | <section> |
| 10 | <header class="c-card-list__category-header"> | 10 | <h2 class="c-card-list__title s-invisible-links"> |
| 11 | <div> | 11 | <a href="$it.url.rel$">$it.title$</a> |
| 12 | <h2 class="c-card-list__category-title"> | 12 | </h2> |
| 13 | <a href="$it.url.rel$">$it.title$</a> | 13 | $if(it.description)$ |
| 14 | </h2> | 14 | <div class="c-card-list__text s-colored-links">$it.description$</div> |
| 15 | $if(it.omitted)$<small>$it.omitted$ more</small>$endif$ | 15 | $endif$ |
| 16 | </div> | ||
| 17 | $if(it.description)$ | ||
| 18 | <small class="c-card-list__category-description">$it.description$</small> | ||
| 19 | $endif$ | ||
| 20 | </header> | ||
| 21 | $if(it.grid)$ | 16 | $if(it.grid)$ |
| 22 | <div class="c-card-list__category-content c-card-list__category-content--grid"> | 17 | <div class="c-card-list__cards c-card-list__cards--grid"> |
| 23 | $it.items:partials/grid_card()$ | 18 | $it.items:partials/grid_card()$ |
| 24 | </div> | 19 | </div> |
| 25 | $else$ | 20 | $else$ |
| 26 | <div class="c-card-list__category-content"> | 21 | <div class="c-card-list__cards"> |
| 27 | $it.items:partials/list_card()$ | 22 | $it.items:partials/list_card()$ |
| 28 | </div> | 23 | </div> |
| 29 | $endif$ | 24 | $endif$ |
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index 449b25c..e1b7f78 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html | |||
| @@ -30,7 +30,7 @@ | |||
| 30 | </div> | 30 | </div> |
| 31 | $if(it.post_icon)$ | 31 | $if(it.post_icon)$ |
| 32 | <svg class="c-card__block o-icon" width="1em" height="1em"> | 32 | <svg class="c-card__block o-icon" width="1em" height="1em"> |
| 33 | <use href="/symbols.svg#$it.post_icon$"></use> | 33 | <use href="/symbols.svg#icon-$it.post_icon$"></use> |
| 34 | </svg> | 34 | </svg> |
| 35 | $endif$ | 35 | $endif$ |
| 36 | </a> | 36 | </a> |
