Use style file from Bear blog by Herman Martinus

7 files changed, 219 insertions, 19 deletions

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..ad78306
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,12 @@
+TEMPLATES := $(shell find templates -name '*.html' 2> /dev/null)
+SHARE := $(shell find share -name '*' 2> /dev/null)
+POSTS := $(shell find posts -name '*' 2> /dev/null)
+CODE := $(shell find blog -name '*.py' 2> /dev/null)
+
+.PHONY: clean
+
+remote: $(TEMPLATES) $(SHARE) $(POSTS)
+	python3 blog/blog.py
+
+clean:
+	rm -rf remote
diff --git a/blog/blog.py b/blog/blog.py
index cb6ab1e..aa7bc82 100644
--- a/blog/blog.py
+++ b/blog/blog.py
@@ -22,6 +22,13 @@ def find_posts(template, basedir):
         posts.append(Post(template, os.path.join(basedir, subdir)))
     return posts
 
+def copy_share(workdir):
+    for filename in os.listdir("share"):
+        source = os.path.join("share", filename)
+        destination = os.path.join(workdir, filename)
+
+        shutil.copy(source, destination)
+
 
 def generate_blog(include_drafts=False):
     env = Environment(loader=FileSystemLoader(searchpath="templates"),
@@ -44,6 +51,8 @@ def generate_blog(include_drafts=False):
     feed = Feed(env.get_template("feed.html"), posts)
     feed.generate(workdir)
 
+    copy_share(workdir)
+
 
 def main():
     generate_blog(include_drafts=True)
diff --git a/blog/post.py b/blog/post.py
index 1d35b6c..eab9d0d 100644
--- a/blog/post.py
+++ b/blog/post.py
@@ -63,9 +63,9 @@ class Post(object):
 
         assert md, f"There is no markdown file in `{self.directory}`"
 
-        body = render.to_html(md)
+        content = render.to_html(md)
         rendered = self.template.render(title=self.metadata.title,
                                         date=self.metadata.date,
-                                        body=body)
+                                        content=content)
         render.write_file_content(os.path.join(workdir, "index.html"),
                                   rendered)
diff --git a/posts/drafts/hello-world/hello-world.md b/posts/drafts/hello-world/hello-world.md
index cecfa2d..06639ae 100644
--- a/posts/drafts/hello-world/hello-world.md
+++ b/posts/drafts/hello-world/hello-world.md
@@ -28,6 +28,7 @@ And embedded code like `this` and `this`.
 * lists
 
 Also, sometimes I use enumerated lists like this one.
+
 1. One.
 2. Two.
 3. Three.
diff --git a/share/style.css b/share/style.css
new file mode 100644
index 0000000..8dec075
--- /dev/null
+++ b/share/style.css
@@ -0,0 +1,131 @@
+/* Design based on Bear blog: https://bearblog.dev */
+
+:root {
+    --width: 720px;
+    --font-main: Verdana, sans-serif;
+    --font-secondary: Verdana, sans-serif;
+    --font-scale: 1em;
+    --background-color: #fff;
+    --heading-color: #222;
+    --text-color: #444;
+    --link-color: #3273dc;
+    --visited-color:  #8b6fcb;
+    --code-background-color: #f2f2f2;
+    --code-color: #222;
+    --blockquote-color: #222;
+}
+
+body {
+    font-family: var(--font-secondary);
+    font-size: var(--font-scale);
+    margin: auto;
+    padding: 20px;
+    max-width: var(--width);
+    text-align: left;
+    background-color: var(--background-color);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.5;
+    color: var(--text-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-main);
+    color: var(--heading-color);
+}
+
+/*time {
+    color: #00000090;
+}*/
+
+a {
+    color: var(--link-color);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline; 
+}
+
+nav a {
+    margin-right: 8px;
+}
+
+strong, b {
+    color: var(--heading-color);
+}
+
+button {
+    margin: 0;
+    cursor: pointer;
+}
+
+content {
+    line-height: 1.6;
+}
+
+table {
+    width: 100%;
+}
+
+hr {
+    border: 0;
+    border-top: 1px dashed;
+}
+
+img {
+    max-width: 100%;
+}
+
+code {
+    font-family: monospace;
+    padding: 2px;
+    color: var(--code-color);
+    border-radius: 3px;
+}
+
+blockquote {
+    border-left: 1px solid #999;
+    color: var(--code-color);
+    padding-left: 20px;
+    font-style: italic;
+}
+
+footer {
+    padding: 25px 0;
+    text-align: center;
+}
+
+.title:hover {
+    text-decoration: none;
+}
+
+.title h1 {
+    font-size: 1.5em;
+}
+
+.inline {
+    width: auto !important;
+}
+
+/* posts list */
+ul.posts {
+    list-style-type: none;
+    padding: unset;
+}
+
+ul.posts li {
+    display: flex;
+}
+
+ul.posts li span {
+    flex: 0 0 130px;
+}
+
+ul.posts time {
+}
+
+ul.posts li a:visited {
+    color: var(--visited-color);
+}
diff --git a/templates/feed.html b/templates/feed.html
index ee1411e..b8fc4bf 100644
--- a/templates/feed.html
+++ b/templates/feed.html
@@ -4,20 +4,48 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Blog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="blog.ilvokhin.com">
+
+    <title>blog.ilvokhin.com</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 
-<body>
-    {% if posts %}
-        <ul>
-        {% for post in posts %}
-            <li>
-                <a href="{{ post.name }}">{{ post.metadata.title }}</a>
-                ({{ post.metadata.date }})
-            </li>
-        {% endfor %}
-        </ul>
-    {% endif %}
+<body class="feed">
+<header>
+<a class="title" href="/">
+    <h1>blog.ilvokhin.com</h1>
+</a>
+</header>
+
+<main>
+<content>
+
+{% if posts %}
+    <ul class="posts">
+    {% for post in posts %}
+        
+        <li>
+            <span>
+            <i>
+            <time datetime="{{ post.metadata.date }}" pubdate>
+            {{ post.metadata.date }}
+            </time>
+            </i>
+            </span>
+            <a href="{{ post.name }}">
+                {{ post.metadata.title }}
+                {% if post.is_draft() %}
+                    (Draft)
+                {% endif %}
+            </a>
+        </li>
+    {% endfor %}
+    </ul>
+{% endif %}
+
+</content>
+</main>
 </body>
 
 </html>
diff --git a/templates/post.html b/templates/post.html
index 088b2f6..82250f8 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -4,14 +4,33 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="{{ title }}">
+
+    <title>{{ title }} | blog.ilvokhin.com</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 
-<body>
-    <h1>{{ title }}</h1>
-    <h3>{{ date }}</h3>
+<body class="post">
+<header>
+<a class="title" href="/">
+    <h1>blog.ilvokhin.com</h1>
+</a>
+</header>
+
+<main>
+<center>
+<h1>{{ title }}</h1>
+<p><i><time datetime="{{ date }}" pubdate>
+{{ date }}
+</time></i></p>
+</center>
+
+<content>
+    {{ content|safe }}
+</content>
 
-    {{ body|safe }}
+</main>
 </body>
 
 </html>