.gitignore

@@ -1,4 +1,3 @@
 data
 data.db
 indexdir
-*.bak

Dockerfile

@@ -6,11 +6,11 @@ COPY src /blog
 
 WORKDIR /blog
 
-RUN pip3 install -r requirements.txt
-
 VOLUME /blog/data
 
-VOLUME /blog/static/graphics
+RUN pip3 install -r requirements.txt
+
+VOLUME /blog/templates/entry
 
 EXPOSE 5000
 

README.md

@@ -17,7 +17,6 @@ The blog is intended to be used to review and critique things.
   - [x] Writing entries
   - [ ] Editing entries
   - [x] Deleting entries
-  - [ ] Better interface for writing, editing, deleting, login
 - [x] Infinite-scroll blog page
 - [x] Archive page
   - [x] Months as headings
@@ -26,7 +25,7 @@ The blog is intended to be used to review and critique things.
 - [x] Standalone article page
   - [x] Links to scrolling blog page
 - [x] Search page
-  - [x] Full-text search
+  - Full-text search
 - [x] RSS feed
 - [x] Eye candy
   - [x] Star rating

rebuild.sh

@@ -4,8 +4,7 @@ docker rm container-critique
 docker build . -t tiyn/container-critique
 docker run --name container-critique \
     --restart unless-stopped \
-    -p "5001:5000" \
+    -p "5000:5000" \
     -e FLASK_ENV=development \
-    -v data:/blog/data \
+    -v data:/blog/data
-    -v graphics:/blog/static/graphics \
     -d tiyn/container-critique

src/forms.py

@@ -1,8 +1,8 @@
 from datetime import date
 from flask_ckeditor import CKEditorField
 from flask_wtf import FlaskForm
-from wtforms import StringField, PasswordField, SubmitField, StringField
+from wtforms import StringField, PasswordField, SubmitField, TextField
-from wtforms.fields import IntegerField
+from wtforms.fields.html5 import IntegerField
 from wtforms.validators import DataRequired, EqualTo, InputRequired, \
     NumberRange, ValidationError, Length
 
@@ -35,7 +35,7 @@ class SearchForm(FlaskForm):
     """
     A Class for the Form that is used while searching.
     """
-    query_str = StringField(
+    query_str = TextField(
         "Query", [DataRequired("Please enter the search term")])
     submit = SubmitField("Search")
 

src/requirements.txt

@@ -1,7 +1,7 @@
-Flask
+Flask==2.1.3
-Flask_CKEditor
+Flask_CKEditor==0.4.6
-Flask_Login
+Flask_Login==0.6.2
-Flask_WTF
+Flask_WTF==0.14.3
-Werkzeug
+Werkzeug==2.0.0
-Whoosh
+Whoosh==2.7.4
-WTForms
+WTForms==2.2.1

src/static/css/dark.css

@@ -2,71 +2,14 @@
 
 :root {
     --bg0: rgb(29,32,33);
+    --bg1: rgb(50,55,60);
     --color0: rgb(220,120,0);
-    --error: rgb(255,0,0);
+    --footerbg0: rgb(50,55,60);
-    --footerbg0: rgb(29,32,33);
     --link0: rgb(220, 120, 0);
     --link1: rgb(255,255,255);
     --menulink0: rgb(220, 120, 0);
     --menulink1: rgb(255,255,255);
-    --menubg0: rgb(29,32,33);
+    --menubg0: rgb(50,55,60);
     --text0: rgb(235,219,178);
     --text1: rgb(220, 120, 0);
 }
-
-a {
-    color: var(--link0);
-    transition: var(--transtime);
-}
-
-a:hover {
-    color: var(--link1);
-}
-
-body {
-    background: var(--bg0);
-}
-
-footer {
-    background: var(--footerbg0);
-    color: var(--text0);
-}
-
-span {
-    color: var(--text1);
-}
-
-.container {
-    color: var(--text0);
-}
-
-.container h1,
-.container h2 {
-    color: var(--text1);
-}
-
-.container .flash {
-    background-color: var(--error);
-}
-
-.hide-menu:hover,
-.main-menu a:hover,
-.show-menu:hover {
-    color: var(--menulink1);
-}
-
-.main-menu a {
-    color: var(--menulink0);
-}
-
-.main-menu-dropdown {
-    background: var(--menubg0);
-    color: var(--menulink0);
-}
-
-@media screen and (max-width:800px) {
-
-    .main-menu {
-        background: var(--menubg0);
-    }
-}

src/static/css/light.css

@@ -2,71 +2,14 @@
 
 :root {
     --bg0: rgb(255,255,255);
+    --bg1: rgb(192,192,192);
     --color0: rgb(0,0,120);
-    --error: rgb(255,0,0);
     --footerbg0: rgb(192,192,192);
     --link0: rgb(0,0,120);
-    --link1: rgb(0,0,0);
+    --link1: rgb(255,255,255);
     --menulink0: rgb(0,0,120);
     --menulink1: rgb(255,255,255);
     --menubg0: rgb(192,192,192);
     --text0: rgb(0,0,0);
     --text1: rgb(0,0,120);
 }
-
-a {
-    color: var(--link0);
-    transition: var(--transtime);
-}
-
-a:hover {
-    color: var(--link1);
-}
-
-body {
-    background: var(--bg0);
-}
-
-footer {
-    background: var(--footerbg0);
-    color: var(--text0);
-}
-
-span {
-    color: var(--text1);
-}
-
-.container {
-    color: var(--text0);
-}
-
-.container h1,
-.container h2 {
-    color: var(--text1);
-}
-
-.container .flash {
-    background-color: var(--error);
-}
-
-.hide-menu:hover,
-.main-menu a:hover,
-.show-menu:hover {
-    color: var(--menulink1);
-}
-
-.main-menu a {
-    color: var(--menulink0);
-}
-
-.main-menu-dropdown {
-    background: var(--menubg0);
-    color: var(--menulink0);
-}
-
-@media screen and (max-width:800px) {
-
-    .main-menu {
-        background: var(--menubg0);
-    }
-}

src/static/css/style.css

@@ -3,27 +3,56 @@
     --transtime: 0.7s;
 }
 
+
+
+@font-face{
+    font-family: "LocalMono";
+    src: url("/static/fonts/jetbrainsmono-medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "LocalSans";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/static/fonts/linux_libertine.woff2") format("woff2");
+}
+
 * {
     margin: 0;
     padding: 0;
 }
 
 a {
+    color: var(--link0);
     text-decoration: none;
     transition: var(--transtime);
 }
 
 a:hover {
+    color: var(--link1);
     cursor: pointer;
 }
 
+.main-menu a {
+    color: var(--menulink0);
+    padding: 0 10px;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: 0.7s;
+}
+
+.main-menu a:hover {
+    color: var(--menulink1);
+}
+
 body {
+    background: var(--bg0);
     margin: 0;
 }
 
 body,
 html {
-    font-family: sans-serif;
+    font-family: LocalSans, sans-serif;
     height: 100%;
     max-width: 100%;
     overflow-x: hidden;
@@ -37,11 +66,54 @@ footer {
     text-align: center;
 }
 
-footer .center {
+.container h1,
-    text-align: center;
+.container h2 {
+    color: var(--text1);
 }
 
+.entry h1,
+.entry h2 {
+    color: var(--text1);
+    margin: 5px auto 2px auto;
+}
+
+li:not(:last-child) {
+    margin-bottom: 5px;
+}
+
+ol {
+    margin: 10px 0;
+    padding-left: 20;
+}
+
+ul {
+    margin: 10px 0;
+    padding-left: 20;
+}
+
+span {
+    color: var(--text1);
+}
+
+.main-menu-dropdown span {
+    float: left;
+    font-family: LocalMono, monospace;
+    font-size: 30px;
+    font-weight: bold;
+    line-height: 100px;
+    padding: 0 10px;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: 0.7s;
+}
+
+.important span {
+    font-weight: bold;
+}
+
+
 .container {
+    color: var(--text0);
     min-height: 100%;
     padding-bottom: 50px;
     padding-left: 10%;
@@ -50,10 +122,20 @@ footer .center {
 }
 
 .container .flash {
+    background-color: var(--error);
     padding: 10px;
     width: 400px;
 }
 
+.entry {
+    background: var(--bg1);
+    border-left: 10px solid var(--color0);
+    border-radius: 0 10px 30px 0;
+    color: var(--text0);
+    margin-bottom: 20px;
+    padding: 10px;
+}
+
 .hide-menu,
 .show-menu {
     cursor: pointer;
@@ -62,6 +144,13 @@ footer .center {
     transition: var(--transtime);
 }
 
+
+.hide-menu:hover,
+.show-menu:hover {
+    color: var(--menulink1);
+}
+
+
 .important {
     font-size: xx-large;
     padding-left: 25vw;
@@ -70,47 +159,22 @@ footer .center {
     text-align: left;
 }
 
-.important span {
-    font-weight: bold;
-}
-
 .logo {
     height: 80px;
     padding-top: 10px;
 }
 
-
-.main-menu-dropdown img {
-    float: left;
-}
-.main-menu-dropdown span {
-    float: left;
-    font-family: monospace;
-    font-size: 30px;
-    font-weight: bold;
-    line-height: 100px;
-    padding: 0 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: 0.7s;
-}
-
 .main-menu {
     float: right;
-    font-family: monospace;
+    font-family: LocalMono, monospace;
     font-size: 30px;
     font-weight: bold;
     line-height: 100px;
 }
 
-.main-menu a {
-    padding: 0 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: 0.7s;
-}
-
 .main-menu-dropdown {
+    background: var(--menubg0);
+    color: var(--menulink0);
     height: 100px;
     padding: 0 20px;
 }
@@ -127,6 +191,11 @@ footer .center {
 }
 
 @media screen and (max-width:800px) {
+    .main-menu a {
+        display: block;
+        padding: 20px;
+    }
+
     .hide-menu {
         position: absolute;
         right: 40px;
@@ -139,6 +208,7 @@ footer .center {
     }
 
     .main-menu {
+        background: var(--menubg0);
         height: 100vh;
         line-height: normal;
         padding: 80px 0;
@@ -149,49 +219,8 @@ footer .center {
         transition: var(--transtime);
         width: 100%;
     }
-    .main-menu a {
-        display: block;
-        padding: 20px;
-    }
 
     #main-menu-check:checked ~ .main-menu {
         right: 0;
     }
 }
-
-.entry {
-    border-radius: 0 10px 30px 0;
-    margin-bottom: 20px;
-    padding: 10px;
-}
-
-.entry h1,
-.entry h2 {
-    margin: 5px auto 2px auto;
-}
-
-.entry ul {
-    padding-left: 20;
-}
-
-figure {
-    padding:20px;
-}
-
-ul {
-    padding-left:20px;
-}
-
-ol {
-    padding-left:20px;
-}
-
-code {
-    border-radius: 25px;
-    padding-left: 20px;
-    padding-right: 20px;
-    page-break-inside: avoid;
-    font-family: monospace;
-    white-space: pre;
-    display: inline-block
-}

src/templates/standalone.html

@@ -13,14 +13,14 @@
                     {{ entry.user.name }}
                 </a>
                 on
-                <a href="{{ url_for('index', _anchor='{0:d}'.format(entry.id)) }}">
+                <a href="{{ url_for('index', _anchor=entry.id) }}">
                     {{ entry.date }}
                 </a>
             </small><br>
             {% if current_user.id == entry.user.id -%}
             <small>
                 [
-                <a href="{{ url_for('delete_entry', ident='{0:d}'.format(entry.id)) }}">
+                <a href="{{ url_for('delete_entry', ident=entry.id) }}">
                     delete entry
                 </a>
                 ]

src/templates/template.html

@@ -10,16 +10,12 @@
     <title>{{ title }}</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width" initial-scale=1.0>
-    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='graphics/logo.png') }}">
     <link href="{{ url_for('static', filename='css/' + style + '.css') }}" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div class="main-menu-dropdown">
         <!-- <img class="logo" src="/static/images/logo.png"> -->
-        <a href="{{ url_for('index') }}">
-          <img class="logo" src="{{ url_for('static', filename='graphics/logo.png') }}">
         <span>{{ title }}</span>
-        </a>
         <input type="checkbox" id="main-menu-check">
         <label for="main-menu-check" class="show-menu">&#9776;</label>
         <div class="main-menu">