diff options
author | blendoit <blendoit@gmail.com> | 2020-02-01 11:07:09 -0800 |
---|---|---|
committer | blendoit <blendoit@gmail.com> | 2020-02-01 11:07:09 -0800 |
commit | c828d39f0b47d18b9a9037168aafe5d12edf84fd (patch) | |
tree | 3bb1e94eb07f040ba0290e7450db51da792bcfe1 | |
parent | ef58b6b525c8c3e0f8798342da1b2f731aac99b7 (diff) |
Homepage feed becomes linear if viewport < 800px.
Ah, responsive layout for mobile users.
-rw-r--r-- | app/static/styles/default.css | 15 | ||||
-rw-r--r-- | app/static/styles/home.css | 34 | ||||
-rw-r--r-- | app/templates/home.html | 3 |
3 files changed, 35 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%; + } +} diff --git a/app/templates/home.html b/app/templates/home.html index 28bde41..5598739 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -19,6 +19,9 @@ <h2>{{post.date}}</h2> <p>{{post.content}}</p> </div> + {% if post.type == message %} + <!-- implement a drop-down "drawer" quick reply feature --> + {% endif %} </div> {% endfor %} |