diff --git a/app.py b/app.py index 5df7a63..8d089f5 100644 --- a/app.py +++ b/app.py @@ -2,11 +2,49 @@ from flask import Flask, render_template app = Flask(__name__) +user = { + 'username': 'Xevion', + 'logged_in': False +} + @app.route('/') -def hello_world(): # put application's code here - return render_template('index.html') +def index(): # put application's code here + return render_template('layouts/index.html', user=user) + + +@app.route('/about') +def about(): + return render_template('pages/about.html', user=user) + +@app.route('/users') +def browse(): + return render_template('pages/browse.html', user=user) + +@app.route('/feed') +def feed(): + return render_template('pages/feed.html', user=user) + +@app.route('/messages') +def messages(): + return render_template('pages/messages.html', user=user) + +@app.route('/search') +def search(): + return render_template('pages/search.html', user=user) + +@app.route('/user/') +def user(username: str): + return render_template('pages/about.html', user=user) + +@app.route('/blogs') +def blogs(): + return render_template('pages/blogs.html', user=user) + +@app.route('/groups') +def groups(): + return render_template('pages/groups.html', user=user) if __name__ == '__main__': - app.run() + app.run(host='0.0.0.0', debug=True) diff --git a/static/styles.css b/static/styles.css index e69de29..c04976d 100644 --- a/static/styles.css +++ b/static/styles.css @@ -0,0 +1,71 @@ +body, html { + font-family: Arial, sans-serif; + margin: 0; +} + +#content { + width: 900px; + max-width: 100%; + margin: 0 auto; +} +#content .content-inner { + margin: 2em; +} + +#logo { + color: #ef7900; + font-size: 2.5em; + letter-spacing: -2.8px; +} + +.header-primary { + background-color: #1b53a8; + padding: 10px; +} +.header-primary .header-login { + color: white; +} +.header-primary .header-login .username { + text-decoration: underline; + color: white !important; +} + +.header-secondary { + background-color: #7ca6ef; + height: 30px; + text-align: center; + display: flex; +} +.header-secondary .links { + margin: auto auto; +} + +nav .links, footer .links { + margin: 0; + list-style: none; +} +nav .links li, footer .links li { + display: inline-block; +} +nav .links li a, footer .links li a { + text-decoration: none; + color: white; +} + +footer .links { + font-size: 0.875em; + margin: 16px 0 5px 0; + padding: 0; + text-align: center; +} + +nav .links li.active a { + font-weight: bold; +} + +nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { + content: " | "; + color: black; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.scss b/static/styles.scss new file mode 100644 index 0000000..c0508c3 --- /dev/null +++ b/static/styles.scss @@ -0,0 +1,78 @@ +body, html { + font-family: Arial, sans-serif; + margin: 0; +} + +#content { + width: 900px; + max-width: 100%; + margin: 0 auto; + .content-inner { + margin: 2em; + } +} + +#logo { + color: #ef7900; + font-size: 2.5em; + letter-spacing: -2.8px; +} + +.header-primary { + background-color: #1b53a8; + padding: 10px; + + .header-login { + color: white; + + .username { + text-decoration: underline; + color: white !important; + } + } +} + +.header-secondary { + background-color: #7ca6ef; + height: 30px; + text-align: center; + display: flex; + + .links { + margin: auto auto; + } +} + +nav, footer { + .links { + margin: 0; + list-style: none; + + li { + display: inline-block; + + a { + text-decoration: none; + color: white; + } + } + } +} + +footer .links { + font-size: 0.875em; + margin: 16px 0 5px 0; + padding: 0; + text-align: center; +} + +nav .links li.active a { + font-weight: bold; +} + +nav, footer { + .links li:not(:last-child)::after { + content: " | "; + color: black; + } +} diff --git a/templates/pages/about.html b/templates/pages/about.html new file mode 100644 index 0000000..70de101 --- /dev/null +++ b/templates/pages/about.html @@ -0,0 +1,37 @@ +{% extends 'layouts/index.html' %} +{% block content %} +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut + faucibus pulvinar elementum integer enim neque volutpat ac. Bibendum est ultricies integer quis auctor elit sed vulputate + mi. + Non diam phasellus vestibulum lorem sed risus ultricies tristique. Proin sagittis nisl rhoncus mattis rhoncus urna neque + viverra. Morbi tincidunt ornare massa eget egestas purus. Proin fermentum leo vel orci porta. Sit amet justo donec enim diam + vulputate ut pharetra. Pulvinar neque laoreet suspendisse interdum. Sed risus pretium quam vulputate dignissim suspendisse + in + est. Accumsan tortor posuere ac ut. Eu sem integer vitae justo eget.

+

Imperdiet sed euismod nisi porta lorem mollis. Rutrum tellus pellentesque eu tincidunt. Amet porttitor eget dolor morbi non + arcu + risus quis varius. Nunc sed blandit libero volutpat sed cras ornare arcu. Dignissim enim sit amet venenatis urna. Tellus at + urna + condimentum mattis pellentesque id nibh tortor. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. + Suspendisse + in est ante in nibh. Euismod elementum nisi quis eleifend quam. Tempor commodo ullamcorper a lacus.

+

Ut porttitor leo a diam sollicitudin. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Id volutpat lacus laoreet + non. + Elementum nibh tellus molestie nunc non. Sagittis aliquam malesuada bibendum arcu vitae. Suspendisse potenti nullam ac + tortor + vitae purus faucibus ornare suspendisse. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Sed enim ut sem + viverra. + Tellus rutrum tellus pellentesque eu tincidunt tortor. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus + viverra. + Sit amet consectetur adipiscing elit pellentesque habitant morbi. Sed libero enim sed faucibus turpis. Mauris cursus mattis + molestie a. Sed enim ut sem viverra aliquet eget sit. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Duis + convallis + convallis tellus id. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Vel pharetra vel turpis nunc eget + lorem + dolor sed. Nam libero justo laoreet sit amet. Id nibh tortor id aliquet lectus.

+
+
+{% endblock %} diff --git a/templates/pages/blogs.html b/templates/pages/blogs.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/blogs.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/browse.html b/templates/pages/browse.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/browse.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/feed.html b/templates/pages/feed.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/feed.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/groups.html b/templates/pages/groups.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/groups.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/messages.html b/templates/pages/messages.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/messages.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/search.html b/templates/pages/search.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/search.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %} diff --git a/templates/pages/user.html b/templates/pages/user.html new file mode 100644 index 0000000..3fd01ed --- /dev/null +++ b/templates/pages/user.html @@ -0,0 +1 @@ +{% extends 'layouts/index.html' %}