diff options
author | blendoit <blendoit@gmail.com> | 2020-01-23 19:21:01 -0800 |
---|---|---|
committer | blendoit <blendoit@gmail.com> | 2020-01-23 19:21:01 -0800 |
commit | 6056f5a2f5e00347c73e827e6f1f781d08d91799 (patch) | |
tree | 5c9c630853aacbd7bd8a67dd0338d3d5e3c1065c /app/static/styles | |
parent | d4b417b6d7c42440a4002aa183a9bb580429a6ec (diff) |
Create placeholder content and "yes" page styles.
Diffstat (limited to 'app/static/styles')
-rw-r--r-- | app/static/styles/default.css | 6 | ||||
-rw-r--r-- | app/static/styles/home.css | 17 | ||||
-rw-r--r-- | app/static/styles/no.css | 35 | ||||
-rw-r--r-- | app/static/styles/yes.css | 96 |
4 files changed, 109 insertions, 45 deletions
diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 47ba29d..51c6549 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -4,6 +4,9 @@ --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; + transition-timing-function: ease-in-out; } * { @@ -17,9 +20,10 @@ body { } h1 { - } h2 { +} +p { } diff --git a/app/static/styles/home.css b/app/static/styles/home.css index 262b40c..e2617bd 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -1,22 +1,23 @@ .main { height: 100%; position: absolute; + z-index: 1; left: 3%; right: 3%; - background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed; } .tab-yes { height: 100%; - width: 10%; + width: 3%; float: left; position: fixed; z-index: -1; + left: 0; background: var(--yes); } .tab-no { height: 100%; - width: 10%; + width: 3%; float: right; position: fixed; z-index: -1; @@ -24,6 +25,16 @@ background: var(--no); } +.tab-yes:hover { + width: 4%; + transition: 0.2s; +} + +.tab-no:hover { + width: 4%; + transition: 0.2s; +} + .tab-yes:hover ~ .main { left: 5%; transition: 0.2s; diff --git a/app/static/styles/no.css b/app/static/styles/no.css index 09171a6..352a635 100644 --- a/app/static/styles/no.css +++ b/app/static/styles/no.css @@ -1,47 +1,50 @@ .main { height: 100%; - right: 0; - left: 6%; position: absolute; z-index: 1; - background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed; + left: 7%; } -.tab-home { +.tab-yes { height: 100%; width: 3%; float: left; position: relative; - z-index: 0; - background: var(--home); + z-index: 1; + background: var(--yes); } -.tab-yes { +.tab-home { height: 100%; width: 3%; float: left; position: relative; - z-index: -1; - background: var(--yes); + z-index: 1; + background: var(--home); } -.tab-home:hover ~ .main { - left: 9%; +.tab-home:hover { + width: 4%; transition: 0.2s; } -.tab-home:hover { - width: 6%; +.tab-yes:hover ~ .main { + left: 10%; transition: 0.2s; } -.tab-yes:hover ~ .main { - left: 9%; +.tab-home:hover ~ .main { + left: 8%; + transition: 0.2s; +} + +.tab-yes:hover ~ .tab-home { + width: 5%; transition: 0.2s; } .tab-yes:hover { - width: 6%; + width: 4%; transition: 0.2s; } diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css index 96443e1..3e8e614 100644 --- a/app/static/styles/yes.css +++ b/app/static/styles/yes.css @@ -1,54 +1,100 @@ +/* Main page components. */ .main { height: 100%; - right: 6%; - left: 0; - position: absolute; - z-index: 1; - background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed; + position: relative; + z-index: 0; + overflow: hidden; } -.tab-home { +/* Feeds. */ +.feed-message { height: 100%; - width: 3%; - float: right; + width: 30%; position: relative; - z-index: 0; - background: var(--home); + float: left; + overflow: auto; +} +.feed-post { + height: 100%; + width: 30%; + position: relative; + float: left; + overflow: auto; +} +.feed-ads { + height: 100%; + width: 20%; + position: relative; + float: left; + overflow: auto; } +/* Tabs. */ .tab-no { height: 100%; width: 3%; float: right; position: relative; - z-index: -1; background: var(--no); } - -.tab-home:hover ~ .main { - right: 9%; - transition: 0.2s; +.tab-home { + height: 100%; + width: 3%; + float: right; + position: relative; + background: var(--home); } - .tab-home:hover { - width: 6%; + width: 4%; transition: 0.2s; } - -.tab-no:hover ~ .main { - right: 9%; +.tab-no:hover ~ .tab-home { + width: 5%; transition: 0.2s; } - .tab-no:hover { - width: 6%; + width: 4%; transition: 0.2s; } -.post { +/* Messages. */ +.message { background: white; border-radius: 14px; padding: 1rem; - margin: 1rem; - width: 20%; + margin: 0.5rem; +} +.message:hover { + background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); + cursor: pointer; + transition: 0.8s; + color: white; +} + +/* News. */ +.news { + background: white; + border-radius: 14px; + padding: 1rem; + margin: 0.5rem; +} +.news:hover { + background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); + cursor: pointer; + transition: 0.8s; + color: white; +} + +/* Ads. */ +.ad { + background: white; + border-radius: 14px; + padding: 1rem; + margin: 0.5rem; +} +.ad:hover { + background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); + cursor: pointer; + transition: 0.8s; + color: white; } |