Style tweaks, add site_name setting

assets/scss/style.scss

@@ -1,3 +1,17 @@
+/* variables */
+
+$black:       #000000;
+$white:       #ffffff;
+$blue:        #496893;
+$red:         #ff0000;
+$light-gray:  #f5f5f5;
+$medium-gray: #c8c8c8;
+
+$body-font-family: Georgia, serif;
+
+$body-font-size:    18px;
+$heading-font-size: 26px;
+
 /* global */
 
 * {
@@ -11,76 +25,92 @@ ul {
 }
 
 a {
+  color: $blue;
   text-decoration: none;
+
+  &:hover {
+   text-decoration: underline;
+  }
+}
+
+body {
+  font-family: $body-font-family;
+  font-size: $body-font-size;
+  line-height: 1.5;
+  min-height: 100vh;
 }
 
 .heading {
-  border-bottom: 1px solid #000000;
-  font-size: 24px;
+  border-bottom: 1px solid $black;
+  font-size: $heading-font-size;
   margin-bottom: 15px;
 }
 
 /* layout */
 
 .container {
+  border-left: 1px solid $medium-gray;
+  border-right: 1px solid $medium-gray;
   display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-width: 768px;
+  min-height: 100vh;
 }
 
 .main {
+  background: $light-gray;
   display: flex;
   flex: 1;
-  justify-content: center;
   padding: 20px;
+  width: 100%;
 }
 
-.main__container {
-  width: 768px;
-}
+/* header */
+.header {
+  background: $blue;
+  color: $white;
 
-/* sidebar */
-.sidebar {
-  background: #496893;
-  color: #ffffff;
-  min-height: 100vh;
-  padding: 20px 0;
-  width: 150px;
+  @media(max-width: 1000px) {
+    min-height: auto;
+    width: 100%;
+  }
 }
 
-.sidebar__title {
-  color: #ffffff;
+.header__title {
+  color: $white;
   font-size: 24px;
+  padding: 15px;
 }
 
-.sidebar__title,
-.nav__item {
-  padding: 5px 10px;
-}
-
-.nav__item:hover {
-  background: #ffffff;
+.nav {
+  background: $white;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
 }
 
-.nav__item:hover a {
-  color: #496893;
+.nav__item {
+  padding: 5px 10px;
 }
 
-.nav__link {
-  color: white;
-}
+/* forms */
 
-.nav__link:hover {
-  text-decoration: underline;
+.form {
+  width: 100%;
 }
 
-/* forms */
-
 .form__field {
   display: flex;
   flex-direction: column;
-  margin: 5px 0;
+  margin: 15px 0;
   width: 100%;
 }
 
+.form__field--submit {
+  display: block;
+}
+
 .form__field,
 .form__label {
   margin-bottom: 5px;
@@ -89,34 +119,60 @@ a {
 .form__date-field,
 .form__textarea,
 .form__text-field {
-  border: 1px solid #e8e8e8;
-  font-family: serif;
-  font-size: 16px;
-  padding: 5px;
+  border: 1px solid $medium-gray;
+  font-family: $body-font-family;
+  font-size: $body-font-size;
+  padding: 10px;
 }
 
 .form__textarea {
   resize: vertical;
 }
 
-.form__submit {
-  border: 1px solid #e8e8e8;
-  padding: 5px 10px;
+.button.form__submit {
+  background: $white;
+  border: 1px solid $medium-gray;
+  cursor: pointer;
+  font-family: $body-font-family;
+  font-size: $body-font-size;
+  padding: 10px;
+
+  &:hover {
+    background: $light-gray;
+  }
+
+  @media(max-width: 500px) {
+    width: 100%;
+  }
 }
 
 /* post listing */
+
+.post-listing {
+  width: 100%;
+}
+
 .post-listing__item {
+  display: flex;
+  padding: 10px;
   position: relative;
+  width: 100%;
+
+  &:nth-child(even) {
+    background: white;
+  }
 }
 
 .post-listing__item--changed:before {
-  background-color: red;
-  border-radius: 50%;
-  content: '';
+  color: $red;
+  content: '•';
   display: block;
-  height: 10px;
+  font-size: $heading-font-size;
   left: -15px;
+  line-height: 16px;
   position: absolute;
-  top: 3px;
-  width: 10px;
+}
+
+.post-listing__link {
+  flex: 1;
 }

tests/test_posts.py

@@ -16,7 +16,8 @@ def setup():
     os.mkdir(os.path.join(temp_dir.name, 'public'))
     with open(os.path.join(temp_dir.name, 'settings.json'), "w") as f:
         f.write(json.dumps({
-            "PUBLIC_PATH": os.path.join(temp_dir.name, 'public')
+            "PUBLIC_PATH": os.path.join(temp_dir.name, 'public'),
+            "SITE_NAME": "test website"
         }))
 
     # Importing PostsService initializes a Settings object which depends on

tests/test_settings.py

@@ -20,7 +20,8 @@ def test_reading_yird_path():
     os.environ["YIRD_PATH"] = root
     with open(os.path.join(root, "settings.json"), "w") as f:
         f.write(json.dumps({
-            "PUBLIC_PATH": os.path.join(root, "public")
+            "PUBLIC_PATH": os.path.join(root, "public"),
+            "SITE_NAME": "test website"
         }))
     assert Settings().YIRD_PATH == root
     shutil.rmtree(root)

yird/app.py

@@ -20,6 +20,13 @@ webpack.init_app(app)
 yird_settings = Settings()
 
 
+@app.context_processor
+def inject_site_name():
+    return {
+        "site_name": yird_settings.SITE_NAME
+    }
+
+
 @app.route('/admin')
 def index():
     posts = PostsService.get_posts()

yird/settings.py

@@ -11,3 +11,4 @@ class Settings:
         with open(os.path.join(self.YIRD_PATH, 'settings.json')) as f:
             settings_file = json.loads(f.read())
             self.PUBLIC_PATH = settings_file['PUBLIC_PATH']
+            self.SITE_NAME = settings_file['SITE_NAME']

yird/templates/index.html.j2

@@ -4,10 +4,10 @@
     <h3 class="heading">all posts</h3>
     {% for post in posts %}
       <li class="post-listing__item {% if post.changed %}post-listing__item--changed{% endif %}">
-        <span>{{ post.date }}</span>
-        <a href="{{ url_for('edit_post', post_id = post.id) }}">
+        <a href="{{ url_for('edit_post', post_id = post.id) }}" class="post-listing__link">
           {{ post.title }}
          </a>
+        <span>{{ post.date }}</span>
       </li>
     {% endfor %}
   </ul>

yird/templates/layout.html.j2

@@ -4,12 +4,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="{{ url_for('static', filename=asset_url_for('app_css.css')) }}">
-  <title>My Website</title>
+  <title>{{ site_name }} - yird</title>
 </head>
 <body>
   <div class="container">
-    <aside class="sidebar">
-      <h3 class="sidebar__title">yird</h3>
+    <header class="header">
+      <h3 class="header__title">{{ site_name }}</h3>
       <ul class="nav">
      		<li class="nav__item">
 					<a class="nav__link" href="{{ url_for('index') }}">
@@ -27,11 +27,9 @@
           </a>
         </li>
       </ul>
-    </aside>
+    </header>
     <main class="main">
-      <div class="main__container">
-        {% block content %}{% endblock %}
-      </div>
+      {% block content %}{% endblock %}
     </main>
   </div>
   <script src="{{ url_for('static', filename=asset_url_for('app_js.js')) }}"></script>

yird/templates/posts/form.html.j2

@@ -21,8 +21,8 @@
       <label class="form__label">{{ form.content.label }}</label>
       {{ form.content(class="form__textarea", rows=10) }}
     </div>
-    <div class="form__field">
-      <input type="submit" value="Submit" class="form__submit">
+    <div class="form__field form__field--submit">
+      <input type="submit" value="Submit" class="form__submit button">
     </div>
   </form>
 {% endblock %}