diff options
-rw-r--r-- | app/static/styles/home.css | 73 | ||||
-rw-r--r-- | app/templates/home.html | 6 |
2 files changed, 31 insertions, 48 deletions
diff --git a/app/static/styles/home.css b/app/static/styles/home.css index d18729d..d7828c3 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -2,8 +2,8 @@ .tab-yes { height: 100%; width: 10%; - float: left; - position: relative; + position: absolute; + left: 0; background: var(--yes); } .tab-yes:hover ~ .feed-post { @@ -14,8 +14,8 @@ .tab-no { height: 100%; width: 10%; - float: right; - position: relative; + position: absolute; + right: 0; background: var(--no); } .tab-no:hover ~ .feed-post { @@ -41,66 +41,51 @@ .post-wrapper { position: relative; - z-index: 1; max-height: 25%; max-width: 40%; + margin: 1rem; + background: blue; perspective: 600px; - perspective-origin: bottom; } -@keyframes post { - 0% {} - 100% {overflow: auto; height: 40%;} -} .post { position: relative; - height: 70%; + margin: 0 auto; + height: 50%; + width: 70%; background: white; - z-index: 0; border-radius: 12px; padding: 1rem; - margin: 1rem; overflow: hidden; + transition-duration: 1s; } -.post:hover { - animation-name: post; - animation-duration: var(--med-speed); - animation-fill-mode: both; -} -.post:hover + .btn-wrapper { - animation-name: btn-wrapper; - animation-duration: var(--med-speed); - animation-fill-mode: both; -} - -@keyframes btn-wrapper { - 0% {} - 100% {transform: rotateX(0deg); opacity: 100%;} -} -.btn-wrapper { - position: relative; - z-index: 1; - opacity: 0%; - transform: rotateX(-90deg); +.post-wrapper:hover > .post { + width: 60%; + overflow: auto; } .btn-yes { - height: 25%; - width: 40%; - float: left; - left: 1rem; - z-index: 2; - position: relative; + height: 100%; + width: 20%; + position: absolute; + left: 0; background: var(--yes); border-radius: 12px; + transform: rotateY(-90deg); + transition-duration: 1s; + transform-origin: right; } +.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);} .btn-no { - height: 25%; - width: 40%; - float: right; - right: 1rem; - position: relative; + height: 100%; + width: 20%; + position: absolute; + right: 0; background: var(--no); border-radius: 12px; + transform: rotateY(90deg); + transition-duration: 1s; + transform-origin: left; } +.post-wrapper:hover > .btn-no {transform: rotateY(0deg);} diff --git a/app/templates/home.html b/app/templates/home.html index 5990c14..28bde41 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -12,15 +12,13 @@ <div class="feed-post"> {% for post in posts %} <div class="post-wrapper"> + <a href="{{ url_for('home') }}" class="btn-yes"></a> + <a href="{{ url_for('home') }}" class="btn-no"></a> <div class="post"> <h1>{{post.author}}</h1> <h2>{{post.date}}</h2> <p>{{post.content}}</p> </div> - <div class="btn-wrapper"> - <a href="{{ url_for('home') }}" class="btn-yes"></a> - <a href="{{ url_for('home') }}" class="btn-no"></a> - </div> </div> {% endfor %} |