diff --git a/app/__init__.py b/app/__init__.py index 68c052b..b6cefa6 100644 --- a/app/__init__.py +++ b/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/', methods=['GET']) +def fonts_route(file: str): + return send_from_directory(fonts_dir, file) + + @app.route('/article/
', methods=['GET']) def article_route(article: str): return get_page(article) diff --git a/static/css/common.css b/static/css/common.css index 08e6c54..e97dd82 100644 --- a/static/css/common.css +++ b/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%; - } -} diff --git a/static/fonts/Poppins.ttf b/static/fonts/Poppins.ttf new file mode 100644 index 0000000..8e2c012 Binary files /dev/null and b/static/fonts/Poppins.ttf differ diff --git a/static/fonts/fira-sans-200.ttf b/static/fonts/fira-sans-200.ttf new file mode 100644 index 0000000..0feb17a Binary files /dev/null and b/static/fonts/fira-sans-200.ttf differ diff --git a/static/fonts/fira-sans-300.ttf b/static/fonts/fira-sans-300.ttf new file mode 100644 index 0000000..7b416ac Binary files /dev/null and b/static/fonts/fira-sans-300.ttf differ diff --git a/static/fonts/fira-sans.css b/static/fonts/fira-sans.css new file mode 100644 index 0000000..81c55a4 --- /dev/null +++ b/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'); +} diff --git a/static/fonts/poppins.css b/static/fonts/poppins.css new file mode 100644 index 0000000..d90a349 --- /dev/null +++ b/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'); +} diff --git a/templates/common-head.html b/templates/common-head.html index 5e65daf..bc6b3c6 100644 --- a/templates/common-head.html +++ b/templates/common-head.html @@ -4,7 +4,9 @@ - + + + {% if styles %} {% for style in styles %} @@ -17,14 +19,17 @@ {% if not skip_header %}