diff options
| -rw-r--r-- | assets/css/components/_card.scss | 15 | ||||
| -rw-r--r-- | assets/css/components/_post-list.scss | 36 | ||||
| -rw-r--r-- | templates/layouts/categorized_list.html | 21 |
3 files changed, 32 insertions, 40 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index f444daf..1b46373 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
| @@ -14,13 +14,6 @@ | |||
| 14 | ) | 14 | ) |
| 15 | )); | 15 | )); |
| 16 | 16 | ||
| 17 | @include store(( | ||
| 18 | --dims: ( | ||
| 19 | --pad-x: 1em, | ||
| 20 | --pad-y: .7em | ||
| 21 | ) | ||
| 22 | ), 'md'); | ||
| 23 | |||
| 24 | @include component(namespace()) { | 17 | @include component(namespace()) { |
| 25 | display: flex; | 18 | display: flex; |
| 26 | position: relative; | 19 | position: relative; |
| @@ -42,7 +35,7 @@ | |||
| 42 | 35 | ||
| 43 | small, | 36 | small, |
| 44 | strong { | 37 | strong { |
| 45 | transition: background-color .2s, color .2s; | 38 | transition: color .2s; |
| 46 | } | 39 | } |
| 47 | 40 | ||
| 48 | &:link, | 41 | &:link, |
| @@ -62,7 +55,7 @@ | |||
| 62 | 55 | ||
| 63 | small, | 56 | small, |
| 64 | strong { | 57 | strong { |
| 65 | color: prop(--colors --hover --fg); | 58 | color: currentColor; |
| 66 | } | 59 | } |
| 67 | } | 60 | } |
| 68 | } | 61 | } |
| @@ -72,6 +65,10 @@ | |||
| 72 | width: 100%; | 65 | width: 100%; |
| 73 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | 66 | padding: prop(--dims --pad-y) prop(--dims --pad-x); |
| 74 | 67 | ||
| 68 | @include next-twin-element { | ||
| 69 | width: auto; | ||
| 70 | } | ||
| 71 | |||
| 75 | @include modifier('flip') { | 72 | @include modifier('flip') { |
| 76 | visibility: hidden; | 73 | visibility: hidden; |
| 77 | position: absolute; | 74 | position: absolute; |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 5e9f520..9d4c956 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss | |||
| @@ -7,16 +7,10 @@ | |||
| 7 | --post: ( | 7 | --post: ( |
| 8 | --idle-fg: prop(--colors --fg-lo, $global: true), | 8 | --idle-fg: prop(--colors --fg-lo, $global: true), |
| 9 | --visited-fg: prop(--colors --fg, $global: true), | 9 | --visited-fg: prop(--colors --fg, $global: true), |
| 10 | --bg: prop(--colors --bg-lo, $global: true), | ||
| 11 | --border: prop(--colors --obj-hi, $global: true), | ||
| 12 | ), | 10 | ), |
| 13 | --meta: ( | 11 | --meta: ( |
| 14 | --fg: prop(--colors --fg-hi, $global: true), | 12 | --fg: prop(--colors --fg-hi, $global: true), |
| 15 | ) | 13 | ) |
| 16 | ), | ||
| 17 | --dims: ( | ||
| 18 | --pad-x: 1em, | ||
| 19 | --pad-y: .6em, | ||
| 20 | ) | 14 | ) |
| 21 | )); | 15 | )); |
| 22 | 16 | ||
| @@ -33,15 +27,8 @@ | |||
| 33 | } | 27 | } |
| 34 | 28 | ||
| 35 | @include element('post') { | 29 | @include element('post') { |
| 36 | display: flex; | ||
| 37 | align-items: baseline; | ||
| 38 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
| 39 | background-color: prop(--colors --post --bg); | ||
| 40 | color: currentColor; | ||
| 41 | text-decoration: none; | ||
| 42 | |||
| 43 | @include next-twin-element { | 30 | @include next-twin-element { |
| 44 | margin-top: 2px; | 31 | margin-top: .6rem; |
| 45 | } | 32 | } |
| 46 | 33 | ||
| 47 | &:visited { | 34 | &:visited { |
| @@ -49,19 +36,26 @@ | |||
| 49 | color: prop(--colors --post --visited-fg); | 36 | color: prop(--colors --post --visited-fg); |
| 50 | } | 37 | } |
| 51 | } | 38 | } |
| 39 | |||
| 40 | &:hover, | ||
| 41 | &:focus { | ||
| 42 | @include element('post-date') { | ||
| 43 | color: currentColor; | ||
| 44 | } | ||
| 45 | } | ||
| 52 | } | 46 | } |
| 53 | 47 | ||
| 54 | @include element('post-title') { | 48 | @include element('post-title') { |
| 55 | margin-right: 1em; | 49 | color: prop(--colors --post --idle-fg); |
| 56 | color: prop(--colors --post --idle-fg); | 50 | font-size: 1 / 16 * 17em; |
| 57 | font-size: 1 / 16 * 17em; | 51 | font-weight: normal; |
| 58 | } | 52 | } |
| 59 | 53 | ||
| 60 | @include element('post-date') { | 54 | @include element('post-date') { |
| 61 | flex: 0 0 auto; | 55 | flex: 0 0 auto; |
| 62 | margin-left: auto; | 56 | transition: color .2s; |
| 63 | color: prop(--colors --meta --fg); | 57 | color: prop(--colors --meta --fg); |
| 64 | font-size: 1 / 16 * 14em; | 58 | font-size: 1 / 16 * 14em; |
| 65 | } | 59 | } |
| 66 | } | 60 | } |
| 67 | } | 61 | } |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 5dddc55..ef9e061 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
| @@ -12,17 +12,18 @@ $body$ | |||
| 12 | $it.name$ | 12 | $it.name$ |
| 13 | </h2> | 13 | </h2> |
| 14 | $for(it.pages)$ | 14 | $for(it.pages)$ |
| 15 | <a href="$it.url.rel$" class="c-post-list__post"> | 15 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
| 16 | <span class="c-post-list__post-title"> | 16 | <div class="c-card__content"> |
| 17 | $it.title$ | 17 | <strong class="c-post-list__post-title u-db">$it.title$</strong> |
| 18 | </span> | 18 | </div> |
| 19 | |||
| 20 | $if(it.category.show_date)$ | 19 | $if(it.category.show_date)$ |
| 21 | <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date u-dn@sm-hi"> | 20 | <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content"> |
| 22 | $it.date.short$ | 21 | <span class="u-dn@sm-hi"> |
| 23 | </time> | 22 | $it.date.short$ |
| 24 | <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date u-dn@sm-lo"> | 23 | </span> |
| 25 | $it.date.long$ | 24 | <span class="u-dn@sm-lo"> |
| 25 | $it.date.long$ | ||
| 26 | </span> | ||
| 26 | </time> | 27 | </time> |
| 27 | $endif$ | 28 | $endif$ |
| 28 | </a> | 29 | </a> |