diff options
-rw-r--r-- | assets/css/_basics.scss | 4 | ||||
-rw-r--r-- | assets/css/components/_card-list.scss (renamed from assets/css/components/_post-list.scss) | 30 | ||||
-rw-r--r-- | assets/css/style.scss | 2 | ||||
-rw-r--r-- | content/9thPK7O3xn/dreams/index.md | 11 | ||||
-rw-r--r-- | content/9thPK7O3xn/misc/index.md | 9 | ||||
-rw-r--r-- | content/9thPK7O3xn/pages/index.md | 9 | ||||
-rw-r--r-- | content/index.md | 1 | ||||
-rw-r--r-- | content/projects/emojis/index.md | 6 | ||||
-rw-r--r-- | content/projects/index.md | 5 | ||||
-rw-r--r-- | content/symbols.svg | 43 | ||||
-rw-r--r-- | metadata/metadata.yaml | 10 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 28 | ||||
-rw-r--r-- | templates/layouts/index.html | 43 | ||||
-rw-r--r-- | templates/layouts/list.html | 26 |
14 files changed, 168 insertions, 59 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 6da5e88..09b9585 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -36,7 +36,9 @@ body { | |||
36 | } | 36 | } |
37 | 37 | ||
38 | main { | 38 | main { |
39 | font-size: 1 / 16 * 19em; | 39 | @include iro-responsive-env(('sm', 'md')) { |
40 | font-size: iro-responsive-set((1rem, 1 / 16 * 19rem)); | ||
41 | } | ||
40 | } | 42 | } |
41 | 43 | ||
42 | pre, | 44 | pre, |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_card-list.scss index 9b124a6..2a2ae69 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_card-list.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | @include namespace('post-list') { | 1 | @include namespace('card-list') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --cat: ( | 4 | --cat: ( |
@@ -34,28 +34,26 @@ | |||
34 | @include element('category-content') { | 34 | @include element('category-content') { |
35 | margin-top: $line-height * .5rem; | 35 | margin-top: $line-height * .5rem; |
36 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | 36 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
37 | |||
38 | @include modifier('grid') { | ||
39 | display: grid; | ||
40 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
41 | gap: 6px; | ||
42 | |||
43 | @include element('card') { | ||
44 | @include next-twin-element { | ||
45 | margin-top: 0; | ||
46 | } | ||
47 | } | ||
48 | } | ||
37 | } | 49 | } |
38 | 50 | ||
39 | @include element('post') { | 51 | @include element('card') { |
40 | box-shadow: none; | 52 | box-shadow: none; |
41 | 53 | ||
42 | @include next-twin-element { | 54 | @include next-twin-element { |
43 | margin-top: 2px; | 55 | margin-top: 2px; |
44 | } | 56 | } |
45 | } | 57 | } |
46 | |||
47 | @include modifier('grid') { | ||
48 | @include element('category-content') { | ||
49 | display: grid; | ||
50 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
51 | gap: $line-height * .5rem; | ||
52 | } | ||
53 | |||
54 | @include element('post') { | ||
55 | @include next-twin-element { | ||
56 | margin-top: 0; | ||
57 | } | ||
58 | } | ||
59 | } | ||
60 | } | 58 | } |
61 | } | 59 | } |
diff --git a/assets/css/style.scss b/assets/css/style.scss index 99d52c1..8068b87 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -16,7 +16,7 @@ | |||
16 | @import 'components/header'; | 16 | @import 'components/header'; |
17 | @import 'components/footer'; | 17 | @import 'components/footer'; |
18 | @import 'components/card'; | 18 | @import 'components/card'; |
19 | @import 'components/post-list'; | 19 | @import 'components/card-list'; |
20 | 20 | ||
21 | @import 'scopes/colored-links'; | 21 | @import 'scopes/colored-links'; |
22 | @import 'scopes/headlines'; | 22 | @import 'scopes/headlines'; |
diff --git a/content/9thPK7O3xn/dreams/index.md b/content/9thPK7O3xn/dreams/index.md index db7be1c..c230cef 100644 --- a/content/9thPK7O3xn/dreams/index.md +++ b/content/9thPK7O3xn/dreams/index.md | |||
@@ -1,7 +1,8 @@ | |||
1 | --- | 1 | --- |
2 | title: Dream Journal | 2 | title: Dream Journal |
3 | show_dates: true | 3 | position: 9 |
4 | position: 9 | 4 | layout: list |
5 | layout: list | 5 | show_dates: true |
6 | create_feed: true | 6 | show_read_indicators: true |
7 | create_feed: true | ||
7 | --- | 8 | --- |
diff --git a/content/9thPK7O3xn/misc/index.md b/content/9thPK7O3xn/misc/index.md index 0d79d44..840b8c9 100644 --- a/content/9thPK7O3xn/misc/index.md +++ b/content/9thPK7O3xn/misc/index.md | |||
@@ -1,6 +1,7 @@ | |||
1 | --- | 1 | --- |
2 | title: Other stuff | 2 | title: Other stuff |
3 | position: 10 | 3 | position: 10 |
4 | layout: list | 4 | layout: list |
5 | create_feed: true | 5 | show_read_indicators: true |
6 | create_feed: true | ||
6 | --- | 7 | --- |
diff --git a/content/9thPK7O3xn/pages/index.md b/content/9thPK7O3xn/pages/index.md index ca2e190..583b34b 100644 --- a/content/9thPK7O3xn/pages/index.md +++ b/content/9thPK7O3xn/pages/index.md | |||
@@ -1,6 +1,7 @@ | |||
1 | --- | 1 | --- |
2 | title: Pages | 2 | title: Pages |
3 | position: 0 | 3 | position: 0 |
4 | layout: list | 4 | layout: list |
5 | create_feed: true | 5 | show_read_indicators: true |
6 | create_feed: true | ||
6 | --- | 7 | --- |
diff --git a/content/index.md b/content/index.md index c9ce120..4ae64c2 100644 --- a/content/index.md +++ b/content/index.md | |||
@@ -5,4 +5,3 @@ title: Home | |||
5 | # I'm a **red fox** in disguise. {.u-mt0} | 5 | # I'm a **red fox** in disguise. {.u-mt0} |
6 | 6 | ||
7 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. | 7 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. |
8 | You can find me on the [Fediverse](https://mk.vulpes.one/@volpeon). | ||
diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md index cbffe1b..f650b2e 100644 --- a/content/projects/emojis/index.md +++ b/content/projects/emojis/index.md | |||
@@ -1,4 +1,6 @@ | |||
1 | --- | 1 | --- |
2 | title: Emojis | 2 | title: Emojis |
3 | icon: smile | 3 | icon: smile |
4 | layout: list | ||
5 | list_grid: true | ||
4 | --- | 6 | --- |
diff --git a/content/projects/index.md b/content/projects/index.md index 1a33149..8aa8f96 100644 --- a/content/projects/index.md +++ b/content/projects/index.md | |||
@@ -1,4 +1,5 @@ | |||
1 | --- | 1 | --- |
2 | title: Projects | 2 | title: Projects |
3 | layout: categorized_list | 3 | layout: categorized_list |
4 | list_grid: true | ||
4 | --- | 5 | --- |
diff --git a/content/symbols.svg b/content/symbols.svg index f633664..fecf78e 100644 --- a/content/symbols.svg +++ b/content/symbols.svg | |||
@@ -10,6 +10,49 @@ | |||
10 | <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" /> | 10 | <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" /> |
11 | </symbol> | 11 | </symbol> |
12 | 12 | ||
13 | <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
14 | <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" /> | ||
15 | </symbol> | ||
16 | |||
17 | <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
18 | <path | ||
19 | d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311" | ||
20 | fill="none" stroke="currentColor" /> | ||
21 | </symbol> | ||
22 | |||
23 | <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
24 | <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" /> | ||
25 | </symbol> | ||
26 | |||
27 | <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
28 | <path | ||
29 | d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z" | ||
30 | fill="none" stroke="currentColor" /> | ||
31 | <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none" | ||
32 | stroke="currentColor" /> | ||
33 | </symbol> | ||
34 | |||
35 | <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
36 | <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" /> | ||
37 | </symbol> | ||
38 | |||
39 | <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
40 | <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" /> | ||
41 | <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" /> | ||
42 | </symbol> | ||
43 | |||
44 | <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
45 | <path | ||
46 | d="m7.25 12.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm8-3c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75c0-0.9665 0.7835-1.75 1.75-1.75s1.75 0.7835 1.75 1.75zm-6-6.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm2 12.25 1.6219-4.1121m-8.331-0.13789-3.7909-5.25m6.4058 6.1626 4.6868-1.8235m-3.163-5.7868 3.5859 3.9307m-5.0863-3.5029-1.3496 6.043" | ||
47 | fill="none" stroke="currentColor" /> | ||
48 | </symbol> | ||
49 | |||
50 | <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
51 | <path | ||
52 | d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998" | ||
53 | fill="none" stroke="currentColor" /> | ||
54 | </symbol> | ||
55 | |||
13 | <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 56 | <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
14 | <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978" | 57 | <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978" |
15 | fill="none" stroke="currentColor" /> | 58 | fill="none" stroke="currentColor" /> |
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml index 16388d2..c8f2d72 100644 --- a/metadata/metadata.yaml +++ b/metadata/metadata.yaml | |||
@@ -9,7 +9,7 @@ menus: | |||
9 | main: | 9 | main: |
10 | - id: projects | 10 | - id: projects |
11 | label: Projects | 11 | label: Projects |
12 | url: /#projects | 12 | url: /projects/ |
13 | 13 | ||
14 | - id: 9thPK7O3xn | 14 | - id: 9thPK7O3xn |
15 | label: Personal | 15 | label: Personal |
@@ -31,7 +31,8 @@ profiles: | |||
31 | 31 | ||
32 | - platform: Fediverse | 32 | - platform: Fediverse |
33 | icon: graph | 33 | icon: graph |
34 | username: "@volpeon@fedi.vulpes.one" | 34 | username: "@volpeon@mk.vulpes.one" |
35 | url: "https://mk.vulpes.one/@volpeon" | ||
35 | featured: true | 36 | featured: true |
36 | 37 | ||
37 | - platform: GitHub | 38 | - platform: GitHub |
@@ -43,11 +44,6 @@ profiles: | |||
43 | icon: hash | 44 | icon: hash |
44 | username: volpeon | 45 | username: volpeon |
45 | 46 | ||
46 | - platform: PeerTube | ||
47 | icon: video | ||
48 | username: "@volpeon@pt.vulpes.one" | ||
49 | featured: true | ||
50 | |||
51 | - platform: Steam | 47 | - platform: Steam |
52 | username: volpeon | 48 | username: volpeon |
53 | url: https://steamcommunity.com/id/volpeon/ | 49 | url: https://steamcommunity.com/id/volpeon/ |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 8f8b1ae..fa0f000 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -5,17 +5,24 @@ | |||
5 | $body$ | 5 | $body$ |
6 | </div> | 6 | </div> |
7 | 7 | ||
8 | <div class="c-post-list"> | 8 | <div class="c-card-list"> |
9 | $for(pages.asc_title)$ | 9 | $for(pages.asc_title)$ |
10 | $if(it.pages)$ | 10 | $if(it.pages)$ |
11 | <h2 class="c-post-list__category-header"> | 11 | <h2 class="c-card-list__category-header"> |
12 | <a href="$it.url.rel$">$it.title$</a> | 12 | <a href="$it.url.rel$">$it.title$</a> |
13 | </h2> | 13 | </h2> |
14 | <div class="c-post-list__category-content"> | 14 | <div class="c-card-list__category-content$if(pages.asc_title.list_grid)$ c-card-list__category-content--grid$endif$"> |
15 | $if(pages.asc_title.show_dates)$ | 15 | $if(pages.asc_title.show_dates)$ |
16 | $for(it.pages.desc_date)$ | 16 | $for(it.pages.desc_date)$ |
17 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 17 | <a href="$it.url.rel$" class="c-card-list__card c-card"> |
18 | <div class="c-card__block c-card__block--indicator"></div> | 18 | $if(pages.asc_title.show_read_indicators)$ |
19 | <div class="c-card__block c-card__block--indicator"></div> | ||
20 | $endif$ | ||
21 | $if(pages.asc_title.icon)$ | ||
22 | <svg class="c-card__block o-icon"> | ||
23 | <use href="/symbols.svg#icon-$pages.asc_title.icon$"></use> | ||
24 | </svg> | ||
25 | $endif$ | ||
19 | <div class="c-card__block c-card__block--main"> | 26 | <div class="c-card__block c-card__block--main"> |
20 | $it.title$ | 27 | $it.title$ |
21 | </div> | 28 | </div> |
@@ -31,8 +38,15 @@ $body$ | |||
31 | $endfor$ | 38 | $endfor$ |
32 | $else$ | 39 | $else$ |
33 | $for(it.pages.asc_title)$ | 40 | $for(it.pages.asc_title)$ |
34 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 41 | <a href="$it.url.rel$" class="c-card-list__card c-card"> |
35 | <div class="c-card__block c-card__block--indicator"></div> | 42 | $if(pages.asc_title.show_read_indicators)$ |
43 | <div class="c-card__block c-card__block--indicator"></div> | ||
44 | $endif$ | ||
45 | $if(pages.asc_title.icon)$ | ||
46 | <svg class="c-card__block o-icon"> | ||
47 | <use href="/symbols.svg#icon-$pages.asc_title.icon$"></use> | ||
48 | </svg> | ||
49 | $endif$ | ||
36 | <div class="c-card__block c-card__block--main"> | 50 | <div class="c-card__block c-card__block--main"> |
37 | $it.title$ | 51 | $it.title$ |
38 | </div> | 52 | </div> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index a7b68c3..838f570 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -3,11 +3,48 @@ | |||
3 | $body$ | 3 | $body$ |
4 | </div> | 4 | </div> |
5 | 5 | ||
6 | <div id="projects" class="c-post-list c-post-list--grid"> | 6 | <div class="c-card-list"> |
7 | <div class="c-post-list__category-content"> | 7 | <h2 class="c-card-list__category-header"> |
8 | Profiles | ||
9 | </h2> | ||
10 | <div class="c-card-list__category-content c-card-list__category-content--grid"> | ||
11 | $for(profiles)$ | ||
12 | $if(it.featured)$ | ||
13 | $if(it.url)$ | ||
14 | <a class="c-card-list__card c-card" href="$it.url$"> | ||
15 | $else$ | ||
16 | <div class="c-card-list__card c-card"> | ||
17 | $endif$ | ||
18 | $if(it.icon)$ | ||
19 | <svg class="c-card__block o-icon"> | ||
20 | <use href="/symbols.svg#icon-$it.icon$"></use> | ||
21 | </svg> | ||
22 | $endif$ | ||
23 | <div class="c-card__block c-card__block--main"> | ||
24 | <strong class="u-db">$it.platform$</strong> | ||
25 | <small class="u-db">$it.username$</small> | ||
26 | </div> | ||
27 | $if(it.url)$ | ||
28 | <svg class="c-card__block o-icon"> | ||
29 | <use href="/symbols.svg#icon-arrow-up-right"></use> | ||
30 | </svg> | ||
31 | $endif$ | ||
32 | $if(it.url)$ | ||
33 | </a> | ||
34 | $else$ | ||
35 | </div> | ||
36 | $endif$ | ||
37 | $endif$ | ||
38 | $endfor$ | ||
39 | </div> | ||
40 | |||
41 | <h2 class="c-card-list__category-header"> | ||
42 | <a href="$pages.by_id.projects.url.rel$">$pages.by_id.projects.title$</a> | ||
43 | </h2> | ||
44 | <div class="c-card-list__category-content c-card-list__category-content--grid"> | ||
8 | $for(pages.by_id.projects.pages.all)$ | 45 | $for(pages.by_id.projects.pages.all)$ |
9 | $for(it.pages.all)$ | 46 | $for(it.pages.all)$ |
10 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 47 | <a href="$it.url.rel$" class="c-card-list__card c-card"> |
11 | $if(pages.by_id.projects.pages.all.icon)$ | 48 | $if(pages.by_id.projects.pages.all.icon)$ |
12 | <svg class="c-card__block o-icon"> | 49 | <svg class="c-card__block o-icon"> |
13 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> | 50 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> |
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 4831228..c0045c0 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html | |||
@@ -5,12 +5,19 @@ | |||
5 | $body$ | 5 | $body$ |
6 | </div> | 6 | </div> |
7 | 7 | ||
8 | <div class="c-post-list"> | 8 | <div class="c-card-list"> |
9 | <div class="c-post-list__category-content"> | 9 | <div class="c-card-list__category-content$if(list_grid)$ c-card-list__category-content--grid$endif$"> |
10 | $if(show_dates)$ | 10 | $if(show_dates)$ |
11 | $for(pages.desc_date)$ | 11 | $for(pages.desc_date)$ |
12 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 12 | <a href="$it.url.rel$" class="c-card-list__card c-card"> |
13 | <div class="c-card__block c-card__block--indicator"></div> | 13 | $if(show_read_indicators)$ |
14 | <div class="c-card__block c-card__block--indicator"></div> | ||
15 | $endif$ | ||
16 | $if(icon)$ | ||
17 | <svg class="c-card__block o-icon"> | ||
18 | <use href="/symbols.svg#icon-$icon$"></use> | ||
19 | </svg> | ||
20 | $endif$ | ||
14 | <div class="c-card__block c-card__block--main"> | 21 | <div class="c-card__block c-card__block--main"> |
15 | $it.title$ | 22 | $it.title$ |
16 | </div> | 23 | </div> |
@@ -26,8 +33,15 @@ $body$ | |||
26 | $endfor$ | 33 | $endfor$ |
27 | $else$ | 34 | $else$ |
28 | $for(pages.asc_title)$ | 35 | $for(pages.asc_title)$ |
29 | <a href="$it.url.rel$" class="c-post-list__post c-card"> | 36 | <a href="$it.url.rel$" class="c-card-list__card c-card"> |
30 | <div class="c-card__block c-card__block--indicator"></div> | 37 | $if(show_read_indicators)$ |
38 | <div class="c-card__block c-card__block--indicator"></div> | ||
39 | $endif$ | ||
40 | $if(icon)$ | ||
41 | <svg class="c-card__block o-icon"> | ||
42 | <use href="/symbols.svg#icon-$icon$"></use> | ||
43 | </svg> | ||
44 | $endif$ | ||
31 | <div class="c-card__block c-card__block--main"> | 45 | <div class="c-card__block c-card__block--main"> |
32 | $it.title$ | 46 | $it.title$ |
33 | </div> | 47 | </div> |