From 0914c484e06224eedb3e2caf019e90d21fa13438 Mon Sep 17 00:00:00 2001 From: ktyl Date: Wed, 5 Jan 2022 21:23:57 +0000 Subject: [PATCH] simplify site animations --- src/inc_css/gallery.css | 55 +++------------ src/inc_css/nav.css | 6 -- src/inc_css/socials.css | 3 +- src/root/gallery.html | 145 +++++++--------------------------------- todo.md | 4 +- 5 files changed, 36 insertions(+), 177 deletions(-) diff --git a/src/inc_css/gallery.css b/src/inc_css/gallery.css index 5831ca1..45e06a1 100644 --- a/src/inc_css/gallery.css +++ b/src/inc_css/gallery.css @@ -56,9 +56,8 @@ .wrapper .imgHolder span { position:absolute; - top:50%; - left:1em; - right:1em; + top:100%; + width:100%; transform: translateY(-50%) scale(0.6); text-align: center; @@ -76,48 +75,16 @@ color: var(--background); } -.wrapper .imgHolder span a { - opacity: 1; - padding: .5em 0; - color: var(--background); - transition: all 0.1s; - text-decoration: none; -} -.wrapper .imgHolder span a:hover { - color: var(--accent); -} - -.wrapper .imgHolder span i { - padding: 0 0.1em; - margin-top: .3em; - font-size: 2em; - color: var(--background); - transition: all 0.3s; -} -.wrapper .imgHolder span i:hover { - transform:translateY(-10%); - color:var(--accent); -} - -.wrapper .imgHolder:hover span { - transform: translateY(-50%); - opacity:1; -} - .lightTileText { color: var(--background); } -.wrapper .imgHolder:hover img { - border-style: solid; - border-width: 0; - border-radius: 100%; - border-color: var(--foreground); - - filter: saturate(20) brightness(.5) blur(2px); -} - -.icon-link { +.wrapper .imgHolder a { + position: absolute; + top:0; + left:0; + width:100%; + height:100%; } @media only screen and (max-width: 600px) { @@ -136,12 +103,6 @@ height:100%; transform: none; } - .wrapper .imgHolder span a { - position: absolute; - left:0; - width:100%; - height:100%; - } .icon-link { display: none; } diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css index 3ed9c07..3c314e7 100644 --- a/src/inc_css/nav.css +++ b/src/inc_css/nav.css @@ -28,18 +28,12 @@ ul.nav-links { .nav .nav-links li { display: block; margin-bottom: 0.8em; - - transition: transform 0.3s; } .nav li a::before { content: "/"; } -.nav li:hover { - transform: translate(1vmax); -} - .nav li a { display: block; padding: 2px; diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css index 47ae5f2..7e48ccf 100644 --- a/src/inc_css/socials.css +++ b/src/inc_css/socials.css @@ -10,12 +10,11 @@ font-size: 2.0em; padding-right: .1em; color: var(--foreground-inactive); - transition: transform 0.3s, color 0.3s; + transition: color 0.3s; } .socials i:hover { color: var(--accent); - transform: translateY(-10%); } .socials a { diff --git a/src/root/gallery.html b/src/root/gallery.html index f5d4345..49c51d9 100644 --- a/src/root/gallery.html +++ b/src/root/gallery.html @@ -22,83 +22,43 @@
- - -

-relativity -

-

- -

-
+ +
- -

-relativity -

-

- -

-
- +
+
- -

-relativity -

-

- -

-
+
- -

ring

-
+
- -

orbits

-
+
- -

orbits

-
+
- -

-open -

-

- -

-
+
- -

weekend

-

- - -

-
+
@@ -110,94 +70,47 @@
- -

ecollapse 2030

-

- -

-
+
- -

squingle

-

- - -

-
+
- -

revival

-
+
- -

lsd

-

- - - -

-
+
- -

stopnt

-

- - - -

-
+
- -

earth

-
+earth
- -

gitch

-

- - -

-
+
- -

membrain

-

- - - -

-
+
- -

make yourself at home

-

- -

-
+
@@ -209,37 +122,27 @@
- -

relanoise

-
+
- -

spacetime

-
+
- -

broad side of the sun

-
+
- -

hohmann

-
+
- -

inevitable

-
+
diff --git a/todo.md b/todo.md index c746824..8b6eada 100644 --- a/todo.md +++ b/todo.md @@ -15,7 +15,8 @@ * [x] smaller * [-] gallery * [x] column too thin - * [ ] invert media queries for :hover handling + * [ ] make whole image into link + * [ ] invert media queries for :hover handling on mobile * [x] content * lx] about @@ -35,6 +36,7 @@ * [ ] fade out along bottom edge * [ ] made by me * [ ] gallery + * [ ] generate from file * [ ] sections * [ ] nature * [ ] pets