diff options
-rw-r--r-- | assets/css/_vars.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 1 | ||||
-rw-r--r-- | assets/css/components/_post-list.scss | 10 | ||||
-rw-r--r-- | assets/css/layouts/_card-grid.scss | 2 | ||||
-rw-r--r-- | assets/css/layouts/_project-grid.scss | 5 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 36 | ||||
-rw-r--r-- | templates/layouts/index.html | 2 |
7 files changed, 35 insertions, 27 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index bbe02e5..63936ab 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -53,8 +53,7 @@ $content--width: 42rem; | |||
53 | --fg: $gray6, // Text | 53 | --fg: $gray6, // Text |
54 | --fg-lo: $gray7, // Strong text | 54 | --fg-lo: $gray7, // Strong text |
55 | 55 | ||
56 | --obj-shadow: transparent, | 56 | --obj-shadow: transparent, |
57 | --obj-shadow-filter: transparent, | ||
58 | 57 | ||
59 | --accent: ( | 58 | --accent: ( |
60 | --h: 354, | 59 | --h: 354, |
@@ -105,8 +104,7 @@ $content--width: 42rem; | |||
105 | --fg: $gray6, // Text | 104 | --fg: $gray6, // Text |
106 | --fg-lo: $gray7, // Strong text | 105 | --fg-lo: $gray7, // Strong text |
107 | 106 | ||
108 | --obj-shadow: rgba(#000, .05), | 107 | --obj-shadow: rgba(#000, .05), |
109 | --obj-shadow-filter: rgba(#000, .04), | ||
110 | 108 | ||
111 | --accent: ( | 109 | --accent: ( |
112 | --h: 354, | 110 | --h: 354, |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 2bd1fb1..da471e7 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -10,6 +10,7 @@ | |||
10 | position: relative; | 10 | position: relative; |
11 | min-height: prop(--dims --outer, $global: true); | 11 | min-height: prop(--dims --outer, $global: true); |
12 | margin-top: calc(2 * #{prop(--container --dims --pad-y, $global: true)}); | 12 | margin-top: calc(2 * #{prop(--container --dims --pad-y, $global: true)}); |
13 | overflow: hidden; | ||
13 | color: prop(--colors --fg); | 14 | color: prop(--colors --fg); |
14 | font-family: $font-fam--mono; | 15 | font-family: $font-fam--mono; |
15 | line-height: 1.4; | 16 | line-height: 1.4; |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 6ddc9b7..dc3eda6 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss | |||
@@ -17,14 +17,16 @@ | |||
17 | @include component(namespace()) { | 17 | @include component(namespace()) { |
18 | @include element('category-header') { | 18 | @include element('category-header') { |
19 | color: prop(--colors --cat --fg); | 19 | color: prop(--colors --cat --fg); |
20 | } | ||
20 | 21 | ||
21 | @include next-element('post') { | 22 | @include element('category-content') { |
22 | margin-top: $line-height * .5rem; | 23 | margin-top: $line-height * .5rem; |
23 | } | 24 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
24 | } | 25 | } |
25 | 26 | ||
26 | @include element('post') { | 27 | @include element('post') { |
27 | color: prop(--colors --post --idle-fg); | 28 | box-shadow: none; |
29 | color: prop(--colors --post --idle-fg); | ||
28 | 30 | ||
29 | &:visited { | 31 | &:visited { |
30 | color: prop(--colors --post --visited-fg); | 32 | color: prop(--colors --post --visited-fg); |
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index 235ef0b..c9d927a 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | display: grid; | 9 | display: grid; |
10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); |
11 | gap: .6rem; | 11 | gap: .6rem; |
12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow-filter, $global: true)}); | 12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
13 | 13 | ||
14 | @include element('card') { | 14 | @include element('card') { |
15 | box-shadow: none; | 15 | box-shadow: none; |
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss index 7c67663..5ed983c 100644 --- a/assets/css/layouts/_project-grid.scss +++ b/assets/css/layouts/_project-grid.scss | |||
@@ -9,6 +9,11 @@ | |||
9 | display: grid; | 9 | display: grid; |
10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); |
11 | gap: 2rem; | 11 | gap: 2rem; |
12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | ||
13 | |||
14 | @include element('project') { | ||
15 | box-shadow: none; | ||
16 | } | ||
12 | 17 | ||
13 | @include media('<=sm') { | 18 | @include media('<=sm') { |
14 | grid-template-columns: 1fr; | 19 | grid-template-columns: 1fr; |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index f2dbbc4..1a074e4 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -11,23 +11,25 @@ $body$ | |||
11 | <h2 class="c-post-list__category-header"> | 11 | <h2 class="c-post-list__category-header"> |
12 | $it.name$ | 12 | $it.name$ |
13 | </h2> | 13 | </h2> |
14 | $for(it.pages)$ | 14 | <div class="c-post-list__category-content"> |
15 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 15 | $for(it.pages)$ |
16 | <div class="c-card__content c-post-list__post-title"> | 16 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
17 | $it.title$ | 17 | <div class="c-card__content c-post-list__post-title"> |
18 | </div> | 18 | $it.title$ |
19 | $if(it.category.show_date)$ | 19 | </div> |
20 | <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content"> | 20 | $if(it.category.show_date)$ |
21 | <span class="u-dn@sm-hi"> | 21 | <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content"> |
22 | $it.date.short$ | 22 | <span class="u-dn@sm-hi"> |
23 | </span> | 23 | $it.date.short$ |
24 | <span class="u-dn@sm-lo"> | 24 | </span> |
25 | $it.date.long$ | 25 | <span class="u-dn@sm-lo"> |
26 | </span> | 26 | $it.date.long$ |
27 | </time> | 27 | </span> |
28 | $endif$ | 28 | </time> |
29 | </a> | 29 | $endif$ |
30 | $endfor$ | 30 | </a> |
31 | $endfor$ | ||
32 | </div> | ||
31 | $endfor$ | 33 | $endfor$ |
32 | </div> | 34 | </div> |
33 | </div> | 35 | </div> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 814f338..204c31b 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -66,7 +66,7 @@ $body$ | |||
66 | 66 | ||
67 | <div class="l-container l-container--pad-x l-container--pad-y l-project-grid"> | 67 | <div class="l-container l-container--pad-x l-container--pad-y l-project-grid"> |
68 | $for(pages.by_id.projects.pages.all)$ | 68 | $for(pages.by_id.projects.pages.all)$ |
69 | <a class="c-project" href="$it.url.rel$"> | 69 | <a class="l-project-grid__project c-project" href="$it.url.rel$"> |
70 | $if(it.preview)$ | 70 | $if(it.preview)$ |
71 | <img class="c-project__picture" src="$it.preview.rel$" /> | 71 | <img class="c-project__picture" src="$it.preview.rel$" /> |
72 | $endif$ | 72 | $endif$ |