summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-20 07:40:23 +0100
committerVolpeon <git@volpeon.ink>2021-12-20 07:40:23 +0100
commit2207e6c48f4d3ea2e1209f3be535538be609aa71 (patch)
tree7d0e8c9bcfbca667f800b55f9e4336683b5d2fdd
parentNo arrow on projects (diff)
downloadvolpeon.ink-2207e6c48f4d3ea2e1209f3be535538be609aa71.tar.gz
volpeon.ink-2207e6c48f4d3ea2e1209f3be535538be609aa71.tar.bz2
volpeon.ink-2207e6c48f4d3ea2e1209f3be535538be609aa71.zip
More compact gallery cards
Diffstat
-rw-r--r--assets/css/components/_card.scss40
-rwxr-xr-xcontent/projects/doodles/2021-lazy-firefox/firefox_lazy.pngbin37763 -> 88463 bytes
-rwxr-xr-xcontent/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.pngbin0 -> 37763 bytes
-rw-r--r--content/projects/doodles/2021-lazy-firefox/index.md2
-rw-r--r--templates/partials/gallery_card.html76
5 files changed, 57 insertions, 61 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 5d36e7e..7fa54e5 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -73,15 +73,17 @@
73 color: prop(--colors --hover --fg); 73 color: prop(--colors --hover --fg);
74 } 74 }
75 75
76 @include element('row') {
77 @include modifier('hidden') {
78 opacity: 1;
79 }
80 }
81
76 @include element('block') { 82 @include element('block') {
77 @include modifier('indicator') { 83 @include modifier('indicator') {
78 color: prop(--colors --hover --fg); 84 color: prop(--colors --hover --fg);
79 } 85 }
80 } 86 }
81
82 /*@include element('row') {
83 border-top-color: transparent;
84 }*/
85 } 87 }
86 } 88 }
87 89
@@ -111,22 +113,28 @@
111 align-items: center; 113 align-items: center;
112 padding: prop(--dims --pad-y) prop(--dims --pad-x); 114 padding: prop(--dims --pad-y) prop(--dims --pad-x);
113 gap: prop(--dims --pad-x); 115 gap: prop(--dims --pad-x);
114 //transition: border-top-color .2s;
115 116
116 @include modifier('flush') { 117 @include modifier('flush') {
117 padding: 0; 118 padding: 0;
118 } 119 }
119 120
120 /*@include next-twin-element { 121 @include modifier('hidden') {
121 border-top: 1px solid prop(--colors --border); 122 position: absolute;
122 }*/ 123 z-index: 10;
124 right: 0;
125 bottom: 0;
126 left: 0;
127 transition: opacity .2s;
128 opacity: 0;
129 background-color: prop(--colors --hover --bg);
130 }
123 } 131 }
124 132
125 @include element('thumbnail') { 133 @include element('thumbnail') {
126 position: relative; 134 position: relative;
127 width: 100%; 135 width: 100%;
128 height: 2em; 136 height: 2em;
129 padding-top: 40%; 137 padding-top: 46%;
130 } 138 }
131 139
132 @include element('thumbnail-img') { 140 @include element('thumbnail-img') {
@@ -149,20 +157,6 @@
149 width: 100%; 157 width: 100%;
150 } 158 }
151 159
152 /*@include modifier('separator') {
153 align-self: stretch;
154 padding-top: 0;
155 padding-bottom: 0;
156
157 &::before {
158 content: '';
159 display: block;
160 width: 1px;
161 height: 100%;
162 background-color: prop(--colors --border);
163 }
164 }*/
165
166 @include modifier('indicator') { 160 @include modifier('indicator') {
167 transition: color .2s; 161 transition: color .2s;
168 color: prop(--colors --unread); 162 color: prop(--colors --unread);
diff --git a/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png b/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png
index ab3704a..a10a0b7 100755
--- a/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png
+++ b/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png
Binary files differ
diff --git a/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png b/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png
new file mode 100755
index 0000000..ab3704a
--- /dev/null
+++ b/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png
Binary files differ
diff --git a/content/projects/doodles/2021-lazy-firefox/index.md b/content/projects/doodles/2021-lazy-firefox/index.md
index 35ad12c..0804f69 100644
--- a/content/projects/doodles/2021-lazy-firefox/index.md
+++ b/content/projects/doodles/2021-lazy-firefox/index.md
@@ -5,3 +5,5 @@ thumbnail: firefox_lazy.png
5--- 5---
6 6
7![](firefox_lazy.png) 7![](firefox_lazy.png)
8
9![](firefox_lazy_transparent.png)
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index f724e3b..485af00 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,47 +1,47 @@
1$if(it.url)$ 1$if(it.url)$
2 <a href="$it.url.rel$" class="l-card-list__card c-card"> 2 $if(it.thumbnail)$
3 $if(it.thumbnail)$ 3 <a href="$it.url.rel$" class="l-card-list__card c-card">
4 <div class="c-card__row c-card__row--flush"> 4 <div class="c-card__row c-card__row--flush">
5 <div class="c-card__thumbnail"> 5 <div class="c-card__thumbnail">
6 <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" /> 6 <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
7 </div> 7 </div>
8 </div> 8 </div>
9 $endif$ 9 <div class="c-card__row c-card__row--hidden">
10 <div class="c-card__row"> 10 $if(it.indicator)$
11 $if(it.indicator)$ 11 <div class="c-card__block c-card__block--indicator"></div>
12 <div class="c-card__block c-card__block--indicator"></div> 12 $endif$
13 $endif$ 13 $if(it.icon)$
14 $if(it.icon)$ 14 <svg class="c-card__block o-icon" width="1em" height="1em">
15 <svg class="c-card__block o-icon" width="1em" height="1em"> 15 <use href="/symbols.svg#icon-$it.icon$"></use>
16 <use href="/symbols.svg#icon-$it.icon$"></use> 16 </svg>
17 </svg> 17 $endif$
18 $endif$ 18 <div class="c-card__block c-card__block--main">
19 <div class="c-card__block c-card__block--main"> 19 $if(it.subtitle)$
20 $if(it.subtitle)$ 20 <strong class="u-db u-elp">$it.title$</strong>
21 <strong class="u-db u-elp">$it.title$</strong> 21 <small class="u-db u-elp">$it.subtitle$</small>
22 <small class="u-db u-elp">$it.subtitle$</small> 22 $elseif(it.category)$
23 $elseif(it.category)$ 23 <small class="u-db u-elp">$it.category$</small>
24 <small class="u-db u-elp">$it.category$</small> 24 <strong class="u-db u-elp">$it.title$</strong>
25 <strong class="u-db u-elp">$it.title$</strong> 25 $elseif(it.date)$
26 $elseif(it.date)$ 26 <time datetime="$it.date.yyyy_mm_dd$">
27 <time datetime="$it.date.yyyy_mm_dd$"> 27 <small class="u-dn@sm-hi">
28 <small class="u-dn@sm-hi"> 28 $it.date.short$
29 $it.date.short$ 29 </small>
30 </small> 30 <small class="u-dn@sm-lo">
31 <small class="u-dn@sm-lo"> 31 $it.date.long$
32 $it.date.long$ 32 </small>
33 </small> 33 </time>
34 </time> 34 <strong class="u-db u-elp">$it.title$</strong>
35 <strong class="u-db u-elp">$it.title$</strong> 35 $else$
36 $else$ 36 $it.title$
37 $it.title$ 37 $endif$
38 </div>
39 $if(it.post_icon)$
40 <svg class="c-card__block o-icon" width="1em" height="1em">
41 <use href="/symbols.svg#icon-$it.post_icon$"></use>
42 </svg>
38 $endif$ 43 $endif$
39 </div> 44 </div>
40 $if(it.post_icon)$ 45 </a>
41 <svg class="c-card__block o-icon" width="1em" height="1em"> 46 $endif$
42 <use href="/symbols.svg#icon-$it.post_icon$"></use>
43 </svg>
44 $endif$
45 </div>
46 </a>
47$endif$ 47$endif$
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 18:27:42 +0000