summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
authorblendoit <blendoit@gmail.com>2020-02-01 11:07:09 -0800
committerblendoit <blendoit@gmail.com>2020-02-01 11:07:09 -0800
commitc828d39f0b47d18b9a9037168aafe5d12edf84fd (patch)
tree3bb1e94eb07f040ba0290e7450db51da792bcfe1 /app/static/styles
parentef58b6b525c8c3e0f8798342da1b2f731aac99b7 (diff)
Homepage feed becomes linear if viewport < 800px.
Ah, responsive layout for mobile users.
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/default.css15
-rw-r--r--app/static/styles/home.css34
2 files changed, 32 insertions, 17 deletions
diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index e36da55..654b42f 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -4,27 +4,32 @@
--home: rgba(200, 200, 200, 0.7);
--yes: rgba(0, 255, 0, 0.7);
--no: rgba(255, 0, 0, 0.7);
- font-size: 20;
+ font-size: 18;
--fast-speed: 0.2s;
--med-speed: 0.4s;
--slow-speed: 1s;
}
-* {
- margin: 0;
- padding: 0;
-}
+* {}
body {
font-family: 'Liberation Sans', sans-serif;
line-height: 1.2;
+ margin: 0;
+ padding: 0;
}
h1 {
+ margin-left: 2rem;
+ margin-right: 1rem;
}
h2 {
+ margin-left: 1rem;
+ margin-right: 1rem;
}
p {
+ margin-left: 1rem;
+ margin-right: 1rem;
}
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index a92c6a3..f4ba121 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -40,52 +40,62 @@
}
.post-wrapper {
+ /* background: blue; */
position: relative;
- max-height: 25%;
+ /* height: 20rem; */
+ height: 20%;
max-width: 40%;
margin: 1rem;
- /* background: blue; */
perspective: 600px;
}
.post {
position: relative;
margin: 0 auto;
- height: 80%;
+ height: 100%;
width: 100%;
background: white;
border-radius: 12px;
- padding: 1rem;
overflow: hidden;
- transition-duration: 0.4s;
+ transition-duration: var(--med-speed);
}
.post-wrapper:hover > .post {
- width: 60%;
- overflow: auto;
+ width: 65%;
+ overflow-y: auto;
}
.btn-yes {
height: 100%;
- width: 20%;
+ width: 15%;
position: absolute;
left: 0;
background: var(--yes);
- border-radius: 12px;
+ border-radius: 8px;
transform: rotateY(-90deg);
- transition-duration: 1s;
+ transition-duration: var(--slow-speed);
transform-origin: right;
}
.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
.btn-no {
height: 100%;
- width: 20%;
+ width: 15%;
position: absolute;
right: 0;
background: var(--no);
- border-radius: 12px;
+ border-radius: 8px;
transform: rotateY(90deg);
transition-duration: 1s;
transform-origin: left;
}
.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
+
+/* Dynamic content reajustment if browser window is made too narrow */
+@media (max-width: 800px) {
+ .feed-post {
+ display: inline;
+ }
+ .post-wrapper {
+ max-width: 100%;
+ }
+}
Copyright 2019--2024 Marius PETER