Design adjustments

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;
             --fg:     $gray6, // Text
             --fg-lo:  $gray7, // Strong text
 
-            --obj-shadow:        transparent,
-            --obj-shadow-filter: transparent,
+            --obj-shadow: transparent,
 
             --accent: (
                 --h:     354,
@@ -105,8 +104,7 @@ $content--width:  42rem;
             --fg:     $gray6, // Text
             --fg-lo:  $gray7, // Strong text
 
-            --obj-shadow:        rgba(#000, .05),
-            --obj-shadow-filter: rgba(#000, .04),
+            --obj-shadow: rgba(#000, .05),
 
             --accent: (
                 --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 @@
         position:    relative;
         min-height:  prop(--dims --outer, $global: true);
         margin-top:  calc(2 * #{prop(--container --dims --pad-y, $global: true)});
+        overflow:    hidden;
         color:       prop(--colors --fg);
         font-family: $font-fam--mono;
         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 @@
     @include component(namespace()) {
         @include element('category-header') {
             color: prop(--colors --cat --fg);
+        }
 
-            @include next-element('post') {
-                margin-top: $line-height * .5rem;
-            }
+        @include element('category-content') {
+            margin-top: $line-height * .5rem;
+            filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
         }
 
         @include element('post') {
-            color: prop(--colors --post --idle-fg);
+            box-shadow: none;
+            color:      prop(--colors --post --idle-fg);
 
             &:visited {
                 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 @@
         display:               grid;
         grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
         gap:                   .6rem;
-        filter:                drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow-filter, $global: true)});
+        filter:                drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
         @include element('card') {
             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 @@
         display:               grid;
         grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
         gap:                   2rem;
+        filter:                drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+
+        @include element('project') {
+            box-shadow: none;
+        }
 
         @include media('<=sm') {
             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$
                 <h2 class="c-post-list__category-header">
                     $it.name$
                 </h2>
-                $for(it.pages)$
-                    <a href="$it.url.rel$" class="c-post-list__post c-card">
-                        <div class="c-card__content c-post-list__post-title">
-                            $it.title$
-                        </div>
-                        $if(it.category.show_date)$
-                            <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content">
-                                <span class="u-dn@sm-hi">
-                                    $it.date.short$
-                                </span>
-                                <span class="u-dn@sm-lo">
-                                    $it.date.long$
-                                </span>
-                            </time>
-                        $endif$
-                    </a>
-                $endfor$
+                <div class="c-post-list__category-content">
+                    $for(it.pages)$
+                        <a href="$it.url.rel$" class="c-post-list__post c-card">
+                            <div class="c-card__content c-post-list__post-title">
+                                $it.title$
+                            </div>
+                            $if(it.category.show_date)$
+                                <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content">
+                                    <span class="u-dn@sm-hi">
+                                        $it.date.short$
+                                    </span>
+                                    <span class="u-dn@sm-lo">
+                                        $it.date.long$
+                                    </span>
+                                </time>
+                            $endif$
+                        </a>
+                    $endfor$
+                </div>
             $endfor$
         </div>
     </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$
 
     <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
         $for(pages.by_id.projects.pages.all)$
-            <a class="c-project" href="$it.url.rel$">
+            <a class="l-project-grid__project c-project" href="$it.url.rel$">
                 $if(it.preview)$
                     <img class="c-project__picture" src="$it.preview.rel$" />
                 $endif$