Add essential Runnerspace styling & front page routes [empty]

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/<username>')
+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)

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 */

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;
+  }
+}

templates/pages/about.html

@@ -0,0 +1,37 @@
+{% extends 'layouts/index.html' %}
+{% block content %}
+    <div class="content-inner">
+        <div id="about">
+            <p>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.</p>
+            <p>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.</p>
+            <p>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.</p>
+        </div>
+    </div>
+{% endblock %}

templates/pages/blogs.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/browse.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/feed.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/groups.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/messages.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/search.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}

templates/pages/user.html

@@ -0,0 +1 @@
+{% extends 'layouts/index.html' %}