From 62e974a0832e919da8a919fcaa78adaa68e74505 Mon Sep 17 00:00:00 2001 From: la-ninpre Date: Tue, 23 Feb 2021 21:39:07 +0300 Subject: tweak art menu and add more pictures add two new categories - drawings and logos. this css tinkering is so time consuming >_< --- _includes/art-menu.html | 15 +++++------ _sass/main.scss | 51 ++++++++++++++++++++++++++++++++++--- art/drawings.md | 12 +++++++++ art/drawings/stars_and_bridges.jpg | Bin 0 -> 109898 bytes art/drawings/sunkenwood-draw.jpeg | Bin 0 -> 840037 bytes art/drawings/the_faceless.jpeg | Bin 0 -> 415792 bytes art/drawings/thedarkness.jpg | Bin 0 -> 693437 bytes art/drawings/to_never_born.jpg | Bin 0 -> 1782932 bytes art/drawings/unknown-man.jpg | Bin 0 -> 153736 bytes art/drawings/zombie.jpeg | Bin 0 -> 735239 bytes art/logos.md | 9 +++++++ art/logos/lava-logo.png | Bin 0 -> 755891 bytes art/logos/secauloruxsehi.jpeg | Bin 0 -> 123870 bytes art/logos/spmt-logo-new-black.png | Bin 0 -> 190749 bytes art/logos/xvra-logo.png | Bin 0 -> 270337 bytes art/photos/electra_boat.jpg | Bin 0 -> 730912 bytes art/photos/labambient.jpeg | Bin 0 -> 532067 bytes art/photos/mansion.jpg | Bin 0 -> 2725563 bytes art/photos/sea_and_sun.jpg | Bin 0 -> 534164 bytes art/renders/toki_pona.jpg | Bin 0 -> 216527 bytes 20 files changed, 75 insertions(+), 12 deletions(-) create mode 100644 art/drawings.md create mode 100644 art/drawings/stars_and_bridges.jpg create mode 100644 art/drawings/sunkenwood-draw.jpeg create mode 100644 art/drawings/the_faceless.jpeg create mode 100644 art/drawings/thedarkness.jpg create mode 100644 art/drawings/to_never_born.jpg create mode 100644 art/drawings/unknown-man.jpg create mode 100644 art/drawings/zombie.jpeg create mode 100644 art/logos.md create mode 100644 art/logos/lava-logo.png create mode 100644 art/logos/secauloruxsehi.jpeg create mode 100644 art/logos/spmt-logo-new-black.png create mode 100644 art/logos/xvra-logo.png create mode 100644 art/photos/electra_boat.jpg create mode 100644 art/photos/labambient.jpeg create mode 100644 art/photos/mansion.jpg create mode 100644 art/photos/sea_and_sun.jpg create mode 100644 art/renders/toki_pona.jpg 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 @@ -
+
+ 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 Binary files /dev/null and b/art/drawings/stars_and_bridges.jpg differ diff --git a/art/drawings/sunkenwood-draw.jpeg b/art/drawings/sunkenwood-draw.jpeg new file mode 100644 index 0000000..1778932 Binary files /dev/null and b/art/drawings/sunkenwood-draw.jpeg differ diff --git a/art/drawings/the_faceless.jpeg b/art/drawings/the_faceless.jpeg new file mode 100644 index 0000000..7485476 Binary files /dev/null and b/art/drawings/the_faceless.jpeg differ diff --git a/art/drawings/thedarkness.jpg b/art/drawings/thedarkness.jpg new file mode 100644 index 0000000..3841552 Binary files /dev/null and b/art/drawings/thedarkness.jpg differ diff --git a/art/drawings/to_never_born.jpg b/art/drawings/to_never_born.jpg new file mode 100644 index 0000000..37af32d Binary files /dev/null and b/art/drawings/to_never_born.jpg differ diff --git a/art/drawings/unknown-man.jpg b/art/drawings/unknown-man.jpg new file mode 100644 index 0000000..c8e3c74 Binary files /dev/null and b/art/drawings/unknown-man.jpg differ diff --git a/art/drawings/zombie.jpeg b/art/drawings/zombie.jpeg new file mode 100644 index 0000000..3d7297f Binary files /dev/null and b/art/drawings/zombie.jpeg differ 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 Binary files /dev/null and b/art/logos/lava-logo.png differ diff --git a/art/logos/secauloruxsehi.jpeg b/art/logos/secauloruxsehi.jpeg new file mode 100644 index 0000000..c2627cf Binary files /dev/null and b/art/logos/secauloruxsehi.jpeg differ 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 Binary files /dev/null and b/art/logos/spmt-logo-new-black.png differ diff --git a/art/logos/xvra-logo.png b/art/logos/xvra-logo.png new file mode 100644 index 0000000..c76c34f Binary files /dev/null and b/art/logos/xvra-logo.png differ diff --git a/art/photos/electra_boat.jpg b/art/photos/electra_boat.jpg new file mode 100644 index 0000000..42673bf Binary files /dev/null and b/art/photos/electra_boat.jpg differ diff --git a/art/photos/labambient.jpeg b/art/photos/labambient.jpeg new file mode 100644 index 0000000..ed2b56f Binary files /dev/null and b/art/photos/labambient.jpeg differ diff --git a/art/photos/mansion.jpg b/art/photos/mansion.jpg new file mode 100644 index 0000000..35d228f Binary files /dev/null and b/art/photos/mansion.jpg differ diff --git a/art/photos/sea_and_sun.jpg b/art/photos/sea_and_sun.jpg new file mode 100644 index 0000000..0bc4af9 Binary files /dev/null and b/art/photos/sea_and_sun.jpg differ diff --git a/art/renders/toki_pona.jpg b/art/renders/toki_pona.jpg new file mode 100644 index 0000000..c9670e3 Binary files /dev/null and b/art/renders/toki_pona.jpg differ -- cgit v1.2.3