order projects

.gitea/workflows/release.yaml

@@ -0,0 +1,56 @@
+name: release
+# on:
+#   push:
+#     branches:
+#       main
+on: workflow_dispatch
+
+env:
+  PORT: 3081
+
+jobs:
+  release:
+    name: release
+    runs-on: ubuntu-latest
+    container: 
+      image: node:18
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - name: cache
+        uses: Swatinem/rust-cache@v2
+        working-directory: axum_server
+      - uses: taiki-e/install-action@just
+
+      # - uses: JarvusInnovations/background-action@v1
+      #   with:
+      #     run: just prod &
+      #     working-directory: axum_server
+      #     wait-on: http://localhost:3081
+      #     wait-for: 10m
+      #     tail: true
+
+      - name: Build release
+        run: cargo build --release
+        working-directory: axum_server
+      - name: Run server in background
+        run: just prod &
+        working-directory: axum_server
+      - uses: cygnetdigital/wait_for_response@v2.0.0
+        with:
+          url: 'http://127.0.0.1:3081/'
+          responseCode: '200,500'
+          timeout: 50000
+          interval: 2000
+      - name: run ssg
+        run: just ssg
+        working-directory: axum_server
+      - name: Server log
+        run: cat axum_server/server.log
+      - uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: axum_server/dist/
+          retention-days: 10
+          
+

.gitea/workflows/test.yaml

@@ -0,0 +1,12 @@
+name: test
+on: [push, pull_request]
+
+jobs:
+  test:
+    name: cargo test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: Swatinem/rust-cache@v2
+      - run: cd axum_server && cargo test --all-features

_posts/blog/2020-02-28-how-ive-built-my-web-site.md

@@ -17,7 +17,9 @@ tags:
 
 Creating my own website with blog was something I had in my mind from start of my professional career after I left school.
 I had a lot of new experience with development which I wanted to elaborate on and save into a small library so I can take a look back on my thoughts how they evolve over time.
-This was like 6 years ago. I had a successful first attempt at doing so. I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
+This was like 6 years ago. I had a successful first attempt at doing so.
+
+I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
 
 For all those years I was trying to create it in my spare time (of which wasn't that much apparently). There were several attempts. One with _Angular_ when it was "the cool kid on the block". Another one with _cycle.js_ which was not that far from being done. I regret it now as it would be really satisfying to finish that one. I had created neat <abbr title="Server side rendering">SSR</abbr> layer which was not really difficult to accomplish with _cycle.js_ as it is reactive and it only required skipping first client render of _virtual-dom_ after page load. I'm still in love with _cycle.js_ but after _sapper_ was released I've found out of its ability to create a nice **static site** I wanted to try it out. I think that the approach of **compiling the source code** as classic client applications have been doing for many years makes a lot of sense on the internet as well. This is the one thing I'd really like to be able to accomplish with reactive frameworks like _cycle.js_.
 
@@ -115,7 +117,7 @@ For example this is the model of this blog post:
 Neat part of the _CMS_ are those widgets. In editor they will be presented by appropriate component as well as in the editor preview.
 I am very satisfied with it and I recommend it.
 
-## What's next
+## What's next {#whats-next}
 
 I've decided not to wait for perfect product and I want to release this blog as soon as possible. I will have same approach as with other products. Make a <abbr title="Minimum Viable Product">**MVP**</abbr> and then release features as they are done.
 I've put some features into _Github Projects Board_. I will very likely make a redesign with experimental layout changes. I'd like to experiment with colors and make the blog look distinguishable and personal while maintaining accessibility.

_posts/blog/2022-02-13-ive-started-streaming-weekly-06-2022.md

@@ -38,7 +38,9 @@ I've set a new **sub goal** for buying a streaming PC. I'll buy it when the stre
 
 Last week I've been showing off new headphones that I've ordered and the *YouTube* algorithm has been suggesting great videos on the topic since. I will give another shoutout. This time it is to [Joshua's Valour *YouTube* channel](https://www.youtube.com/channel/UCx9bOYEjkevIDYONBAstK-A)
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="video-embed">
+<iframe class="embed" width="100%" height="100%" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
 
 My next pick will be a [podcast *Lifespan* hosted by Dr. David Sinclair](https://open.spotify.com/show/3PkkSdQE8DfeiKvSk1Mg1J) where he talks about what we can do and how should we treat our bodies to live a longer and healthier life.
 

_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md

@@ -28,7 +28,7 @@ This week I've attended a [Rusty game jam #2](https://itch.io/jam/rusty-jam-2).
 
 ![Egg fetcher game preview](/images/uploads/screenshot-from-2022-06-26-22-37-16.png "Egg fetcher game preview")
 
-[You can check the rusult built with WASM here.](/showcase/egg-fetcher/)
+[You can check the result built with WASM here.](/showcase/egg-fetcher/)
 
 ## What's up with the weeklys
 

_posts/blog/2023-08-29-i-built-my-3rd-custom-keyboard.md

@@ -60,7 +60,7 @@ Another customization is that while the shield is designed for a wired connectio
 > Tip: If you plan on using your keyboard with a desktop computer, you might want to consider a wired connection. BIOS boot up check will not pass without a physical connection to a keyboard. I have to have 2 keyboards on my desk now :( 
 
 | Item                                                  | Quantity    | Price   | Link                                                                                                               |
-| ----------------------------------------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| :---------------------------------------------------- | :---------- | ------: | ------------------------------------------------------------------------------------------------------------------ |
 | DSA Blank Keycaps                                     | 4           | 14 EUR  | [🛒](https://www.aliexpress.com/item/1005002587285218.html?spm=a2g0o.order_list.0.0.3e541802H3XiA6)                |
 | Brass Hot Melt Inset Nuts M4 X D6.0 X L5.0            | 6 of 50pcs  | 3 EUR   | [🛒](https://www.aliexpress.com/item/4000232925592.html?spm=a2g0o.order_list.order_list_main.43.6e0d1802Xk8ijl)    |
 | M4 * 8 Screws                                         | 6 of 100pcs | 3 ELR   | [🛒](https://www.aliexpress.com/item/32896139810.html?spm=a2g0o.order_list.order_list_main.38.6e0d1802Xk8ijl)      |

_posts/blog/dev-2019-08-09-ide-to copy.md

@@ -27,6 +27,16 @@ similis: caput te prodere disceditis: quinque: an et in, accipis divitior talia?
 Per deducit ademi, _sub_ qvem orbatura Pindo te manus verbaque **tuorum nati**
 vivere, an me detectique est. Decoram erat mediaque auras.
 
+`sh ./oneliner.sh`
+
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+This is a paragraph with a `reference to code` inside.
+
 > Leti ensis mihi torquere fiducia me sunt nec prima caeli quaeras et coma
 > tinctis sibi; tua fidem aethera. Animosque ferret vultus puellari poteris
 > florilegae ignes crevisse ad pulvere recenti, luce male; neque nec!
@@ -51,7 +61,7 @@ praemia pariter exaestuat fecerat. Haemonio quem: _in_ sibi spectans parmam,
 tetenderat filia ait quo calcitrat at vides, cui iuvenem rerum erat. Eminus
 flammas iamque.
 
-```typescript
+```ts
 var brouterVisualRecycle =
   netmaskExbibyteMac +
   download(twitter_serp_yobibyte, backlinkDirectBandwidth, hot)
@@ -73,7 +83,7 @@ Erat Iunonis pennis lugubris, vixque nec quo tua lacrimarum nubila nobiscum.
 Ferrum inhaeret ille; operi in Theseus contingere fateri, mirabatur, consequar
 ullis, exuit fatemur humani iustis!
 
-```
+```js
 var mpeg_reader_modifier = jfs;
 if (318464 >= association_thunderbolt_bar) {
     copyrightMemoryWep.skinHeaderEmoticon =

_posts/blog/dev-2019-08-09-ide-to.md

@@ -7,7 +7,7 @@ segments:
   - cookbook
 published: true
 date: 2019-08-09T17:24:13.481Z
-thumbnail: /images/uploads/screenshot.gif
+#thumbnail: /images/uploads/screenshot.gif
 tags:
   - dev
 ---

_projects/2012-08-06-ckvive.md

@@ -1,11 +1,12 @@
 ---
 title: CK Vive
 displayed: true
-description: Websitefor *CK Vive* travel agency with a **custom CMS system** for
-  managing travel destinations.
 cover_image: /images/uploads/ck_vive_logo.svg
+link: https://ckvive.sk/
 classification: website
 tags:
   - PHP
 featured: false
 ---
+Websitefor *CK Vive* travel agency with a **custom CMS system** for
+managing travel destinations.

_projects/2014-08-06-košice-peace-marathon.md

@@ -1,8 +1,6 @@
 ---
 title: Košice Peace Marathon
 displayed: true
-description: "*Košice Peace Marathon* is the oldest marathon in Europe and the
-  third-oldest in the world."
 link: https://www.kosicemarathon.com/
 cover_image: /images/uploads/screenshot-from-2024-08-06-18-22-52.png
 classification: website
@@ -11,3 +9,5 @@ tags:
   - MySQL
 featured: false
 ---
+*Košice Peace Marathon* is the oldest marathon in Europe and the
+third-oldest in the world.

_projects/2015-03-06-docker-presentation.md

@@ -1,8 +1,6 @@
 ---
 title: Docker
 displayed: false
-description: An introduction to Docker containerization technology and how it
-  differs from virtualization.
 cover_image: /images/uploads/docker-use-cases.png
 classification: presentation
 tags:
@@ -10,3 +8,5 @@ tags:
   - Docker
 featured: false
 ---
+An introduction to Docker containerization technology and how it
+differs from virtualization.

_projects/2015-03-06-unstoppable-growth-of-front-end-frameworks.md

@@ -0,0 +1,13 @@
+---
+title: Unstoppable growth of front-end frameworks
+displayed: true
+link: https://michalvankodev.github.io/unstoppable-growth-of-frontend-frameworks/
+classification: presentation
+tags:
+  - Presentation
+  - NodeJS
+featured: false
+---
+A simple summary of the web front-end evolution. Describes how and
+why new tools in the NodeJS ecosystem improve & why there is still something
+to explore.

_projects/2015-06-06-skosy.md

@@ -0,0 +1,10 @@
+---
+title: Skosy
+displayed: false
+classification: webapp
+tags:
+  - Webapp
+featured: false
+---
+*Skosy* is a web application whose purpose is to **automate the
+writing of integration tests** for websites.

_projects/2015-08-06-beinsports.md

@@ -0,0 +1,13 @@
+---
+title: beinSports
+displayed: true
+link: https://www.beinsports.com/en-us
+cover_image: /images/uploads/bein_logo.af017869.webp
+classification: website
+tags:
+  - Freemarker
+featured: false
+---
+*beIN Sports* is a global network of sports channels jointly owned
+and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media
+Networks*

_projects/2015-10-06-livesport-tv.md

@@ -0,0 +1,10 @@
+---
+title: Livesport.tv
+displayed: false
+classification: website
+tags:
+  - Freemarker
+featured: false
+---
+*Livesport.tv* is a network of premium online sports channels,
+featuring all the top sports competitions from around the world.

_projects/2015-10-20-spreading-the-web.md

@@ -0,0 +1,14 @@
+---
+title: Spreading the Web
+displayed: true
+link: https://michalvankodev.github.io/spreading-the-web
+cover_image: /images/uploads/screenshot-from-2024-08-06-18-48-02.png
+classification: presentation
+tags:
+  - Presentation
+  - NodeJS
+featured: false
+---
+A presentation about the rising number of use cases for utilizing
+web technologies outside of the web platform such as native mobile
+applications and robotics. 2015

_projects/2016-08-06-fx-sales.md

@@ -0,0 +1,15 @@
+---
+title: FX Sales
+displayed: true
+link: https://www.caplin.com/business/fx-sales
+cover_image: /images/uploads/fx_sales_screen2x.png
+classification: webapp
+tags:
+  - Webapp
+  - React
+  - Knockout
+featured: false
+---
+*Caplin FX Sales* allows sales people to **trade on behalf of
+their clients**. This needs to be an efficient workflow providing all the
+relevant information to the sales user

_projects/2017-03-06-ship-structured-heard-input-process.md

@@ -1,11 +1,11 @@
 ---
 title: SHIP (Structured heard input process)
 displayed: true
-description: "*SHIP* is a web application for **editors** who actively **track
-  trades offers and bids** on the commodity market."
 classification: webapp
 tags:
   - Webapp
   - Angular
 featured: false
 ---
+*SHIP* is a web application for **editors** who actively **track
+trades offers and bids** on the commodity market.

_projects/2017-08-06-responzio.md

@@ -0,0 +1,15 @@
+---
+title: responzIO
+displayed: true
+link: https://www.croptech.com/
+cover_image: /images/uploads/responzio.png
+classification: embedded
+tags:
+  - Webapp
+  - Embedded
+  - NodeJS
+featured: false
+---
+***responzIO*** is a smart, easy-to-use monitoring and automation
+system. The ultimate tool for various applications such as hydroponics,
+aquariums, and gardens.

_projects/2018-08-06-manualogic.md

@@ -0,0 +1,14 @@
+---
+title: Manualogic
+displayed: false
+classification: webapp
+tags:
+  - Webapp
+  - Angular
+  - RxJS
+featured: false
+---
+*Manualogic* is a **single-page application** for product manual
+creators. It contains **custom web editor** and management system of
+**translatable pages, books** and **products.** Its main goal is to enable
+customers to get manuals of their products in digital form.

_projects/2018-08-06-signal-hub-manager.md

@@ -0,0 +1,13 @@
+---
+title: Signal Hub Manager
+displayed: true
+classification: webapp
+tags:
+  - Webapp
+  - React
+featured: false
+---
+*Signal Hub* is an end-to-end **Big Data analytics platform** for
+large enterprises. It accelerates the process of extracting insights and
+intelligence from large volumes of data, including data of different types and
+in different formats.

_projects/2020-04-04-panoramic.md

@@ -1,9 +1,6 @@
 ---
 title: Panoramic
 displayed: true
-description: "*Panoramic* was a company focused on building a web application
-  for data scientists to be able to create and share models and graphs in
-  between each other."
 classification: webapp
 tags:
   - Webapp
@@ -14,3 +11,6 @@ tags:
   - Data analytics
 featured: false
 ---
+*Panoramic* was a company focused on building a web application
+for data scientists to be able to create and share models and graphs in
+between each other.

_projects/2022-05-05-the-expert.md

@@ -1,11 +1,6 @@
 ---
 title: The Expert
 displayed: true
-description: _The Expert_ is a digital platform that connects clients to
-  interior designers around the world. For experts, it allows **managing** their
-  **portfolio and profile** and **schedule** in which they are open for
-  **consultations**. Clients are able to view their profiles and book
-  consultations.
 link: https://www.theexpert.com/
 cover_image: /images/uploads/the-expert-logo.svg
 classification: webapp
@@ -17,3 +12,8 @@ tags:
   - GraphQL
 featured: true
 ---
+_The Expert_ is a digital platform that connects clients to
+interior designers around the world. For experts, it allows **managing** their
+**portfolio and profile** and **schedule** in which they are open for
+**consultations**. Clients are able to view their profiles and book
+consultations.

_projects/2022-08-06-webassembly-presentation.md

@@ -1,8 +1,7 @@
 ---
 title: WebAssembly presentation
 displayed: true
-description: A presentation about what WebAssembly is about and how it might
-  affect the future of the world.
+link: https://michalvankodev.github.io/presentation-webassembly/
 cover_image: /images/uploads/screenshot-from-2024-08-06-18-52-41.png
 classification: presentation
 tags:
@@ -10,3 +9,5 @@ tags:
   - WebAssembly
 featured: false
 ---
+A presentation about what WebAssembly is about and how it might
+affect the future of the world.

_projects/2023-04-06-the-grand-escape.md

@@ -0,0 +1,14 @@
+---
+title: The Grand Escape
+displayed: true
+link: https://michalvankodev.itch.io/the-grand-escape
+cover_image: /images/uploads/logo.png
+classification: videogame
+tags:
+  - Rust
+  - Bevy
+featured: true
+---
+A videogame where you need to steer your boat to avoid obstacles
+and enemy bullets. The difficulty will be increased after a certain time and
+new enemies will be spawned to make your escape harder.

_projects/2024-04-23-renaissance-of-hypermedia-systems-1.md

@@ -1,8 +1,6 @@
 ---
 title: Renaissance of hypermedia systems
 displayed: true
-description: A presentation about hypermedia systems, HTMX, HyperView, and the
-  HATEOAS principles. 2024
 link: https://michalvankodev.github.io/presentation-renaissance-of-hypermedia-systems/#/intro
 cover_image: /images/uploads/screenshot-from-2024-08-06-19-01-03.png
 classification: presentation
@@ -12,3 +10,5 @@ tags:
   - HTMX
 featured: true
 ---
+A presentation about hypermedia systems, HTMX, HyperView, and the
+HATEOAS principles. 2024

_projects/2024-08-06-beinsports.md

@@ -1,12 +0,0 @@
----
-title: beinSports
-displayed: true
-description: "*beIN Sports* is a global network of sports channels jointly owned
-  and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media
-  Networks*"
-cover_image: /images/uploads/bein_logo.af017869.webp
-classification: website
-tags:
-  - Freemarker
-featured: false
----

_projects/2024-08-06-dev-project-test.md

@@ -1,9 +1,9 @@
 ---
 title: dev project test
-displayed: true
-description: Testing project
+displayed: false
 classification: webapp
 tags:
   - Webapp
 featured: false
 ---
+Testing project

_projects/2024-08-06-fx-sales.md

@@ -1,14 +0,0 @@
----
-title: FX Sales
-displayed: true
-description: "*Caplin FX Sales* allows sales people to **trade on behalf of
-  their clients**. This needs to be an efficient workflow providing all the
-  relevant information to the sales user"
-cover_image: /images/uploads/fx_sales_screen2x.png
-classification: webapp
-tags:
-  - Webapp
-  - React
-  - Knockout
-featured: false
----

_projects/2024-08-06-heylady.md

@@ -1,8 +1,7 @@
 ---
 title: HeyLady!
 displayed: true
-description: A thriving online community supporting women to learn and practise
-  speaking English.
+link: https://www.heylady.io/
 cover_image: /images/uploads/heyladylogo.svg
 classification: webapp
 tags:
@@ -14,3 +13,5 @@ tags:
   - PostgreSQL
 featured: false
 ---
+A thriving online community supporting women to learn and practise
+speaking English.

_projects/2024-08-06-livesport-tv.md

@@ -1,10 +0,0 @@
----
-title: Livesport.tv
-displayed: false
-description: "*Livesport.tv* is a network of premium online sports channels,
-  featuring all the top sports competitions from around the world."
-classification: website
-tags:
-  - Freemarker
-featured: false
----

_projects/2024-08-06-manualogic.md

@@ -1,14 +0,0 @@
----
-title: Manualogic
-displayed: false
-description: "*Manualogic* is a **single-page application** for product manual
-  creators. It contains **custom web editor** and management system of
-  **translatable pages, books** and **products.** Its main goal is to enable
-  customers to get manuals of their products in digital form."
-classification: webapp
-tags:
-  - Webapp
-  - Angular
-  - RxJS
-featured: false
----

_projects/2024-08-06-responzio.md

@@ -1,14 +0,0 @@
----
-title: responzIO
-displayed: true
-description: "***responzIO*** is a smart, easy-to-use monitoring and automation
-  system. The ultimate tool for various applications such as hydroponics,
-  aquariums, and gardens."
-cover_image: /images/uploads/responzio.png
-classification: embedded
-tags:
-  - Webapp
-  - Embedded
-  - NodeJS
-featured: false
----

_projects/2024-08-06-signal-hub-manager.md

@@ -1,13 +0,0 @@
----
-title: Signal Hub Manager
-displayed: true
-description: "*Signal Hub* is an end-to-end **Big Data analytics platform** for
-  large enterprises. It accelerates the process of extracting insights and
-  intelligence from large volumes of data, including data of different types and
-  in different formats."
-classification: webapp
-tags:
-  - Webapp
-  - React
-featured: false
----

_projects/2024-08-06-skosy.md

@@ -1,10 +0,0 @@
----
-title: Skosy
-displayed: false
-description: "*Skosy* is a web application whose purpose is to **automate the
-  writing of integration tests** for websites."
-classification: webapp
-tags:
-  - Webapp
-featured: false
----

_projects/2024-08-06-spreading-the-web.md

@@ -1,13 +0,0 @@
----
-title: Spreading the Web
-displayed: true
-description: A presentation about the rising number of use cases for utilizing
-  web technologies outside of the web platform such as native mobile
-  applications and robotics. 2015
-cover_image: /images/uploads/screenshot-from-2024-08-06-18-48-02.png
-classification: presentation
-tags:
-  - Presentation
-  - NodeJS
-featured: false
----

_projects/2024-08-06-the-grand-escape.md

@@ -1,14 +0,0 @@
----
-title: The Grand Escape
-displayed: true
-description: A videogame where you need to steer your boat to avoid obstacles
-  and enemy bullets. The difficulty will be increased after a certain time and
-  new enemies will be spawned to make your escape harder.
-link: https://michalvankodev.itch.io/the-grand-escape
-cover_image: /images/uploads/logo.png
-classification: videogame
-tags:
-  - Rust
-  - Bevy
-featured: true
----

_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md

@@ -1,12 +0,0 @@
----
-title: Unstoppable growth of front-end frameworks
-displayed: true
-description: A simple summary of the web front-end evolution. Describes how and
-  why new tools in the NodeJS ecosystem improve & why there is still something
-  to explore.
-classification: presentation
-tags:
-  - Presentation
-  - NodeJS
-featured: false
----

axum_server/.cargo/config.toml

@@ -1,2 +0,0 @@
-[build]
-rustflags = ["-Clink-arg=-fuse-ld=lld", "-Ctarget-cpu=native"]

axum_server/Cargo.toml

@@ -23,18 +23,19 @@ tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 image = "0.25.2"
 anyhow = "1.0.86"
 rayon = "1.10.0"
+syntect = "5.2.0"
+indoc = "2.0.5"
 
 [build]
 rustflags = ["-Z", "threads=8"]
 
-[target.x86_64-unknown-linux-gnu]
-rustflags = [
-    "-C", "link-arg=-fuse-ld=lld"
-]
-
+# [target.x86_64-unknown-linux-gnu]
+# rustflags = [
+#     "-C", "link-arg=-fuse-ld=lld"
+# ]
 
 [profile.dev]
-debug = false
+debug = true
 opt-level = 0
 # codegen-units = 16
 # lto = "thin"

axum_server/docs/cicd_pipeline.md

@@ -0,0 +1,25 @@
+# CI/CD Pipeline
+
+Gitea server for production.
+
+Github actions for build and release.
+Release -> Publish.
+
+## Build step
+
+1. Compile project
+2. Run in production mode
+3. wget command to download and create a static site.
+  a) ensure every image is downloaded and created / we can create a cache mechanism to download images from previous build / save a ton of time
+4. Backup old version
+5. Publish new version
+
+
+## Development
+
+1. Build the project
+2. Wget cannot be run on dev server due to tower reload
+
+## TODO
+
+- Some weird links (Colemak)

axum_server/justfile

@@ -46,15 +46,27 @@ wait_for_port:
 
 # Kill the application running on port
 kill:
-	kill $(lsof -t -i:{{port}})
+	kill $(pidof axum_server)
 
 # Clean the dist folder
 clean:
 	rm -rf dist
 
+# SSG
+ssg:
+	- wget --no-convert-links -r -p -E -P dist --no-host-directories 127.0.0.1:{{port}}
+	- wget -P dist/svg 127.0.0.1:{{port}}/svg/icons-sprite.svg
+  
+# Preview server
+preview:
+  npx http-server dist
+
 # SSG export of production server
 export: clean
 	just prod &
 	just wait_for_port
-	- wget --convert-links -r -p --level 1 -E -P dist --no-host-directories localhost:{{port}}
+	just ssg
 	just kill
+
+deploy:
+ rsync -avz -e ssh ./dist/ michalvanko@katelyn:.config/containers/systemd/michalvankodev-site/dist/ 

axum_server/missing_lfs_files.txt

@@ -0,0 +1,17 @@
+
+  (missing) static/images/uploads/20220212_120400.jpg (39d71161bfa42ccf425efe4c3505fe1f208401e7e7d6de1372585c3706f5bf92)
+  (missing) static/images/uploads/20220422_214530.jpg (3b965dd36c86cb60275d738b2ce36f6f513b37da860a40b8f27a76bc0e2c7f2b)
+  (missing) static/images/uploads/2020-03-23_20-24-15_387.jpg (62700bb93b007c76366bffc02f6596aedc23ab9536b377e063593f5e758ebc7e)
+  (missing) static/images/m-logo.png (a1d7e8031e1f09c024830822233b4f852ce3293ca4cf6ca1cb9c606bfd57cc7f)
+  (missing) static/images/uploads/img_7631.jpg (5f3d9c43d98184f01ca958c9d7a4c9a1d128a3536d715ea29b63f3acdb9f5098)
+  (missing) static/eye.png (6b639bd6eb9df5dbaa73508c9afb8fa78959ebc06edb2c8ee8130000a7d4eb89)
+  (missing) static/images/uploads/2020-03-23_20-24-18-981.jpg (c16bd70dfca5b8c44e1a0d9c9a4574b495ac037d8683fae3a744290a5cac33db)
+  (missing) static/images/uploads/img_20200301_171735.jpg (beeae37c0f079d89dcfe514738166a44025538542b5c68b4c4c8a188ead8f986)
+  (missing) static/images/uploads/2020-03-23_20-24-13_625.jpg (31fc6afbb95e85cef4de53f98a44d98362f7e8e52725071372d35df4830c90bb)
+  (missing) static/m-favicon-192x192.png (02c48e4e9a67e68a3c9458a90adf7b21a915991057d33fc606eda14abb9c4dc8)
+  (missing) static/images/uploads/img_7709.jpg (f36abe313b43ce98cacb04b8a05dc4d3ca44c81c18ff3c7bf42b0434427d8129)
+  (missing) static/images/uploads/screenshot.gif (b6d76282012e22b320b9ee999b59ef0dfacf376f4f8f91a0fc100a7008d7d2cc)
+  (missing) static/images/uploads/2020-03-23_20-24-06_393.jpg (270c974391f02bf081038e1064ebc6b7ffaba5cfc4660af08d807b73d7bc880d)
+  (missing) static/images/uploads/2020-03-23_20-24-08_235.jpg (17669b583dff420e3a8871b8e94b8ddf1f46c3a2b327063e64a66dd3f16ea464)
+  (missing) static/images/uploads/img_7108.jpg (1a81e61af8c48f16d774f93e77182eeec282ab5de5473f4e895035972a111190)
+  (missing) static/images/uploads/img_7116.jpg (53159f319a0f006239a6fb2e21534838f9ae311fed6d6fa9664ef77c1588b2fc)

axum_server/src/filters.rs

@@ -8,10 +8,10 @@ pub fn pretty_date(date_time: &DateTime<Utc>) -> ::askama::Result<String> {
 }
 
 // This filter does not have extra arguments
-pub fn description_filter(body: &String) -> ::askama::Result<String> {
+pub fn description_filter(body: &str) -> ::askama::Result<String> {
     let description = body
         .lines()
-        .filter(|line| line.starts_with("<p"))
+        .filter(|line| line.starts_with("<p>"))
         .take(2)
         .collect::<Vec<&str>>()
         .join("\n");

axum_server/src/main.rs

@@ -1,6 +1,7 @@
 use axum::{self};
 use tower_http::services::ServeDir;
 use tower_livereload::LiveReloadLayer;
+use tracing::info;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod blog_posts;
@@ -31,8 +32,10 @@ async fn main() {
     let app = router::get_router()
         .nest_service("/styles", ServeDir::new("styles"))
         .nest_service("/images", ServeDir::new("../static/images"))
+        .nest_service("/fonts", ServeDir::new("../static/fonts"))
         .nest_service("/generated_images", ServeDir::new("generated_images"))
         .nest_service("/svg", ServeDir::new("../static/svg"))
+        // TODO manifest logos have bad link, #directory-swap
         .nest_service(
             "/config.yml",
             ServeDir::new("../static/resources/config.yml"),
@@ -44,10 +47,18 @@ async fn main() {
     // run our app with hyper, listening globally on port 3080
     let port = std::option_env!("PORT").unwrap_or("3080");
     let addr = format!("0.0.0.0:{}", port);
-    let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
+    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
+    info!("axum_server listening on http://{}", &addr);
     axum::serve(listener, app).await.unwrap();
 }
 
-// TODO Display blog posts
-// TODO responsive design
-// TODO go live pipeline
+// TODO Socials
+// - fotos
+// background gradient color
+// TODO Change DNS system
+// THINK deploy to alula? rather then katelyn? can be change whenever
+// TODO after release
+// OG tags
+// Remove old web completely
+// Restructure repository
+// - projects page

axum_server/src/pages/blog_post_list.rs

@@ -1,20 +1,27 @@
 use askama::Template;
 use axum::{extract::Path, http::StatusCode};
+use tokio::try_join;
 
 use crate::{
-    blog_posts::blog_post_model::{BlogPostMetadata, BLOG_POST_PATH},
+    blog_posts::{
+        blog_post_model::{BlogPostMetadata, BLOG_POST_PATH},
+        tag_list::get_popular_blog_tags,
+    },
     components::site_header::{HeaderProps, Link},
     filters,
     post_utils::{post_listing::get_post_list, post_parser::ParseResult},
+    projects::{featured_projects::get_featured_projects, project_model::ProjectMetadata},
 };
 
 #[derive(Template)]
-#[template(path = "post_list.html")]
+#[template(path = "blog_post_list.html")]
 pub struct PostListTemplate {
     pub title: String,
     pub posts: Vec<ParseResult<BlogPostMetadata>>,
     pub tag: Option<String>,
     pub header_props: HeaderProps,
+    pub blog_tags: Vec<String>,
+    pub featured_projects: Vec<ParseResult<ProjectMetadata>>,
 }
 
 pub async fn render_blog_post_list(
@@ -23,7 +30,12 @@ pub async fn render_blog_post_list(
     // I will forget what happens here in a week. But essentially it's pattern matching and shadowing
     let tag = tag.map(|Path(tag)| tag);
 
-    let mut post_list = get_post_list::<BlogPostMetadata>(BLOG_POST_PATH).await?;
+    let (blog_tags, featured_projects, mut post_list) = try_join!(
+        get_popular_blog_tags(),
+        get_featured_projects(),
+        get_post_list::<BlogPostMetadata>(BLOG_POST_PATH)
+    )?;
+
     post_list.sort_by_key(|post| post.metadata.date);
     post_list.retain(|post| post.metadata.published);
     post_list.reverse();
@@ -52,9 +64,11 @@ pub async fn render_blog_post_list(
     };
 
     Ok(PostListTemplate {
-        title: "Posts".to_owned(),
+        title: "Blog posts".to_owned(),
         posts,
         tag,
         header_props,
+        blog_tags,
+        featured_projects,
     })
 }

axum_server/src/pages/mod.rs

@@ -3,3 +3,4 @@ pub mod blog_post_list;
 pub mod blog_post_page;
 pub mod contact;
 pub mod index;
+pub mod project_list;

axum_server/src/pages/project_list.rs

@@ -0,0 +1,30 @@
+use askama::Template;
+use axum::http::StatusCode;
+
+use crate::{
+    components::site_header::HeaderProps,
+    post_utils::{post_listing::get_post_list, post_parser::ParseResult},
+    projects::project_model::ProjectMetadata,
+};
+
+#[derive(Template)]
+#[template(path = "project_list.html")]
+pub struct ProjectListTemplate {
+    pub title: String,
+    pub project_list: Vec<ParseResult<ProjectMetadata>>,
+    pub header_props: HeaderProps,
+}
+
+pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
+    let mut project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
+
+    project_list.sort_by_key(|post| post.slug.to_string());
+    project_list.retain(|project| project.metadata.displayed);
+    project_list.reverse();
+
+    Ok(ProjectListTemplate {
+        title: "Showcase".to_owned(),
+        header_props: HeaderProps::default(),
+        project_list,
+    })
+}

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -5,6 +5,7 @@ use std::{
 
 use anyhow::Context;
 use image::{image_dimensions, ImageReader};
+use indoc::formatdoc;
 
 use super::{
     export_format::ExportFormat, image_generator::generate_images,
@@ -18,16 +19,34 @@ pub fn generate_picture_markup(
     width: u32,
     height: u32,
     alt_text: &str,
+    class_name: Option<&str>,
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+    let class_attr = if let Some(class) = class_name {
+        format!(r#"class="{class}""#)
+    } else {
+        "".to_string()
+    };
+
+    if exported_formats.is_empty() {
+        return Ok(formatdoc!(
+            r#"<img
+            src="{orig_img_path}"
+            width="{width}"
+            height="{height}"
+            {class_attr}
+            alt="{alt_text}"
+        >"#
+        ));
+    }
     let path_to_generated = get_generated_file_name(orig_img_path);
 
-    // TODO This should get removed when we move the project structure #move
-    let dev_only_img_path =
+    // TODO This should get removed when we move the project structure #directory-swap
+    let disk_img_path =
         Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
 
-    let orig_img_dimensions = image_dimensions(&dev_only_img_path).unwrap();
+    let orig_img_dimensions = image_dimensions(&disk_img_path)?;
     let resolutions = get_resolutions(orig_img_dimensions, width, height);
 
     let path_to_generated_arc = Arc::new(path_to_generated);
@@ -39,8 +58,8 @@ pub fn generate_picture_markup(
 
     if generate_image {
         rayon::spawn(move || {
-            let orig_img = ImageReader::open(&dev_only_img_path)
-                .with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path))
+            let orig_img = ImageReader::open(&disk_img_path)
+                .with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
                 .unwrap()
                 .decode()
                 .unwrap();
@@ -66,7 +85,7 @@ pub fn generate_picture_markup(
         .map(|format| {
             let srcset = generate_srcset(&path_to_generated, format, &resolutions);
             let format_type = format.get_type();
-            format!(
+            formatdoc!(
                 r#"<source
                 srcset="{srcset}"
                 type="{format_type}"
@@ -81,16 +100,17 @@ pub fn generate_picture_markup(
         resolutions.first().expect("Should this error ever happen?"),
         exported_formats.last().expect("Can this one ever happen?"),
     );
-    let image_tag = format!(
+    let image_tag = formatdoc!(
         r#"<img
             src="{image_path}"
             width="{width}"
             height="{height}"
             alt="{alt_text}"
+            {class_attr}
         >"#
     );
 
-    let result = format!(
+    let result = formatdoc!(
         r#"<picture>
             {source_tags}
             {image_tag}
@@ -234,8 +254,11 @@ fn get_export_formats(orig_img_path: &str) -> Vec<ExportFormat> {
         .and_then(|ext| ext.to_str());
 
     match path {
-        Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
-        Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
+        // THINK: Do we want to enable avif? It's very expensive to encode
+        // Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
+        // Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
+        Some("jpg" | "jpeg") => vec![ExportFormat::Jpeg],
+        Some("png") => vec![ExportFormat::Png],
         Some(_) | None => vec![],
     }
 }
@@ -269,10 +292,12 @@ fn test_generate_srcset() {
 
 #[test]
 fn test_generate_picture_markup() {
+    use indoc::indoc;
     let width = 300;
     let height = 200;
     let orig_img_path = "/images/uploads/2020-03-23_20-24-06_393.jpg";
-    let result = r#"<picture>
+    let result = indoc! {
+        r#"<picture>
             <source
                 srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.avif 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.avif 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.avif 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.avif 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.avif 4x"
                 type="image/avif"
@@ -287,10 +312,18 @@ fn test_generate_picture_markup() {
             height="200"
             alt="Testing image alt"
         >
-        </picture>"#;
+        </picture>"#,
+    };
     assert_eq!(
-        generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
-            .expect("picture markup has to be generated"),
+        generate_picture_markup(
+            orig_img_path,
+            width,
+            height,
+            "Testing image alt",
+            None,
+            false
+        )
+        .expect("picture markup has to be generated"),
         result
     );
 }

axum_server/src/post_utils/post_parser.rs

@@ -1,19 +1,22 @@
+use core::panic;
 use std::path::Path;
 
 use axum::http::StatusCode;
 use chrono::{DateTime, Utc};
 use gray_matter::{engine::YAML, Matter};
 use image::image_dimensions;
-use pulldown_cmark::{Event, Options, Parser, Tag, TagEnd};
+use indoc::formatdoc;
+use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd};
 use serde::{de::DeserializeOwned, Deserialize, Deserializer};
+use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet};
 use tokio::fs;
-use tracing::debug;
+use tracing::{debug, error, info};
 
 use crate::picture_generator::{
     picture_markup_generator::generate_picture_markup, resolutions::get_max_resolution,
 };
 
-pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1000, 800);
+pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1280, 860);
 
 pub fn deserialize_date<'de, D>(deserializer: D) -> Result<DateTime<Utc>, D::Error>
 where
@@ -68,6 +71,12 @@ pub async fn parse_post<'de, Metadata: DeserializeOwned>(
     })
 }
 
+enum TextKind {
+    Text,
+    Heading(Option<String>),
+    Code(String),
+}
+
 pub fn parse_html(markdown: &str, generate_images: bool) -> String {
     let mut options = Options::empty();
     options.insert(Options::ENABLE_TABLES);
@@ -77,6 +86,12 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
     options.insert(Options::ENABLE_SMART_PUNCTUATION);
     options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
 
+    let mut text_kind = TextKind::Text;
+    let syntax_set = SyntaxSet::load_defaults_newlines();
+    let theme_set = ThemeSet::load_defaults();
+    let theme = theme_set.themes.get("InspiredGitHub").unwrap();
+    let mut heading_ended: Option<bool> = None;
+
     let parser = Parser::new_ext(markdown, options).map(|event| match event {
         /*
         Parsing images considers `alt` attribute as inner `Text` event
@@ -91,7 +106,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
         }) => {
             if !dest_url.starts_with("/") {
                 return Event::Html(
-                    format!(
+                    formatdoc!(
                         r#"<img
                           alt="{title}"
                           src="{dest_url}"
@@ -112,33 +127,29 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             );
 
             // Place image into the content with scaled reso to a boundary
-            let picture_markup =
-                generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
-                    .unwrap_or(format!(
-                        r#"
+            let picture_markup = generate_picture_markup(
+                &dest_url,
+                max_width,
+                max_height,
+                &title,
+                None,
+                generate_images,
+            )
+            .unwrap_or(formatdoc!(
+                r#"
                         <img
                           alt="{alt}"
                           src="{src}"
                         />"#,
-                        alt = title,
-                        src = dest_url,
-                    ));
-            // let picture_markup = format!(
-            //     r#"
-            //             <img
-            //               alt="{alt}"
-            //               src="{src}"
-            //             />"#,
-            //     alt = title,
-            //     src = dest_url,
-            // );
-
+                alt = title,
+                src = dest_url,
+            ));
             debug!(
                 "Image link_type: {:?} url: {} title: {} id: {}",
                 link_type, dest_url, title, id
             );
             Event::Html(
-                format!(
+                formatdoc!(
                     r#"<figure>
                         {picture_markup}
                         <figcaption>
@@ -147,8 +158,75 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                 .into(),
             )
         }
+        Event::Start(Tag::CodeBlock(CodeBlockKind::Fenced(lang))) => {
+            text_kind = TextKind::Code(lang.to_string());
+            Event::Start(Tag::CodeBlock(CodeBlockKind::Fenced(lang)))
+        }
+        Event::Text(text) => match &text_kind {
+            TextKind::Code(lang) => {
+                // TODO Check https://github.com/trishume/syntect/pull/535 for typescript support
+                let lang = if ["ts".to_string(), "typescript".to_string()].contains(lang) {
+                    "javascript"
+                } else {
+                    lang
+                };
+                let syntax_reference = syntax_set
+                    .find_syntax_by_token(lang)
+                    .unwrap_or(syntax_set.find_syntax_plain_text());
+                let highlighted =
+                    highlighted_html_for_string(&text, &syntax_set, syntax_reference, theme)
+                        .unwrap();
+                Event::Html(highlighted.into())
+            }
+            TextKind::Heading(provided_id) => {
+                let heading_id = provided_id.clone().unwrap_or({
+                    text.to_lowercase()
+                        .replace(|c: char| !c.is_alphanumeric(), "-")
+                });
+                debug!("heading_id: {}", heading_id.clone());
+                match heading_ended {
+                    None => {
+                        error!("Heading should have set state");
+                        panic!("Heading should have set state");
+                    }
+                    Some(true) => Event::Html(text),
+                    Some(false) => {
+                        heading_ended = Some(true);
+                        Event::Html(
+                            formatdoc!(
+                                r##"id="{heading_id}">
+                            {text}"##
+                            )
+                            .into(),
+                        )
+                    }
+                }
+            }
+            _ => Event::Text(text),
+        },
+        Event::Start(Tag::Heading {
+            level,
+            id,
+            classes: _,
+            attrs: _,
+        }) => {
+            let id_str = id.map(|id| id.to_string());
+            debug!("heading_start: {:?}, level: {}", &id_str, level);
+            text_kind = TextKind::Heading(id_str);
+            heading_ended = Some(false);
+            Event::Html(format!("<{level} ").into())
+        }
         Event::Start(_) => event,
         Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
+        Event::End(TagEnd::CodeBlock) => {
+            text_kind = TextKind::Text;
+            Event::End(TagEnd::CodeBlock)
+        }
+        Event::End(TagEnd::Heading(heading_level)) => {
+            text_kind = TextKind::Text;
+            heading_ended = None;
+            Event::End(TagEnd::Heading(heading_level))
+        }
         _ => event,
     });
 

axum_server/src/projects/featured_projects.rs

@@ -1,9 +1,6 @@
 use axum::http::StatusCode;
 
-use crate::post_utils::{
-    post_listing::get_post_list,
-    post_parser::{parse_html, ParseResult},
-};
+use crate::post_utils::{post_listing::get_post_list, post_parser::ParseResult};
 
 use super::project_model::ProjectMetadata;
 
@@ -13,10 +10,6 @@ pub async fn get_featured_projects() -> Result<Vec<ParseResult<ProjectMetadata>>
     let featured_projects = project_list
         .into_iter()
         .filter(|post| post.metadata.featured)
-        .map(|mut post| {
-            post.metadata.description = parse_html(&post.metadata.description, false);
-            post
-        })
         .collect();
 
     Ok(featured_projects)

axum_server/src/projects/project_model.rs

@@ -3,7 +3,6 @@ use serde::Deserialize;
 #[derive(Deserialize, Debug)]
 pub struct ProjectMetadata {
     pub title: String,
-    pub description: String,
     pub classification: String,
     pub displayed: bool,
     pub cover_image: Option<String>,
@@ -18,6 +17,7 @@ pub fn translate_classification(classification: &str) -> &str {
         "website" => "Web site",
         "presentation" => "Presentation",
         "videogame" => "Video game",
+        "embedded" => "Embedded system",
         any => any,
     }
 }

axum_server/src/router.rs

@@ -3,6 +3,7 @@ use crate::{
     pages::{
         admin::render_admin, blog_post_list::render_blog_post_list,
         blog_post_page::render_blog_post, contact::render_contact, index::render_index,
+        project_list::render_projects_list,
     },
 };
 use axum::{extract::MatchedPath, http::Request, routing::get, Router};
@@ -16,6 +17,7 @@ pub fn get_router() -> Router {
         .route("/blog/tags/:tag", get(render_blog_post_list))
         .route("/blog/:post_id", get(render_blog_post))
         .route("/contact", get(render_contact))
+        .route("/showcase", get(render_projects_list))
         .route("/admin", get(render_admin))
         .route("/feed.xml", get(render_rss_feed))
         .layer(

axum_server/styles/input.css

@@ -2,42 +2,289 @@
 @tailwind components;
 @tailwind utilities;
 
-a {
-  @apply text-pink-600 underline underline-offset-2;
-
-  &:hover {
-    @apply transition text-blue-400;
+@layer base {
+  @font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src:
+      local('Comfortaa Light'),
+      local('Comfortaa'),
+      url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
+      url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
   }
+  @font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src:
+      local('Comfortaa Regular'),
+      local('Comfortaa'),
+      url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
+      url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
+  }
+  @font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src:
+      local('Comfortaa Medium'),
+      local('Comfortaa'),
+      url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
+      url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
+  }
+  @font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src:
+      local('Comfortaa SemiBold'),
+      local('Comfortaa'),
+      url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
+      url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
+  }
+  @font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src:
+      local('Comfortaa Bold'),
+      local('Comfortaa'),
+      url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
+      url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
+  }
+  @font-face {
+    font-family: 'Baloo2';
+    font-style: normal;
+    font-display: swap;
+    src:
+      local('Baloo2'),
+      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
+  }
+}
+
+a {
+  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
+}
+
+strong {
+  @apply font-medium;
 }
 
 .article-body {
   h1 {
-    @apply px-4 text-2xl text-blue-900 my-2;
+    @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
   }
   h2 {
-    @apply px-4 text-xl text-blue-900 my-2;
+    @apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
   }
+
+  h3 {
+    @apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
+  }
+
+  h4 {
+    @apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
+  }
+
   p {
-    @apply px-4 my-2;
+    @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
+
   pre {
-    @apply p-4 my-1 overflow-auto text-sm;
+    @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
   }
+
   figure {
-    @apply m-4;
+    @apply p-4;
 
     img {
-      @apply rounded shadow-md;
+      @apply rounded shadow-md mx-auto lg:max-w-image;
     }
   }
   figcaption {
-    @apply mt-2 text-center text-sm italic text-blue-800;
+    @apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
   }
+
   table {
-    @apply m-2 overflow-auto text-sm;
+    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
+  }
+
+  thead {
+    @apply bg-blue-100;
+  }
+
+  tbody {
+    @apply bg-slate-50;
+  }
+
+  td,
+  th {
+    @apply py-0.5 px-2 border-b md:py-2 md:px-5;
+  }
+
+  tr {
+    @apply even:bg-slate-100;
+  }
+
+  blockquote {
+    @apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-600;
+
+    p {
+      @apply my-2 md:my-4 text-slate-600 max-w-note;
+    }
+  }
+
+  :not(pre) code {
+    @apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
+  }
+
+  pre code pre {
+    @apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
+  }
+
+  ul,
+  ol {
+    @apply pl-10 pr-6 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl lg:pl-14;
+
+    & p {
+      @apply px-2;
+    }
+  }
+
+  ul {
+    @apply list-disc;
+  }
+  ol {
+    @apply list-decimal;
+  }
+
+  iframe {
+    @apply rounded shadow-md mx-auto lg:max-w-image;
   }
 }
 
-.video-embed {
-  @apply m-4;
+article a {
+  @apply visited:text-purple-700;
+}
+
+.video-embed {
+  @apply m-4 mx-auto max-w-image aspect-video;
+}
+
+.social-card-twitch:hover {
+  transform: translate3d(0.6rem, -0.6rem, 0px);
+  box-shadow: -3px 3px 0px 3px #6441a5;
+  transition-delay: 75ms;
+}
+
+.social-card-youtube:hover {
+  @apply rounded-none;
+  transform: scale(1.02);
+  transition-delay: 100ms;
+}
+
+.social-card-instagram:hover {
+  filter: brightness(84%);
+  transition-delay: 100ms;
+}
+
+.social-card-tiktok {
+  position: relative;
+
+  &:hover {
+    animation: tiktok-glitch 1.5s infinite;
+    animation-delay: 200ms;
+  }
+}
+
+@keyframes tiktok-glitch {
+  0% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
+
+  10% {
+    box-shadow:
+      -3px -3px 0 rgba(0, 255, 255, 0.8),
+      3px 3px 0 rgba(255, 0, 255, 0.8);
+    transform: translate(-1px, -1px);
+  }
+
+  15% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.6),
+      -2px 2px 0 rgba(255, 0, 255, 0.6);
+    transform: translate(2px, -2px);
+  }
+
+  20% {
+    box-shadow:
+      -1px 1px 0 rgba(0, 255, 255, 0.4),
+      1px -1px 0 rgba(255, 0, 255, 0.4);
+    transform: translate(1px, 1px);
+  }
+
+  25% {
+    box-shadow:
+      -4px 4px 0 rgba(0, 255, 255, 1),
+      4px -4px 0 rgba(255, 0, 255, 1);
+    transform: translate(-2px, 2px);
+  }
+
+  30% {
+    box-shadow:
+      3px -3px 0 rgba(0, 255, 255, 0.5),
+      -3px 3px 0 rgba(255, 0, 255, 0.5);
+    transform: translate(3px, -3px);
+  }
+
+  40% {
+    box-shadow:
+      -2px 2px 0 rgba(0, 255, 255, 0.9),
+      2px -2px 0 rgba(255, 0, 255, 0.9);
+    transform: translate(-1px, 1px);
+  }
+
+  50% {
+    box-shadow:
+      -1px -2px 0 rgba(0, 255, 255, 0.7),
+      2px -1px 0 rgba(255, 0, 255, 0.7);
+    transform: translate(1px, -1px);
+  }
+
+  60% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.3),
+      -2px 2px 0 rgba(255, 0, 255, 0.3);
+    transform: translate(2px, -2px);
+  }
+
+  75% {
+    box-shadow:
+      -3px 3px 0 rgba(0, 255, 255, 1),
+      3px -3px 0 rgba(255, 0, 255, 1);
+    transform: translate(-3px, 3px);
+  }
+
+  85% {
+    box-shadow:
+      -2px -2px 0 rgba(0, 255, 255, 0.2),
+      2px 2px 0 rgba(255, 0, 255, 0.2);
+    transform: translate(-2px, -2px);
+  }
+
+  100% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
 }

axum_server/tailwind.config.js

@@ -1,8 +1,111 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./templates/**/*.html"],
+	content: ["./templates/**/**.html"],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				sans: [
+					"Baloo2",
+					"Comfortaa",
+					"ui-sans-serif",
+					"system-ui",
+					"sans-serif",
+					"Apple Color Emoji",
+					"Segoe UI Emoji",
+					"Segoe UI Symbol",
+					"Noto Color Emoji",
+				],
+			},
+			spacing: {
+				note: "60rem",
+				read: "64rem",
+				image: "min(70rem, 95vw)",
+				maxindex: "100rem",
+			},
+			width: {
+				note: "60rem",
+				read: "64rem",
+				image: "min(70rem, 95vw)",
+				maxindex: "100rem",
+			},
+			fontSize: {
+				readxl: [
+					"1.75rem",
+					{
+						lineHeight: "2.25rem",
+						letterSpacing: "-0.015em",
+						fontWeight: "400",
+					},
+				],
+			},
+			colors: {
+				// blue: {
+				// 	50: "#ecf6fe",
+				// 	100: "#d9edfc",
+				// 	200: "#b3dbf9",
+				// 	300: "#8ecaf6",
+				// 	400: "#68b8f3",
+				// 	500: "#42a6f0",
+				// 	600: "#3585c0",
+				// 	700: "#286490",
+				// 	800: "#1F4E71",
+				// 	900: "#173A54",
+				// 	950: "#0F2637",
+				// },
+				blue: {
+					50: "#f1f7fe",
+					100: "#e1effd",
+					200: "#bddefa",
+					300: "#82c3f7",
+					400: "#42a6f0",
+					500: "#1789e0",
+					600: "#0a6cbf",
+					700: "#0a569a",
+					800: "#0c4980",
+					900: "#103e6a",
+					950: "#0b2746",
+				},
+				// pink: {
+				// 	50: "#FFFBFE",
+				// 	100: "#FFE4F9",
+				// 	200: "#FECEF4",
+				// 	300: "#FEB8EF",
+				// 	400: "#fea6eb",
+				// 	500: "#D38AC3",
+				// 	600: "#B476A7",
+				// 	700: "#96628B",
+				// 	800: "#774E6E",
+				// 	900: "#593A52",
+				// 	950: "#3A2636",
+				// },
+				pink: {
+					50: "#fff4fd",
+					100: "#ffe7fb",
+					200: "#ffcff7",
+					300: "#fea6eb",
+					400: "#fc76dd",
+					500: "#f342ca",
+					600: "#d722a9",
+					700: "#b31889",
+					800: "#92166e",
+					900: "#771859",
+					950: "#500238",
+				},
+				purple: {
+					50: "#F8F5FC",
+					100: "#D5C2ED",
+					200: "#B28EDE",
+					300: "#8F5BCF",
+					400: "#6D30B9",
+					500: "#5F2AA2",
+					600: "#52248A",
+					700: "#441E73",
+					800: "#36185C",
+					900: "#281244",
+					950: "#1A0C2D",
+				},
+			},
+		},
 	},
 	plugins: [],
 };

axum_server/templates/base.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>{% block title %} {{title}} @michalvankodev {% endblock %}</title>
+    <title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="theme-color" content="#333333" />
@@ -13,25 +13,16 @@
       rel="alternate"
       type="application/rss+xml"
       title="RSS feed for latest posts"
-      href="https://michalvanko.dev/feed.xml"
-    />
-    <link
-      rel="alternate"
-      title="JSON feed for latest posts"
-      type="application/json"
-      href="https://michalvanko.dev/feed.json"
+      href="/feed.xml"
     />
 
     <!-- Tailwind output file -->
     <link rel="stylesheet" href="/styles/output.css" />
 
-    <link rel="stylesheet" href="/print.css" media="print" />
-    <link rel="stylesheet" href="/fonts.css" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/prism.css" />
 
-    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
-    <link rel="icon" type="image/png" href="/m-logo-192.png" />
+    <link rel="icon" type="image/svg+xml" href="/images/m-logo.svg" />
+    <link rel="icon" type="image/png" href="/images/m-logo-192.png" />
   </head>
   <body class="bg-blue-50">
     {% include "site_header.html" %}

axum_server/templates/blog_post.html

@@ -3,22 +3,25 @@
 {% block title %}{{title}}{% endblock %}
 
 {% block content %}
-<article>
-  <header class="px-4">
-  <h1 class="text-3xl text-blue-900 mb-3 font-semibold">{{title}}</h1>
+<article class="mb-6">
+  <header class="px-4 max-w-read mx-auto">
+  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
   <aside class="flex justify-between flex-row">
     {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600">
+    <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
       <span>Published on</span>
       <time datetime="{date}"> {{date|pretty_date}} </time>
     </section>
   </aside>
 </header>
 
-<section class="article-body">
-  {{body|escape("none")}}
-</section>
+  <section class="article-body">
+    {{body|escape("none")}}
+  </section>
 </article>
 
+<!-- TODO: Next recommendations for reading -->
+<!-- TODO: Bact to all posts -->
+
 {# footer #}
 {% endblock %}

axum_server/templates/blog_post_list.html

@@ -0,0 +1,59 @@
+{%- import "components/social_card.html" as sc -%}
+{% extends "base.html" %}
+{% block content %}
+
+<section id="blog-container" class="lg:grid lg:grid-cols-[2fr_1fr] lg:grid-rows-[min-content_1fr] lg:gap-x-32 max-w-maxindex mx-auto">
+  <section id="blog-list" class="lg:row-span-2">
+    {% if posts.len() == 0 %}
+    <p class="no-posts">You've found void in the space.</p>
+    {% else %}
+    <h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
+    {% if let Some(t) = tag %}
+    #{{t}} 
+    {% else %}
+     Blog posts
+    {% endif %}
+    </h1>
+
+    <section id="blog-tags">
+      <ul class="mx-5">
+       {% for tag in blog_tags %}
+        <li class="inline-block mx-0.5 p-0.5 md:text-xl">
+          <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <hr class="border-slate-300 m-5 md:my-8">
+
+    <ul class="mx-5">
+      {% for post in posts %}
+      <li>
+        {% include "components/blog_post_preview.html" %}
+        <hr class="border-slate-300 my-5 md:my-8">
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </section> <!-- /#blog-list -->
+  <section id="socials" class="hidden lg:block">
+    {% include "sections/social.html" %}
+  </section> <!-- /#socials -->
+  
+  <section id="showcase" class="hidden lg:block">
+    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
+
+    <ul class="mx-6">
+     {% for project in featured_projects %}
+      <li class="my-4">
+        {% include "components/project_preview_card.html" %}
+      </li>
+     {% endfor %}
+    </ul>
+    <section class="text-center my-3 md:text-lg">
+     <a href="/showcase">check out more projects</a> 
+    </section>
+  </section> <!-- /#showcase -->
+</section> <!-- /#blog-container -->
+{% endblock %}

axum_server/templates/components/blog_post_default_thumbnail.html

@@ -0,0 +1,3 @@
+<div class="w-[180px] h-[240px] bg-blue-100 flex justify-center items-center">
+  <span class="text-blue-500 text-8xl -translate-y-1.5">{{post.metadata.title|fmt("{:.1}")|lower}}</span>
+</div> 

axum_server/templates/components/blog_post_preview.html

@@ -1,17 +1,21 @@
-<article class="grid grid-cols-[max-content_1fr] grid-flow-col gap-4">
-	<aside class="row-span-3">
+<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
+	<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
-		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap()|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
-		<div> TODO default obrazok </div>
+		<div> 
+			{% include "components/blog_post_default_thumbnail.html" %}
+		</div>
 		{% endmatch %}
 	</aside>
 	<header>
-		<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3>
+		<h3 class="text-lg font-bold mb-1 md:text-3xl">
+		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 visited:text-purple-700 no-underline">{{post.metadata.title}}</a>
+		</h3>
 	</header>
-	<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
-	<footer class="text-sm">
+	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0 clear-both sm:clear-none">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">

axum_server/templates/components/project_preview_card.html

@@ -1,6 +1,6 @@
-<article class="border rounded-md bg-white m-4 p-4">
+<section class="border rounded-md bg-white p-4 break-inside-avoid">
   <header class="px-4 mb-3"> 
-    <h2 class="text-xl font-semibold text-blue-900">
+    <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
       {% when Some with (href) %}
       <a href="{{href}}" class="text-blue-900 no-underline">
@@ -10,31 +10,32 @@
       {{project.metadata.title}}
       {% endmatch %}
     </h2>
-    <p class="text-gray-800 text-lg my-2">
-      {{project.metadata.description|safe}}
-    </p>
+    <section class="description text-slate-800 my-2 md:text-xl text-justify">
+      {{project.body|safe}}
+    </section>
   </header>
   <!-- <hr class="border-blue-950 my-5"> -->
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  <figure class="mx-4 my-2">
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
+  <figure class="mx-4 my-2 flex justify-center">
       {% match project.metadata.link %}
       {% when Some with (href) %}
       <a href="{{href}}">
-        <img src="{{source}}" class="object-contain w-full aspect-video"/>
+       {{picture|safe}}
       </a>
       {% when None %}
-      <img src="{{source}}" />
+       {{picture|safe}}
       {% endmatch %}
-		<!-- TODO <figure> -->
+		<!-- TODO <figure> generate_image -->
   </figure>
   {% when None %}
   {% endmatch %}
 
 
-	<footer class="text-sm px-4">
-    <h3 class="text-xl font-semibold text-blue-900 my-2">
+	<footer class="text-sm px-4 md:text-base">
+    <h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
       {{crate::projects::project_model::translate_classification(project.metadata.classification)}}
     </h3>
     <ul class="inline-block">
@@ -45,4 +46,4 @@
       {% endfor %}
     </ul>
 	</footer>
-</article>
+</section>

axum_server/templates/components/social_card.html

@@ -1,15 +1,14 @@
-{% macro social_card_start(svg, heading) %}
+{% macro social_card_start(svg, url, heading, img, class) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4">
+<a href="{{url}}" class="block no-underline border rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
 	<header class="flex text-center justify-center items-center gap-2 mb-2">
 		 <svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
-		<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
+		<h3 class="text-lg font-medium mb-1 text-blue-950 visited:text-blue-950">{{heading|safe}}</h3>
 	</header>
+	{% let alt_text = format!("{svg} thumbnail") %}
 
-{% endmacro %}
-
-{% macro social_card_end() %}
-	</section>
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 360, 128, alt_text, Some("h-auto mx-auto rounded-sm"), true).unwrap_or("thumbnail not found".to_string())|safe }}
+</a>
 {% endmacro %}

axum_server/templates/components/talent_card.html

@@ -1,16 +1,16 @@
 {% macro talent_card(svg, heading, description) %}
 
-<section class="flex border rounded bg-white m-4 p-3">
+<section class="flex border rounded bg-white m-4 p-3 max-w-[32rem]">
 	<aside class="flex justify-center items-center pr-3">
-	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
+	  <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
 	</aside>
 	<section>
 		<header>
-			<h3 class="text-lg font-medium mb-1">{{heading}}</h3>
+			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
 		</header>
-		<p class="text-sm leading-5 text-gray-800">{{description|safe}}</p>
+		<p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
 	</section>
 </section>
 

axum_server/templates/components/terminal.svg

@@ -0,0 +1,32 @@
+<svg
+  width="200"
+  height="150"
+  viewBox="0 0 200 150"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="none"
+  stroke-width="0"
+>
+  <!-- Background of the terminal window -->
+  <rect x="10" y="10" width="180" height="130" rx="8" ry="8" fill="#F5F5F5" />
+
+  <!-- Close, Minimize, Maximize buttons (moved to the right side) -->
+  <circle cx="155" cy="25" r="5" fill="#FF5F56" />
+  <circle cx="175" cy="25" r="5" fill="#FFBD2E" />
+  <circle cx="195" cy="25" r="5" fill="#27C93F" />
+
+  <!-- Terminal Text (Example commands, updated to dark color for light theme) -->
+  <text x="20" y="55" font-family="monospace" font-size="12" fill="#333333">
+    $ ls -l
+  </text>
+  <text x="20" y="75" font-family="monospace" font-size="12" fill="#333333">
+    Desktop Documents Downloads
+  </text>
+  <text x="20" y="95" font-family="monospace" font-size="12" fill="#333333">
+    Music Pictures Videos
+  </text>
+  <text x="20" y="115" font-family="monospace" font-size="12" fill="#333333">
+    $
+  </text>
+</svg>
+

axum_server/templates/contact.html

@@ -1,25 +1,27 @@
 {% extends "base.html" %}
 {% block content %} 
 
-<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
-  Contact
-</h1>
+<section id="contact-page">
+  <h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold lg:mx-auto max-w-read">
+    Contact
+  </h1>
 
-<ul class="mx-6">
-  {% for link in links %}
-  <li class="my-6">
-    <a
-      class="flex border-2 place-content-center items-center rounded-full border-blue-500 py-5 hover:bg-pink-200 transition-colors"
-      href="{{link.href}}"
-      title="{{link.title}}"
-    >
-      <svg aria-hidden="true" class="h-6 w-6 fill-blue-950 mx-2">
-        <use xlink:href="/svg/icons-sprite.svg#{{link.svg}}" />
-      </svg>
-      <span class="text-lg font-semibold">{{link.label}}</span>
-    </a>
-  </li>
-  {% endfor %}
-</ul>
+  <ul class="mx-6">
+    {% for link in links %}
+    <li class="my-2 sm:my-4 lg:my-6 max-w-[32rem] mx-auto">
+      <a
+        class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 sm:py-4 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
+        href="{{link.href}}"
+        title="{{link.title}}"
+      >
+        <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
+          <use xlink:href="/svg/icons-sprite.svg#{{link.svg}}" />
+        </svg>
+        <span class="text-lg font-semibold">{{link.label}}</span>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</section>
 
 {% endblock %}

axum_server/templates/index.html

@@ -5,131 +5,77 @@
 {% block title %}Introduction{% endblock %}
 
 {% block content %}
-<header class="index-header hidden">
-  <figure class="profile-pic">
-    <picture>
-      <img
-        alt="Portrait"
-        {# TODO generate `srcset` for optimal image #}
-        {# TODO Take a new photo #}
-        src="/images/profile-portugal-landscape.jpg"
-      />
-    </picture>
-  </figure>
+<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
+  <section id="about-me">
+    <!-- <header class="index-header hidden"> -->
+      <!-- <figure class="profile-pic"> -->
+        <!-- <picture> -->
+          <!-- <img -->
+            <!-- alt="Portrait" -->
+            <!-- {# TODO Take a new photo #} -->
+            <!-- src="/images/profile-portugal-landscape.jpg" -->
+          <!-- /> -->
+        <!-- </picture> -->
+      <!-- </figure> -->
 
-  <p class="motto">
-    <cite>“Let your ambition carry you.”</cite>
-    <span class="cite-owner">- La Flame</span>
-  </p>
-</header>
+      <!-- <p class="motto"> -->
+        <!-- <cite>“Let your ambition carry you.”</cite> -->
+        <!-- <span class="cite-owner">- La Flame</span> -->
+      <!-- </p> -->
+    <!-- </header> -->
 
-<h2 class="text-blue-950 font-semibold text-2xl m-5">About me</h2>
+    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
 
-<p class="mx-5">
-  Welcome to my personal website. My name is
-  <strong>Michal&nbsp;Vanko</strong>
-  and I'm a
-  <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
-  . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
+    <p class="mx-5 md:text-xl text-justify">
+      Welcome to my personal website. My name is
+      <strong>Michal&nbsp;Vanko</strong>
+      and I'm a
+      <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
+      . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
 
-<section id="talent-cards">
-  {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
-  {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
-  {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
-</section
-
-<section id="blog">
-<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
-  <section id="blog-tags">
-    <ul class="mx-5">
-     {% for tag in blog_tags %}
-      <li class="inline-block mx-0.5 p-0.5">
-        <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
-      </li>
-      {% endfor %}
-    </ul>
+    <section id="talent-cards" class="flex flex-col items-center">
+      {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
+      {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
+      {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"https://calendly.com/michalvankosk/30min\">Schedule a session with me</a> and elevate your projects together.") %}
+    </section>
   </section>
-  <hr class="border-blue-950 m-5">
 
-  <ul class="mx-5">
-   {% for post in featured_blog_posts %}
-    <li>
-      {% include "components/blog_post_preview.html" %}
-      <hr class="border-blue-950 my-5">
-    </li>
-   {% endfor %}
-  </ul>
-</section>
+  <section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
+    <h2 class="text-blue-950 font-bold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
+    <section id="blog-tags">
+      <ul class="mx-5">
+       {% for tag in blog_tags %}
+        <li class="inline-block mx-0.5 p-0.5 md:text-xl">
+          <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    <hr class="border-slate-300 m-5">
 
-<section id="socials">
-  <h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
-  {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
-    <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
-    <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
-    <!-- <script type="text/javascript"> -->
-      <!-- var options = { -->
-        <!-- width: "100%", -->
-        <!-- height: "100%", -->
-        <!-- channel: "michalvankodev", -->
-        <!-- parent: ["localhost"] -->
-      <!-- }; -->
-      <!-- var player = new Twitch.Player("twitch-player", options); -->
-      <!-- player.setVolume(0.5); -->
-    </script>
-  {% call sc::social_card_end() %}
+    <ul class="mx-5">
+     {% for post in featured_blog_posts %}
+      <li>
+        {% include "components/blog_post_preview.html" %}
+        <hr class="border-slate-300 my-5 md:my-8">
+      </li>
+     {% endfor %}
+    </ul>
+    <section class="text-center my-3 md:text-lg">
+     <a href="/blog">see all blog posts</a> 
+    </section>
+  </section>
 
-  {% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
-  <!-- STYLES needed to overwrite tiktok embed css -->
-  <!-- <blockquote -->
-    <!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
-    <!-- cite="https://www.tiktok.com/@michalvankodev" -->
-    <!-- data-unique-id="michalvankodev" -->
-    <!-- data-embed-from="embed_page" -->
-    <!-- data-embed-type="creator" -->
-    <!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
-  <!-- > -->
-    <!-- <section> -->
-       <!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
-    <!-- </section> -->
-  <!-- </blockquote> -->
-  <!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
-  {% call sc::social_card_end() %}
+  <section id="socials">
+    {% include "sections/social.html" %}
+  </section>
 
-  {% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
-  <!-- TODO create our own youtube widget which will populate this window on build -->
-  <!-- <iframe -->
-    <!-- class="h-64 aspect-video" -->
-    <!-- id="ytplayer" -->
-    <!-- type="text/html" -->
-    <!-- width="100%" -->
-    <!-- height="100%" -->
-    <!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
-    <!-- frameborder="0" -->
-    <!-- allowfullscreen -->
-  <!-- ></iframe> -->
-  {% call sc::social_card_end() %}
+  <hr class="border-slate-300 m-5 lg:hidden">
 
-
-  {% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
-  <!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
-  {% call sc::social_card_end() %}
-
-</section>
-
-<hr class="border-blue-950 m-5">
-
-<section id="showcase">
-  <h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2>
-
-  <ul class="mx-5">
-   {% for project in featured_projects %}
-    <li class="my-2">
-      {% include "components/project_preview_card.html" %}
-    </li>
-   {% endfor %}
-  </ul>
-
-</section>
+  <section id="showcase" class="col-span-2">
+    {% include "sections/showcase.html" %}
+  </section>
+</section> <!-- /.index-container -->
 
 
 {% endblock %}

axum_server/templates/post_list.html

@@ -1,21 +0,0 @@
-{% extends "base.html" %} {% block content %} {% if posts.len() == 0 %}
-<p class="no-posts">You've found void in the space.</p>
-{% else %}
-<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
-{% if let Some(t) = tag %}
-<em>{{t}}</em> 
-{% else %}
- Blog posts
-{% endif %}
-</h1>
-
-<ul>
-  {% for post in posts %}
-  <li class="my-12">
-    {% include "post_preview_card.html" %}
-  </li>
-  {% endfor %}
-</ul>
-
-{% endif %}
-{% endblock %}

axum_server/templates/post_preview_card.html

@@ -1,19 +0,0 @@
-<article>
-  <header class="px-4 mb-3"> 
-    <h2 class="text-3xl font-semibold text-blue-900">
-      <a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
-    </h2>
-    <aside class="flex justify-between">
-    {% let tags = post.metadata.tags.clone() %}
-    {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600">
-      <span>Published on</span>
-      <time datetime="{{post.metadata.date}}"> {{post.metadata.date|pretty_date}} </time>
-    </section>
-    </aside>
-  </header>
-
-  <p class="px-5 text-gray-800"> TODO: article preview, maybe implement as a filter?,
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Ald </p>
-  <hr class="my-3 mx-4 h-0 border-blue-200 bg-blue-800 text-blue-800" />
-</article>

axum_server/templates/post_tag_list.html

@@ -2,7 +2,7 @@
   {% if tags.len() > 0 %}
   <ul class="inline">
     {% for tag in tags %}
-    <li class="inline italic text-blue-700">
+    <li class="inline italic text-blue-700 md:text-lg">
       <a href="/blog/tags/{{tag}}">#{{tag}}</a>
     </li>
     {% endfor %}

axum_server/templates/project_list.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block content %}
+
+<section id="project-list-container" class="max-w-maxindex mx-auto">
+  <section id="project-list">
+    {% if project_list.len() == 0 %}
+    <p class="no-posts">You've found void in the space.</p>
+    {% else %}
+    <h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
+     Showcase
+    </h1>
+
+    <ul class="m-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
+      {% for project in project_list %}
+      <li>
+        {% include "components/project_preview_card.html" %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </section> <!-- /#project-list -->
+ 
+</section> <!-- /#project-list-container -->
+{% endblock %}

axum_server/templates/sections/showcase.html

@@ -0,0 +1,13 @@
+<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
+
+<ul class="mx-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
+ {% for project in featured_projects %}
+  <li>
+    {% include "components/project_preview_card.html" %}
+  </li>
+ {% endfor %}
+</ul>
+
+<section class="text-center my-3 md:text-lg">
+ <a href="/showcase">check out more projects</a> 
+</section>

axum_server/templates/sections/social.html

@@ -0,0 +1,14 @@
+<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
+
+<section class="grid grid-flow-row justify-center">
+{% call sc::social_card_start("twitch", "https://twitch.tv/michalvankodev", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/twitch_wo.png", "social-card-twitch") %}
+
+{% call sc::social_card_start("tiktok", "https://www.tiktok.com/@michalvankodev","Highlights can be found on <em>TikTok</em>", "images/social/tiktok_wo.png", "social-card-tiktok") %}
+
+{% call sc::social_card_start("youtube", "https://www.youtube.com/@michalvankodev", "Videos and vlogs posted on <em>YouTube</em>", "images/social/youtube_wo.png", "social-card-youtube") %}
+
+<div class="lg:hidden xl:block">
+{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png", "social-card-instagram") %}
+</div>
+
+</section>

axum_server/templates/site_footer.html

@@ -1,4 +1,5 @@
-<footer>
+<footer class="my-4">
+  <hr class="mb-4 border-slate-300 mx-5">
   <p
     class="text-center"
     xmlns:cc="http://creativecommons.org/ns#"
@@ -14,7 +15,7 @@
     <a
       rel="cc:attributionURL dct:creator"
       property="cc:attributionName"
-      href="https://michalvanko.dev/"
+      href="/contact"
       >Michal Vanko</a
     >
     is licensed under
@@ -26,16 +27,26 @@
       >CC BY-NC-ND 4.0<img
         src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
         alt="cc"
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
         alt="by"         
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
         alt="nc"
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"
         alt="nd"
         class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24"
       /></a>
+      <!-- TODO Display link to feed with icon -->
+      <a href="/feed.xml" class="hidden">RSS feed</a>
   </p>
 </footer>

axum_server/templates/site_header.html

@@ -1,20 +1,20 @@
 <header class="min-h-full bg-blue-50 mb-5">
-<nav class="flex">
-  {% match header_props.back_link %}
-  {% when Some with (link) %}
-  <a
-    class="p-3 text-lg font-medium drop-shadow-md"
-    href="{{link.href}}"
-  >
-    {{link.label}}
-  </a>
-  {% when None %}
-  {% endmatch %}
-    <aside class="flex logo-section flex-grow justify-end content-end">
-      <a class="logo p-3 text-base" href=".">
-        @michalvankodev
-      </a>
-    </aside>
-</nav>
-<hr class="border-blue-950 mx-5">
+  <nav class="flex">
+    {% match header_props.back_link %}
+    {% when Some with (link) %}
+    <a
+      class="px-3 py-2 text-lg font-medium print:hidden"
+      href="{{link.href}}"
+    >
+      {{link.label}}
+    </a>
+    {% when None %}
+    {% endmatch %}
+      <aside class="flex logo-section flex-grow justify-end content-end">
+        <a class="logo p-3 text-base" href="/">
+          @michalvankodev
+        </a>
+      </aside>
+  </nav>
+  <hr class="border-slate-300 mx-5">
 </header>

static/fonts/orbitron/orbitron-black-webfont.svg

@@ -0,0 +1,148 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG webfont generated by Font Squirrel.
+Copyright   : Generated in 2009 by FontLab Studio Copyright info pending
+Designer    : Matt McInerney
+Foundry     : Matt McInerney
+Foundry URL : httptheleagueofmoveabletypecom
+</metadata>
+<defs>
+<font id="webfontqMYZ91Rj" horiz-adv-x="1058" >
+<font-face units-per-em="2048" ascent="1536" descent="-512" />
+<missing-glyph horiz-adv-x="659" />
+<glyph unicode=" "  horiz-adv-x="659" />
+<glyph unicode="&#x09;" horiz-adv-x="659" />
+<glyph unicode="&#xa0;" horiz-adv-x="659" />
+<glyph unicode="!" horiz-adv-x="450" d="M119 0v313h313v-313h-313zM119 412v1063h313v-1063h-313z" />
+<glyph unicode="&#x22;" horiz-adv-x="811" d="M74 1034v412h311v-412h-311zM444 1034v412h312v-412h-312z" />
+<glyph unicode="#" horiz-adv-x="1632" d="M66 324v313h247l70 217h-260v313h360q27 74 99 308h323l-104 -308h282l99 308h321l-104 -308h137v-313h-236l-69 -217h248v-313h-351l-45 -162q-31 -113 -47 -162h-317l98 324h-287l-48 -170l-42 -154h-317l96 324h-153zM633 637h278l70 217h-279z" />
+<glyph unicode="$" horiz-adv-x="1613" d="M70 297v135h313v-119h252v260h-268q-123 0 -210 87.5t-87 209.5v308q0 123 87 210t210 87h268v200h315v-200h269q123 0 210 -87.5t87 -209.5v-136h-314v119h-252v-274h269q123 0 210 -88t87 -211v-291q0 -121 -87.5 -209t-209.5 -88h-269v-201h-315v201h-268 q-123 0 -210 88t-87 209zM383 887h252v274h-252v-274zM950 313h252v260h-252v-260z" />
+<glyph unicode="%" horiz-adv-x="1978" d="M98 1034v148q0 123 78 199.5t201 76.5h166q123 0 200.5 -76.5t77.5 -199.5v-148q0 -123 -77.5 -200.5t-200.5 -77.5h-166q-123 0 -201 77.5t-78 200.5zM274 0v322l1344 1151h104v-320l-1343 -1153h-105zM354 1014h209v188h-209v-188zM1141 297v147q0 123 77.5 200 t198.5 77h166q123 0 201 -77t78 -200v-147q0 -123 -78 -201t-201 -78h-166q-121 0 -198.5 78t-77.5 201zM1397 274h209v191h-209v-191z" />
+<glyph unicode="&#x26;" horiz-adv-x="1921" d="M109 297v379q0 45 22.5 94t65.5 78q-14 35 -15 108v220q0 123 88 210t209 87h723q109 0 194 -70t103 -174v-180h-313v108h-690v-221l745 -375v195h313v-330l236 -139v-324l-287 164q-92 -127 -246 -127h-851q-123 0 -210 88t-87 209zM422 313h676l-102.5 51t-110.5 56 l-463 233v-340z" />
+<glyph unicode="'" horiz-adv-x="514" d="M121 1032v414h313v-414h-313z" />
+<glyph unicode="(" horiz-adv-x="602" d="M106 297v881q0 123 87.5 210t209.5 87h136v-314h-119v-848h119v-313h-136q-123 0 -210 88t-87 209z" />
+<glyph unicode=")" horiz-adv-x="608" d="M115 0v313h118v848h-118v314h137q121 0 209 -87.5t88 -209.5v-881q0 -121 -88 -209t-209 -88h-137z" />
+<glyph unicode="*" horiz-adv-x="1056" d="M51 981l96 303l224 -76v238h315v-238q20 6 225 76l97 -303l-226 -72l142 -190l-252 -184l-146 190l-135 -190l-256 184l141 190z" />
+<glyph unicode="+" horiz-adv-x="931" d="M35 449v313h266v268h313v-268h275v-313h-275v-273h-313v273h-266z" />
+<glyph unicode="," horiz-adv-x="497" d="M111 -272v563h313v-258q0 -111 -89 -196.5t-224 -108.5z" />
+<glyph unicode="-" d="M121 449v313h854v-313h-854z" />
+<glyph unicode="." horiz-adv-x="477" d="M111 0v313h313v-313h-313z" />
+<glyph unicode="/" horiz-adv-x="1067" d="M12 0v317l944 1158h113v-316l-944 -1159h-113z" />
+<glyph unicode="0" horiz-adv-x="1708" d="M117 317v852q0 123 88 214.5t211 91.5h850q123 0 211 -91.5t88 -214.5v-852q0 -123 -89.5 -220t-209.5 -97h-850q-121 0 -210 97t-89 220zM430 604l653 549h-653v-549zM598 334h653v549z" />
+<glyph unicode="1" horiz-adv-x="800" d="M2 913l471 562h326v-1475h-314v997l-4 -4h2l-65 -80h-416z" />
+<glyph unicode="2" horiz-adv-x="1699" d="M117 0v571q0 123 88 210t211 87h835v293h-821v-119h-313v136q0 123 88 210t211 87h850q123 0 211 -87.5t88 -209.5v-326q0 -123 -88 -211t-211 -88h-836v-240h1135v-313h-1448z" />
+<glyph unicode="3" horiz-adv-x="1691" d="M109 297v115h313v-99h821v273h-893v313h838v262h-766v-114h-313v131q0 123 88 210t211 87h796q123 0 210 -87.5t87 -209.5v-295q0 -51 -12 -95q68 -82 67 -186v-305q0 -121 -87 -209t-209 -88h-852q-123 0 -211 88t-88 209z" />
+<glyph unicode="4" horiz-adv-x="1495" d="M12 367v280l916 828h280v-793h197v-315h-197v-367h-313v367h-883zM522 682h373v303z" />
+<glyph unicode="5" horiz-adv-x="1699" d="M117 297v115h313v-99h821v277h-1134v885h1448v-314h-1135v-256h836q123 0 211 -87t88 -210v-311q0 -121 -88 -209t-211 -88h-850q-123 0 -211 88t-88 209z" />
+<glyph unicode="6" horiz-adv-x="1679" d="M117 297v881q0 123 88 210t211 87h925v-314h-911v-256h836q123 0 211 -87t88 -210v-311q0 -121 -88 -209t-211 -88h-850q-123 0 -211 88t-88 209zM430 313h821v277h-821v-277z" />
+<glyph unicode="7" horiz-adv-x="1351" d="M6 1163v314h928q123 0 210 -87t87 -210v-1180h-313v1163h-912z" />
+<glyph unicode="8" horiz-adv-x="1708" d="M117 297v311q0 66 35 140q-35 74 -35 141v289q0 123 88 210t211 87h850q111 0 195.5 -70t103.5 -174v-342q0 -76 -35 -141q35 -63 35 -140v-311q0 -121 -88 -209t-211 -88h-850q-123 0 -211 88t-88 209zM430 313h821v277h-821v-277zM430 885h821v274h-821v-274z" />
+<glyph unicode="9" horiz-adv-x="1695" d="M104 313h1141v262h-835q-123 0 -211 88.5t-88 210.5v304q0 123 88 210t211 87h852q123 0 210 -87.5t87 -209.5v-881q0 -121 -87.5 -209t-209.5 -88h-852q-109 0 -196 90t-110 223zM426 891h819v270h-819v-270z" />
+<glyph unicode=":" horiz-adv-x="505" d="M111 0v313h313v-313h-313zM111 872v316h313v-316h-313z" />
+<glyph unicode=";" horiz-adv-x="544" d="M104 872v316h316v-316h-316zM106 -272v563h314v-258q0 -111 -89.5 -196.5t-224.5 -108.5z" />
+<glyph unicode="&#x3c;" horiz-adv-x="968" d="M10 473v262l875 508v-360l-479 -277l479 -278v-363z" />
+<glyph unicode="=" horiz-adv-x="1306" d="M121 264v314h1077v-314h-1077zM121 678v313h1077v-313h-1077z" />
+<glyph unicode="&#x3e;" horiz-adv-x="972" d="M121 -39v365l477 276l-262 148q-31 16 -105.5 62t-109.5 65v362l876 -506v-264z" />
+<glyph unicode="?" horiz-adv-x="1388" d="M63 1161v314h975q125 0 212 -87.5t87 -209.5v-340q0 -123 -87 -211t-212 -88h-460v-142h-316v160q0 123 87 210t210 87h465v307h-961zM262 0v313h316v-313h-316z" />
+<glyph unicode="@" horiz-adv-x="1701" d="M117 297v881q0 123 88 210t211 87h850q123 0 211 -87.5t88 -209.5v-736h-787q-123 0 -190.5 66.5t-67.5 189.5v109q0 123 67.5 189.5t190.5 66.5h127q123 0 189.5 -66.5t66.5 -189.5v-129h90v483h-821v-848h1135v-313h-1149q-123 0 -211 88t-88 209zM737 678h207v168 h-207v-168z" />
+<glyph unicode="A" horiz-adv-x="1712" d="M119 0v1171q0 127 88 215.5t215 88.5h866q127 0 216 -89.5t89 -214.5v-1171h-321v475h-836v-475h-317zM436 795h836v360h-836v-360z" />
+<glyph unicode="B" horiz-adv-x="1703" d="M121 0v1475h1114q125 0 214 -89.5t89 -214.5v-276q0 -57 -14 -94q72 -90 71 -193v-305q0 -125 -89 -214t-216 -89h-1169zM438 319h836v271h-836v-271zM438 909h779v246h-779v-246z" />
+<glyph unicode="C" horiz-adv-x="1683" d="M115 303v868q0 127 88 215.5t215 88.5h1167v-320h-1153v-836h1153v-319h-1167q-127 0 -215 88t-88 215z" />
+<glyph unicode="D" horiz-adv-x="1708" d="M119 0v1475h1169q127 0 216 -89.5t89 -214.5v-868q0 -125 -89 -214t-216 -89h-1169zM436 319h836v836h-836v-836z" />
+<glyph unicode="E" horiz-adv-x="1568" d="M119 0v1475h1362v-320h-1041v-258h838v-319h-838v-259h1041v-319h-1362z" />
+<glyph unicode="F" horiz-adv-x="1480" d="M119 0v1475h1362v-320h-1041v-258h838v-319h-838v-578h-321z" />
+<glyph unicode="G" horiz-adv-x="1699" d="M115 303v868q0 127 88 215.5t215 88.5h866q127 0 216 -89.5t89 -214.5v-139h-321v123h-836v-836h836v222h-320v319h641v-557q0 -125 -89 -214t-216 -89h-866q-127 0 -215 88t-88 215z" />
+<glyph unicode="H" horiz-adv-x="1742" d="M117 0v1475h317v-578h871v578h317v-1475h-317v578h-871v-578h-317z" />
+<glyph unicode="I" horiz-adv-x="450" d="M117 0v1475h319v-1475h-319z" />
+<glyph unicode="J" horiz-adv-x="1597" d="M8 303v191h318v-175h835v1156h322v-1172q0 -125 -89 -214t-214 -89h-869q-127 0 -215 88t-88 215z" />
+<glyph unicode="K" horiz-adv-x="1632" d="M117 0v1475h319v-578h289l184 219l299 359h332v-111l-526 -627l526 -626v-111h-332l-483 578h-289v-578h-319z" />
+<glyph unicode="L" horiz-adv-x="1595" d="M117 0v1477h317v-1158h1157v-319h-1474z" />
+<glyph unicode="M" horiz-adv-x="1900" d="M115 0v1475h327l500 -596l498 596h329v-1475h-319v989l-508 -606l-510 604v-987h-317z" />
+<glyph unicode="N" horiz-adv-x="1703" d="M115 0v1475h327l826 -983v983h321v-1475h-327l-830 987v-987h-317z" />
+<glyph unicode="O" horiz-adv-x="1695" d="M111 303v868q0 127 88 215.5t215 88.5h868q125 0 214 -89.5t89 -214.5v-868q0 -125 -89 -214t-214 -89h-868q-127 0 -215 88t-88 215zM428 319h836v836h-836v-836z" />
+<glyph unicode="P" horiz-adv-x="1619" d="M115 0v1473h1169q125 0 215 -89.5t90 -214.5v-381q0 -125 -90 -214t-215 -89l-852 -2q6 0 6 -12q-4 0 -6 2v-473h-317zM432 805h836v350h-836v-350z" />
+<glyph unicode="Q" horiz-adv-x="1810" d="M111 303v868q0 127 88 215.5t215 88.5h866q127 0 216 -89.5t89 -214.5v-852h168v-319h-1339q-127 0 -215 88t-88 215zM428 319h836v836h-836v-836z" />
+<glyph unicode="R" horiz-adv-x="1689" d="M113 0v1473h1169q125 0 215 -89.5t90 -214.5v-381q0 -125 -90 -214t-215 -89h-14l319 -376v-109h-327l-408 485l-422 -2q6 0 6 -12q-4 0 -6 2v-473h-317zM430 805h836v350h-836v-350z" />
+<glyph unicode="S" horiz-adv-x="1683" d="M104 303v137h318v-121h835v259h-849q-125 0 -214.5 88t-89.5 215v290q0 127 89.5 215.5t214.5 88.5h868q125 0 214 -89.5t89 -214.5v-137h-322v121h-835v-258h854q125 0 214 -89t89 -214v-291q0 -125 -89 -214t-214 -89h-868q-125 0 -214.5 88t-89.5 215z" />
+<glyph unicode="T" horiz-adv-x="1554" d="M41 1155v320h1475v-320h-578v-1155h-320v1155h-577z" />
+<glyph unicode="U" horiz-adv-x="1695" d="M111 303v1172h317v-1156h836v1156h321v-1172q0 -125 -89 -214t-214 -89h-868q-127 0 -215 88t-88 215z" />
+<glyph unicode="V" horiz-adv-x="2054" d="M72 1475h368l619 -1072l618 1072h367l-854 -1475h-264z" />
+<glyph unicode="W" horiz-adv-x="2414" d="M72 1475h338l321 -879l51 137l271 742h293l323 -879l51 137l271 742h336l-537 -1475h-244l-348 948l-131 -360l-215 -588h-244z" />
+<glyph unicode="X" horiz-adv-x="1662" d="M94 0v109l527 628l-527 629v109h330l410 -486q59 76 204 247l201 239h330v-109l-529 -629l529 -626v-111h-330l-410 483l-405 -483h-330z" />
+<glyph unicode="Y" horiz-adv-x="1650" d="M35 1475h379l463 -582l460 582h383l-684 -926v-549h-319v551l-268 360z" />
+<glyph unicode="Z" horiz-adv-x="1681" d="M104 0v326l988 829h-988v320h1475v-326l-987 -830h987v-319h-1475z" />
+<glyph unicode="[" horiz-adv-x="563" d="M111 0v1475h432v-314h-119v-848h119v-313h-432z" />
+<glyph unicode="\" horiz-adv-x="1064" d="M10 1159v316h113l944 -1160v-315h-113z" />
+<glyph unicode="]" horiz-adv-x="565" d="M104 0v313h117v848h-117v314h433v-1475h-433z" />
+<glyph unicode="_" horiz-adv-x="1695" d="M111 -4h1448v-313h-1448v313z" />
+<glyph unicode="`" horiz-adv-x="557" d="M66 1946h321l105 -416h-322z" />
+<glyph unicode="a" horiz-adv-x="1421" d="M106 297v455h891v122h-891v314h908q123 0 210 -88t87 -209v-891h-908q-123 0 -210 88t-87 209zM420 313h577v164h-577v-164z" />
+<glyph unicode="b" horiz-adv-x="1366" d="M111 0v1577h313v-389h594q123 0 210 -88t87 -209v-594q0 -121 -87 -209t-210 -88h-907zM424 313h577v561h-577v-561z" />
+<glyph unicode="c" horiz-adv-x="1423" d="M104 297v594q0 121 88.5 209t208.5 88h906v-314h-889v-561h891v-313h-908q-121 0 -209 88t-88 209z" />
+<glyph unicode="d" horiz-adv-x="1366" d="M47 297v594q0 121 87 209t210 88h596v389h313v-1577h-909q-123 0 -210 88t-87 209zM362 313h578v561h-578v-561z" />
+<glyph unicode="e" horiz-adv-x="1417" d="M104 297v594q0 121 88.5 209t208.5 88h611q123 0 210 -88t87 -209v-455h-891v-123h891v-313h-908q-121 0 -209 88t-88 209zM418 711h577v163h-577v-163z" />
+<glyph unicode="f" horiz-adv-x="901" d="M109 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313z" />
+<glyph unicode="g" horiz-adv-x="1398" d="M84 297v594q0 121 88 209t211 88h610q123 0 210 -88t87 -209v-1063q0 -123 -87 -210t-210 -87h-721v315h705v154h-594q-123 0 -211 88t-88 209zM397 313h580v561h-580v-561z" />
+<glyph unicode="h" horiz-adv-x="1368" d="M111 0v1577h313v-389h594q121 0 209 -88t88 -209v-891h-314v874h-577v-874h-313z" />
+<glyph unicode="i" horiz-adv-x="468" d="M106 0v1188h314v-1188h-314zM106 1262v315h314v-315h-314z" />
+<glyph unicode="j" horiz-adv-x="489" d="M-383 -111h502v1299h313v-1317q0 -123 -88 -210t-211 -87h-516v315zM119 1262v315h313v-315h-313z" />
+<glyph unicode="k" horiz-adv-x="1323" d="M111 0v1577h313v-825h160l403 436h316v-107l-443 -487l443 -488v-106h-316l-403 436h-160v-436h-313z" />
+<glyph unicode="l" horiz-adv-x="690" d="M106 297v1282h316v-1266h240v-313h-259q-121 0 -209 88t-88 209z" />
+<glyph unicode="m" horiz-adv-x="2002" d="M111 0v1188h1429q123 0 210 -88t87 -209v-891h-311v874h-393v-874h-316v874h-393v-874h-313z" />
+<glyph unicode="n" horiz-adv-x="1425" d="M111 0v1188h907q123 0 210 -88t87 -209v-891h-314v874h-577v-874h-313z" />
+<glyph unicode="o" horiz-adv-x="1417" d="M104 297v594q0 121 88.5 209t208.5 88h611q123 0 210 -88t87 -209v-594q0 -121 -87 -209t-210 -88h-611q-121 0 -209 88t-88 209zM418 313h577v561h-577v-561z" />
+<glyph unicode="p" horiz-adv-x="1359" d="M111 -471v1659h907q123 0 210 -88t87 -209v-594q0 -121 -87 -209t-210 -88h-594v-471h-313zM424 313h577v561h-577v-561z" />
+<glyph unicode="q" horiz-adv-x="1359" d="M41 297v594q0 121 87 209t210 88h909v-1659h-313v471h-596q-123 0 -210 88t-87 209zM356 313h578v561h-578v-561z" />
+<glyph unicode="r" horiz-adv-x="1077" d="M106 0v891q0 121 88.5 209t211.5 88h655v-314h-641v-874h-314z" />
+<glyph unicode="s" horiz-adv-x="1404" d="M98 297v59h314v-43h577v123h-594q-121 0 -209 88t-88 209v158q0 121 88 209t209 88h611q125 0 212 -88t87 -209v-60h-316v43h-577v-122h594q125 0 212 -87t87 -210v-158q0 -121 -87.5 -209t-211.5 -88h-611q-121 0 -209 88t-88 209z" />
+<glyph unicode="t" horiz-adv-x="923" d="M109 297v1243h313v-352h440v-314h-440v-561h440v-313h-454q-125 0 -212 88t-87 209z" />
+<glyph unicode="u" horiz-adv-x="1423" d="M109 297v891h313v-875h577v875h314v-891q0 -121 -87 -209t-210 -88h-610q-123 0 -210 88t-87 209z" />
+<glyph unicode="v" horiz-adv-x="1617" d="M43 1188h360l428 -789l429 789h360l-655 -1188h-269z" />
+<glyph unicode="w" horiz-adv-x="2156" d="M72 1188h331l256 -617l89 205l85 193l95 219h303l287 -625l237 625h332l-447 -1188h-237l-322 709l-307 -709h-235z" />
+<glyph unicode="x" horiz-adv-x="1417" d="M94 0v102l410 502l-410 481v103h322l291 -344l288 344h324v-103l-410 -481l226 -274l184 -228v-102h-322l-290 356l-291 -356h-322z" />
+<glyph unicode="y" horiz-adv-x="1402" d="M86 297v887h313v-871h580v871h313v-1313q0 -123 -87 -210t-210 -87h-721v315h705v111h-594q-123 0 -211 88t-88 209z" />
+<glyph unicode="z" horiz-adv-x="1429" d="M111 0v322l714 552h-714v314h1204v-322l-715 -553h715v-313h-1204z" />
+<glyph unicode="{" horiz-adv-x="591" d="M47 621v268l82 45v244q0 123 87 210t212 87h133v-314h-119v-330l-92 -77l47 -41v2l45 -37v-365h119v-313h-133q-125 0 -212 88t-87 209v276l-33 21h2q-6 2 -25.5 13.5t-25.5 13.5z" />
+<glyph unicode="|" horiz-adv-x="438" d="M111 -203v1850h313v-1850h-313z" />
+<glyph unicode="}" horiz-adv-x="591" d="M104 0v313h119v363l92 78l-92 77v330h-119v314h134q123 0 211 -87.5t88 -209.5v-242l81 -49v-262l-81 -52v-276q0 -121 -88.5 -209t-210.5 -88h-134z" />
+<glyph unicode="~" horiz-adv-x="827" d="M49 475v270q109 47 195 48q78 0 197.5 -58.5t179.5 -68.5q82 0 196 73v-258q-123 -51 -203 -51q-74 0 -193.5 62.5t-189.5 62.5q-78 0 -182 -80z" />
+<glyph unicode="&#xa2;" horiz-adv-x="1302" d="M68 297v612q0 123 88 211t211 88h229v236h315v-236h361v-317h-361v-578h361v-313h-361v-203h-315v203h-229q-123 0 -211 88t-88 209zM381 313h215v578h-215v-578z" />
+<glyph unicode="&#xa3;" horiz-adv-x="1503" d="M80 0v313h184v254h-184v314h184v297q0 123 88 210t209 87h535q123 0 210 -87.5t87 -209.5v-115h-316v98h-499v-280h618v-314h-618v-254h815v-313h-1313z" />
+<glyph unicode="&#xad;" d="M121 449v313h854v-313h-854z" />
+<glyph unicode="&#xb4;" horiz-adv-x="436" d="M68 1530l104 416h322l-105 -416h-321z" />
+<glyph unicode="&#x2000;" horiz-adv-x="972" />
+<glyph unicode="&#x2001;" horiz-adv-x="1945" />
+<glyph unicode="&#x2002;" horiz-adv-x="972" />
+<glyph unicode="&#x2003;" horiz-adv-x="1945" />
+<glyph unicode="&#x2004;" horiz-adv-x="647" />
+<glyph unicode="&#x2005;" horiz-adv-x="485" />
+<glyph unicode="&#x2006;" horiz-adv-x="323" />
+<glyph unicode="&#x2007;" horiz-adv-x="323" />
+<glyph unicode="&#x2008;" horiz-adv-x="241" />
+<glyph unicode="&#x2009;" horiz-adv-x="389" />
+<glyph unicode="&#x200a;" horiz-adv-x="106" />
+<glyph unicode="&#x2010;" d="M121 449v313h854v-313h-854z" />
+<glyph unicode="&#x2011;" d="M121 449v313h854v-313h-854z" />
+<glyph unicode="&#x2012;" d="M121 449v313h854v-313h-854z" />
+<glyph unicode="&#x2013;" horiz-adv-x="1449" d="M111 446v314h1224v-314h-1224z" />
+<glyph unicode="&#x2014;" horiz-adv-x="1683" d="M111 446v314h1437v-314h-1437z" />
+<glyph unicode="&#x2018;" horiz-adv-x="491" d="M70 895v258q0 113 89 198t224 107v-563h-313z" />
+<glyph unicode="&#x2019;" horiz-adv-x="487" d="M111 885v561h313v-256q0 -111 -89 -196.5t-224 -108.5z" />
+<glyph unicode="&#x201c;" horiz-adv-x="954" d="M92 895v258q0 113 90 198t224 107v-563h-314zM532 897v258q0 113 89.5 198t224.5 107v-563h-314z" />
+<glyph unicode="&#x201d;" horiz-adv-x="954" d="M111 885v561h313v-256q0 -111 -89 -196.5t-224 -108.5zM549 885v561h315v-256q0 -111 -90 -196.5t-225 -108.5z" />
+<glyph unicode="&#x2022;" horiz-adv-x="759" d="M221 705v36q0 135 135 136h43q137 0 138 -136v-36q0 -133 -138 -134h-43q-135 1 -135 134z" />
+<glyph unicode="&#x2026;" horiz-adv-x="1175" d="M111 0v313h315v-313h-315zM504 0v313h315v-313h-315zM897 0v313h313v-313h-313z" />
+<glyph unicode="&#x202f;" horiz-adv-x="389" />
+<glyph unicode="&#x205f;" horiz-adv-x="485" />
+<glyph unicode="&#x20ac;" horiz-adv-x="1636" d="M72 383v313h184v72h-184v313h184v97q0 123 87 210t210 87h960v-314h-944v-80h744v-313h-744v-72h744v-313h-744v-70h944v-313h-960q-123 0 -210 88t-87 209v86h-184z" />
+<glyph unicode="&#x2122;" horiz-adv-x="3454" d="M1669 0v1475h327l500 -596l498 596h329v-1475h-319v989l-508 -606l-510 604v-987h-317zM41 1155v320h1475v-320h-578v-1155h-320v1155h-577z" />
+<glyph unicode="&#xe000;" horiz-adv-x="1190" d="M0 1190h1190v-1190h-1190v1190z" />
+<glyph unicode="&#xfb01;" horiz-adv-x="1370" d="M1007 0v1188h314v-1188h-314zM1007 1262v315h314v-315h-314zM109 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313z" />
+<glyph unicode="&#xfb02;" horiz-adv-x="1591" d="M1007 297v1282h316v-1266h240v-313h-259q-121 0 -209 88t-88 209zM109 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313z" />
+<glyph unicode="&#xfb03;" horiz-adv-x="2271" d="M1908 0v1188h314v-1188h-314zM1908 1262v315h314v-315h-314zM1010 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313zM109 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313z" />
+<glyph unicode="&#xfb04;" horiz-adv-x="2492" d="M1908 297v1282h316v-1266h240v-313h-259q-121 0 -209 88t-88 209zM1010 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313zM109 0v1280q0 121 87 209t212 88h454v-315h-440v-74h440v-314h-440v-874h-313z" />
+<glyph horiz-adv-x="821" />
+</font>
+</defs></svg> 

static/fonts/orbitron/orbitron-bold-webfont.svg

@@ -0,0 +1,148 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG webfont generated by Font Squirrel.
+Copyright   : Generated in 2009 by FontLab Studio Copyright info pending
+Designer    : Matt McInerney
+Foundry     : Matt McInerney
+Foundry URL : httptheleagueofmoveabletypecom
+</metadata>
+<defs>
+<font id="webfontMOSYtX6m" horiz-adv-x="1058" >
+<font-face units-per-em="2048" ascent="1536" descent="-512" />
+<missing-glyph horiz-adv-x="630" />
+<glyph unicode=" "  horiz-adv-x="630" />
+<glyph unicode="&#x09;" horiz-adv-x="630" />
+<glyph unicode="&#xa0;" horiz-adv-x="630" />
+<glyph unicode="!" horiz-adv-x="450" d="M119 0v268h268v-268h-268zM119 403v1072h268v-1072h-268z" />
+<glyph unicode="&#x22;" horiz-adv-x="761" d="M121 1100v373h270v-373h-270zM449 1100v373h268v-373h-268z" />
+<glyph unicode="#" horiz-adv-x="1632" d="M66 328v268h251l95 295h-287v268h373l102 316h274l-106 -316h358l105 316h272l-106 -316h153v-268h-239l-94 -295h274v-268h-358l-99 -328h-270l100 328h-360l-98 -328h-271l101 328h-170zM588 596h358l94 295h-358z" />
+<glyph unicode="$" horiz-adv-x="1613" d="M70 283v110h268v-110q0 -14 14 -15h314v336h-314q-117 0 -199.5 83t-82.5 200v305q0 117 83 200t199 83h314v211h268v-211h313q117 0 200 -83t83 -200v-111h-268v111q0 14 -15 14h-313v-334h313q117 0 200 -82.5t83 -199.5v-307q0 -117 -83 -200t-200 -83h-313v-211h-268 v211h-314q-117 0 -199.5 83t-82.5 200zM338 887q0 -14 14 -15h314v334h-314q-14 0 -14 -14v-305zM934 268h313q14 0 15 15v307q0 14 -15 14h-313v-336z" />
+<glyph unicode="%" horiz-adv-x="1978" d="M98 1022v156q0 117 83 199.5t200 82.5h176q117 0 200 -83t83 -199v-156q0 -117 -83 -200t-200 -83h-176q-117 0 -200 83t-83 200zM262 0v293l1393 1182h67v-293l-1392 -1182h-68zM328 983q0 -12 14 -12h254q12 0 12 12v234q0 14 -12 14h-254q-14 0 -14 -14v-234z M1108 281v155q0 117 83 200t200 83h174q117 0 199.5 -83t82.5 -200v-155q0 -117 -83 -200t-199 -83h-174q-117 0 -200 83t-83 200zM1337 242q0 -14 15 -15h252q14 0 14 15v233q0 14 -14 14h-252q-14 0 -15 -14v-233z" />
+<glyph unicode="&#x26;" horiz-adv-x="1921" d="M109 283v397q0 45 27.5 96t74.5 72q-25 43 -25 127v217q0 117 83 200t200 83h760q102 0 183 -67t97 -167v-174h-268v123q0 14 -12 14h-760q-14 0 -14 -14v-254l845 -426v223h269v-334l248 -145v-270l-283 159q-35 -66 -101.5 -104.5t-146.5 -38.5h-895q-117 0 -199.5 83 t-82.5 200zM377 283q0 -14 14 -15h854l-839 424h-15q-14 0 -14 -12v-397z" />
+<glyph unicode="'" horiz-adv-x="458" d="M121 1100v373h268v-373h-268z" />
+<glyph unicode="(" horiz-adv-x="567" d="M106 283v909q0 117 82 200t199 83h113v-269h-113q-12 0 -12 -14v-909q0 -14 12 -15h113v-268h-113q-117 0 -199 83t-82 200z" />
+<glyph unicode=")" horiz-adv-x="569" d="M115 0v268h112q12 0 13 15v909q0 14 -13 14h-112v269h112q115 0 199 -83t84 -200v-909q0 -117 -84 -200t-199 -83h-112z" />
+<glyph unicode="*" horiz-adv-x="1005" d="M51 1036l82 258l248 -84v263h270v-261l248 82l84 -258l-250 -80l156 -211l-217 -157l-158 211l-152 -211l-217 157l154 211z" />
+<glyph unicode="+" horiz-adv-x="886" d="M35 471v268h280v283h269v-283h288v-268h-288v-287h-269v287h-280z" />
+<glyph unicode="," horiz-adv-x="450" d="M111 244h268v-240q0 -104 -77 -184t-191 -101v525z" />
+<glyph unicode="-" d="M121 471v268h837v-268h-837z" />
+<glyph unicode="." horiz-adv-x="438" d="M111 0v268h268v-268h-268z" />
+<glyph unicode="/" horiz-adv-x="1067" d="M12 0v291l979 1184h72v-289l-979 -1186h-72z" />
+<glyph unicode="0" horiz-adv-x="1708" d="M117 291v895q0 117 83 203t199 86h895q117 0 200 -86t83 -203v-895q0 -117 -83 -204t-200 -87h-895q-117 0 -199.5 87t-82.5 204zM385 526l803 674h-789q-14 0 -14 -14v-660zM506 276h788q14 0 15 15v659z" />
+<glyph unicode="1" horiz-adv-x="800" d="M2 944l444 531h297v-1475h-268v1083l-119 -139h-354z" />
+<glyph unicode="2" horiz-adv-x="1699" d="M117 0v569q0 117 83 200t199 83h895q14 0 15 12v328q0 14 -15 14h-895q-14 0 -14 -14v-111h-268v111q0 117 83 200t199 83h895q117 0 200 -83t83 -200v-328q0 -117 -83 -199.5t-200 -82.5h-895q-14 0 -14 -13v-286q0 -14 14 -15h1178v-268h-1460z" />
+<glyph unicode="3" horiz-adv-x="1691" d="M109 283v88h268v-88q0 -14 14 -15h897q12 0 12 15v319q0 14 -12 14h-926v269h867q14 0 14 12v295q0 14 -14 14h-838q-14 0 -14 -14v-107h-268v107q0 117 82.5 200t199.5 83h838q117 0 199.5 -83t82.5 -200v-295q0 -59 -20 -102q78 -82 78 -193v-319q0 -117 -82 -200 t-199 -83h-897q-117 0 -199.5 83t-82.5 200z" />
+<glyph unicode="4" horiz-adv-x="1495" d="M12 371v252l944 852h252v-836h207v-268h-207v-371h-268v371h-928zM430 639h510v414z" />
+<glyph unicode="5" horiz-adv-x="1699" d="M117 283v110h268v-110q0 -14 14 -15h895q14 0 15 15v325q0 12 -15 13h-1177v854h1460v-269h-1178q-14 0 -14 -14v-289q0 -12 14 -12h895q117 0 200 -83t83 -200v-325q0 -117 -83 -200t-200 -83h-895q-117 0 -199.5 83t-82.5 200z" />
+<glyph unicode="6" horiz-adv-x="1679" d="M117 283v909q0 117 83 200t199 83h944v-269h-944q-14 0 -14 -14v-289q0 -12 14 -12h895q117 0 200 -83t83 -200v-325q0 -117 -83 -200t-200 -83h-895q-117 0 -199.5 83t-82.5 200zM385 283q0 -14 14 -15h895q14 0 15 15v325q0 12 -15 13h-909v-338z" />
+<glyph unicode="7" horiz-adv-x="1351" d="M6 1206v269h944q117 0 200 -83t83 -200v-1192h-268v1192q0 14 -15 14h-944z" />
+<glyph unicode="8" horiz-adv-x="1708" d="M117 283v325q0 82 41 148q-41 66 -41 147v289q0 117 83 200t199 83h895q104 0 185.5 -67t97.5 -167v-338q0 -86 -41 -147q41 -61 41 -148v-325q0 -117 -83 -200t-200 -83h-895q-117 0 -199.5 83t-82.5 200zM385 283q0 -14 14 -15h895q14 0 15 15v325q0 12 -15 13h-895 q-14 0 -14 -13v-325zM385 883q0 -14 14 -15h895q14 0 15 15v307q0 14 -15 14h-895q-14 0 -14 -14v-307z" />
+<glyph unicode="9" horiz-adv-x="1695" d="M104 268h1182q12 0 12 15v295q0 12 -12 12h-897q-117 0 -200 83t-83 199v320q0 117 83 200t200 83h897q117 0 199 -83t82 -200v-909q0 -117 -82 -200t-199 -83h-897q-104 0 -184.5 76.5t-100.5 191.5zM377 872q0 -12 12 -12h909v332q0 14 -12 14h-897q-12 0 -12 -14v-320 z" />
+<glyph unicode=":" horiz-adv-x="438" d="M111 0v268h268v-268h-268zM111 934v270h268v-270h-268z" />
+<glyph unicode=";" horiz-adv-x="444" d="M104 244h269v-240q0 -104 -77 -184t-192 -101v525zM104 934v270h269v-270h-269z" />
+<glyph unicode="&#x3c;" horiz-adv-x="968" d="M10 485v242l858 496v-310l-534 -307l534 -309v-311z" />
+<glyph unicode="=" horiz-adv-x="1306" d="M121 279v268h1071v-268h-1071zM121 649v269h1071v-269h-1071z" />
+<glyph unicode="&#x3e;" horiz-adv-x="972" d="M121 -18v311l532 309l-532 307v310l860 -496v-242z" />
+<glyph unicode="?" horiz-adv-x="1388" d="M63 1206v269h996q119 0 200.5 -83t81.5 -200v-358q0 -117 -81.5 -200t-200.5 -83h-504q-12 0 -12 -12v-138h-271v138q0 117 83 199.5t200 82.5h504q14 0 14 13v358q0 14 -14 14h-996zM272 0v268h271v-268h-271z" />
+<glyph unicode="@" horiz-adv-x="1701" d="M117 283v909q0 117 83 200t199 83h895q117 0 200 -83t83 -200v-786h-797q-117 0 -199.5 81.5t-82.5 200.5v115q0 117 83 198.5t199 81.5h135q117 0 199 -81.5t82 -198.5v-168h113v557q0 14 -15 14h-895q-14 0 -14 -14v-909q0 -14 14 -15h1178v-268h-1178 q-117 0 -199.5 83t-82.5 200zM707 649q0 -14 14 -14h266v227q0 12 -12 12h-254q-14 0 -14 -12v-213z" />
+<glyph unicode="A" horiz-adv-x="1712" d="M119 0v1190q0 119 83 202t201 83h904q119 0 202.5 -83t83.5 -202v-1190h-272v496h-932v-496h-270zM389 766h932v424q0 14 -14 14h-904q-14 0 -14 -14v-424z" />
+<glyph unicode="B" horiz-adv-x="1703" d="M121 0v1475h1130q117 0 201 -83t84 -202v-289q0 -61 -20 -104q80 -84 79 -195v-317q0 -119 -84 -202t-202 -83h-1188zM391 285q0 -14 15 -15h903q14 0 14 15v317q0 12 -14 12h-903q-14 0 -15 -12v-317zM391 901q0 -14 15 -14h845q12 0 13 14v289q0 14 -13 14h-845 q-14 0 -15 -14v-289z" />
+<glyph unicode="C" horiz-adv-x="1683" d="M115 285v905q0 119 83 202t201 83h1186v-271h-1186q-14 0 -14 -14v-905q0 -14 14 -15h1186v-270h-1186q-119 0 -201.5 83t-82.5 202z" />
+<glyph unicode="D" horiz-adv-x="1708" d="M119 0v1475h1188q119 0 202.5 -83t83.5 -202v-905q0 -119 -84 -202t-202 -83h-1188zM389 285q0 -14 14 -15h904q14 0 14 15v905q0 14 -14 14h-904q-14 0 -14 -14v-905z" />
+<glyph unicode="E" horiz-adv-x="1568" d="M119 0v1475h1356v-271h-1084v-332h873v-270h-873v-332h1084v-270h-1356z" />
+<glyph unicode="F" horiz-adv-x="1480" d="M119 0v1475h1356v-271h-1084v-332h873v-270h-873v-602h-272z" />
+<glyph unicode="G" horiz-adv-x="1699" d="M115 285v905q0 119 83 202t201 83h904q119 0 202.5 -83t83.5 -202v-115h-272v115q0 14 -14 14h-904q-14 0 -14 -14v-905q0 -14 14 -15h904q14 0 14 15v278h-334v271h606v-549q0 -119 -84 -202t-202 -83h-904q-119 0 -201.5 83t-82.5 202z" />
+<glyph unicode="H" horiz-adv-x="1742" d="M117 0v1475h270v-603h967v603h270v-1475h-270v602h-967v-602h-270z" />
+<glyph unicode="I" horiz-adv-x="450" d="M117 0v1475h270v-1475h-270z" />
+<glyph unicode="J" horiz-adv-x="1597" d="M8 285v168h271v-168q0 -14 14 -15h905q12 0 12 15v1190h273v-1190q0 -119 -84 -202t-201 -83h-905q-119 0 -202 83t-83 202z" />
+<glyph unicode="K" horiz-adv-x="1632" d="M117 0v1475h272v-603h348l504 603h297v-72l-557 -666l557 -665v-72h-297l-504 602h-348v-602h-272z" />
+<glyph unicode="L" horiz-adv-x="1595" d="M117 0v1477h270v-1207h1204v-270h-1474z" />
+<glyph unicode="M" horiz-adv-x="1900" d="M115 0v1475h295l536 -639l535 639h297v-1475h-273v1081l-559 -665l-561 665v-1081h-270z" />
+<glyph unicode="N" horiz-adv-x="1703" d="M115 0v1475h295l907 -1082v1082h272v-1475h-295l-909 1081v-1081h-270z" />
+<glyph unicode="O" horiz-adv-x="1695" d="M111 285v905q0 119 82.5 202t201.5 83h905q117 0 201 -83t84 -202v-905q0 -119 -84 -202t-201 -83h-905q-119 0 -201.5 83t-82.5 202zM381 285q0 -14 14 -15h905q12 0 13 15v905q0 14 -13 14h-905q-14 0 -14 -14v-905z" />
+<glyph unicode="P" horiz-adv-x="1619" d="M115 0v1473h1188q119 0 202.5 -84t83.5 -201v-397q0 -117 -84 -201t-202 -84l-912 -2l-6 2v-506h-270zM385 791q0 -14 14 -15h904q14 0 14 15v397q0 14 -14 14h-904q-14 0 -14 -14v-397z" />
+<glyph unicode="Q" horiz-adv-x="1810" d="M111 285v905q0 119 82.5 202t201.5 83h903q119 0 203 -83t84 -202v-920h176v-270h-1366q-119 0 -201.5 83t-82.5 202zM381 285q0 -14 14 -15h903q14 0 15 15v905q0 14 -15 14h-903q-14 0 -14 -14v-905z" />
+<glyph unicode="R" horiz-adv-x="1689" d="M113 0v1473h1187q119 0 203 -84t84 -201v-397q0 -117 -84 -201t-203 -84h-79l366 -436v-70h-295l-426 506h-477h-6v-506h-270zM383 791q0 -14 14 -15h903q14 0 15 15v397q0 14 -15 14h-903q-14 0 -14 -14v-397z" />
+<glyph unicode="S" horiz-adv-x="1683" d="M104 285v112h271v-112q0 -14 14 -15h905q12 0 13 15v303q0 14 -13 14h-905q-119 0 -202 83t-83 202v303q0 119 83 202t202 83h905q117 0 201 -83t84 -202v-113h-272v113q0 14 -13 14h-905q-14 0 -14 -14v-303q0 -14 14 -15h905q117 0 201 -82.5t84 -201.5v-303 q0 -119 -84 -202t-201 -83h-905q-119 0 -202 83t-83 202z" />
+<glyph unicode="T" horiz-adv-x="1554" d="M41 1204v271h1475v-271h-601v-1204h-272v1204h-602z" />
+<glyph unicode="U" horiz-adv-x="1695" d="M111 285v1190h270v-1190q0 -14 14 -15h905q12 0 13 15v1190h272v-1190q0 -119 -84 -202t-201 -83h-905q-119 0 -201.5 83t-82.5 202z" />
+<glyph unicode="V" horiz-adv-x="2054" d="M72 1475h313l662 -1147l659 1147h313l-852 -1475h-243z" />
+<glyph unicode="W" horiz-adv-x="2414" d="M72 1475h286l357 -973l356 973h264l357 -973l356 973h287l-537 -1475h-213l-383 1047l-383 -1047h-211z" />
+<glyph unicode="X" horiz-adv-x="1662" d="M94 0v72l559 665l-559 666v72h297l440 -523l441 523h297v-72l-561 -666l561 -665v-72h-297l-441 522l-440 -522h-297z" />
+<glyph unicode="Y" horiz-adv-x="1650" d="M35 1475h321l496 -627l494 627h323l-682 -924v-551h-270v551z" />
+<glyph unicode="Z" horiz-adv-x="1681" d="M104 0v295l1082 909h-1082v271h1475v-295l-1081 -910h1081v-270h-1475z" />
+<glyph unicode="[" horiz-adv-x="563" d="M111 0v1475h393v-269h-125v-938h125v-268h-393z" />
+<glyph unicode="\" horiz-adv-x="1064" d="M10 1186v289h72l979 -1186v-289h-72z" />
+<glyph unicode="]" horiz-adv-x="565" d="M104 0v268h123v938h-123v269h394v-1475h-394z" />
+<glyph unicode="_" horiz-adv-x="1695" d="M111 0h1460v-268h-1460v268z" />
+<glyph unicode="`" horiz-adv-x="436" d="M66 1985h272l94 -375h-272z" />
+<glyph unicode="a" horiz-adv-x="1421" d="M106 283v446h938v176q0 14 -14 15h-924v268h924q117 0 200 -83t83 -200v-905h-924q-117 0 -200 83t-83 200zM375 283q0 -14 14 -15h655v191h-669v-176z" />
+<glyph unicode="b" horiz-adv-x="1366" d="M111 0v1577h268v-389h655q117 0 200 -83t83 -200v-622q0 -117 -83 -200t-200 -83h-923zM379 283q0 -14 14 -15h641q14 0 15 15v622q0 14 -15 15h-641q-14 0 -14 -15v-622z" />
+<glyph unicode="c" horiz-adv-x="1423" d="M104 283v622q0 117 83 200t200 83h920v-268h-920q-14 0 -14 -15v-622q0 -14 14 -15h924v-268h-924q-117 0 -200 83t-83 200z" />
+<glyph unicode="d" horiz-adv-x="1366" d="M47 283v622q0 117 83 200t200 83h657v389h268v-1577h-925q-117 0 -200 83t-83 200zM317 283q0 -14 13 -15h643q14 0 14 15v622q0 14 -14 15h-643q-12 0 -13 -15v-622z" />
+<glyph unicode="e" horiz-adv-x="1417" d="M104 283v622q0 117 83 200t200 83h641q117 0 200 -83t83 -200v-446h-938v-176q0 -14 14 -15h924v-268h-924q-117 0 -200 83t-83 200zM373 729h669v176q0 14 -14 15h-641q-14 0 -14 -15v-176z" />
+<glyph unicode="f" horiz-adv-x="894" d="M109 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268z" />
+<glyph unicode="g" horiz-adv-x="1398" d="M84 283v622q0 117 83 200t200 83h643q117 0 198.5 -83t81.5 -200v-1093q0 -117 -82 -200t-198 -83h-727v270h727q12 0 12 13v188h-655q-117 0 -200 83t-83 200zM352 283q0 -14 15 -15h643q12 0 12 15v622q0 14 -12 15h-643q-14 0 -15 -15v-622z" />
+<glyph unicode="h" horiz-adv-x="1368" d="M111 0v1577h268v-389h655q115 0 199 -83t84 -200v-905h-268v905q0 14 -15 15h-641q-14 0 -14 -15v-905h-268z" />
+<glyph unicode="i" horiz-adv-x="477" d="M106 0v1188h269v-1188h-269zM106 1307v270h269v-270h-269z" />
+<glyph unicode="j" horiz-adv-x="489" d="M-383 -178h512q14 0 14 12v1354h269v-1354q0 -117 -83 -200t-200 -83h-512v271zM143 1307v270h269v-270h-269z" />
+<glyph unicode="k" horiz-adv-x="1323" d="M111 0v1577h268v-848h211l424 459h289v-70l-476 -524l476 -524v-70h-289l-424 459h-211v-459h-268z" />
+<glyph unicode="l" horiz-adv-x="704" d="M106 283v1294h271v-1294q0 -14 12 -15h240v-268h-240q-117 0 -200 83t-83 200z" />
+<glyph unicode="m" horiz-adv-x="2002" d="M111 0v1188h1472q117 0 200 -83t83 -200v-905h-267v905q0 14 -16 15h-446q-12 0 -13 -15v-905h-270v905q0 14 -12 15h-449q-14 0 -14 -15v-905h-268z" />
+<glyph unicode="n" horiz-adv-x="1425" d="M111 0v1188h923q117 0 200 -83t83 -200v-905h-268v905q0 14 -15 15h-641q-14 0 -14 -15v-905h-268z" />
+<glyph unicode="o" horiz-adv-x="1417" d="M104 283v622q0 117 83 200t200 83h641q117 0 200 -83t83 -200v-622q0 -117 -83 -200t-200 -83h-641q-117 0 -200 83t-83 200zM373 283q0 -14 14 -15h641q14 0 14 15v622q0 14 -14 15h-641q-14 0 -14 -15v-622z" />
+<glyph unicode="p" horiz-adv-x="1359" d="M111 -471v1659h923q117 0 200 -83t83 -200v-622q0 -117 -83 -200t-200 -83h-655v-471h-268zM379 283q0 -14 14 -15h641q14 0 15 15v622q0 14 -15 15h-641q-14 0 -14 -15v-622z" />
+<glyph unicode="q" horiz-adv-x="1359" d="M41 283v622q0 117 83 200t200 83h925v-1659h-268v471h-657q-117 0 -200 83t-83 200zM311 283q0 -14 13 -15h643q14 0 14 15v622q0 14 -14 15h-643q-12 0 -13 -15v-622z" />
+<glyph unicode="r" horiz-adv-x="1081" d="M106 0v905q0 117 83 200t200 83h660v-268h-660q-14 0 -14 -15v-905h-269z" />
+<glyph unicode="s" horiz-adv-x="1404" d="M98 283v51h269v-51q0 -14 14 -15h641q14 0 14 15v163q0 12 -14 13h-641q-117 0 -200 83t-83 199v164q0 117 83 200t200 83h641q119 0 201 -83t82 -200v-51h-269v51q0 14 -14 15h-641q-14 0 -14 -15v-164q0 -12 14 -12h641q119 0 201 -83t82 -200v-163q0 -117 -82 -200 t-201 -83h-641q-117 0 -200 83t-83 200z" />
+<glyph unicode="t" horiz-adv-x="894" d="M109 283v1294h268v-389h463v-268h-463v-637q0 -14 14 -15h449v-268h-449q-119 0 -200.5 83t-81.5 200z" />
+<glyph unicode="u" horiz-adv-x="1423" d="M109 283v905h268v-905q0 -14 14 -15h641q14 0 15 15v905h268v-905q0 -117 -83 -200t-200 -83h-641q-119 0 -200.5 83t-81.5 200z" />
+<glyph unicode="v" horiz-adv-x="1617" d="M43 1188h309l467 -862l469 862h309l-655 -1188h-246z" />
+<glyph unicode="w" horiz-adv-x="2162" d="M72 1188h284l287 -701l305 701h279l323 -705l269 705h284l-446 -1188h-209l-358 795l-345 -795h-206z" />
+<glyph unicode="x" horiz-adv-x="1417" d="M94 0v68l438 536l-438 516v68h293l320 -377l321 377h293v-68l-440 -516l440 -536v-68h-293l-321 393l-320 -393h-293z" />
+<glyph unicode="y" horiz-adv-x="1402" d="M86 283v901h268v-901q0 -14 15 -15h643q12 0 12 15v901h268v-1372q0 -117 -82 -200t-198 -83h-727v270h727q12 0 12 13v188h-655q-117 0 -200 83t-83 200z" />
+<glyph unicode="z" horiz-adv-x="1429" d="M111 0v293l811 627h-811v268h1206v-293l-811 -627h811v-268h-1206z" />
+<glyph unicode="{" horiz-adv-x="591" d="M47 627v243l86 48v274q0 117 82 200t201 83h110v-269h-110q-14 0 -15 -14v-350l-116 -94l116 -97v-368q0 -14 15 -15h110v-268h-110q-119 0 -201 83t-82 200v292q-14 8 -45 28t-41 24z" />
+<glyph unicode="|" horiz-adv-x="438" d="M111 -213v1884h268v-1884h-268z" />
+<glyph unicode="}" horiz-adv-x="591" d="M104 0v268h111q14 0 14 15v368l117 97l-117 94v350q0 14 -14 14h-111v269h111q117 0 200 -83t83 -200v-264q14 -8 43.5 -31t42.5 -29v-241l-86 -52v-292q0 -117 -83 -200t-200 -83h-111z" />
+<glyph unicode="~" horiz-adv-x="827" d="M49 520v213q88 39 174 39q78 0 203 -61.5t190 -71.5q98 0 179 53v-196q-102 -43 -183 -43q-74 0 -199.5 65.5t-201.5 65.5q-96 -1 -162 -64z" />
+<glyph unicode="&#xa2;" horiz-adv-x="1302" d="M68 283v643q0 117 82.5 199.5t199.5 82.5h248v248h270v-248h404v-270h-404v-670h404v-268h-404v-213h-270v213h-248q-117 0 -199.5 83t-82.5 200zM336 283q0 -14 14 -15h248v670h-248q-14 0 -14 -12v-643z" />
+<glyph unicode="&#xa3;" horiz-adv-x="1503" d="M80 0v268h194v328h-194v268h194v328q0 117 83 200t200 83h561q117 0 199 -83t82 -200v-88h-269v88q0 14 -12 14h-561q-14 0 -14 -14v-328h651v-268h-651v-328h856v-268h-1319z" />
+<glyph unicode="&#xad;" d="M121 471v268h837v-268h-837z" />
+<glyph unicode="&#xb4;" horiz-adv-x="436" d="M68 1610l94 375h272l-94 -375h-272z" />
+<glyph unicode="&#x2000;" horiz-adv-x="991" />
+<glyph unicode="&#x2001;" horiz-adv-x="1984" />
+<glyph unicode="&#x2002;" horiz-adv-x="991" />
+<glyph unicode="&#x2003;" horiz-adv-x="1984" />
+<glyph unicode="&#x2004;" horiz-adv-x="661" />
+<glyph unicode="&#x2005;" horiz-adv-x="495" />
+<glyph unicode="&#x2006;" horiz-adv-x="329" />
+<glyph unicode="&#x2007;" horiz-adv-x="329" />
+<glyph unicode="&#x2008;" horiz-adv-x="247" />
+<glyph unicode="&#x2009;" horiz-adv-x="395" />
+<glyph unicode="&#x200a;" horiz-adv-x="108" />
+<glyph unicode="&#x2010;" d="M121 471v268h837v-268h-837z" />
+<glyph unicode="&#x2011;" d="M121 471v268h837v-268h-837z" />
+<glyph unicode="&#x2012;" d="M121 471v268h837v-268h-837z" />
+<glyph unicode="&#x2013;" horiz-adv-x="1449" d="M111 469v268h1226v-268h-1226z" />
+<glyph unicode="&#x2014;" horiz-adv-x="1683" d="M111 469v268h1450v-268h-1450z" />
+<glyph unicode="&#x2018;" horiz-adv-x="444" d="M70 956v240q0 106 76.5 186t191.5 99v-525h-268z" />
+<glyph unicode="&#x2019;" horiz-adv-x="442" d="M111 950v525h268v-240q0 -104 -76.5 -184.5t-191.5 -100.5z" />
+<glyph unicode="&#x201c;" horiz-adv-x="823" d="M92 956v240q0 106 77 186t191 99v-525h-268zM446 956v240q0 106 77 186t192 99v-525h-269z" />
+<glyph unicode="&#x201d;" horiz-adv-x="821" d="M111 950v525h268v-240q0 -104 -76.5 -184.5t-191.5 -100.5zM463 950v525h270v-240q0 -104 -76.5 -184.5t-193.5 -100.5z" />
+<glyph unicode="&#x2022;" horiz-adv-x="759" d="M242 711v39q0 111 110 110h45q113 0 113 -110v-39q0 -111 -113 -111h-45q-110 0 -110 111z" />
+<glyph unicode="&#x2026;" horiz-adv-x="1175" d="M111 0v268h268v-268h-268zM479 0v268h271v-268h-271zM850 0v268h268v-268h-268z" />
+<glyph unicode="&#x202f;" horiz-adv-x="395" />
+<glyph unicode="&#x205f;" horiz-adv-x="495" />
+<glyph unicode="&#x20ac;" horiz-adv-x="1636" d="M72 403v269h194v116h-194v269h194v135q0 117 83 200t200 83h979v-269h-979q-14 0 -14 -14v-135h782v-269h-782v-116h782v-269h-782v-120q0 -14 14 -15h979v-268h-979q-117 0 -200 83t-83 200v120h-194z" />
+<glyph unicode="&#x2122;" horiz-adv-x="3454" d="M1669 0v1475h295l536 -639l535 639h297v-1475h-273v1081l-559 -665l-561 665v-1081h-270zM41 1204v271h1475v-271h-601v-1204h-272v1204h-602z" />
+<glyph unicode="&#xe000;" horiz-adv-x="1190" d="M0 1190h1190v-1190h-1190v1190z" />
+<glyph unicode="&#xfb01;" horiz-adv-x="1372" d="M1001 0v1188h269v-1188h-269zM1001 1307v270h269v-270h-269zM109 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268z" />
+<glyph unicode="&#xfb02;" horiz-adv-x="1599" d="M1001 283v1294h271v-1294q0 -14 12 -15h240v-268h-240q-117 0 -200 83t-83 200zM109 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268z" />
+<glyph unicode="&#xfb03;" horiz-adv-x="2267" d="M1896 0v1188h269v-1188h-269zM1896 1307v270h269v-270h-269zM1004 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268zM109 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268z" />
+<glyph unicode="&#xfb04;" horiz-adv-x="2494" d="M1896 283v1294h271v-1294q0 -14 12 -15h240v-268h-240q-117 0 -200 83t-83 200zM1004 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463v-920h-268zM109 0v1294q0 117 81.5 200t200.5 83h449v-270h-449q-14 0 -14 -13v-106h463v-268h-463 v-920h-268z" />
+<glyph horiz-adv-x="821" />
+</font>
+</defs></svg>