From 09611b72871e15bed0da0f3c7ed96b12cc9e0709 Mon Sep 17 00:00:00 2001 From: blendoit Date: Wed, 29 Jan 2020 07:02:48 -0800 Subject: Homepage: only use transitions. Next step is to try only keyframes for more fine-grain control. --- app/static/styles/default.css | 5 +++-- app/static/styles/home.css | 50 +++++++++++++++++++++++++------------------ app/templates/home.html | 1 - 3 files changed, 32 insertions(+), 24 deletions(-) diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 4f56c17..e36da55 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -4,9 +4,10 @@ --home: rgba(200, 200, 200, 0.7); --yes: rgba(0, 255, 0, 0.7); --no: rgba(255, 0, 0, 0.7); - background-image: url(../img/home.png); - background-repeat: repeat-x; font-size: 20; + --fast-speed: 0.2s; + --med-speed: 0.4s; + --slow-speed: 1s; } * { diff --git a/app/static/styles/home.css b/app/static/styles/home.css index a0c6606..ddbe261 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -1,29 +1,39 @@ /* Tabs. */ .tab-yes { height: 100%; - width: 3%; + width: 10%; float: left; position: relative; background: var(--yes); } .tab-yes:hover ~ .feed-post { - width: 4%; - transition: 0.2s; + left: 6%; + right: 0%; + transition: var(--fast-transition); } .tab-no { height: 100%; - width: 3%; + width: 10%; float: right; position: relative; background: var(--no); } -.tab-no:hover {width: 4%; transition: 0.2s;} +.tab-no:hover ~ .feed-post { + left: 0%; + right: 6%; + transition: var(--fast-transition); +} /* Feed of posts. */ .feed-post { height: 100%; + left: 3%; + right: 3%; + background: white; + background-image: url(../img/home.png); + background-repeat: repeat-x; display: flex; - position: relative; + position: absolute; flex-wrap: wrap; overflow: auto; justify-content: space-between; @@ -31,6 +41,7 @@ .post-wrapper { position: relative; + z-index: 1; max-height: 25%; max-width: 40%; perspective: 600px; @@ -41,38 +52,35 @@ position: relative; height: 70%; background: white; - z-index: -1; + z-index: 0; border-radius: 12px; padding: 1rem; margin: 1rem; overflow: hidden; + transition-duration: var(--fast-speed); } -.post:hover {overflow: auto;} -.post:hover + .btn-wrapper { - opacity: 100%; - animation: btn-wrapper; - animation-duration: 1s; +.post:hover { + overflow: auto; + height: 40%; } - -@keyframes btn-wrapper { - from{transform: rotateX(-90deg);} - to {transform: rotateX(0deg);} +.post:hover + .btn-wrapper { + /* opacity: 100%; */ + transform: rotateX(0deg); } .btn-wrapper { position: relative; - top: -0.6rem; z-index: 1; transform: rotateX(-90deg); - /* transition: 400ms transform ease-in-out; */ - /* animation-fill-mode: forwards; */ + transition-duration: var(--med-speed); } .btn-yes { height: 25%; - width: 45%; + width: 40%; float: left; left: 1rem; + z-index: 2; position: relative; background: var(--yes); border-radius: 12px; @@ -80,7 +88,7 @@ .btn-no { height: 25%; - width: 45%; + width: 40%; float: right; right: 1rem; position: relative; diff --git a/app/templates/home.html b/app/templates/home.html index d21c427..5990c14 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -17,7 +17,6 @@

{{post.date}}

{{post.content}}

-
-- cgit v1.2.3