tweak art menu and add more pictures

add two new categories - drawings and logos.

this css tinkering is so time consuming >_<

20 files changed, 75 insertions, 12 deletions

diff --git a/_includes/art-menu.html b/_includes/art-menu.html
index 36ae9c9..d74d9da 100644
--- a/_includes/art-menu.html
+++ b/_includes/art-menu.html
@@ -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>
diff --git a/_sass/main.scss b/_sass/main.scss
index cdb979d..ea31867 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -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 @@ html {
 }
 
 body {
-    max-width: 835px;
+    max-width: $body-width;
     min-width: 378px;
     margin: 0 auto;
     padding: 8px;
@@ -46,6 +47,7 @@ a:hover {
 nav {
     display: flex;
     position: fixed;
+    z-index: 10;
     top: 0;
     width: 100%;
     max-width: 843px;
@@ -161,14 +163,51 @@ ul {
 }
 
 .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;
+            }
         }
     }
 }
@@ -295,6 +334,10 @@ footer {
     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;
     }
diff --git a/art/drawings.md b/art/drawings.md
new file mode 100644
index 0000000..156dc8c
--- /dev/null
+++ b/art/drawings.md
@@ -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.
diff --git a/art/drawings/stars_and_bridges.jpg b/art/drawings/stars_and_bridges.jpg
new file mode 100644
index 0000000..4292078
--- /dev/null
+++ b/art/drawings/stars_and_bridges.jpg
diff --git a/art/drawings/sunkenwood-draw.jpeg b/art/drawings/sunkenwood-draw.jpeg
new file mode 100644
index 0000000..1778932
--- /dev/null
+++ b/art/drawings/sunkenwood-draw.jpeg
diff --git a/art/drawings/the_faceless.jpeg b/art/drawings/the_faceless.jpeg
new file mode 100644
index 0000000..7485476
--- /dev/null
+++ b/art/drawings/the_faceless.jpeg
diff --git a/art/drawings/thedarkness.jpg b/art/drawings/thedarkness.jpg
new file mode 100644
index 0000000..3841552
--- /dev/null
+++ b/art/drawings/thedarkness.jpg
diff --git a/art/drawings/to_never_born.jpg b/art/drawings/to_never_born.jpg
new file mode 100644
index 0000000..37af32d
--- /dev/null
+++ b/art/drawings/to_never_born.jpg
diff --git a/art/drawings/unknown-man.jpg b/art/drawings/unknown-man.jpg
new file mode 100644
index 0000000..c8e3c74
--- /dev/null
+++ b/art/drawings/unknown-man.jpg
diff --git a/art/drawings/zombie.jpeg b/art/drawings/zombie.jpeg
new file mode 100644
index 0000000..3d7297f
--- /dev/null
+++ b/art/drawings/zombie.jpeg
diff --git a/art/logos.md b/art/logos.md
new file mode 100644
index 0000000..41feb92
--- /dev/null
+++ b/art/logos.md
@@ -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.
diff --git a/art/logos/lava-logo.png b/art/logos/lava-logo.png
new file mode 100644
index 0000000..86b28cf
--- /dev/null
+++ b/art/logos/lava-logo.png
diff --git a/art/logos/secauloruxsehi.jpeg b/art/logos/secauloruxsehi.jpeg
new file mode 100644
index 0000000..c2627cf
--- /dev/null
+++ b/art/logos/secauloruxsehi.jpeg
diff --git a/art/logos/spmt-logo-new-black.png b/art/logos/spmt-logo-new-black.png
new file mode 100644
index 0000000..fdf9e58
--- /dev/null
+++ b/art/logos/spmt-logo-new-black.png
diff --git a/art/logos/xvra-logo.png b/art/logos/xvra-logo.png
new file mode 100644
index 0000000..c76c34f
--- /dev/null
+++ b/art/logos/xvra-logo.png
diff --git a/art/photos/electra_boat.jpg b/art/photos/electra_boat.jpg
new file mode 100644
index 0000000..42673bf
--- /dev/null
+++ b/art/photos/electra_boat.jpg
diff --git a/art/photos/labambient.jpeg b/art/photos/labambient.jpeg
new file mode 100644
index 0000000..ed2b56f
--- /dev/null
+++ b/art/photos/labambient.jpeg
diff --git a/art/photos/mansion.jpg b/art/photos/mansion.jpg
new file mode 100644
index 0000000..35d228f
--- /dev/null
+++ b/art/photos/mansion.jpg
diff --git a/art/photos/sea_and_sun.jpg b/art/photos/sea_and_sun.jpg
new file mode 100644
index 0000000..0bc4af9
--- /dev/null
+++ b/art/photos/sea_and_sun.jpg
diff --git a/art/renders/toki_pona.jpg b/art/renders/toki_pona.jpg
new file mode 100644
index 0000000..c9670e3
--- /dev/null
+++ b/art/renders/toki_pona.jpg