summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
authorblendoit <blendoit@gmail.com>2020-01-29 07:02:48 -0800
committerblendoit <blendoit@gmail.com>2020-01-29 07:02:48 -0800
commit09611b72871e15bed0da0f3c7ed96b12cc9e0709 (patch)
tree9804fce594b99e6b45425b16ccae1aece9c6df62 /app/static/styles
parentd0214aff79c065e684d86ac3cd43f81e583d86a0 (diff)
Homepage: only use transitions.
Next step is to try only keyframes for more fine-grain control.
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/default.css5
-rw-r--r--app/static/styles/home.css50
2 files changed, 32 insertions, 23 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;
Copyright 2019--2024 Marius PETER