Refactored header

app/__init__.py

@@ -14,6 +14,7 @@ static_dir = os.path.join(basedir, 'static')
 pages_dir = os.path.join(static_dir, 'pages')
 img_dir = os.path.join(static_dir, 'img')
 css_dir = os.path.join(static_dir, 'css')
+fonts_dir = os.path.join(static_dir, 'fonts')
 
 app = Flask(__name__, template_folder=templates_dir)
 
@@ -58,7 +59,7 @@ def get_page(page: str, title: Optional[str] = None, skip_header: bool = False):
     metadata = get_page_metadata(page)
     with open(os.path.join(pages_dir, page), 'r') as f:
         return render_template('article.html',
-                               title=title if title else metadata.get('title', 'Platypush blog'),
+                               title=title if title else metadata.get('title', 'Platypush - Blog'),
                                image=metadata.get('image'),
                                description=metadata.get('description'),
                                author=re.match(r'(.+?)\s+<([^>]+>)', metadata['author'])[1] if 'author' in metadata else None,
@@ -100,6 +101,11 @@ def css_route(style: str):
     return send_from_directory(css_dir, style)
 
 
+@app.route('/fonts/<file>', methods=['GET'])
+def fonts_route(file: str):
+    return send_from_directory(fonts_dir, file)
+
+
 @app.route('/article/<article>', methods=['GET'])
 def article_route(article: str):
     return get_page(article)

static/css/common.css

@@ -21,15 +21,33 @@ a, a:visited {
 header {
   display: flex;
   align-items: center;
-  height: 8%;
+  height: 3em;
   padding: 0 .5em;
+  font-size: .9em;
   box-shadow: 1px 3px 3px 0 #bbb;
 }
 
 header a {
+  color: initial;
+  opacity: .8;
+  text-decoration: none;
+  border-bottom: 0;
+}
+
+header .left a {
   display: flex;
   align-items: center;
-  border-bottom: none;
+  color: initial !important;
+  opacity: .9;
+}
+
+header a:hover {
+    opacity: .6;
+}
+
+header .title {
+  font-family: 'Poppins', sans-serif;
+  margin-left: .333em;
 }
 
 header .left,
@@ -55,8 +73,9 @@ header .icon {
 }
 
 header .left .icon {
-  background: url(/img/icon.png);
-  margin-right: 1em;
+  width: 2.5em;
+  height: 2.5em;
+  margin-right: .5em;
 }
 
 header .right .icon {
@@ -68,7 +87,7 @@ header .title {
 }
 
 main {
-  height: 92%;
+  height: calc(100% - 3em);
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -86,12 +105,3 @@ h2 {
   line-height: 1.1em;
 }
 
-@media screen and (min-width: 768px) {
-  header {
-    height: 6%;
-  }
-
-  main {
-    height: 94%;
-  }
-}

static/fonts/fira-sans.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(./fira-sans-200.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./fira-sans-300.ttf) format('truetype');
+}

static/fonts/poppins.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./Poppins.ttf) format('truetype');
+}

templates/common-head.html

@@ -4,7 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <link rel="alternate" type="application/rss+xml" title="RSS Feed for the Platypush blog" href="/rss" />
-    <link rel="stylesheet" type="text/css" href="/css/common.css">
+    <link rel="stylesheet" href="/fonts/poppins.css">
+    <link rel="stylesheet" href="/fonts/fira-sans.css">
+    <link rel="stylesheet" href="/css/common.css">
 
     {% if styles %}
         {% for style in styles %}
@@ -17,14 +19,17 @@
     {% if not skip_header %}
     <header>
         <div class="left">
-            <a href="/">
-                <div class="icon"></div>
-                <div class="title">PlatyBlog</div>
+            <a href="https://platypush.tech" title="Home">
+                <img src="/img/icon.png" class="icon" alt="Logo">
+            </a>
+
+            <a href="/" title="Blog">
+                <span class="title">Blog</span>
             </a>
         </div>
 
         <div class="right">
-            <a href="/rss" target="_blank">
+            <a href="/rss" target="_blank" title="RSS feeds">
                 <div class="icon"></div>
             </a>
         </div>