summaryrefslogtreecommitdiffstats
path: root/assets/css/components
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/components
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/components')
-rw-r--r--assets/css/components/_card.scss43
1 files changed, 38 insertions, 5 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