summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-16 18:29:18 +0100
committerVolpeon <git@volpeon.ink>2021-12-16 18:29:18 +0100
commit5f4cb1fd8b84e69092ac56a643b1618006f0442c (patch)
tree1d2388ad69091163da498334e2de5c94c4e74dc7 /assets/css
parentFix it for real (diff)
downloadvolpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.gz
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.bz2
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.zip
Add thumbnails to cards
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/components/_card.scss43
-rw-r--r--assets/css/layouts/_card-list.scss28
2 files changed, 52 insertions, 19 deletions
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 @@
30 ), 'light'); 30 ), 'light');
31 31
32 @include component(namespace()) { 32 @include component(namespace()) {
33 display: flex; 33 display: block;
34 position: relative; 34 position: relative;
35 align-items: center;
36 padding-right: calc(.5 * #{prop(--dims --pad-x)});
37 padding-left: calc(.5 * #{prop(--dims --pad-x)});
38 transform: translateY(0); 35 transform: translateY(0);
39 transition: transform .2s, background-color .2s, color .2s; 36 transition: transform .2s, background-color .2s, color .2s;
40 background-color: prop(--colors --bg); 37 background-color: prop(--colors --bg);
@@ -81,6 +78,10 @@
81 color: prop(--colors --hover --fg); 78 color: prop(--colors --hover --fg);
82 } 79 }
83 } 80 }
81
82 /*@include element('row') {
83 border-top-color: transparent;
84 }*/
84 } 85 }
85 } 86 }
86 87
@@ -92,9 +93,41 @@
92 } 93 }
93 } 94 }
94 95
96 @include element('row') {
97 display: flex;
98 align-items: center;
99 padding: prop(--dims --pad-y) prop(--dims --pad-x);
100 gap: prop(--dims --pad-x);
101 //transition: border-top-color .2s;
102
103 @include modifier('flush') {
104 padding: 0;
105 }
106
107 /*@include next-twin-element {
108 border-top: 1px solid prop(--colors --border);
109 }*/
110 }
111
112 @include element('thumbnail') {
113 position: relative;
114 width: 100%;
115 height: 2em;
116 padding-top: 40%;
117 }
118
119 @include element('thumbnail-img') {
120 display: block;
121 position: absolute;
122 top: 0;
123 left: 0;
124 width: 100%;
125 height: 100%;
126 object-fit: cover;
127 }
128
95 @include element('block') { 129 @include element('block') {
96 flex: 0 0 auto; 130 flex: 0 0 auto;
97 padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
98 overflow: hidden; 131 overflow: hidden;
99 text-overflow: ellipsis; 132 text-overflow: ellipsis;
100 133
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 @@
10 font-size: 1rem; 10 font-size: 1rem;
11 11
12 @include element('cards') { 12 @include element('cards') {
13 margin-top: $line-height * .625rem; 13 display: flex;
14 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); 14 flex-direction: column;
15 gap: 2px;
16 margin-top: $line-height * .625rem;
17 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
15 18
16 @include modifier('grid') { 19 @include modifier('grid', 'gallery') {
17 display: grid; 20 display: grid;
18 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); 21 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
19 gap: 6px; 22 }
20 23
21 @include element('card') { 24 @include modifier('grid') {
22 @include next-twin-element { 25 gap: 6px;
23 margin-top: 0; 26 }
24 } 27
25 } 28 @include modifier('gallery') {
29 gap: 30px;
26 } 30 }
27 31
28 @media print { 32 @media print {
@@ -32,10 +36,6 @@
32 36
33 @include element('card') { 37 @include element('card') {
34 box-shadow: none; 38 box-shadow: none;
35
36 @include next-twin-element {
37 margin-top: 2px;
38 }
39 } 39 }
40 } 40 }
41} 41}