Update

author: Volpeon <git@volpeon.ink> 2021-04-12 20:39:04 +0200
committer: Volpeon <git@volpeon.ink> 2021-04-12 20:39:04 +0200
commit: 6b2c6c4260b2af2adad37dc1f8c50a904e04f13d (patch)
tree: 46db61ecffa196c31f19b7f437b554ad1c2a193c
parent: WIP: Redesign (diff)
download: volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.gz
volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.bz2
volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.zip
18 files changed, 315 insertions, 225 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3e67b76..b739d2a 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,10 +1,10 @@
 ::selection {
-    background-color: var(--select--bg);
+    background-color: prop(--colors --select --bg);
-    color:            var(--select--fg);
+    color:            prop(--colors --select --fg);
 }
 img::selection {
-    background-color: var(--select--img-bg);
+    background-color: prop(--colors --select --img-bg);
 }
 html,
@@ -26,6 +26,7 @@ html {
    font-family:      $font-fam--text;
    font-size:        1em / 16px * $font-size;
    line-height:      $line-height;
+    scroll-behavior:  smooth;
 }
 body {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1063dc8..b19ebee 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -30,7 +30,8 @@ $gray6: hsl(220, 0%, 100%);
 @include store((
    --dims: (
-        --outer: 4.5rem,
+        --outer:         4rem,
+        --outer-spacing: 2rem,
    ),
    --colors: (
        --bg-hi: $gray0, // Darker background
@@ -44,11 +45,17 @@ $gray6: hsl(220, 0%, 100%);
        --fg-lo: $gray6, // Strong text
        --accent: (
-            --h: 354,
+            --h:     354,
-            --s: 84%,
+            --s:     84%,
-            --l: 55%,
+            --l:     55%,
            --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
-        )
+        ),
+        --select: (
+            --bg:     hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
+            --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
+            --fg:     var(--colors--bg-hi),
+        ),
    )
 ));
@@ -69,30 +76,26 @@ $gray6: hsl(220, 0%, 100%);
 :root {
    --heading--fg: var(--colors--fg-lo);
-    --select--bg:     hsla(270, 2%, 100%, .996);
-    --select--img-bg: hsla(270, 2%, 100%, .5);
-    --select--fg:     var(--colors--bg-hi);
    --code--fg: var(--colors--fg-hi);
    --code-block--fg: var(--colors--fg-hi);
-    --link--idle--fg: var(--colors--fg-lo);
+    --link--idle--fg:  var(--colors--fg-lo);
    --link--hover--bg: var(--link--idle--fg);
    --link--hover--fg: #000;
    --hero--back-fg: var(--colors--bg-hi);
-    --nav--bg: var(--colors--bg);
+    --nav--bg:               var(--colors--bg);
-    --nav--logo--fg: var(--colors--fg-hi);
+    --nav--logo--fg:         var(--colors--fg-hi);
-    --nav--item--idle--fg: var(--colors--fg);
+    --nav--item--idle--fg:   var(--colors--fg);
-    --nav--item--hover--fg: var(--colors--fg-lo);
+    --nav--item--hover--fg:  var(--colors--fg-lo);
    --nav--item--active--fg: var(--colors--fg-lo);
    --footer--bg: var(--colors--bg);
-    --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
+    --page--link--idle--fg:    var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
    --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
-    --page--link--hover--bg: var(--page--link--idle--fg);
+    --page--link--hover--bg:   var(--page--link--idle--fg);
-    --page--link--hover--fg: #000;
+    --page--link--hover--fg:   #000;
 }
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6260518..bb8b4d2 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -12,6 +12,13 @@
        )
    ));
+    @include store((
+        --dims: (
+            --pad-x: .9em,
+            --pad-y: .6em
+        )
+    ), 'md');
    @include component(namespace()) {
        display:          flex;
        position:         relative;
@@ -29,9 +36,7 @@
            @include element('content') {
                @include modifier('flip') {
                    visibility: visible;
-                    transition:
+                    transition: visibility 0s, opacity .2s;
-                        visibility 0s,
-                        opacity    .2s;
                    opacity:    1;
                }
            }
@@ -48,9 +53,7 @@
                top:              0;
                left:             0;
                height:           100%;
-                transition:
+                transition:       visibility 0s linear .2s, opacity .2s;
-                    visibility 0s linear .2s,
-                    opacity    .2s;
                opacity:          0;
                background-color: prop(--colors --flip --bg);
            }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index db30fcd..c20bc22 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,17 +1,25 @@
 @include namespace('footer') {
    @include store((
-        --dims: (
-            --pad-y: .8em
-        ),
        --colors: (
-            --fg: prop(--colors --obj, $global: true)
+            --fg:     prop(--colors --obj, $global: true),
+            --border: prop(--colors --bg-lo, $global: true),
        )
    ));
    @include component(namespace()) {
-        padding-top:    prop(--dims --pad-y);
+        display:         flex;
-        padding-bottom: prop(--dims --pad-y);
+        align-items:     center;
-        color:          prop(--colors --fg);
+        justify-content: space-between;
-        text-align:     right;
+        height:          prop(--dims --outer, $global: true);
+        @include element('content') {
+            width:        100%;
+            height:       100%;
+            margin-right: prop(--dims --outer-spacing, $global: true);
+            margin-left:  prop(--dims --outer-spacing, $global: true);
+            border-top:   1px solid prop(--colors --border);
+            color:        prop(--colors --fg);
+            line-height:  prop(--dims --outer, $global: true);
+        }
    }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 412ca8a..8f07c37 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,17 +7,19 @@
    ));
    @include component(namespace()) {
-        font-size: 1 / 16 * 17em;
        @include element('title') {
            max-width:      7em;
            margin-top:     0;
-            transform:      translateX(-.04em);
+            transform:      translateX(-.05em);
            font-family:    $font-fam--large;
            font-weight:    350;
            text-transform: none;
        }
+        @include element('text') {
+            font-size: 1 / 16 * 17em;
+        }
        @include element('title-inner') {
            background-image: linear-gradient(
                to top,
@@ -33,9 +35,15 @@
            font-weight: 550;
        }
+        @include media('<=md') {
+            @include element('title') {
+                max-width: none;
+            }
+        }
        @include iro-responsive-env(('md', 'lg')) {
            @include element('title') {
-                font-size: iro-responsive-set((2.6rem, 3rem));
+                font-size: iro-responsive-set((2.6rem, 3.4rem));
            }
        }
    }
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
new file mode 100644
index 0000000..13587c8
--- /dev/null
+++ b/assets/css/components/_logo.scss
@@ -0,0 +1,19 @@
+@include namespace('logo') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --fg-lo, $global: true),
+            --bg: prop(--colors --bg-hi, $global: true),
+            --hover: (
+                --fg: prop(--colors --bg-hi, $global: true),
+                --bg: prop(--colors --accent --color, $global: true),
+            )
+        )
+    ));
+    @include component(namespace()) {
+        position: fixed;
+        z-index:  10000;
+        top:      0;
+        left:     0;
+    }
+}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
deleted file mode 100644
index d0a255e..0000000
--- a/assets/css/components/_nav.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@include namespace('nav') {
-    @include store((
-        --dims: (
-            --font-size: 15px,
-            --pad-x:     2.5rem,
-            --item: (
-                --pad-x: 1rem,
-            ),
-        ),
-        --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
-            --logo: (
-                --idle: (
-                    --fg: prop(--colors --accent --color, $global: true),
-                ),
-                --hover: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                )
-            ),
-            --item: (
-                --idle: (
-                    --fg: prop(--colors --fg, $global: true),
-                ),
-                --hover: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                ),
-                --active: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                )
-            )
-        )
-    ));
-    @include store((
-        --dims: (
-            --pad-x: prop(--container --dims --pad-x, $global: true),
-        )
-    ), 'md');
-    @include store((
-        --dims: (
-            --item: (
-                --pad-x: .75em,
-            ),
-        )
-    ), 'sm');
-    @include component(namespace()) {
-        display:          flex;
-        position:         fixed;
-        z-index:          10000;
-        top:              0;
-        left:             0;
-        height:           prop(--dims --outer, $global: true);
-        padding:          0 prop(--dims --pad-x);
-        background-color: prop(--colors --bg);
-        font-size:        prop(--dims --font-size);
-        @include element('logo', 'item') {
-            display:     flex;
-            align-items: center;
-            height:      100%;
-        }
-        @include element('logo') {
-            color:           prop(--colors --logo --idle --fg);
-            font-family:     $font-fam--mono;
-            text-decoration: none;
-            &:link,
-            &:visited {
-                &:hover {
-                    background-color: transparent;
-                    color:            prop(--colors --logo --hover --fg);
-                }
-            }
-        }
-        @include element('logo-symbol') {
-            display: block;
-            width:   $line-height * .9em;
-            height:  $line-height * 1em;
-        }
-        @include element('item') {
-            margin:          0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
-            padding:         0 prop(--dims --item --pad-x);
-            color:           prop(--colors --item --idle --fg);
-            text-decoration: none;
-            text-transform:  uppercase;
-            &:hover {
-                background-color: transparent;
-                color:            prop(--colors --item --hover --fg);
-                text-decoration:  underline;
-            }
-            @include modifier('active') {
-                border-color: prop(--colors --item --active --fg);
-                color:        prop(--colors --item --active --fg);
-                font-weight:  bold;
-            }
-        }
-        @include media('<=md') {
-            width: 100%;
-        }
-    }
-}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
+@include namespace('outer-button') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --bg-hi, $global: true),
+            --bg: prop(--colors --fg-lo, $global: true),
+            --hover: (
+                --bg: prop(--colors --accent --color, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
+            ),
+            --logo: (
+                --fg: prop(--colors --fg-lo, $global: true),
+                --bg: prop(--colors --bg-hi, $global: true),
+                --hover: (
+                    --fg: prop(--colors --bg-hi, $global: true),
+                    --bg: prop(--colors --accent --color, $global: true),
+                )
+            )
+        )
+    ));
+    @include component(namespace()) {
+        display:          flex;
+        height:           prop(--dims --outer, $global: true);
+        transition:       background-color .2s, color .2s;
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-weight:      500;
+        text-decoration:  none;
+        &:hover {
+            background-color: prop(--colors --hover --bg);
+            color:            prop(--colors --hover --fg);
+        }
+        @include modifier('logo') {
+            background-color: prop(--colors --logo --bg);
+            color:            prop(--colors --logo --fg);
+            &:hover {
+                background-color: prop(--colors --logo --hover --bg);
+                color:            prop(--colors --logo --hover --fg);
+            }
+        }
+        @include element('icon') {
+            display:         flex;
+            position:        relative;
+            align-items:     center;
+            justify-content: center;
+            width:           prop(--dims --outer, $global: true);
+            height:          100%;
+        }
+        @include element('icon-symbol') {
+            display: block;
+            width:   1.5em;
+            height:  1.5em;
+        }
+        @include element('content') {
+            height:        100%;
+            padding-right: prop(--dims --outer-spacing, $global: true);
+            padding-left:  prop(--dims --outer-spacing, $global: true);
+            line-height:   prop(--dims --outer, $global: true);
+        }
+    }
+}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
 @include namespace('card-grid') {
+    @include store((
+        --dims: (
+            --card-width: 17em
+        )
+    ));
    @include layout(namespace()) {
        display:               grid;
-        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
-        gap:                   .7rem;
+        gap:                   .6rem;
    }
 }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
        box-sizing:     border-box;
        flex-direction: row;
        align-items:    center;
-        min-height:     100%;
-        padding-bottom: prop(--dims --outer, $global: true);
        @include element('banner') {
-            flex-shrink:      1.2;
+            width:            70%;
-            width:            100%;
            max-width:        prop(--dims --banner-width);
            background-color: prop(--colors --banner-bg);
        }
        @include element('content') {
-            width:     100%;
+            width: 100%;
-            min-width: 0;
        }
        @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
        }
        @include media('<=md') {
-            display:        block;
+            display: block;
-            height:         auto;
-            padding-bottom: 0;
+            @include element('side') {
+                display: none;
+                @include sibling-element('side') {
+                    display: block;
+                }
+            }
            @include element('banner', 'content') {
                width:   auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
+@include namespace('section') {
+    @include layout(namespace()) {
+        display:        flex;
+        flex-direction: column;
+        align-items:    flex-start;
+        min-height:     100%;
+        margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
+        padding-bottom: prop(--dims --outer, $global: true);
+        @include element('heading') {
+            position: sticky;
+            z-index:  9000;
+            top:      0;
+            left:     0;
+        }
+    }
+}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 7adda03..6fbacff 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,7 +1,7 @@
 @include namespace('body') {
    @include scope(namespace()) {
        > :first-child {
-            margin-top: 0;
+            //margin-top: 0;
        }
    }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 89b7837..d095dec 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,13 +10,15 @@
 @import 'basics';
 @import 'layouts/container';
+@import 'layouts/section';
 @import 'layouts/landing';
 @import 'layouts/card-grid';
 @import 'objects/icon';
 @import 'objects/button';
-@import 'components/nav';
+@import 'components/outer-button';
+@import 'components/logo';
 @import 'components/landing-banner';
 @import 'components/section-heading';
 @import 'components/footer';
diff --git a/content/index.md b/content/index.md
index 85ef328..e144d39 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,24 +1,3 @@
 ---
 title: Home
-profiles:
-  - platform: Bandcamp
-    icon:     bandcamp
-    username: volpeon
-    url:      https://bandcamp.com/volpeon
-  - platform: E-Mail
-    icon:     envelope
-    username: me@volpeon.ink
-  - platform: Fediverse
-    icon:     share
-    username: "@volpeon@fedi.vulpes.one"
-  - platform: IRC
-    icon:     hash
-    username: volpeon
-  - platform: PeerTube
-    icon:     play
-    username: "@volpeon@pt.vulpes.one"
-  - platform: XMPP
-    icon:     messages
-    username: "&lt;available&gt;"
 ---
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index eeb6f62..972de8d 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -37,3 +37,43 @@ rewrites:
  path:
    - from: ^/personal
      to: /9thPK7O3xn
+profiles:
+  - platform: Bandcamp
+    icon:     parallelogram
+    username: volpeon
+    url:      https://bandcamp.com/volpeon
+    featured: true
+    
+  - platform: E-Mail
+    icon:     envelope
+    username: me@volpeon.ink
+    featured: true
+  - platform: Fediverse
+    icon:     graph
+    username: "@volpeon@fedi.vulpes.one"
+    featured: true
+  - platform: GitHub
+    username: volpeon
+    url:      "https://github.com/volpeon"
+  - platform: IRC
+    icon:     hash
+    username: volpeon
+    featured: true
+  - platform: PeerTube
+    icon:     video
+    username: "@volpeon@pt.vulpes.one"
+    featured: true
+  - platform: Steam
+    username: volpeon
+    url:      https://steamcommunity.com/id/volpeon/
+  - platform: XMPP
+    icon:     messages
+    username: "&lt;available&gt;"
+    featured: true
diff --git a/templates/base.html b/templates/base.html
index 1d0da4d..c7f641c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,7 +32,7 @@
 </head>
 <body>
-    <nav class="c-nav">
+    <!--<nav class="c-nav">
        <a class="c-nav__logo" href="/" title="$site.title$">
            <svg class="c-nav__logo-symbol">
                <use href="#logo"></use>
@@ -41,7 +41,15 @@
        $for(menus.main.items)$
            <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a>
        $endfor$
-    </nav>
+    </nav>-->
+    <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$">
+        <span class="c-outer-button__icon">
+            <svg class="c-outer-button__icon-symbol">
+                <use href="#logo"></use>
+            </svg>
+        </span>
+    </a>
        
    $if(section.is_index)$
 ${layouts/index()}
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index d819455..3145b69 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,5 +1,5 @@
 <main>
-  <section class="l-landing">
+  <section class="l-section l-landing">
    <header class="l-landing__banner">
      <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
        <h1 class="c-landing-banner__title">
@@ -8,41 +8,40 @@
          </span>
        </h1>
        <p class="c-landing-banner__text">
-          Welcome to my website! I'm Volpeon, a red fox disguised as a human.
+          Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
-          I enjoy programming, creating vector art and designing user interfaces.
        </p>
      </div>
    </header>
    <section class="l-landing__content">
      <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
-        <h1 class="c-section-heading">My profiles</h1>
        <div class="l-card-grid">
          $for(profiles)$
-            $if(it.url)$
+            $if(it.featured)$
-              <a class="c-card" href="$it.url$">
+              $if(it.url)$
-            $else$
+                <a class="l-card-grid__card c-card" href="$it.url$">
-              <div class="c-card">
+              $else$
-            $endif$
+                <div class="l-card-grid__card c-card">
-              $if(it.icon)$
-                <svg class="c-card__icon o-icon">
-                  <use href="#icon-$it.icon$"></use>
-                </svg>
              $endif$
-              <div class="c-card__content">
+                $if(it.icon)$
-                <strong class="u-db">$it.platform$</strong>
+                  <svg class="c-card__icon o-icon">
-                <small class="u-db">$it.username$</small>
+                    <use href="#icon-$it.icon$"></use>
-              </div>
+                  </svg>
+                $endif$
+                <div class="c-card__content">
+                  <strong class="u-db">$it.platform$</strong>
+                  <small class="u-db">$it.username$</small>
+                </div>
+                $if(it.url)$
+                  <svg class="c-card__icon o-icon">
+                    <use href="#icon-link-external"></use>
+                  </svg>
+                $endif$
              $if(it.url)$
-                <svg class="c-card__icon o-icon">
+                </a>
-                  <use href="#icon-link-external"></use>
+              $else$
-                </svg>
+                </div>
              $endif$
-            $if(it.url)$
-              </a>
-            $else$
-              </div>
            $endif$
          $endfor$
        </div>
@@ -52,7 +51,31 @@ $body$
    </section>
  </section>
-  $-- <footer class="c-footer l-container">
+  <section class="l-section">
-  $--   9thPK7O3xn
+    <header class="l-section__heading">
-  $-- </footer>
+      <a class="c-outer-button" href="#projects" id="projects">
+        <span class="c-outer-button__icon">
+          <svg class="c-outer-button__icon-symbol o-icon">
+            <use href="#icon-arrow-down-right"></use>
+          </svg>
+        </span>
+        <span class="c-outer-button__content">
+          Projects
+        </span>
+      </a>
+    </header>
+  </section>
+  <footer class="c-footer">
+    <div class="c-footer__content">
+      9thPK7O3xn
+    </div>
+    <a class="c-outer-button" href="#">
+      <span class="c-outer-button__icon">
+        <svg class="c-outer-button__icon-symbol o-icon">
+          <use href="#icon-arrow-up"></use>
+        </svg>
+      </span>
+    </a>
+  </footer>
 </main>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index 7972457..902cc35 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -7,36 +7,49 @@
         <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
      </symbol>
+      <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" />
+      </symbol>
+      <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
+      </symbol>
      <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor"
+         <path
-            d="m1.25 4.9995 6.75 4.25 6.75-4.25m-12.75-2.125h12c0.4155 0 0.75 0.3345 0.75 0.75v8.8755c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75v-8.8755c0-0.4155 0.3345-0.75 0.75-0.75z" />
+            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"
+            fill="none" stroke="currentColor" />
      </symbol>
      <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor" d="m5.2497 13.75 1.0003-11m2.9997 11 1.0003-11m-7.5 3.5h10m-10 4h10" />
+         <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
      </symbol>
      <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor"
+         <path
-            d="m 2.5,1.75 h 8 c 0.4155,0 0.75,0.3345 0.75,0.75 v 5.499875 c 0,0.4155 -0.3345,0.75 -0.75,0.75 H 4.75 l -3,3.00025 V 2.5 C 1.75,2.0845 2.0845,1.75 2.5,1.75 Z" />
+            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"
-         <path fill="none" stroke="currentColor" d="m 6.75,11.750125 h 4.5 l 3,3 V 6.25" />
+            fill="none" stroke="currentColor" />
+         <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"
+            stroke="currentColor" />
      </symbol>
      <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor" d="m 5.25,4.25 h 6.5 v 6.5 m 0,-6.5 -7.5,7.5" />
+         <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
      </symbol>
-      <symbol id="icon-bandcamp" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+      <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor" d="m 15.25,4.25 -5,7.5 h -9.5 l 5,-7.5 z" />
+         <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
      </symbol>
-      <symbol id="icon-play" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+      <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor" d="M 4.25,3.25 11.75,8 4.25,12.75 Z" />
+         <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
+         <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
      </symbol>
-      <symbol id="icon-share" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+      <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="none" stroke="currentColor"
+         <path
-            d="M 5.75,8 A 1.75,1.75 0 0 1 4,9.75 1.75,1.75 0 0 1 2.25,8 1.75,1.75 0 0 1 4,6.25 1.75,1.75 0 0 1 5.75,8 Z m 7.5,-4 A 1.75,1.75 0 0 1 11.5,5.75 1.75,1.75 0 0 1 9.75,4 1.75,1.75 0 0 1 11.5,2.25 1.75,1.75 0 0 1 13.25,4 Z m 0,8 A 1.75,1.75 0 0 1 11.5,13.75 1.75,1.75 0 0 1 9.75,12 1.75,1.75 0 0 1 11.5,10.25 1.75,1.75 0 0 1 13.25,12 Z M 5.5273914,7.1280734 9.9,4.75 M 5.5098034,8.8930085 9.9,11.25" />
+            d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
+            fill="none" stroke="currentColor" />
      </symbol>
   </defs>
 </svg>
author	Volpeon <git@volpeon.ink>	2021-04-12 20:39:04 +0200
committer	Volpeon <git@volpeon.ink>	2021-04-12 20:39:04 +0200
commit	6b2c6c4260b2af2adad37dc1f8c50a904e04f13d (patch)
tree	46db61ecffa196c31f19b7f437b554ad1c2a193c
parent	WIP: Redesign (diff)
download	volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.gz volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.bz2 volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.zip