From 5f4cb1fd8b84e69092ac56a643b1618006f0442c Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 16 Dec 2021 18:29:18 +0100
Subject: Add thumbnails to cards
---
assets/css/components/_card.scss | 43 +++++++++++++++++++++++++++++++++-----
assets/css/layouts/_card-list.scss | 28 ++++++++++++-------------
2 files changed, 52 insertions(+), 19 deletions(-)
(limited to 'assets')
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index b023447..5c2efa4 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,11 +30,8 @@
), 'light');
@include component(namespace()) {
- display: flex;
+ display: block;
position: relative;
- align-items: center;
- padding-right: calc(.5 * #{prop(--dims --pad-x)});
- padding-left: calc(.5 * #{prop(--dims --pad-x)});
transform: translateY(0);
transition: transform .2s, background-color .2s, color .2s;
background-color: prop(--colors --bg);
@@ -81,6 +78,10 @@
color: prop(--colors --hover --fg);
}
}
+
+ /*@include element('row') {
+ border-top-color: transparent;
+ }*/
}
}
@@ -92,9 +93,41 @@
}
}
+ @include element('row') {
+ display: flex;
+ align-items: center;
+ padding: prop(--dims --pad-y) prop(--dims --pad-x);
+ gap: prop(--dims --pad-x);
+ //transition: border-top-color .2s;
+
+ @include modifier('flush') {
+ padding: 0;
+ }
+
+ /*@include next-twin-element {
+ border-top: 1px solid prop(--colors --border);
+ }*/
+ }
+
+ @include element('thumbnail') {
+ position: relative;
+ width: 100%;
+ height: 2em;
+ padding-top: 40%;
+ }
+
+ @include element('thumbnail-img') {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
@include element('block') {
flex: 0 0 auto;
- padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
overflow: hidden;
text-overflow: ellipsis;
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index e6d1297..3bbcc44 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -10,19 +10,23 @@
font-size: 1rem;
@include element('cards') {
- margin-top: $line-height * .625rem;
- filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ margin-top: $line-height * .625rem;
+ filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
- @include modifier('grid') {
+ @include modifier('grid', 'gallery') {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
- gap: 6px;
-
- @include element('card') {
- @include next-twin-element {
- margin-top: 0;
- }
- }
+ }
+
+ @include modifier('grid') {
+ gap: 6px;
+ }
+
+ @include modifier('gallery') {
+ gap: 30px;
}
@media print {
@@ -32,10 +36,6 @@
@include element('card') {
box-shadow: none;
-
- @include next-twin-element {
- margin-top: 2px;
- }
}
}
}
--
cgit v1.2.3-70-g09d2