diff options
| -rw-r--r-- | app/routes.py | 4 | ||||
| -rw-r--r-- | app/static/styles/default.css | 1 | ||||
| -rw-r--r-- | app/static/styles/home.css | 77 | ||||
| -rw-r--r-- | app/templates/home.html | 30 |
4 files changed, 66 insertions, 46 deletions
diff --git a/app/routes.py b/app/routes.py index 6c7059a..e520602 100644 --- a/app/routes.py +++ b/app/routes.py @@ -9,7 +9,7 @@ This Python module contains the logic supporting: Python dependencies: - flask: provides web application features -- forms: provides secure form user submission +- forms: provides secure user form submission - sqlalchemy: provides communication with database on server. Personal imports: @@ -25,7 +25,7 @@ from placeholder_news import news from placeholder_messages import messages app = Flask(__name__) -app.config['SECRET_KEY'] = 'foobarblendoitfoobar!' +app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?' app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db' db = SQLAlchemy(app) diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 51c6549..069588d 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -6,7 +6,6 @@ --no: rgba(255, 0, 0, 0.7); background-image: url(../img/home.png); background-repeat: repeat-x; - transition-timing-function: ease-in-out; } * { diff --git a/app/static/styles/home.css b/app/static/styles/home.css index 553299c..a188754 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -1,19 +1,4 @@ -.main { - height: 100%; - position: relative; - z-index: 0; - overflow: hidden; -} - -.feed-post { - height: 100%; - display: flex; - position: relative; - flex-wrap: wrap; - overflow: auto; - justify-content: space-between; -} - +/* Tabs. */ .tab-yes { height: 100%; width: 3%; @@ -21,6 +6,7 @@ position: relative; background: var(--yes); } +.tab-yes:hover {width: 4%; transition: 0.2s;} .tab-no { height: 100%; width: 3%; @@ -28,31 +14,60 @@ position: relative; background: var(--no); } +.tab-no:hover {width: 4%; transition: 0.2s;} -.tab-yes:hover { - width: 4%; - transition: 0.2s; +/* Feed of posts. */ +.feed-post { + height: 100%; + display: flex; + position: relative; + flex-wrap: wrap; + overflow: auto; + justify-content: space-between; } -.tab-no:hover { - width: 4%; - transition: 0.2s; +.post-wrapper { + position: relative; + max-height: 20%; + max-width: 30%; } .post { - max-height: 20%; - max-width: 30%; + height: 70%; background: white; - border-radius: 14px; + border-radius: 12px; padding: 1rem; margin: 1rem; overflow: hidden; } +.post:hover {overflow: auto;} +.post:hover + .btn-wrapper {transform: rotateX(0deg);} -.post:hover { - background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); - cursor: pointer; - transition: 0.8s; - color: white; - overflow: auto; +.btn-wrapper { + position: relative; + top: -0.6rem; + z-index: 1; + transition: 400ms transform ease-in-out; + transform: rotateX(90deg); +} +.btn-wrapper:hover {transform: rotateX(0deg);} + +.btn-yes { + height: 25%; + width: 45%; + float: left; + left: 1rem; + position: relative; + background: var(--yes); + border-radius: 12px; +} + +.btn-no { + height: 25%; + width: 45%; + float: right; + right: 1rem; + position: relative; + background: var(--no); + border-radius: 12px; } diff --git a/app/templates/home.html b/app/templates/home.html index 9d77add..d21c427 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -4,21 +4,27 @@ {% extends "base.html" %} {% block content %} -<div> - <a href="{{ url_for('yes') }}" class="tab-yes"></a> - <a href="{{ url_for('no') }}" class="tab-no"></a> +<!-- 'Yes' tab --> +<a href="{{ url_for('yes') }}" class="tab-yes"></a> +<!-- 'No' tab --> +<a href="{{ url_for('no') }}" class="tab-no"></a> - <div class="main"> - <div class="feed-post"> - {% for post in posts %} - <div class="post"> - <h1>{{post.author}}</h1> - <h2>{{post.date}}</h2> - <p>{{post.content}}</p> - </div> - {% endfor %} +<div class="feed-post"> + {% for post in posts %} + <div class="post-wrapper"> + <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 %} </div> {% endblock content %} |