@@ -1,15 +1,14 @@
-<div class="art-menu">
+<ul class="art-menu">
 {%- for page in site.pages -%}
     {%- assign pagedir = page.dir | remove_first: "/" | split: "/" -%}
     {%- include pic-path.html -%}
     {%- if pagedir.first == "art" and pagedir.size > 1 -%}
-    <div class="art-category">
-        <a href="{{ page.url }}">
-            {{ page.title }}
-            <br>
+    <li class="art-category">
+        <a class="link-mask" href="{{ page.url }}">{{ page.title }}</a>
+        <div class="thumbnail">
             <img src="{{ artpics.first }}">
-        </a> 
-    </div>
+        </div>
+    </li>
     {% endif %}
 {%- endfor -%}
-</div>
+</ul>

@@ -10,6 +10,7 @@ $color-link-idle: #707070;
 $color-link-hover: #999999;
 $color-nav-current: #333333;
 $nav-alpha: 0.95;
+$body-width: 835px;
 $border-main: 5px solid;
 $border-nav: $border-main $color-main-grey;
 $border-dark: $border-main $color-dark-grey;
@@ -22,7 +23,7 @@ background: $color-main-bg;
 }
 
 body {
-    max-width: 835px;
+    max-width: $body-width;
     min-width: 378px;
     margin: 0 auto;
     padding: 8px;
@@ -46,6 +47,7 @@
 nav {
     display: flex;
     position: fixed;
+    z-index: 10;
     top: 0;
     width: 100%;
     max-width: 843px;
@@ -161,14 +163,51 @@ }
 }
 
 .art-menu {
+    $art-thumb-wt: ($body-width / 2) - 16;
+    $art-thumb-ht: 300px;
+    //$art-thumb-ht: $art-thumb-wt;
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
     justify-content: space-around;
+    align-content: center;
     .art-category {
-        img {
-           width: 100%;
-           height: auto;
+        margin-bottom: 1em;
+        .link-mask {
+            position: absolute;
+            z-index: 1;
+            width: $art-thumb-wt;
+            height: $art-thumb-ht;
+            line-height: $art-thumb-ht - 16;
+            text-align: center;
+            background: $color-main-bg;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+            font-size: 200%;
+            color: $color-dark-bg;
+
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+        .thumbnail {
+            width: $art-thumb-wt;
+            height: $art-thumb-ht;
+            position: relative;
+
+            &::after {
+                content: "";
+                display: block;
+                padding-bottom: 100%;
+            }
+
+            img {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                image-orientation: initial;
+                object-fit: cover;
+            }
         }
     }
 }
@@ -294,6 +333,10 @@ }
     }
     code {
         background: $color-darker-grey;
+    }
+    .art-menu .art-category .link-mask {
+        background: $color-dark-bg;
+        color: $color-main-bg;
     }
     div.highlight {
         background: $color-darker-grey;

@@ -0,0 +1,12 @@
+---
+title: drawings
+permalink: /art/drawings/
+layout: art-category
+---
+
+hand-drawn graphics.
+
+just for your information: i don't care about any of today's artists' stuff
+(such as commissions, requests, trades, etc.).
+i am drawing purely for myself.
+maybe someone could consider this childish, but this is just up to you.

@@ -0,0 +1,9 @@
+---
+title: logos
+permalink: /art/logos/
+layout: art-category
+---
+
+primarily i draw musical bands logotypes.
+
+here are some fictional ones and also real logos of my musical projects.