initial commit

2022-07-06 20:45:22 +07:00 · 2022-07-06 20:45:22 +07:00 · 02b3edf666
commit 02b3edf666
109 changed files with 5658 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+
+resources/_gen
+public
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,188 @@
+baseURL = "https://blog.teamortix.com"
+title   = "Team Ortix | Blog"
+languageCode = "en-us"
+theme = "hello-friend-ng"
+
+PygmentsCodeFences = false
+
+paginate  = 10
+rssLimit  = 10  # Maximum number of items in the RSS feed.
+copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
+
+archetypeDir = "archetypes"
+contentDir   = "content"
+dataDir      = "data"
+layoutDir    = "layouts"
+publishDir   = "public"
+
+buildDrafts  = false
+buildFuture  = false
+buildExpired = false
+canonifyURLs = false
+
+enableRobotsTXT = true
+enableGitInfo   = false
+enableEmoji     = true
+enableMissingTranslationPlaceholders = false
+disableRSS     = false
+disableSitemap = false
+disable404     = false
+disableHugoGeneratorInject = false
+
+[permalinks]
+  posts = "/posts/:year/:month/:title/"
+
+[author]
+  name = '<a href="https://github.com/hhhapz">Hamza Ali</a> and <a href="https://github.com/chanbakjsd">Chan Wen Xu</a>'
+
+[markup]
+defaultMarkdownHandler = 'goldmark'
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      linkify = false
+    [markup.goldmark.parser]
+      autoHeadingID = true
+      autoHeadingIDType = "github"
+      [markup.goldmark.parser.attribute]
+        block = true
+        title = true
+
+[markup.tableOfContents]
+endLevel = 4
+ordered = false
+startLevel = 2
+
+[taxonomies]
+  tag      = "tags"
+  category = "categories"
+  series   = "series"
+
+[params]
+  dateform        = "Jan 2, 2006"
+  dateformShort   = "Jan 2"
+  dateformNum     = "2006-01-02"
+  dateformNumTime = "2006-01-02 15:04"
+  themeColor = "#f2203a"
+
+  # Metadata mostly used in document's head
+  #
+  description = "The blog for hhhapz - Hamza Ali"
+  keywords = ""
+  images = [""]
+
+  # Home subtitle of the index page.
+  #
+  subtitle = "idk"
+
+
+  # Set a background for the homepage
+  # backgroundImage = "assets/images/background.jpg"
+
+  # Prefix of link to the git commit detail page. GitInfo must be enabled.
+  #
+  # gitUrl = ""
+
+  # Set disableReadOtherPosts to true in order to hide the links to other posts.
+  #
+  disableReadOtherPosts = false
+
+  # Enable theme toggle
+  #
+  # This options enables the theme toggle for the theme.
+  # Per default, this option is off.
+  # The theme is respecting the prefers-color-scheme of the operating systeme.
+  # With this option on, the page user is able to set the scheme he wants.
+  enableThemeToggle = true
+
+  # Sharing buttons
+  #
+  # There are a lot of buttons preconfigured. If you want to change them,
+  # generate the buttons here: https://sharingbuttons.io
+  # and add them into your own `layouts/partials/sharing-buttons.html`
+  #
+  enableSharingButtons = false
+
+  # Integrate Javascript files or stylesheets by adding the url to the external assets or by
+  # linking local files with their path relative to the static folder, e.g. "css/styles.css"
+  #
+  customCSS = [ "/one-dark.css" ]
+  customJS  = []
+
+  # Toggle this option need to rebuild SCSS, requires extended version of Hugo
+  #
+  justifyContent = false  # Set "text-align: justify" to .post-content.
+
+  # Custom footer
+  # If you want, you can easily override the default footer with your own content.
+  #
+  [params.footer]
+    trademark = true
+    rss = true
+    copyright = true
+    author = true
+
+    topText = []
+    bottomText = [
+      "Powered by <a href=\"http://gohugo.io\">Hugo</a>"
+    ]
+
+  # Colors for favicons
+  #
+  [params.favicon.color]
+    mask = "#f2203a"
+    msapplication = "#f2203a"
+    theme = "#f2203a"
+
+  [params.logo]
+    path = "/logo-192.png"
+    logoMark     = "$"
+    logoText     = "/hhhapz"
+    logoHomeLink = "/"
+    # Set true to remove the logo cursor entirely.
+    # logoCursorDisabled = false
+    # Set to a valid CSS color to change the cursor in the logo.
+    logoCursorColor    = "#f2203a"
+    # Set to a valid CSS time value to change the animation duration, "0s" to disable.
+    # logoCursorAnimate  = "2s"
+
+  # Commento is more than just a comments widget you can embed —
+  # it’s a return to the roots of the internet.
+  # An internet without the tracking and invasions of privacy.
+  # An internet that is simple and lightweight.
+  # An internet that is focused on interesting discussions, not ads.
+  # A better internet.
+  # Uncomment this to enable Commento.
+  #
+  # [params.commento]
+  #   url = ""
+
+  # Uncomment this if you want a portrait on your start page
+  #
+  # [params.portrait]
+  #   path     = "/img/image.jpg"
+  #   alt      = "Portrait"
+  #   maxWidth = "50px"
+
+  [[params.social]]
+    name = "email"
+    url  = "mailto:hamza@teamortix.com"
+
+  [[params.social]]
+    name = "github"
+    url  = "https://github.com/teamortix"
+
+[languages]
+  [languages.en]
+    subtitle  = ""
+    weight    = 1
+    copyright = 'CC BY-NC 4.0'
+
+[menu]
+  [[menu.main]]
+    identifier = "about"
+    name       = "About"
+    url        = "about/"
+  [[menu.main]]
+    identifier = "posts"
+    name       = "Posts"
+    url        = "posts/"
--- a/content/about.md
+++ b/content/about.md
@ -0,0 +1,35 @@
+---
+title: "About"
+date: "2021-08-16"
+date: 2021-08-17T01:30:19+07:00
+Description: "About blog.teamortix.com"
+---
+
+Hey \o
+
+---
+
+This is just a simple blog.
+
+A place for members of Team Ortix to share thoughts.
+
+Members:
+
+- **hhhapz**:
+  
+  - Hamza Ali
+  - [GitHub](https://github.com/hhhapz)
+  - [Email](mailto:hamza@teamortix.com)
+
+- **chanbakjsd**:
+  
+  - Chan Wen Xu
+  - [GitHub](https://github.com/chanbakjsd)
+  - [Email](mailto:chan@teamortix.com)
+
+> Team Ortix is just a team of developers.
+
+---
+
+Have a vulnerability or issue to report? Please report it
+[here](https://teamortix.com/.well-known/security.txt).
--- a/content/posts/go-databases.md
+++ b/content/posts/go-databases.md
@ -0,0 +1,224 @@
+---
+title: "Go Databases"
+tinyname: "go_databases"
+date: 2021-08-13T20:56:12+07:00
+toc: true
+description: |-
+  There are a plethora of libraries available in Go.
+  Here is a list of libraries that may be of interest.
+tags:
+  - go
+  - databases
+  - sql
+author:
+  name: Hamza Ali
+  url: https://github.com/hhhapz
+---
+
+> This is currently under construction and incomplete.
+
+## Prelude
+
+When working on a Go project, there comes a time where you application needs
+a database. As a developer, you have a plethora of options to pick from, some
+good, others not so much. As a new developer, making a decision can be
+difficult, especially when treading blind.
+
+My goal with this post is to share some perspective and evaluate the different
+tools that are available in the Go ecosystem. Perhaps you will be able to find
+a new tool that helps reduce your code complexity, or gain more perspective
+about why some other libraries might not be as appealing as they seem.
+
+---
+
+## What are my options? {#options}
+
+I plan to compare a half dozen different libraries here that accomplish
+different goals. There may be other similar tools that accomplish similar
+goals, which I have omitted.
+
+If you would like to suggest another tool, feel free to send me an [email](mailto:hamza@teamortix.com).
+
+Apart from these tools, I strongly believe that looking for libraries that are
+compatible with the Go standard library (`database/sqlite`) is really
+important. All the tools I mentioned will work seamlessly with it.
+
+- Utility libraries
+
+  - **[github.com/jmoiron/sqlx](https://github.com/jmoiron/sqlx)**
+
+    Quoting the README of the repository, sqlx is a library which provides
+    extensions on Go's standard `database/sql` library with marshalling from
+    sql rows to Go types.
+
+  - **[github.com/keengancsmith/sqlf](https://github.com/keegancsmith/sqlf)**
+
+    Create SQL queries that are safe from injections with printf, making
+    composing queries and working with dynamic number of arguments (more on
+    this later).
+
+  - **[github.com/Masterminds/squirrel](https://github.com/Masterminds/squirrel)**
+
+    A highly composable SQL generator for Go. Using a builder pattern, this
+    library can really help writing SQL queries in a type safe manner.
+
+- Code generation libraries
+
+  - **[github.com/xo/xo](https://github.com/xo/xo)**
+
+    A code generation libraries that creates a model and CRUD operations from
+    your database, and generate type-safe functions from queries. (Limited
+    Documentation)
+
+  - **[github.com/kyleconrow/sqlc](https//github.com/kyleconrow/sqlc)**
+
+    Similar to xo, a different style code generation library that should be
+    mentioned seperately. Generates code by parsing your SQL.
+
+- Object Relational Mappers - Map Go types in SQL and ORM likes.
+
+  - **[github.com/ent/ent](https://github.com/ent/ent)**
+
+    A composable entity framework that emphasizes on user control.
+
+---
+
+## What about GORM or XORM? {#gorm}
+
+To much of my disappointment, many developers who work with Go fall in the trap
+of using an ORM. This is really, really tempting to do, however there are
+a number of flaws that most, if not all of these libraries exhibit, which can
+severely cripple your project.
+
+### What you Gain {#gain}
+
+Firstly, it is difficult to deny that these libraries do appeal thousands of
+developers. While not being the most accurate metric by any means, it is still
+a strong indicator. GORM has almost 25,000 stars (at the time of writing this
+post) on GitHub and Xorm has over 6,000 on its archived Github.
+
+I will try to explain why many features ORMs are often celebrated and praised
+are in fact a source of never ending gotchas.
+
+#### 1. No need for SQL {#no-sql}
+
+Many beginners fall into the trap of using an ORM because it means they don't
+need to learn SQL, which can often come across as being challenging or
+daunting. A complete new query language, which has its own quirks, learning
+about selects, updates, *joins*, *indexes*?
+
+From their point of shoes, all of this programmer jargon can be easily avoided
+and ORMs are the way to go.
+
+> *ORMs rules, SQL drools*.
+
+In the contrary, I believe that if you are writing a backend application,
+knowing SQL is a prerequisite. As an analogy, imagine trying to use a styling
+framework, such as  Bootstrap or TailwindCSS, without knowing CSS. Most people
+would agree that attempting to use it without knowing CSS is a recipe for
+botched styling that is terrible to maintain, and generally a recipe for
+disaster.
+
+Similarly, writing SQL with clean queries that tell both, yourself and your
+database exactly what to do ensure a healthy architecture that is both easy to
+debug, extend, and refactor.
+
+#### 2. Magically Simple {#magical}
+
+ORMs are magic. You can call `db.Find(&users)`, and boom! All your rows are
+returned. A simple filter can be done trivially. `db.First(&user, 10)` will
+query the user whose primary key matches 10. However, there is a pain point
+that always surfaces when a project uses an ORM more and more.
+
+As a user, writing calling functions like `Find`, `Take`, `First`, `Last` lead
+to a loss of control. You no longer have the ability to tune or modify your
+queries.
+
+This works fine for simple use cases, however, when pushing these to their
+limits, (which is not very far).
+
+For example, updating rows to the zero value of the Go type will simply be
+ignored. This usually makes sense, however, very quickly turns into messy
+design and hacks, such as resorting to pointer field types, or just returning
+back to good old plain SQL.
+
+Complex functionality (SQL) abstracted with another "simpler" layer (your ORM)
+always poses the lingering risk of *increasing* complexity through complex
+wrappers and hacks.
+
+#### 3. Easy Migrations {#migrations}
+
+ORMs always promote having the ability to automagically handle migrating your
+schema as your Go data structures change. While valid, again, these migrations
+are generally done under the hood, and leave you, the user with very little
+control.
+
+Furthermore, many tools exist already that already handle database migrations
+significantly more effectively, and give you more fine-tuning power, so that
+you always are able to stay in control.
+
+When migrations become messy or non-trivial, GORM has the potential to break,
+or simply make things worse. Using tools like
+[migrate](https://github.com//golang-migrate/migrate) are much better
+suites, support more databases, has cleaner documentation, and is a more robust
+alternative use.
+
+---
+
+### Pain Points {#pain}
+
+#### 1. Finding Help {#help}
+
+Continuing from the points one and two, when working with an ORM, finding help
+becomes monumentally more difficult.
+
+Finding answers for generic SQL is significantly easier to do in your favorite
+search engine. You will be able to find a plethora of information about
+defining foreign keys, creating indexes, composite foreign keys, and any other
+SQL feature on Stack Overflow, or a database forum. When transitioning from one
+database to another, for example from MS SQL Server to PostgreSQL, or from
+Oracle DB to SQLite3, a large portion of your knowledge will be transferable.
+
+On the other side of the coin, migrating from Hibernate to Gorm leads leads to
+very little directly transferable knowledge. Even if you are knowledgeable in
+a SQL itself, many times you will be at the mercy of the documentation for the
+ORM you are using to clearly define how to implement your use-case.
+
+Attempting to find information about questions or concerns you have mean having
+to find not only a community specific to the language you are using, but
+a subset of that community that also has experience with the very specific
+library you use, which might mean the time between finding your answer being
+a few searches away to a few days, or being undocumented enough that it just
+may never be solved.
+
+#### 2. (Ab)using language features {#lang-features}
+
+When working in Gorm in particular, defining primary keys, indexes, and check
+constraints can be described lightly as a mess. Go struct tags are overloaded
+and stuffed to the brim to gain simple functionality. Here are a few examples
+from the Gorm documentation:
+
+```go
+type SomeTable struct {
+  // Constraints
+  Name  string `gorm:"check:name_checker,name <> 'jinzhu'"`
+
+  // Composite Primary Keys
+  CategoryID uint64 `gorm:"primaryKey;autoIncrement:false"`
+  TypeID     uint64 `gorm:"primaryKey;autoIncrement:false"`
+
+  // Foreign Key
+  CreditCard CreditCard `gorm:"foreignKey:UserName"`
+
+  // Indexes
+  Name4 string `gorm:"uniqueIndex"`
+}
+```
+
+Now, imagine if your project required a combination of these. Having a foreign
+key alongside of an index, or attempting to define a many-to-many index.
+Abusing struct tags make it easy to make a mistake, force you to give up all
+compiler guarantees and with compile-time errors, and terrible to work with. As
+a user, you are at the complete whim of the Gorm documentation, and their
+support for these features, instead of having the full breadth of options and
+customizability one would expect.
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@ -0,0 +1,2 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>
+
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/bg-header.svg
+++ b/static/bg-header.svg
@ -0,0 +1,373 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="bd4d382f-3ad3-4c40-a04c-93bb574f9328"
+   data-name="Layer 1"
+   width="650.50208"
+   height="452"
+   viewBox="0 0 650.50209 452.00001"
+   version="1.1"
+   sodipodi:docname="backdrop.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs347" />
+  <sodipodi:namedview
+     id="namedview345"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     showgrid="false"
+     height="451px"
+     inkscape:zoom="1"
+     inkscape:cx="227.5"
+     inkscape:cy="130"
+     inkscape:window-width="1902"
+     inkscape:window-height="1027"
+     inkscape:window-x="9"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="bd4d382f-3ad3-4c40-a04c-93bb574f9328" />
+  <path
+     d="m 415.55657,383.62012 c -30.66552,-30.188 -43.61718,-61.68164 -36.47021,-88.67871 9.17187,-34.645 49.918,-58.59912 111.79053,-65.72022 l 0.22851,1.98731 c -61.01123,7.0215 -101.13574,30.43798 -110.0854,64.24462 -6.95556,26.27344 5.80811,57.07911 35.93994,86.74219 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path210" />
+  <path
+     d="m 711.42718,490.77832 c -38.27246,0 -79.86231,-5.6875 -121.17285,-16.624 -51.08594,-13.52442 -97.92627,-33.938 -135.457,-59.03467 l 1.11132,-1.66211 c 37.3501,24.9751 83.98291,45.29541 134.85743,58.76318 45.97458,12.17186 92.29392,17.81151 133.93356,16.32328 l 0.0723,1.998 q -6.5962,0.23731 -13.34473,0.23632 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path212" />
+  <path
+     d="m 799.22894,478.20117 -0.64063,-1.89453 c 34.22949,-11.57324 55.63867,-30.21631 61.91309,-53.91553 7.97558,-30.12744 -9.35156,-65.08838 -48.79,-98.44287 -39.63965,-33.52392 -96.80078,-61.34033 -160.95606,-78.32422 l 0.51172,-1.93359 c 64.43555,17.05859 121.875,45.019 161.73535,78.731 40.06153,33.88086 57.61719,69.56591 49.43262,100.48144 -6.45414,24.37887 -28.31059,43.50045 -63.20609,55.2983 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path214" />
+  <path
+     d="M 484.9223,491.61426 C 409.71917,458.26074 351.76946,414.98877 321.749,369.76855 l 1.666,-1.10644 c 29.813,44.90723 87.4585,87.92285 162.31787,121.124 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path216" />
+  <path
+     d="m 749.3305,549.39648 q -11.63526,0 -23.668,-0.51953 l 0.0859,-1.998 c 59.86426,2.59179 112.68359,-4.57227 152.75781,-20.72168 l 0.74805,1.85547 c -34.95798,14.08589 -79.51462,21.38374 -129.9238,21.38374 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path218" />
+  <path
+     d="m 705.69671,231.01465 c -12.42969,-4.04688 -25.21484,-7.81494 -38,-11.19971 C 594.123,200.3374 521.79925,193.42188 458.54144,199.81982 l -0.20118,-1.99023 c 63.49366,-6.41895 136.065,0.51318 209.86817,20.05176 12.82129,3.39453 25.64258,7.17334 38.10742,11.23193 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path220" />
+  <path
+     d="m 368.55657,386.62012 c -30.66552,-30.188 -43.61718,-61.68164 -36.47021,-88.67871 9.17187,-34.645 49.918,-58.59912 111.79053,-65.72022 l 0.22851,1.98731 c -61.01123,7.0215 -101.13574,30.43798 -110.0854,64.24462 -6.95556,26.27344 5.80811,57.07911 35.93994,86.74219 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path222" />
+  <path
+     d="m 664.42718,493.77832 c -38.27246,0 -79.86231,-5.6875 -121.17285,-16.624 -51.08594,-13.52442 -97.92627,-33.938 -135.457,-59.03467 l 1.11132,-1.66211 c 37.3501,24.9751 83.98291,45.29541 134.85743,58.76318 45.97458,12.17186 92.29392,17.81151 133.93356,16.32328 l 0.0723,1.998 q -6.5962,0.23731 -13.34473,0.23632 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path224" />
+  <path
+     d="m 752.22894,481.20117 -0.64063,-1.89453 c 34.22949,-11.57324 55.63867,-30.21631 61.91309,-53.91553 7.97558,-30.12744 -9.35156,-65.08838 -48.79,-98.44287 -39.63965,-33.52392 -96.80078,-61.34033 -160.95606,-78.32422 l 0.51172,-1.93359 c 64.43555,17.05859 121.875,45.019 161.73535,78.731 40.06153,33.88086 57.61719,69.56591 49.43262,100.48144 -6.45414,24.37887 -28.31059,43.50045 -63.20609,55.2983 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path226" />
+  <path
+     d="M 437.9223,494.61426 C 362.71917,461.26074 304.76946,417.98877 274.749,372.76855 l 1.666,-1.10644 c 29.813,44.90723 87.4585,87.92285 162.31787,121.124 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path228" />
+  <path
+     d="m 702.3305,552.39648 q -11.63526,0 -23.668,-0.51953 l 0.0859,-1.998 c 59.86426,2.59179 112.68359,-4.57227 152.75781,-20.72168 l 0.74805,1.85547 c -34.95798,14.08589 -79.51462,21.38374 -129.9238,21.38374 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path230" />
+  <path
+     d="m 658.69671,234.01465 c -12.42969,-4.04688 -25.21484,-7.81494 -38,-11.19971 C 547.123,203.3374 474.79925,196.42188 411.54144,202.81982 l -0.20118,-1.99023 c 63.49366,-6.41895 136.065,0.51318 209.86817,20.05176 12.82129,3.39453 25.64258,7.17334 38.10742,11.23193 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path232" />
+  <circle
+     id="af8c7bff-6816-464a-b0a9-6a679aecd372"
+     data-name="Ellipse 563"
+     cx="156.16609"
+     cy="65.034927"
+     r="45.498001"
+     fill="#6c63ff" />
+  <path
+     d="m 441.587,193.65362 a 46.49805,46.49805 0 1 1 46.498,-46.498 46.55065,46.55065 0 0 1 -46.498,46.498 z m 0,-90.9961 a 44.49805,44.49805 0 1 0 44.498,44.49805 44.54859,44.54859 0 0 0 -44.498,-44.49805 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#3f3d56"
+     id="path249" />
+  <circle
+     id="a60e3f6d-2e55-4ba4-880b-24129c1d171d"
+     data-name="Ellipse 565"
+     cx="574.83014"
+     cy="227.41992"
+     r="31.243999"
+     fill="#6c63ff" />
+  <path
+     d="m 856.908,347.59258 a 32.24414,32.24414 0 1 1 32.24414,-32.24414 32.28068,32.28068 0 0 1 -32.24414,32.24414 z m 0,-62.48828 A 30.24414,30.24414 0 1 0 887.15214,315.34844 30.27823,30.27823 0 0 0 856.908,285.1043 Z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#3f3d56"
+     id="path252" />
+  <g
+     id="baaccb77-fe9e-4683-9e52-b00664372613"
+     data-name="Group 58"
+     transform="translate(-126.9548,-249.31661)">
+    <path
+       id="fb603159-8dea-4755-9c7c-d25bd7f9bc0c"
+       data-name="Path 438"
+       d="m 882.44706,758.66947 a 19.47408,19.47408 0 0 1 -18.806,-3.313 c -6.587,-5.528 -8.652,-14.637 -10.332,-23.07 l -4.97,-24.945 10.405,7.165 c 7.483,5.152 15.134,10.47 20.316,17.933 5.182,7.463 7.443,17.651 3.28,25.727"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#f2203a" />
+    <path
+       id="a8ec8a48-e4af-4fa0-8d27-3c92af74fe9a"
+       data-name="Path 439"
+       d="m 880.84005,790.60551 c 1.31,-9.542 2.657,-19.206 1.738,-28.85 -0.816,-8.565 -3.429,-16.93 -8.749,-23.789 a 39.57383,39.57383 0 0 0 -10.153,-9.2 c -1.015,-0.641 -1.95,0.968 -0.939,1.606 a 37.62185,37.62185 0 0 1 14.881,17.956 c 3.24,8.241 3.76,17.224 3.2,25.978 -0.338,5.294 -1.053,10.553 -1.774,15.806 a 0.964,0.964 0 0 0 0.65,1.144 0.936,0.936 0 0 0 1.144,-0.65 z"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#f2f2f2" />
+    <path
+       id="b09ba816-4f06-4578-8eb4-a29f6123e742"
+       data-name="Path 442"
+       d="m 871.41305,775.29649 a 14.336,14.336 0 0 1 -12.491,6.447 c -6.323,-0.3 -11.595,-4.713 -16.34,-8.9 l -14.035,-12.396 9.289,-0.444 c 6.68,-0.32 13.533,-0.618 19.9,1.442 6.367,2.06 12.231,7.018 13.394,13.6"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#e6e6e6" />
+    <path
+       id="add4fdd4-5f13-462c-8fd8-fbec5e5c357a"
+       data-name="Path 443"
+       d="m 884.542,796.09147 c -6.3,-11.156 -13.618,-23.555 -26.685,-27.518 a 29.77876,29.77876 0 0 0 -11.224,-1.159 c -1.192,0.1 -0.894,1.94 0.3,1.837 a 27.66482,27.66482 0 0 1 17.912,4.739 c 5.051,3.438 8.983,8.217 12.311,13.286 2.039,3.1 3.865,6.341 5.691,9.573 0.57905,1.03204 2.285,0.28698 1.695,-0.758 z"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#f2f2f2" />
+  </g>
+  <g
+     id="ee656491-410e-4193-8926-ffe46b73d48a"
+     data-name="Group 222"
+     transform="translate(48.8899,-302.34221)">
+    <path
+       id="a6ee8b3a-6384-4722-b3cb-80bef4872a5a"
+       data-name="Path 2961"
+       d="m 387.748,771.657 a 14.336,14.336 0 0 0 13.96062,-1.64007 c 5.07425,-3.78449 6.97639,-10.39054 8.56966,-16.51565 l 4.70658,-18.12088 -7.94921,4.82625 c -5.71691,3.47012 -11.565,7.05522 -15.69149,12.32341 -4.12649,5.26819 -6.2142,12.65074 -3.49467,18.76417"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#e6e6e6" />
+    <path
+       id="f2bbd591-1ffb-4624-8852-7218542fde3c"
+       data-name="Path 2962"
+       d="m 388.492,796.23851 c -1.01542,-12.77166 -1.882,-27.14307 6.735,-37.73552 a 29.77858,29.77858 0 0 1 8.65784,-7.23779 c 1.04413,-0.58366 1.826,1.10841 0.77852,1.6907 a 27.66393,27.66393 0 0 0 -12.1997,13.94507 c -2.265,5.67471 -2.85236,11.83543 -2.77685,17.89882 0.0431,3.71021 0.34161,7.4182 0.6351,11.11874 0.0962,1.1799 -1.73528,1.51547 -1.82991,0.31998 z"
+       transform="translate(-274.74896,-100.65752)"
+       fill="#f2f2f2" />
+  </g>
+  <circle
+     id="e41ec8f5-a87e-4b16-bc24-7a000bd09eb1"
+     data-name="Ellipse 567"
+     cx="94.865082"
+     cy="334.45993"
+     r="44.912998"
+     fill="#e4e4e4" />
+  <path
+     d="m 380.14893,462.73321 a 45.91285,45.91285 0 1 1 45.91308,-45.9126 45.96467,45.96467 0 0 1 -45.91308,45.9126 z m 0,-89.82569 a 43.91285,43.91285 0 1 0 43.91307,43.91309 43.96263,43.96263 0 0 0 -43.91307,-43.91309 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#2f2e41"
+     id="path264" />
+  <circle
+     cx="67.751038"
+     cy="170.34248"
+     r="8"
+     fill="#f2f2f2"
+     id="circle266" />
+  <circle
+     cx="478.75104"
+     cy="130.34248"
+     r="8"
+     fill="##f2203a"
+     id="circle268" />
+  <circle
+     cx="531.75104"
+     cy="414.34247"
+     r="8"
+     fill="#f2f2f2"
+     id="circle270" />
+  <polygon
+     points=""
+     fill="#f2f2f2"
+     id="polygon272" />
+  <path
+     d="m 448.2282,302.301 0.30342,-1.97729 39.07263,5.99423 c -3.98179,-3.84384 -17.168,-15.73149 -29.12694,-16.93687 -14.28681,-1.43982 -20.57275,4.676 -21.40353,12.91859 -0.83078,8.24259 4.10776,15.49 18.39488,16.9302 12.11058,1.22082 27.64265,-8.04289 32.0955,-10.89447 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#f2f2f2"
+     id="path274" />
+  <polygon
+     points=""
+     fill="#f2f2f2"
+     id="polygon276" />
+  <path
+     d="m 822.11667,196.38545 -1.20553,-1.59638 31.5445,-23.82322 c -5.5317,0.17315 -23.24738,1.33352 -32.45121,9.064 -10.99524,9.2353 -10.99568,18.0055 -5.66758,24.34912 5.3281,6.34362 13.9664,7.85835 24.96212,-1.3769 9.32063,-7.82832 13.513,-25.42051 14.57462,-30.60051 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#f2f2f2"
+     id="path278" />
+  <polygon
+     points=""
+     fill="#f2f2f2"
+     id="polygon280" />
+  <path
+     d="m 747.63418,425.72227 -0.86731,-1.1485 22.69437,-17.13937 c -3.97973,0.12457 -16.72509,0.95939 -23.34669,6.521 -7.91041,6.64423 -7.91073,12.95387 -4.07748,17.51772 3.83325,4.56385 10.048,5.65361 17.95874,-0.9906 6.70562,-5.632 9.72181,-18.28852 10.48556,-22.01522 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#f2f2f2"
+     id="path282" />
+  <path
+     d="m 567.97934,152.90952 c 6.14879,-16.53194 20.67627,-30.81667 38.23241,-32.51582 a 81.26684,81.26684 0 0 0 -12.844,54.29669 c 0.89844,7.34267 2.66227,15.41593 -1.29595,21.66534 -2.46282,3.88858 -6.80323,6.28249 -11.27737,7.36283 -4.4744,1.08028 -9.13654,0.99659 -13.73863,0.90672 l -1.03029,0.50874 c -3.23663,-17.33887 -4.19495,-35.69256 1.95383,-52.2245 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path284" />
+  <path
+     d="m 606.29674,120.75391 a 69.46131,69.46131 0 0 0 -25.80578,34.066 29.91265,29.91265 0 0 0 -1.82558,9.1926 17.15622,17.15622 0 0 0 2.31994,8.72606 c 1.385,2.49909 3.091,4.895 3.84436,7.68725 a 10.50475,10.50475 0 0 1 -1.47529,8.46337 c -1.98468,3.11122 -4.9689,5.32376 -7.96242,7.386 -3.32372,2.28975 -6.81231,4.61543 -8.846,8.21248 -0.24641,0.43583 -0.90826,0.028 -0.66223,-0.40717 3.53827,-6.25825 10.964,-8.53149 15.50673,-13.84739 2.1197,-2.48049 3.50472,-5.61481 2.84937,-8.91778 -0.57308,-2.88829 -2.33027,-5.36049 -3.75444,-7.87876 a 18.30685,18.30685 0 0 1 -2.5863,-8.44768 27.65338,27.65338 0 0 1 1.46542,-9.22888 67.38964,67.38964 0 0 1 9.50523,-18.79553 70.69316,70.69316 0 0 1 17.06068,-16.89636 c 0.40916,-0.28566 0.7728,0.402 0.36631,0.68582 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path286" />
+  <path
+     d="m 581.77789,150.29 a 10.42139,10.42139 0 0 1 -5.20576,-12.4501 c 0.15335,-0.47609 0.90037,-0.26014 0.74681,0.21658 a 9.65,9.65 0 0 0 4.86612,11.57129 c 0.44694,0.22466 0.0372,0.8856 -0.40717,0.66223 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path288" />
+  <path
+     d="m 580.1162,171.56387 a 20.08641,20.08641 0 0 0 11.39256,-9.192 c 0.24795,-0.43494 0.90988,-0.0273 0.66223,0.40717 a 20.89281,20.89281 0 0 1 -11.87443,9.541 c -0.47837,0.14957 -0.65613,-0.60742 -0.18036,-0.75617 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path290" />
+  <path
+     d="m 594.0838,131.28338 a 5.899,5.899 0 0 0 5.50539,1.01112 c 0.47624,-0.15556 0.65349,0.60163 0.18036,0.75618 a 6.61035,6.61035 0 0 1 -6.09292,-1.10507 0.40175,0.40175 0 0 1 -0.12753,-0.5347 0.39066,0.39066 0 0 1 0.5347,-0.12753 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path292" />
+  <path
+     d="m 648.52826,162.5338 c -0.2946,0.10559 -0.58921,0.21118 -0.88564,0.32309 a 77.687,77.687 0 0 0 -11.452,5.25938 c -0.28616,0.15479 -0.57384,0.316 -0.855,0.47865 a 81.89936,81.89936 0 0 0 -22.91541,19.59789 79.53468,79.53468 0 0 0 -6.83507,9.96571 c -2.79266,4.82059 -5.43706,10.26953 -9.53838,13.78262 a 13.64235,13.64235 0 0 1 -1.33656,1.03217 l -27.98417,-6.62184 c -0.0561,-0.047 -0.11391,-0.0877 -0.17027,-0.13469 l -1.12941,-0.21331 c 0.0917,-0.1873 0.19089,-0.37959 0.28262,-0.56689 0.0528,-0.10887 0.11175,-0.21626 0.1645,-0.32513 0.0371,-0.0721 0.0746,-0.1442 0.104,-0.21139 0.0123,-0.024 0.0249,-0.048 0.0356,-0.0657 0.0294,-0.0672 0.0638,-0.12649 0.0917,-0.1873 q 0.827,-1.61457 1.67953,-3.22313 c 0.002,-0.006 0.002,-0.006 0.009,-0.0113 a 116.94421,116.94421 0 0 1 15.52657,-22.87674 c 0.18372,-0.206 0.36863,-0.41843 0.56513,-0.62139 a 75.89471,75.89471 0 0 1 9.01481,-8.49255 67.09652,67.09652 0 0 1 5.52493,-3.9448 55.79245,55.79245 0 0 1 15.99471,-6.96226 c 11.29084,-2.92428 23.39124,-2.205 33.35174,3.57023 0.25478,0.14792 0.50357,0.2944 0.75675,0.44872 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path294" />
+  <path
+     d="m 648.38131,162.87409 a 69.46125,69.46125 0 0 0 -41.11453,11.66291 29.91234,29.91234 0 0 0 -6.9922,6.24065 17.15609,17.15609 0 0 0 -3.40135,8.364 c -0.39882,2.82922 -0.47913,5.7694 -1.55875,8.45241 a 10.50474,10.50474 0 0 1 -6.27347,5.8693 c -3.45782,1.28922 -7.17266,1.2591 -10.80444,1.1034 -4.03239,-0.17288 -8.21806,-0.41633 -12.00751,1.2313 -0.45915,0.19963 -0.74206,-0.52448 -0.28361,-0.72381 6.593,-2.86658 13.89071,-0.21081 20.71833,-1.72024 3.1859,-0.70433 6.17884,-2.373 7.64418,-5.40483 1.28139,-2.65118 1.3668,-5.683 1.74585,-8.55118 a 18.30691,18.30691 0 0 1 3.02108,-8.30214 27.65318,27.65318 0 0 1 6.72648,-6.48646 67.39008,67.39008 0 0 1 18.90563,-9.2844 70.69334,70.69334 0 0 1 23.79478,-3.21908 c 0.49868,0.0183 0.375,0.78628 -0.12043,0.76814 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path296" />
+  <path
+     d="M 611.02162,171.69494 A 10.42142,10.42142 0 0 1 614.36093,158.62 c 0.40909,-0.28779 0.87553,0.33438 0.4659,0.62256 a 9.65,9.65 0 0 0 -3.0814,12.16877 c 0.2216,0.44847 -0.50348,0.72951 -0.72381,0.28361 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path298" />
+  <path
+     d="m 596.88651,187.6805 a 20.0864,20.0864 0 0 0 14.63051,-0.48016 c 0.45984,-0.198 0.7429,0.526 0.28361,0.72381 a 20.89288,20.89288 0 0 1 -15.22539,0.4687 c -0.472,-0.16859 -0.15817,-0.88 0.31127,-0.71235 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path300" />
+  <path
+     d="m 632.29049,163.92824 a 5.899,5.899 0 0 0 3.787,4.12195 c 0.4739,0.16252 0.15955,0.87382 -0.31127,0.71235 a 6.61031,6.61031 0 0 1 -4.19953,-4.55069 0.40175,0.40175 0 0 1 0.2201,-0.50371 0.39067,0.39067 0 0 1 0.50371,0.2201 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path302" />
+  <path
+     d="m 482.97934,380.90952 c 6.14879,-16.53194 20.67627,-30.81667 38.23241,-32.51582 a 81.26684,81.26684 0 0 0 -12.844,54.29669 c 0.89844,7.34267 2.66227,15.41593 -1.29595,21.66534 -2.46282,3.88858 -6.80323,6.28249 -11.27737,7.36283 -4.4744,1.08028 -9.13654,0.99659 -13.73863,0.90672 l -1.03029,0.50874 c -3.23663,-17.33887 -4.19495,-35.69256 1.95383,-52.2245 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path304" />
+  <path
+     d="m 521.29674,348.75391 a 69.46131,69.46131 0 0 0 -25.80574,34.06595 29.91265,29.91265 0 0 0 -1.82558,9.1926 17.15622,17.15622 0 0 0 2.31994,8.72606 c 1.385,2.49909 3.091,4.895 3.84436,7.68725 a 10.50475,10.50475 0 0 1 -1.47529,8.46337 c -1.98468,3.11122 -4.9689,5.32376 -7.96242,7.386 -3.32372,2.28975 -6.81231,4.61543 -8.846,8.21248 -0.24641,0.43583 -0.90826,0.028 -0.66223,-0.40717 3.53827,-6.25825 10.964,-8.53149 15.50673,-13.84739 2.1197,-2.48049 3.50472,-5.61481 2.84937,-8.91778 -0.57308,-2.88829 -2.33027,-5.36049 -3.75444,-7.87876 a 18.30685,18.30685 0 0 1 -2.5863,-8.44768 27.65338,27.65338 0 0 1 1.46542,-9.22888 67.38964,67.38964 0 0 1 9.50523,-18.79553 70.69316,70.69316 0 0 1 17.06068,-16.89636 c 0.40916,-0.28566 0.7728,0.402 0.36631,0.68582 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path306" />
+  <path
+     d="m 496.77789,378.29 a 10.42139,10.42139 0 0 1 -5.20576,-12.4501 c 0.15335,-0.47609 0.90037,-0.26014 0.74681,0.21658 a 9.65,9.65 0 0 0 4.86612,11.57129 c 0.44694,0.22466 0.0372,0.8856 -0.40717,0.66223 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path308" />
+  <path
+     d="m 495.1162,399.56387 a 20.08641,20.08641 0 0 0 11.39256,-9.192 c 0.248,-0.43494 0.90988,-0.0272 0.66223,0.40717 a 20.89281,20.89281 0 0 1 -11.87443,9.541 c -0.47837,0.14957 -0.65613,-0.60742 -0.18036,-0.75617 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path310" />
+  <path
+     d="m 509.0838,359.28338 a 5.899,5.899 0 0 0 5.50539,1.01112 c 0.47624,-0.15556 0.65349,0.60163 0.18036,0.75618 a 6.61035,6.61035 0 0 1 -6.09292,-1.10507 0.40175,0.40175 0 0 1 -0.12753,-0.5347 0.39066,0.39066 0 0 1 0.5347,-0.12753 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path312" />
+  <path
+     d="m 563.52826,390.5338 c -0.2946,0.10559 -0.58921,0.21118 -0.88564,0.32309 a 77.687,77.687 0 0 0 -11.452,5.25938 c -0.28616,0.15479 -0.57384,0.316 -0.855,0.47865 a 81.89936,81.89936 0 0 0 -22.91541,19.59789 79.53468,79.53468 0 0 0 -6.83507,9.96571 c -2.79266,4.82059 -5.43706,10.26953 -9.53838,13.78262 a 13.64235,13.64235 0 0 1 -1.33656,1.03217 l -27.98417,-6.62184 c -0.056,-0.047 -0.11391,-0.0877 -0.17027,-0.13469 l -1.12941,-0.21331 c 0.0917,-0.1873 0.19089,-0.37959 0.28262,-0.56689 0.0528,-0.10887 0.11175,-0.21626 0.1645,-0.32513 0.0371,-0.0721 0.0746,-0.1442 0.104,-0.21139 0.0123,-0.024 0.0249,-0.048 0.0356,-0.0657 0.0294,-0.0672 0.0638,-0.12649 0.0917,-0.1873 q 0.827,-1.61457 1.67953,-3.22313 c 0.002,-0.006 0.002,-0.006 0.009,-0.0113 a 116.94421,116.94421 0 0 1 15.52657,-22.87674 c 0.18372,-0.206 0.36863,-0.41843 0.56513,-0.62139 a 75.89471,75.89471 0 0 1 9.01481,-8.49255 67.09652,67.09652 0 0 1 5.52493,-3.9448 55.79245,55.79245 0 0 1 15.99471,-6.96226 c 11.29084,-2.92428 23.39124,-2.205 33.35174,3.57023 0.25478,0.14792 0.50357,0.2944 0.75675,0.44872 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path314" />
+  <path
+     d="m 563.38131,390.87409 a 69.46125,69.46125 0 0 0 -41.11453,11.66291 29.91234,29.91234 0 0 0 -6.9922,6.24065 17.15609,17.15609 0 0 0 -3.40135,8.364 c -0.39882,2.82922 -0.47913,5.7694 -1.55875,8.45241 a 10.50474,10.50474 0 0 1 -6.27347,5.8693 c -3.45782,1.28922 -7.17266,1.2591 -10.80444,1.1034 -4.03239,-0.17288 -8.21806,-0.41633 -12.00751,1.2313 -0.45915,0.19963 -0.74206,-0.52448 -0.28361,-0.72381 6.593,-2.86658 13.89071,-0.21081 20.71833,-1.72024 3.1859,-0.70433 6.17884,-2.373 7.64418,-5.40483 1.28139,-2.65118 1.3668,-5.683 1.74585,-8.55118 a 18.30691,18.30691 0 0 1 3.02108,-8.30214 27.65318,27.65318 0 0 1 6.72648,-6.48646 67.39008,67.39008 0 0 1 18.90563,-9.2844 70.69334,70.69334 0 0 1 23.79478,-3.21908 c 0.49868,0.0183 0.375,0.78628 -0.12043,0.76814 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path316" />
+  <path
+     d="M 526.02162,399.69494 A 10.42142,10.42142 0 0 1 529.36093,386.62 c 0.40909,-0.28779 0.87553,0.33438 0.4659,0.62256 a 9.65,9.65 0 0 0 -3.0814,12.16877 c 0.2216,0.44847 -0.50348,0.72951 -0.72381,0.28361 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path318" />
+  <path
+     d="m 511.88651,415.6805 a 20.0864,20.0864 0 0 0 14.63051,-0.48016 c 0.45984,-0.198 0.7429,0.526 0.28361,0.72381 a 20.89288,20.89288 0 0 1 -15.22539,0.4687 c -0.472,-0.16859 -0.15817,-0.88 0.31127,-0.71235 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path320" />
+  <path
+     d="m 547.29049,391.92824 a 5.899,5.899 0 0 0 3.787,4.12195 c 0.4739,0.16252 0.15955,0.87382 -0.31127,0.71235 a 6.61031,6.61031 0 0 1 -4.19953,-4.55069 0.40175,0.40175 0 0 1 0.2201,-0.50371 0.39067,0.39067 0 0 1 0.50371,0.2201 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path322" />
+  <path
+     d="m 831.32381,504.82439 c -3.13786,-11.73057 -0.67686,-25.53931 8.50057,-33.49063 a 55.94745,55.94745 0 0 0 14.432,35.5974 c 3.431,3.76352 7.6389,7.59221 7.90795,12.67782 a 12.50652,12.50652 0 0 1 -3.39557,8.62788 37.14308,37.14308 0 0 1 -7.35042,5.98492 l -0.37555,0.69623 C 842.315,526.47535 834.46167,516.555 831.32381,504.82439 Z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path324" />
+  <path
+     d="m 840.01566,471.50208 a 47.82,47.82 0 0 0 -0.90735,29.40773 20.59268,20.59268 0 0 0 2.63925,5.88767 11.811,11.811 0 0 0 4.78028,3.97346 24.44625,24.44625 0 0 1 5.22193,2.78275 7.23191,7.23191 0 0 1 2.54522,5.33872 18.78969,18.78969 0 0 1 -1.52556,7.31962 c -0.953,2.61006 -1.9843,5.306 -1.69214,8.1357 0.0354,0.34286 -0.49867,0.37774 -0.534,0.0354 -0.50831,-4.92319 2.75388,-9.159 3.185,-13.95355 a 7.32394,7.32394 0 0 0 -1.955,-6.14147 c -1.47291,-1.39285 -3.44463,-2.08017 -5.24779,-2.92609 a 12.60323,12.60323 0 0 1 -4.81884,-3.711 19.03771,19.03771 0 0 1 -2.85588,-5.76448 46.394,46.394 0 0 1 -2.156,-14.339 48.668,48.668 0 0 1 2.842,-16.28439 c 0.11581,-0.32343 0.594,-0.0824 0.479,0.239 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path326" />
+  <path
+     d="m 838.02516,497.85414 a 7.17452,7.17452 0 0 1 -7.88449,-4.91362 c -0.10368,-0.32837 0.40172,-0.5049 0.50553,-0.1761 a 6.64345,6.64345 0 0 0 7.34357,4.5557 c 0.34042,-0.052 0.37387,0.48228 0.0354,0.534 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path328" />
+  <path
+     d="m 845.57179,510.458 a 13.82831,13.82831 0 0 0 2.73118,-9.70052 c -0.0342,-0.343 0.49987,-0.378 0.534,-0.0354 a 14.38351,14.38351 0 0 1 -2.86255,10.0885 c -0.20891,0.27463 -0.61041,-0.0794 -0.40264,-0.35258 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path330" />
+  <path
+     d="m 837.3571,482.28037 a 4.06112,4.06112 0 0 0 3.49332,-1.62678 c 0.20532,-0.27714 0.60662,0.0772 0.40263,0.35258 a 4.55082,4.55082 0 0 1 -3.86056,1.80822 0.27658,0.27658 0 0 1 -0.2847,-0.24931 0.26894,0.26894 0 0 1 0.24931,-0.28471 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path332" />
+  <path
+     d="m 880.3739,478.12144 c -0.12328,0.17669 -0.24656,0.35339 -0.36835,0.53436 a 53.48206,53.48206 0 0 0 -4.332,7.51675 c -0.0989,0.20095 -0.19618,0.40609 -0.28914,0.60946 a 56.38309,56.38309 0 0 0 -5.05162,20.13441 54.75484,54.75484 0 0 0 0.13546,8.31833 c 0.35381,3.819 1.04129,7.93164 0.13937,11.53833 a 9.393,9.393 0 0 1 -0.33884,1.11211 l -18.34753,7.437 c -0.0502,-0.004 -0.0989,-0.004 -0.14925,-0.008 l -0.719,0.33043 c -0.0232,-0.1417 -0.0441,-0.28916 -0.0673,-0.43086 -0.0138,-0.0821 -0.0235,-0.16594 -0.0372,-0.24808 -0.008,-0.0553 -0.0156,-0.11067 -0.0259,-0.16011 -0.003,-0.0184 -0.005,-0.0369 -0.006,-0.0511 -0.0103,-0.0494 -0.0146,-0.0965 -0.0232,-0.1417 q -0.17932,-1.23593 -0.34192,-2.47865 c -0.002,-0.004 -0.002,-0.004 7e-4,-0.01 a 80.509,80.509 0 0 1 -0.40281,-19.02986 c 0.021,-0.18885 0.0401,-0.38181 0.0695,-0.57406 a 52.248,52.248 0 0 1 1.67526,-8.3602 46.18955,46.18955 0 0 1 1.529,-4.41644 38.40967,38.40967 0 0 1 6.20319,-10.28328 c 5.17225,-6.14179 12.25119,-10.561 20.14415,-11.28932 0.20192,-0.0186 0.39996,-0.0355 0.60358,-0.0498 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path334" />
+  <path
+     d="m 880.42705,478.371 a 47.82,47.82 0 0 0 -18.43,22.93414 20.593,20.593 0 0 0 -1.43749,6.29 11.81107,11.81107 0 0 0 1.42449,6.05065 24.446,24.446 0 0 1 2.494,5.36582 7.23189,7.23189 0 0 1 -1.18206,5.79507 18.78977,18.78977 0 0 1 -5.625,4.92581 c -2.33239,1.5102 -4.77893,3.04187 -6.24933,5.47713 -0.17816,0.29506 -0.62559,10e-4 -0.4477,-0.29325 2.55825,-4.23693 7.71316,-5.65491 10.944,-9.22355 a 7.32394,7.32394 0 0 0 2.1366,-6.08069 c -0.33744,-1.99891 -1.49794,-3.73481 -2.42835,-5.49585 a 12.60324,12.60324 0 0 1 -1.61321,-5.86428 19.03767,19.03767 0 0 1 1.19036,-6.322 46.394,46.394 0 0 1 6.91158,-12.747 48.66809,48.66809 0 0 1 12.07352,-11.2911 c 0.28719,-0.18851 0.52388,0.29189 0.23856,0.47917 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path336" />
+  <path
+     d="m 862.972,498.21325 a 7.17451,7.17451 0 0 1 -3.337,-8.67026 c 0.11492,-0.3246 0.62473,-0.16127 0.50966,0.16376 a 6.64346,6.64346 0 0 0 3.12058,8.05881 c 0.30314,0.16341 0.008,0.61017 -0.29325,0.44769 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path338" />
+  <path
+     d="m 861.40915,512.82031 a 13.82828,13.82828 0 0 0 8.02108,-6.101 c 0.1792,-0.29443 0.62668,-8.2e-4 0.44769,0.29325 a 14.3835,14.3835 0 0 1 -8.35956,6.33164 c -0.33214,0.0935 -0.43954,-0.43093 -0.10921,-0.52393 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path340" />
+  <path
+     d="m 871.81505,485.37625 a 4.06112,4.06112 0 0 0 3.76866,0.80432 c 0.33079,-0.0977 0.43785,0.4269 0.10921,0.52393 a 4.55086,4.55086 0 0 1 -4.17112,-0.88056 0.27659,0.27659 0 0 1 -0.0772,-0.37047 0.26894,0.26894 0 0 1 0.37047,-0.0772 z"
+     transform="translate(-274.74896,-100.65752)"
+     fill="#c9d1d9"
+     id="path342" />
+</svg>
--- a/static/browserconfig.xml
+++ b/static/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/logo-192.png
+++ b/static/logo-192.png
--- a/static/logo-512.png
+++ b/static/logo-512.png
--- a/static/mstile-150x150.png
+++ b/static/mstile-150x150.png
--- a/static/one-dark.css
+++ b/static/one-dark.css
@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-keyword,.hljs-operator,.hljs-pattern-match{color:#f92672}.hljs-function,.hljs-pattern-match .hljs-constructor{color:#61aeee}.hljs-function .hljs-params{color:#a6e22e}.hljs-function .hljs-params .hljs-typing{color:#fd971f}.hljs-module-access .hljs-module{color:#7e57c2}.hljs-constructor{color:#e2b93d}.hljs-constructor .hljs-string{color:#9ccc65}.hljs-comment,.hljs-quote{color:#b18eb1;font-style:italic}.hljs-doctag,.hljs-formula{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
--- a/static/safari-pinned-tab.svg
+++ b/static/safari-pinned-tab.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
+-2560z m2765 1910 c448 -52 869 -258 1175 -576 560 -583 698 -1440 350 -2163
+-190 -393 -490 -698 -876 -890 -727 -361 -1599 -226 -2188 339 -594 571 -754
+1466 -396 2209 285 590 831 987 1481 1075 126 17 332 20 454 6z"/>
+<path d="M3095 3965 c-86 -24 -232 -103 -336 -182 -493 -371 -996 -1194 -1134
+-1855 -32 -151 -44 -384 -26 -479 34 -173 87 -240 253 -322 137 -67 259 -109
+410 -139 162 -32 434 -32 595 0 652 130 1144 621 1275 1274 32 161 32 433 0
+595 -83 416 -311 767 -657 1015 -115 82 -162 102 -249 105 -49 1 -101 -3 -131
+-12z"/>
+</g>
+</svg>
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
--- a/themes/hello-friend-ng/.eslintrc.yml
+++ b/themes/hello-friend-ng/.eslintrc.yml
@ -0,0 +1,60 @@
+---
+
+env:
+  es6: true
+
+extends:
+  # https://github.com/airbnb/javascript
+  - airbnb
+  - eslint:recommended
+  - prettier
+
+parser: babel-eslint
+
+rules:
+  # best practices
+  arrow-parens:
+    - 2
+    - as-needed
+  semi:
+    - 2
+    - never
+  class-methods-use-this: 0
+  comma-dangle:
+    - 2
+    - always-multiline
+  no-console:
+    - 2
+  no-unused-expressions: 0
+  no-param-reassign:
+    - 2
+    - props: false
+  no-useless-escape: 0
+  func-names: 0
+  quotes:
+    - 2
+    - single
+    - allowTemplateLiterals: true
+  no-underscore-dangle: 0
+  object-curly-newline: 0
+  function-paren-newline: 0
+  operator-linebreak:
+    - 2
+    - after
+  no-unused-vars:
+    - 2
+    - argsIgnorePattern: "^_"
+  # jsx a11y
+  jsx-a11y/no-static-element-interactions: 0
+  jsx-a11y/anchor-is-valid:
+    - 2
+    - specialLink:
+        - to
+
+globals:
+  document: true
+  requestAnimationFrame: true
+  window: true
+  self: true
+  fetch: true
+  Headers: true
--- a/themes/hello-friend-ng/.gitignore
+++ b/themes/hello-friend-ng/.gitignore
@ -0,0 +1,35 @@
+
+# Created by https://www.gitignore.io/api/macos
+# Edit at https://www.gitignore.io/?templates=macos
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# End of https://www.gitignore.io/api/macos
+
+.vscode
--- a/themes/hello-friend-ng/CHANGELOG.md
+++ b/themes/hello-friend-ng/CHANGELOG.md
@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## 2020-05-13
+
+### Added
+- Changelog
+
+### Changed
+- In order to make the image handling more consistent, the `cover` tag does not force the image to live in `/img/` anymore. [!131](https://github.com/rhazdon/hugo-theme-hello-friend-ng/pull/131).
--- a/themes/hello-friend-ng/CONTRIBUTING.md
+++ b/themes/hello-friend-ng/CONTRIBUTING.md
@ -0,0 +1,4 @@
+
+# How to contribute
+
+If you spot any bugs, please use [Issue Tracker](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues) or if you want to add a new feature directly please create a new [Pull Request](https://github.com/rhazdon/hugo-theme-hello-friend-ng/pulls).
--- a/themes/hello-friend-ng/LICENSE.md
+++ b/themes/hello-friend-ng/LICENSE.md
@ -0,0 +1,11 @@
+The MIT License (MIT)
+
+Original work Copyright (c) 2018 Track3<br />
+Original work Copyright (c) 2019 panr<br />
+Modified work Copyright (c) 2019 Djordje Atlialp<br />
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/themes/hello-friend-ng/README.md
+++ b/themes/hello-friend-ng/README.md
@ -0,0 +1,205 @@
+# Hello Friend NG
+
+![Hello Friend NG](https://dsh.re/d914c)
+
+## General informations
+
+This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for their great work.
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [How to start](#how-to-start)
+- [How to configure](#how-to-configure)
+- [More](#more-things)
+  - [Built in shortcodes](#built-in-shortcodes)
+    - [image](#image)
+  - [Code highlighting](#code-highlighting)
+  - [Favicon](#favicon)
+  - [Audio Support](#audio-support)
+- [Social Icons](#social-icons)
+- [Known issues](#known-issues)
+- [How to edit the theme](#how-to-edit-the-theme)
+- [Changelog](CHANGELOG.md)
+- [Sponsoring](#sponsoring)
+- [Licence](#licence)
+
+---
+
+## Features
+
+- Theming: **dark/light mode**, depending on your system preferences or the users choice
+- Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
+- Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
+- An easy way to modify the theme with Hugo tooling
+- Fully responsive
+- Audio support for posts (thanks to [@talbotp](https://github.com/talbotp))
+- Support for social icons
+- Support for sharing buttons
+- Support for [Commento](https://commento.io)
+
+## How to start
+
+You can download the theme manually by going to [https://github.com/rhazdon/hugo-theme-hello-friend-ng.git](https://github.com/rhazdon/hugo-theme-hello-friend-ng.git) and pasting it to `themes/hello-friend-ng` in your root directory.
+
+You can also clone it directly to your Hugo folder:
+
+``` bash
+$ git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
+```
+
+If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
+
+``` bash
+$ git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
+```
+
+## How to configure
+
+The theme doesn't require any advanced configuration. Just copy the following config file.
+To see all possible configurations, [check the docs](docs/config.md).
+Note: There are more options to configure. Take a look into the `config.toml` in `exampleSite`.
+
+``` toml
+baseurl      = "localhost"
+title        = "My Blog"
+languageCode = "en-us"
+theme        = "hello-friend-ng"
+paginate     = 10
+
+[params]
+  dateform        = "Jan 2, 2006"
+  dateformShort   = "Jan 2"
+  dateformNum     = "2006-01-02"
+  dateformNumTime = "2006-01-02 15:04"
+
+  # Subtitle for home
+  homeSubtitle = "A simple and beautiful blog"
+
+  # Set disableReadOtherPosts to true in order to hide the links to other posts.
+  disableReadOtherPosts = false
+
+  # Enable sharing buttons, if you like
+  enableSharingButtons = true
+
+  # Metadata mostly used in document's head
+  description = "My new homepage or blog"
+  keywords = "homepage, blog"
+  images = [""]
+
+[taxonomies]
+    category = "blog"
+    tag      = "tags"
+    series   = "series"
+
+[languages]
+  [languages.en]
+    title = "Hello Friend NG"
+    subtitle = "A simple theme for Hugo"
+    keywords = ""
+    copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
+    readOtherPosts = "Read other posts"
+
+    [languages.en.params.logo]
+      logoText = "hello friend ng"
+      logoHomeLink = "/"
+    # or
+    #
+    # path = "/img/your-example-logo.svg"
+    # alt = "Your example logo alt text"
+
+  # And you can even create generic menu
+  [[menu.main]]
+    identifier = "blog"
+    name       = "Blog"
+    url        = "/posts"
+```
+
+## More things
+
+### Built-in shortcodes
+
+Of course you are able to use all default shortcodes from hugo (https://gohugo.io/content-management/shortcodes/).
+
+#### image
+
+Properties:
+
+  - `src` (required)
+  - `alt` (optional)
+  - `position` (optional, default: `left`, options: [`left`, `center`, `right`])
+  - `style`
+
+Example:
+
+``` golang
+{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
+```
+
+### Code highlighting
+
+By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this:
+
+<pre>
+``` html
+  // your code here
+```
+</pre>
+
+### Favicon
+
+Check the [docs](docs/favicons.md).
+
+### Audio Support
+
+You wrote an article and recorded it? Or do you have a special music that you would like to put on a certain article? Then you can do this now without further ado.
+
+In your article add to your front matters part:
+
+```yaml
+audio: path/to/file.mp3
+```
+
+## Social Icons:
+
+A large variety of social icons are available and can be configured like this:
+
+```toml
+[[params.social]]
+  name = "<site>"
+  url = "<profile_URL>"
+```
+
+Take a look into this [list](docs/svgs.md) of available icon options. 
+
+If you need another one, just open an issue or create a pull request with your wished icon. :)
+
+## Known issues
+
+There is a bug in Hugo that sometimes causes the main page not to render correctly. The reason is an empty taxonomy part.
+Related issue tickets: [!14](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues/14) [!59](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues/59).
+
+Either you comment it out completely or you write the following in
+
+``` toml
+[taxonomies]
+  tag      = "tags"
+  category = "categories"
+```
+
+## How to edit the theme
+
+Just edit it. You don't need any node stuff. ;)
+
+## Sponsoring
+
+If you like my work and if you think this project is worth to support it, just <br />
+<a href="https://www.buymeacoffee.com/djordjeatlialp" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
+
+## Licence
+
+Copyright © 2019-2021 Djordje Atlialp
+
+The theme is released under the MIT License. Check the [original theme license](https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/LICENSE.md) for additional licensing information.
--- a/themes/hello-friend-ng/archetypes/default.md
+++ b/themes/hello-friend-ng/archetypes/default.md
@ -0,0 +1,8 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+comments: false
+images:
+---
+
--- a/themes/hello-friend-ng/archetypes/posts.md
+++ b/themes/hello-friend-ng/archetypes/posts.md
@ -0,0 +1,10 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+toc: false
+images:
+tags:
+  - untagged
+---
+
--- a/themes/hello-friend-ng/assets/js/highlight.min.js
+++ b/themes/hello-friend-ng/assets/js/highlight.min.js
--- a/themes/hello-friend-ng/assets/js/main.js
+++ b/themes/hello-friend-ng/assets/js/main.js
@ -0,0 +1,27 @@
+const themeToggle = document.querySelector(".theme-toggle");
+
+function getTheme() {
+  const theme = window.localStorage && window.localStorage.getItem("theme");
+  return [theme === "dark", theme === "light"];
+}
+
+function detectOSColorTheme() {
+  const [dark, light] = getTheme();
+  let attribute;
+
+  if (dark) attribute = "dark"
+  else if (light) attribute = "light"
+  else if (window.matchMedia("(prefers-color-scheme: dark)").matches) attribute = "dark"
+  else attribute = "light"
+
+  document.documentElement.setAttribute("data-theme", attribute);
+}
+
+function switchTheme(e) {
+  const [dark] = getTheme();
+  localStorage.setItem("theme", dark ? "light": "dark")
+  detectOSColorTheme();
+}
+
+themeToggle.addEventListener("click", switchTheme, false);
+detectOSColorTheme();
--- a/themes/hello-friend-ng/assets/js/menu.js
+++ b/themes/hello-friend-ng/assets/js/menu.js
@ -0,0 +1,22 @@
+// Mobile menu
+
+const menuTrigger = document.querySelector(".menu-trigger");
+const menu = document.querySelector(".menu");
+const mobileQuery = getComputedStyle(document.body).getPropertyValue(
+  "--phoneWidth"
+);
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+const isMobileMenu = () => {
+  menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+  menu && menu.classList.toggle("hidden", isMobile());
+};
+
+isMobileMenu();
+
+menuTrigger &&
+  menuTrigger.addEventListener(
+    "click",
+    () => menu && menu.classList.toggle("hidden")
+  );
+
+window.addEventListener("resize", isMobileMenu);
--- a/themes/hello-friend-ng/assets/scss/_404.scss
+++ b/themes/hello-friend-ng/assets/scss/_404.scss
@ -0,0 +1,9 @@
+.btn-404 svg {
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.btn-404 a {
+  margin: 0 10px;
+}
--- a/themes/hello-friend-ng/assets/scss/_buttons.scss
+++ b/themes/hello-friend-ng/assets/scss/_buttons.scss
@ -0,0 +1,139 @@
+.button-container {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+button,
+.button,
+a.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-align: center;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  // Default
+  background: $light-background-header;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+    color: inherit;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+    color: inherit;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
+  &.outline {
+    background: transparent;
+    box-shadow: none;
+    padding: 8px 18px;
+    // Default
+    border-color: $light-background-secondary;
+
+    @media (prefers-color-scheme: dark) {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    @media (prefers-color-scheme: light) {
+      border-color: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      border-color: $light-background-secondary;
+    }
+
+    :hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  &.primary {
+    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+
+    &:hover {
+      box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
+    }
+  }
+
+  &.link {
+    background: none;
+    font-size: 1rem;
+  }
+
+  &.small {
+    font-size: .8rem;
+  }
+
+  &.wide {
+    min-width: 200px;
+    padding: 14px 24px;
+  }
+}
+
+.code-toolbar {
+  margin-bottom: 20px;
+
+  .toolbar-item a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 8px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 500;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+    // Default
+    background: $light-background-secondary;
+
+    @media (prefers-color-scheme: dark) {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    @media (prefers-color-scheme: light) {
+      background: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      background: $light-background-secondary;
+    }
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_fonts.scss
+++ b/themes/hello-friend-ng/assets/scss/_fonts.scss
@ -0,0 +1,50 @@
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 400;
+  src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
+       url("../fonts/Inter-UI-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 400;
+  src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
+       url("../fonts/Inter-UI-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 600;
+  src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
+       url("../fonts/Inter-UI-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 600;
+  src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
+       url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 800;
+  src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
+       url("../fonts/Inter-UI-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 800;
+  src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
+       url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
+}
--- a/themes/hello-friend-ng/assets/scss/_footer.scss
+++ b/themes/hello-friend-ng/assets/scss/_footer.scss
@ -0,0 +1,49 @@
+.footer {
+  padding: 40px 20px;
+  flex-grow: 0;
+  color: $light-color-secondary;
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: 760px;
+    max-width: 100%;
+
+    @media #{$media-size-tablet} {
+      flex-direction: column;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 1rem;
+    color: $light-color-secondary;
+
+    @media #{$media-size-tablet} {
+      flex-direction: column;
+      margin-top: 10px;
+    }
+
+    & > *:not(:last-child)::after {
+      content: "•";
+      padding: 0 5px;
+
+      @media #{$media-size-tablet} {
+          content: "";
+          padding: 0;
+      }
+    }
+
+    & > *:last-child {
+      padding: 0 0px;
+
+      @media #{$media-size-tablet} {
+          padding: 0;
+      }
+    }
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_header.scss
+++ b/themes/hello-friend-ng/assets/scss/_header.scss
@ -0,0 +1,63 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 20px;
+  // Default
+  background: $light-background-header;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @media #{$media-size-phone} {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    width: 760px;
+    max-width: 100%;
+  }
+}
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.theme-toggler {
+  fill: currentColor;
+}
+
+.not-selectable {
+  user-select: none;
+  -webkit-user-select: none;  
+  -moz-user-select: none;    
+  -ms-user-select: none;      
+}
--- a/themes/hello-friend-ng/assets/scss/_list.scss
+++ b/themes/hello-friend-ng/assets/scss/_list.scss
@ -0,0 +1,85 @@
+.posts {
+  width: 100%;
+  max-width: 800px;
+  text-align: left;
+  padding: 20px;
+  margin: 20px auto;
+
+  @media #{$media-size-tablet} {
+    max-width: 660px;
+  }
+
+  &:not(:last-of-type) {
+    // Default
+    border-bottom: 1px solid $light-border-color;
+
+    @media (prefers-color-scheme: dark) {
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    @media (prefers-color-scheme: light) {
+      border-bottom: 1px solid $light-border-color;
+    }
+  
+    [data-theme=dark] & {
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    [data-theme=light] & {
+      border-bottom: 1px solid $light-border-color;
+    }
+  }
+
+  &-group {
+    display: flex;
+    margin-bottom: 1.9em;
+    line-height: normal;
+
+    @media #{$media-size-tablet} {
+      display: block;
+    }
+  }
+
+  &-list {
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .post {
+    &-title {
+      font-size: 1rem;
+      margin: 5px 0 5px 0;
+    }
+
+    &-year {
+      padding-top: 6px;
+      margin-right: 1.8em;
+      font-size: 1.6em;
+      @include dimmed;
+
+      @media #{$media-size-tablet} {
+        margin: -6px 0 4px;
+      }
+    }
+
+    &-item {
+      border-bottom: 1px grey dashed;
+
+      a {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 12px 0;
+        text-decoration: none;
+      }
+    }
+
+    &-day {
+      flex-shrink: 0;
+      margin-left: 1em;
+      @include dimmed;
+    }
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_logo.scss
+++ b/themes/hello-friend-ng/assets/scss/_logo.scss
@ -0,0 +1,45 @@
+.logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-weight: bold;
+  font-display: auto;
+  font-family: monospace, monospace;
+
+  img {
+    height: 32px;
+    border-radius: 32px;
+    margin-right: 12px;
+  }
+
+  &__mark {
+    margin-right: 3px;
+  }
+
+  &__text {
+    font-size: 1rem;
+  }
+
+  &__cursor {
+    display: inline-block;
+    width: 10px;
+    height: 1rem;
+    background: #fe5186;
+    margin-left: 5px;
+    border-radius: 1px;
+    animation: cursor 1s infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__cursor {
+        animation: none;
+    }
+  }
+
+}
+
+@keyframes cursor {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
--- a/themes/hello-friend-ng/assets/scss/_main.scss
+++ b/themes/hello-friend-ng/assets/scss/_main.scss
@ -0,0 +1,522 @@
+html {
+  box-sizing: border-box;
+  line-height: 1.6;
+  letter-spacing: 0.06em;
+  scroll-behavior: smooth;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+    "Segoe UI", Helvetica, Arial, sans-serif;
+  font-display: auto;
+  font-size: 1.4rem;
+  line-height: 1.54;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
+  -webkit-overflow-scrolling: touch;
+  -webkit-text-size-adjust: 100%;
+
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+
+  // Default
+  background-color: $light-background;
+  color: $light-color;
+
+  @media #{$media-size-phone} {
+    font-size: 1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-background;
+    color: $dark-color;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background-color: $light-background;
+    color: $light-color;
+  }
+
+  [data-theme=dark] & {
+    background-color: $dark-background;
+    color: $dark-color;
+  }
+
+  [data-theme=light] & {
+    background-color: $light-background;
+    color: $light-color;
+  }
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: flex;
+  align-items: center;
+  line-height: 1.1;
+
+  &.center {
+      justify-content: center;
+  }
+
+}
+
+.post-content {
+  h1, h2, h3, h4, h5, h6 {
+    & a {
+      visibility: hidden;
+      color: #f2203a;
+      text-decoration: none;
+      margin-left: 4px;
+    }
+
+    &:hover a {
+      visibility: visible;
+    }
+  }
+}
+
+h1 {
+  font-size: 2.625rem;
+}
+
+h2 {
+  font-size: 1.675rem;
+}
+
+h3 {
+  font-size: 1.475rem;
+}
+
+h4 {
+  font-size: 1.325rem;
+}
+
+@media #{$media-size-phone} {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+  }
+
+  h4 {
+    font-size: 1.125rem;
+  }
+}
+
+a {
+  color: inherit;
+
+  &:hover  {
+    color: #f2203a;
+  }
+}
+
+p a, .post-content li a, #toc a {
+  text-decoration: none;
+  color: $light-color;
+  font-weight: normal;
+  box-shadow: inset 0 -0.06em 0 #f2203a;
+  -webkit-transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
+  transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
+
+  @media (prefers-color-scheme: dark) {
+    color: $dark-color;
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: $light-color;
+  }
+
+  [data-theme=dark] & {
+    color: $dark-color;
+  }
+
+  [data-theme=light] & {
+    color: $light-color;
+  }
+
+  &:hover {
+      box-shadow: inset 0 -1.5em 0 #f2203a;
+      color: white;
+  }
+}
+
+#toc {
+  li {
+    margin-bottom: 5px;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+  &.circle {
+    border-radius: 50%;
+    max-width: 25%;
+    margin: auto;
+  }
+}
+
+figure {
+  display: table;
+  max-width: 100%;
+  margin: 25px 0;
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.left-floated {
+    margin-right: auto;
+    float: left;
+    img {
+      margin: 20px 20px 20px 0;
+    }
+  }
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+
+  &.right-floated {
+    margin-left: auto;
+    float: right;
+    img {
+      margin: 20px 0 20px 20px;
+    }
+  }
+
+  &.rounded {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  figcaption {
+    font-size: 14px;
+    margin-top: 5px;
+    opacity: 0.8;
+
+    &.left {
+      text-align: left;
+    }
+
+    &.center {
+      text-align: center;
+    }
+
+    &.right {
+      text-align: right;
+    }
+  }
+}
+
+em, i, strong {
+  // Default
+  color: black;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: black;
+  }
+
+  [data-theme=dark] & {
+    color: white;
+  }
+
+  [data-theme=light] & {
+    color: black;
+  }
+}
+
+code {
+  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+  font-display: auto;
+  font-feature-settings: normal;
+  padding: 1px 6px;
+  margin: 0 2px;
+  border-radius: 5px;
+  font-size: 0.95rem;
+  // Default
+  background: $light-background-secondary;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-secondary;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-secondary;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
+}
+
+pre {
+  background: #212020;
+  padding: 10px 10px 10px 20px;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  overflow: auto;
+
+  @media #{$media-size-phone} {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  code {
+    background: none !important;
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    // Default
+    color: #ccc;
+
+    @media (prefers-color-scheme: dark) {
+      color: inherit;
+    }
+
+    @media (prefers-color-scheme: light) {
+      color: #ccc;
+    }
+
+    [data-theme=dark] & {
+      color: inherit;
+    }
+
+    [data-theme=light] & {
+      color: #ccc;
+    }
+  }
+}
+
+blockquote {
+  border-left: 3px solid #f2203a;
+  margin: 40px 20px;
+  padding: 5px 15px;
+
+  @media #{$media-size-phone} {
+    margin: 10px;
+    padding: 10px;
+  }
+
+  &:before {
+    content: "”";
+    font-family: Georgia, serif;
+    font-display: auto;
+    font-size: 3.875rem;
+    position: absolute;
+    left: -40px;
+    top: -20px;
+  }
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+ul,
+ol {
+  margin-left: 40px;
+  padding: 0;
+
+  @media #{$media-size-phone} {
+    margin-left: 20px;
+  }
+}
+
+ol ol {
+  list-style-type: lower-alpha;
+}
+
+.container {
+  flex: 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 auto;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+
+  @media #{$media-size-phone} {
+    margin-top: 0;
+  }
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 60%;
+  max-width: 1000px;
+
+  div {
+      min-width: 240px;
+  }
+
+  @media #{$media-size-laptop} {
+    width: 80%
+  }
+
+  @media #{$media-size-tablet} {
+    width: 90%
+  }
+
+  img {
+      width: 100%;
+      max-width: 440px;
+  }
+
+  @media #{$media-size-phone} {
+      justify-content: center;
+      width: auto;
+      img {
+          display: none;
+      }
+  }
+}
+
+
+hr {
+  width: 100%;
+  border: none;
+  height: 1px;
+  // Default
+  background: $light-border-color;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-border-color;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-border-color;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-border-color;
+  }
+
+  [data-theme=light] & {
+    background: $light-border-color;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.hide-on-phone {
+  @media #{$media-size-phone} {
+    display: none;
+  }
+}
+
+.hide-on-tablet {
+  @media #{$media-size-tablet} {
+    display: none;
+  }
+}
+
+// Accessibility
+.screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  clip: auto !important;
+  clip-path: none;
+  color: #21759b;
+  display: block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  height: auto;
+  width: auto;
+  top: 5px;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  z-index: 100000;
+}
+
+.background-image {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center center;
+}
+
+// Prism JS Additionals
+.highlight {
+  margin: 30px auto;
+}
--- a/themes/hello-friend-ng/assets/scss/_menu.scss
+++ b/themes/hello-friend-ng/assets/scss/_menu.scss
@ -0,0 +1,83 @@
+.menu {
+  z-index: 9999;
+  // Default
+  background: $light-background-header;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
+  @media #{$media-size-phone} {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    border: none;
+    margin: 0;
+    padding: 10px;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 15px;
+    font-size: 1rem;
+    list-style: none;
+
+    li {
+      margin: 0 12px;
+    }
+
+    @media #{$media-size-phone} {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0;
+
+      li {
+        margin: 0;
+        padding: 5px;
+      }
+    }
+  }
+
+  &-trigger {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+    margin-left: 10px;
+    cursor: pointer;
+    display: none;
+
+    @media #{$media-size-phone} {
+      display: block;
+    }
+  }
+
+  a {
+    display: inline-block;
+    margin-right: 15px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_mixins.scss
+++ b/themes/hello-friend-ng/assets/scss/_mixins.scss
@ -0,0 +1,3 @@
+@mixin dimmed {
+  opacity: .6;
+}
--- a/themes/hello-friend-ng/assets/scss/_normalize.scss
+++ b/themes/hello-friend-ng/assets/scss/_normalize.scss
@ -0,0 +1,367 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+/* Webkit Scrollbar Customize */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: #212020;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+
+  &:hover {
+    background: #dcdcdc;
+  }
+}
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-display: auto;
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-display: auto;
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-display: auto;
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/themes/hello-friend-ng/assets/scss/_sharing-buttons.scss
+++ b/themes/hello-friend-ng/assets/scss/_sharing-buttons.scss
@ -0,0 +1,34 @@
+.sharing-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .resp-sharing-button__icon,
+  .resp-sharing-button__link {
+    display: inline-block;
+  }
+
+  .resp-sharing-button__link {
+    text-decoration: none;
+    margin: 0.5em;
+  }
+
+  .resp-sharing-button {
+    border-radius: 5px;
+    transition: 25ms ease-out;
+    padding: 0.5em 0.75em;
+    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+  }
+
+  .resp-sharing-button__icon svg {
+    width: 1em;
+    height: 1em;
+    margin-right: 0.4em;
+    vertical-align: top;
+  }
+
+  .resp-sharing-button--small svg {
+    margin: 0;
+    vertical-align: middle;
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_single.scss
+++ b/themes/hello-friend-ng/assets/scss/_single.scss
@ -0,0 +1,230 @@
+.post {
+  width: 100%;
+  max-width: 800px;
+  text-align: left;
+  padding: 20px;
+  margin: 20px auto;
+  @media #{$media-size-tablet} {
+    max-width: 600px;
+  }
+
+  &-date {
+    &:after {
+      content: '—';
+    }
+  }
+
+  &-title {
+    font-size: 2.625rem;
+    margin: 0 0 20px;
+    @media #{$media-size-phone} {
+      font-size: 2rem;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &-tags {
+    display: block;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    opacity: 0.5;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &-content {
+    margin-top: 30px;
+  }
+
+  &-cover {
+    border-radius: 8px;
+    margin: 40px -50px;
+    width: $max-width;
+    max-width: $max-width;
+    @media #{$media-size-tablet} {
+      margin: 20px 0;
+      width: 100%;
+    }
+  }
+
+  &-excerpt {
+    font-style: italic;
+  }
+
+  &-info {
+    margin-top: 30px;
+    font-size: 0.9rem;
+    line-height: normal;
+
+    p {
+      margin: 0.8em 0;
+    }
+
+    svg {
+      margin-right: 0.8em;
+    }
+
+    .tag {
+      margin-right: 0.5em;
+
+      &::before {
+        content: "#";
+      }
+    }
+
+    .feather {
+      display: inline-block;
+      vertical-align: -.125em;
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  &-audio {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+
+    audio {
+      width: 90%;
+    }
+  }
+
+  .flag {
+    border-radius: 50%;
+    margin: 0 5px;
+  }
+}
+
+.pagination {
+  margin-top: 20px;
+
+  &__title {
+    display: flex;
+    text-align: center;
+    position: relative;
+    margin: 20px 0;
+
+    &-h {
+      text-align: center;
+      margin: 0 auto;
+      padding: 5px 10px;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      text-decoration: none;
+      letter-spacing: 0.1em;
+      z-index: 1;
+      // Default
+      background: $light-background;
+      color: $light-color-secondary;
+
+      @media (prefers-color-scheme: dark) {
+        background: $dark-background;
+        color: $dark-color-secondary;
+      }
+
+      @media (prefers-color-scheme: light) {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
+
+      [data-theme=dark] & {
+        background: $dark-background;
+        color: $dark-color-secondary;
+      }
+
+      [data-theme=light] & {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
+    }
+
+    hr {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 100%;
+      margin-top: 15px;
+      z-index: 0;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    a {
+      font-weight: bold;
+    }
+  }
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 8px;
+  max-width: 40%;
+  padding: 0;
+  cursor: pointer;
+  appearance: none;
+  // Default
+  background: $light-background-secondary;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
+
+  &:hover {
+    color: #f2203a;
+  }
+
+  + .button {
+    margin-left: 10px;
+  }
+
+  a {
+    display: flex;
+    padding: 8px 16px;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &.next .button__icon {
+    margin-left: 8px;
+  }
+
+  &.previous .button__icon {
+    margin-right: 8px;
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_tables.scss
+++ b/themes/hello-friend-ng/assets/scss/_tables.scss
@ -0,0 +1,84 @@
+.post-content {
+  table {
+    border-collapse: collapse;
+    margin: 25px auto;
+    font-size: 0.9em;
+    min-width: 400px;
+    max-width: 100%;
+
+    th,
+    td {
+      padding: 12px 15px;
+      // Default
+      border: 1px solid $light-table-color;
+      
+      @media (prefers-color-scheme: dark) {
+        border: 1px solid $dark-table-color;
+      }
+    
+      @media (prefers-color-scheme: light) {
+        border: 1px solid $light-table-color;
+      }
+    
+      [data-theme=dark] & {
+        border: 1px solid $dark-table-color;
+      }
+    
+      [data-theme=light] & {
+        border: 1px solid $light-table-color;
+      }
+    }
+
+    thead {
+      tr {
+        text-align: left;
+        // Default
+        background-color: $light-table-color;
+        color: $light-color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: $dark-table-color;
+          color: $dark-color;
+        }
+      
+        @media (prefers-color-scheme: light) {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
+      
+        [data-theme=dark] & {
+          background-color: $dark-table-color;
+          color: $dark-color;
+        }
+      
+        [data-theme=light] & {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        // Default
+        border: 1px solid $light-table-color;
+        
+        @media (prefers-color-scheme: dark) {
+          border: 1px solid $dark-table-color;
+        }
+      
+        @media (prefers-color-scheme: light) {
+          border: 1px solid $light-table-color;
+        }
+      
+        [data-theme=dark] & {
+          border: 1px solid $dark-table-color;
+        }
+      
+        [data-theme=light] & {
+          border: 1px solid $light-table-color;
+        }
+      }
+    }
+  }
+}
--- a/themes/hello-friend-ng/assets/scss/_toc.scss
+++ b/themes/hello-friend-ng/assets/scss/_toc.scss
@ -0,0 +1,7 @@
+.toc-title {
+    font-weight: bold;
+}
+
+#toc li {
+  font-size: 1.2rem;
+}
--- a/themes/hello-friend-ng/assets/scss/_variables.scss
+++ b/themes/hello-friend-ng/assets/scss/_variables.scss
@ -0,0 +1,32 @@
+@charset "UTF-8";
+
+/* Light theme color */
+$light-background: #fff;
+$light-background-secondary: #eaeaea;
+$light-background-header: #fafafa;
+$light-color: #222;
+$light-color-secondary: #999;
+$light-border-color: #dcdcdc;
+$light-table-color: #dcdcdc;
+
+/* Dark theme colors */
+$dark-background: #090B0F;
+$dark-background-secondary: #0C1016;
+$dark-background-header: #151A20;
+$dark-color: #a9a9b3;
+$dark-color-secondary: #b3b3bd;
+$dark-border-color: #4e4e57;
+$dark-table-color: #4e4e57;
+
+$media-size-phone: "(max-width: 684px)";
+$media-size-tablet: "(max-width: 900px)";
+$media-size-laptop: "(max-width: 1200px)";
+
+/* Variables for js, must be the same as these in @custom-media queries */
+:root {
+  --phoneWidth: (max-width: 684px);
+  --tabletWidth: (max-width: 900px);
+}
+
+/* Content */
+$max-width: 860px;
--- a/themes/hello-friend-ng/assets/scss/main.scss
+++ b/themes/hello-friend-ng/assets/scss/main.scss
@ -0,0 +1,20 @@
+/* Must be loaded before everything else */
+@import "normalize";
+// @import "prism";
+/* Main stuff */
+@import "variables";
+@import "mixins";
+@import "fonts";
+@import "buttons";
+/* Modules */
+@import "header";
+@import "logo";
+@import "menu";
+@import "main";
+@import "toc";
+@import "list";
+@import "single";
+@import "footer";
+@import "sharing-buttons";
+@import "tables";
+@import "404";
--- a/themes/hello-friend-ng/data/langFlags.yaml
+++ b/themes/hello-friend-ng/data/langFlags.yaml
@ -0,0 +1,18 @@
+de: de
+en: gb
+es: es
+fr: fr
+gl: es-ga
+hi: in
+it: it
+ja: jp
+ml: in
+nl: nl
+pt-br: br
+ru: ru
+tr: tr
+uk: uk
+zh-cn: cn
+zh-hk: hk
+zh-tw: tw
+ro: ro
--- a/themes/hello-friend-ng/docs/config.md
+++ b/themes/hello-friend-ng/docs/config.md
@ -0,0 +1,15 @@
+# Configuration
+
+There are some settings you can set in your `config.toml`. 
+
+## Default area
+
+The settings in the default area are usually provided by Hugo itself. Check [Configure Hugo](https://gohugo.io/getting-started/configuration/#all-configuration-settings) for more information. But I want to list some important things here which are relevant to this theme.
+
+### paginate
+
+```
+paginate = 10
+```
+
+This setting will paginate your list views. Set to `0` to disable it. For more information check (https://gohugo.io/templates/pagination/).
--- a/themes/hello-friend-ng/docs/favicons.md
+++ b/themes/hello-friend-ng/docs/favicons.md
@ -0,0 +1,13 @@
+# Favicons
+
+Use [RealFaviconGenerator](https://realfavicongenerator.net/) to generate these files, put them into your site's static folder:
+
+- android-chrome-192x192.png
+- android-chrome-512x512.png
+- apple-touch-icon.png
+- favicon-16x16.png
+- favicon-32x32.png
+- favicon.ico
+- mstile-150x150.png
+- safari-pinned-tab.svg
+- site.webmanifest
--- a/themes/hello-friend-ng/docs/svgs.md
+++ b/themes/hello-friend-ng/docs/svgs.md
@ -0,0 +1,74 @@
+# Available Social Icons:
+
+- [amazon](https://simpleicons.org/?q=amazon)
+- [anilist](https://simpleicons.org/?q=anilist)
+- [box](https://simpleicons.org/?q=box)
+- [behance](https://simpleicons.org/?q=behance)
+- [bitbucket](https://simpleicons.org/?q=bitbucket)
+- case - generic briefcase icon for work based links
+- [codesandbox](https://simpleicons.org/?q=codesandbox)
+- [codechef](https://simpleicons.org/?q=codechef)
+- [codepen](https://simpleicons.org/?q=codepen)
+- dev
+- [deviantart](https://simpleicons.org/?q=deviantart)
+- [discogs](https://simpleicons.org/?q=discogs)
+- [discord](https://simpleicons.org/?q=discord)
+- [docker](https://simpleicons.org/?q=docker)
+- [dribbble](https://simpleicons.org/?q=dribbble)
+- [email](https://feathericons.com/?query=mail)
+- [facebook](https://simpleicons.org/?q=facebook)
+- [fitbit](https://simpleicons.org/?q=fitbit)
+- git
+- [gitbook](https://simpleicons.org/?q=gitbook)
+- [gitea](https://simpleicons.org/?q=gitea)
+- [github](https://feathericons.com/?query=github)
+- [gitlab](https://feathericons.com/?query=gitlab)
+- [gitter](https://simpleicons.org/icons/gitter.svg)
+- [goodreads](https://simpleicons.org/?q=goodreads)
+- [googleplay](https://simpleicons.org/?q=googleplay)
+- [googlescholar](https://simpleicons.org/?q=googlescholar)
+- [hackerone](https://simpleicons.org/?q=hackerone)
+- [hackerrank](https://simpleicons.org/?q=hackerrank)
+- [hackthebox](https://simpleicons.org/?q=hackthebox)
+- [instagram](https://feathericons.com/?query=instagram)
+- [kaggle](https://simpleicons.org/?q=kaggle)
+- [keybase](https://simpleicons.org/?q=keybase)
+- [lastfm](https://simpleicons.org/?q=lastfm)
+- [leetcode](https://simpleicons.org/?q=leetcode)
+- [letterboxd](https://simpleicons.org/?q=letterboxd)
+- [librepay](https://simpleicons.org/?q=liberapay)
+- [lichess](https://simpleicons.org/?q=lichess)
+- [linkedin](https://feathericons.com/?query=linked)
+- [mastodon](https://simpleicons.org/?q=mastodon)
+- [matrix](https://simpleicons.org/?q=matrix)
+- [medium](https://simpleicons.org/?q=medium)
+- [mixcloud](https://simpleicons.org/?q=mixcloud)
+- [npm](https://simpleicons.org/?q=npm)
+- [orcid](https://simpleicons.org/?q=orcid)
+- [peertube](https://simpleicons.org/?q=peertube)
+- [pinterest](https://simpleicons.org/?q=pinterest)
+- [pixelfed](https://github.com/pixelfed/pixelfed/blob/dev/public/img/pixelfed-icon-black.svg)
+- [podcasts-apple](https://simpleicons.org/?q=podcast)
+- [podcasts-google](https://simpleicons.org/?q=podcast)
+- [polywork](https://simpleicons.org/?q=polywork)
+- [reddit](https://simpleicons.org/?q=reddit)
+- [researchgate](https://simpleicons.org/?q=researchgate)
+- [signal](https://simpleicons.org/?q=signal)
+- [slack](https://simpleicons.org/?q=slack)
+- [soundcloud](https://simpleicons.org/?q=soundcloud)
+- [spotify](https://simpleicons.org/?q=spotify)
+- [stackoverflow](https://simpleicons.org/?q=stackoverflow)
+- [steam](https://simpleicons.org/?q=Steam)
+- [telegram](https://simpleicons.org/?q=telegram)
+- [threema](https://simpleicons.org/?q=threema)
+- [tryhackme](https://simpleicons.org/?q=tryhackme)
+- [tumblr](https://simpleicons.org/?q=tumblr)
+- [twitch](https://simpleicons.org/?q=twitch)
+- [twitter](https://simpleicons.org/?q=twitter)
+- [unsplash](https://simpleicons.org/?q=unsplash)
+- [whatsapp](https://simpleicons.org/?q=whatsapp)
+- [xampp](https://simpleicons.org/?q=xampp)
+- [xing](https://simpleicons.org/?q=xing)
+- [xmpp](https://simpleicons.org/?q=xmpp)
+- [ycombinator](https://simpleicons.org/?q=ycombinator)
+- [youtube](https://simpleicons.org/?q=youtube)
--- a/themes/hello-friend-ng/i18n/de.toml
+++ b/themes/hello-friend-ng/i18n/de.toml
@ -0,0 +1,39 @@
+# Translations for German
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Übersetzungen"
+
+[postAvailable]
+other = "Auch verfügbar auf"
+
+
+# 404.html
+#
+[archives]
+other = "Archiv"
+
+[home]
+other = "Home"
+
+[notFound]
+other = "Oops, Seite nicht gefunden ..."
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Eine Minute"
+other = "{{ .Count }} Minuten"
+
+[tableOfContents]
+other = "Inhaltsverzeichnis"
+
+[wordCount]
+one   = "Ein Wort"
+other = "{{ .Count }} Wörter"
+
+[lastModified]
+other = "Letzte Aktualisierung"
--- a/themes/hello-friend-ng/i18n/en.toml
+++ b/themes/hello-friend-ng/i18n/en.toml
@ -0,0 +1,39 @@
+# Translations for English
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Translations"
+
+[postAvailable]
+other = "Also available in"
+
+
+# 404.html
+#
+[archives]
+other = "Archives"
+
+[home]
+other = "Home"
+
+[notFound]
+other = "Oops, page not found…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "One minute"
+other = "{{ .Count }} minutes"
+
+[tableOfContents]
+other = "Table of Contents"
+
+[wordCount]
+one   = "One Word"
+other = "{{ .Count }} Words"
+
+[lastModified]
+other = "Last updated"
--- a/themes/hello-friend-ng/i18n/es.toml
+++ b/themes/hello-friend-ng/i18n/es.toml
@ -0,0 +1,39 @@
+# Translations for Spanish
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traducciones"
+
+[postAvailable]
+other = "También disponible en"
+
+
+# 404.html
+#
+[archives]
+other = "Archivo"
+
+[home]
+other = "Home"
+
+[notFound]
+other = "Oops, página no encontrada…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minuto"
+other = "{{ .Count }} minutos"
+
+[tableOfContents]
+other = "Tabla de Contenido"
+
+[wordCount]
+one   = "Una Palabra"
+other = "{{ .Count }} Palabras"
+
+[lastModified]
+other = "Ultima actualización"
--- a/themes/hello-friend-ng/i18n/fr.toml
+++ b/themes/hello-friend-ng/i18n/fr.toml
@ -0,0 +1,39 @@
+# Translations for French
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traductions"
+
+[postAvailable]
+other = "Aussi disponible en"
+
+
+# 404.html
+#
+[archives]
+other = "Les archives"
+
+[home]
+other = "Accueil"
+
+[notFound]
+other = "Oups, page non trouvée …"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Une minute"
+other = "{{ .Count }} minutes"
+
+[tableOfContents]
+other = "Table des matières"
+
+[wordCount]
+one   = "Un Mot"
+other = "{{ .Count }} Mots"
+
+[lastModified]
+other = "Mise à jour"
--- a/themes/hello-friend-ng/i18n/gl.toml
+++ b/themes/hello-friend-ng/i18n/gl.toml
@ -0,0 +1,36 @@
+# Translations for Galician
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traducións"
+
+[postAvailable]
+other = "Tamén dispoñible en"
+
+
+# 404.html
+#
+[archives]
+other = "Arquivos"
+
+[home]
+other = "Inicio"
+
+[notFound]
+other = "Vaia, non se atopou a páxina..."
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minuto"
+other = "{{ .Count }} minutos"
+
+[tableOfContents]
+other = "Táboa de contidos"
+
+[wordCount]
+one   = "Unha Palabra"
+other = "{{ .Count }} Palabras"
--- a/themes/hello-friend-ng/i18n/hi.toml
+++ b/themes/hello-friend-ng/i18n/hi.toml
@ -0,0 +1,39 @@
+# Translations for Hindi
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "अनुवाद"
+
+[postAvailable]
+other = "पढ़ें इस भाषा में"
+
+
+# 404.html
+#
+[archives]
+other = "पुरालेख"
+
+[home]
+other = "घर"
+
+[notFound]
+other = "क्षमा करें ! पेज़ नहीं मिला…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "एक मिनट"
+other = "{{ .Count }} मिनट"
+
+[tableOfContents]
+other = "अनुक्रमणिका"
+
+[wordCount]
+one   = "एक शब्द"
+other = "{{ .Count }} शब्द"
+
+[lastModified]
+other = "आखरी अपडेट"
--- a/themes/hello-friend-ng/i18n/it.toml
+++ b/themes/hello-friend-ng/i18n/it.toml
@ -0,0 +1,39 @@
+# Translations for English
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traduzioni"
+
+[postAvailable]
+other = "Disponibile anche in"
+
+
+# 404.html
+#
+[archives]
+other = "Archivi"
+
+[home]
+other = "Home"
+
+[notFound]
+other = "Oops, pagina non trovata…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minuto"
+other = "{{ .Count }} minuti"
+
+[tableOfContents]
+other = "Contenuti"
+
+[wordCount]
+one   = "Una parola"
+other = "{{ .Count }} parole"
+
+[lastModified]
+other = "Ultimo aggiornamento"
--- a/themes/hello-friend-ng/i18n/ja.toml
+++ b/themes/hello-friend-ng/i18n/ja.toml
@ -0,0 +1,39 @@
+# Translations for Japanese
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "翻訳"
+
+[postAvailable]
+other = "他の言語"
+
+
+# 404.html
+#
+[archives]
+other = "アーカイブ"
+
+[home]
+other = "ホームページ"
+
+[notFound]
+other = "あっ、ページが見つかりません……"
+
+# Please add hasCJKLanguage = true under [languages.ja] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分"
+other = "{{ .Count }}分"
+
+[tableOfContents]
+other = "目次"
+
+[wordCount]
+one   = "一文字"
+other = "{{ .Count }}文字"
+
+[lastModified]
+other = "最終更新"
--- a/themes/hello-friend-ng/i18n/lmo.toml
+++ b/themes/hello-friend-ng/i18n/lmo.toml
@ -0,0 +1,39 @@
+# Translations for English
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traduzion"
+
+[postAvailable]
+other = "Disponibel anca in"
+
+
+# 404.html
+#
+[archives]
+other = "Archivi"
+
+[home]
+other = "Home"
+
+[notFound]
+other = "Oops, pagina minga trovada…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "On megnuu"
+other = "{{ .Count }} megnuu"
+
+[tableOfContents]
+other = "Contegnuu"
+
+[wordCount]
+one   = "Ona parolla"
+other = "{{ .Count }} paroll"
+
+[lastModified]
+other = "Last update"
--- a/themes/hello-friend-ng/i18n/ml.toml
+++ b/themes/hello-friend-ng/i18n/ml.toml
@ -0,0 +1,39 @@
+# Translations for മലയാളം [Malayalam]
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "വിവർത്തനങ്ങൾ"
+
+[postAvailable]
+other = "ഈ പോസ്റ്റ് ലഭ്യമായ മറ്റ് ഭാഷകൾ:"
+
+
+# 404.html
+#
+[archives]
+other = "ശേഖരം"
+
+[home]
+other = "പ്രധാന താൾ"
+
+[notFound]
+other = "ക്ഷമിക്കണം. താൾ ലഭ്യമല്ല. ദേയവയി വിലാസം പരിശോധിക്കുക അല്ലെങ്കിൽ അൽപ സമയത്തിനു ശേഷം വീണ്ടും പരിശ്രമിക്കുക."
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "ഒരു മിനിറ്റ്"
+other = "{{ .Count }} മിനിറ്റുകൾ"
+
+[tableOfContents]
+other = "ഉള്ളടക്ക പട്ടിക"
+
+[wordCount]
+one   = "ഒരു വാക്ക്"
+other = "{{ .Count }} വാക്കുകൾ"
+
+[lastModified]
+other = "അവസാനമായി പുതുക്കിയത്"
--- a/themes/hello-friend-ng/i18n/pt-br.toml
+++ b/themes/hello-friend-ng/i18n/pt-br.toml
@ -0,0 +1,39 @@
+# Translations for Portuguese
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traduções"
+
+[postAvailable]
+other = "Também disponível em"
+
+
+# 404.html
+#
+[archives]
+other = "Arquivo"
+
+[home]
+other = "Início"
+
+[notFound]
+other = "Oops, página não encontrada…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Um minuto"
+other = "{{ .Count }} minutos"
+
+[tableOfContents]
+other = "Índice"
+
+[wordCount]
+one   = "Uma Palavra"
+other = "{{ .Count }} Palavras"
+
+[lastModified]
+other = "Última actualização"
--- a/themes/hello-friend-ng/i18n/ro.toml
+++ b/themes/hello-friend-ng/i18n/ro.toml
@ -0,0 +1,39 @@
+# Translations for Romanian
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traduceri"
+
+[postAvailable]
+other = "Disponibil și în"
+
+
+# 404.html
+#
+[archives]
+other = "Arhive"
+
+[home]
+other = "Acasă"
+
+[notFound]
+other = "Ups, pagina nu a fost găsită…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minut"
+other = "{{ .Count }} de minute"
+
+[tableOfContents]
+other = "Cuprins"
+
+[wordCount]
+one   = "Un cuvânt"
+other = "{{ .Count }} de cuvinte"
+
+[lastModified]
+other = "Ultima modificare"
--- a/themes/hello-friend-ng/i18n/ru.toml
+++ b/themes/hello-friend-ng/i18n/ru.toml
@ -0,0 +1,43 @@
+# Translations for Russian
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Переводы"
+
+[postAvailable]
+other = "Доступно на "
+
+
+# 404.html
+#
+[archives]
+other = "Архивы"
+
+[home]
+other = "Главная"
+
+[notFound]
+other = "Упс, страница не найдена…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "{{ .Count }} минута"
+few   = "{{ .Count }} минуты"
+many  = "{{ .Count }} минут"
+other = "{{ .Count }} минут"
+
+[tableOfContents]
+other = "Содержимое"
+
+[wordCount]
+one   = "{{ .Count }} слово"
+few   = "{{ .Count }} слова"
+many  = "{{ .Count }} слов"
+other = "{{ .Count }} слов"
+
+[lastModified]
+other = "Последнее обновление"
--- a/themes/hello-friend-ng/i18n/tr.toml
+++ b/themes/hello-friend-ng/i18n/tr.toml
@ -0,0 +1,39 @@
+# Translations for English
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Çeviriler"
+
+[postAvailable]
+other = "Ayrıca"
+
+
+# 404.html
+#
+[archives]
+other = "Arşiv"
+
+[home]
+other = "Ana Sayfa"
+
+[notFound]
+other = "Sayfa bulunamadı…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Bir dakika"
+other = "{{ .Count }} dakika"
+
+[tableOfContents]
+other = "İçindekiler"
+
+[wordCount]
+one   = "One Kelime"
+other = "{{ .Count }} Kelime"
+
+[lastModified]
+other = "Son güncelleme"
--- a/themes/hello-friend-ng/i18n/uk.toml
+++ b/themes/hello-friend-ng/i18n/uk.toml
@ -0,0 +1,43 @@
+# Translations for Ukrainian
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Переклади"
+
+[postAvailable]
+other = "Доступне на "
+
+
+# 404.html
+#
+[archives]
+other = "Архіви"
+
+[home]
+other = "Головна"
+
+[notFound]
+other = "Упс, сторінка не знайдена…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "{{ .Count }} хвилина"
+few   = "{{ .Count }} хвилини"
+many  = "{{ .Count }} хвилин"
+other = "{{ .Count }} хвилин"
+
+[tableOfContents]
+other = "Вміст"
+
+[wordCount]
+one   = "{{ .Count }} слово"
+few   = "{{ .Count }} слова"
+many  = "{{ .Count }} слів"
+other = "{{ .Count }} слів"
+
+[lastModified]
+other = "Останнє оновлення"
--- a/themes/hello-friend-ng/i18n/zh-cn.toml
+++ b/themes/hello-friend-ng/i18n/zh-cn.toml
@ -0,0 +1,39 @@
+# Translations for Chinese (China)
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "译文"
+
+[postAvailable]
+other = "其他语言"
+
+
+# 404.html
+#
+[archives]
+other = "档案"
+
+[home]
+other = "主页"
+
+[notFound]
+other = "噢，找不到页面……"
+
+# Please add hasCJKLanguage = true under [languages.zh-cn] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分钟"
+other = "{{ .Count }}分钟"
+
+[tableOfContents]
+other = "目录"
+
+[wordCount]
+one   = "一字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最后修改"
--- a/themes/hello-friend-ng/i18n/zh-hk.toml
+++ b/themes/hello-friend-ng/i18n/zh-hk.toml
@ -0,0 +1,39 @@
+# Translations for Chinese (Hong Kong) [Cantonese]
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "譯文"
+
+[postAvailable]
+other = "其他語言"
+
+
+# 404.html
+#
+[archives]
+other = "貼文"
+
+[home]
+other = "主頁"
+
+[notFound]
+other = "哎呀，揾唔到添……"
+
+# Please add hasCJKLanguage = true under [languages.zh-hk] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分鐘"
+other = "{{ .Count }}分鐘"
+
+[tableOfContents]
+other = "目錄"
+
+[wordCount]
+one   = "一粒字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最後修改"
--- a/themes/hello-friend-ng/i18n/zh-tw.toml
+++ b/themes/hello-friend-ng/i18n/zh-tw.toml
@ -0,0 +1,39 @@
+# Translations for Chinese (Taiwan)
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "譯文"
+
+[postAvailable]
+other = "其他語言"
+
+
+# 404.html
+#
+[archives]
+other = "檔案"
+
+[home]
+other = "主頁"
+
+[notFound]
+other = "噢，找不到頁面……"
+
+# Please add hasCJKLanguage = true under [languages.zh-tw] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分鐘"
+other = "{{ .Count }}分鐘"
+
+[tableOfContents]
+other = "目錄"
+
+[wordCount]
+one   = "一字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最後修改"
--- a/themes/hello-friend-ng/images/screenshot.png
+++ b/themes/hello-friend-ng/images/screenshot.png
--- a/themes/hello-friend-ng/images/tn.png
+++ b/themes/hello-friend-ng/images/tn.png
--- a/themes/hello-friend-ng/layouts/404.html
+++ b/themes/hello-friend-ng/layouts/404.html
@ -0,0 +1,21 @@
+{{ define "main" }}
+    <div id="spotlight" class="error-404 animated fadeIn">
+        <p class="img-404">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-drizzle"><line x1="8" y1="19" x2="8" y2="21"></line><line x1="8" y1="13" x2="8" y2="15"></line><line x1="16" y1="19" x2="16" y2="21"></line><line x1="16" y1="13" x2="16" y2="15"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="12" y1="15" x2="12" y2="17"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
+        </p>
+        <div class="banner-404">
+            <h1>404</h1>
+            <p>{{ i18n "notFound" }}</p>
+            <p class="btn-404">
+                <a href="{{.Site.BaseURL}}">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  {{- i18n "home" -}}
+                </a>
+                <a href="{{ "posts" | absLangURL }}">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+                  {{- i18n "archives" -}}
+                </a>
+            </p>
+        </div>
+    </div>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/_default/baseof.html
+++ b/themes/hello-friend-ng/layouts/_default/baseof.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language }}">
+    <head>
+        {{ partial "head.html" . }}
+    </head>
+
+    {{ block "body" . }}
+        <body>
+    {{ end }}
+    
+        <div class="container">
+            {{ partial "header.html" . }}
+
+            <div class="content">
+                {{ block "main" . }}{{ end }}
+            </div>
+
+            {{ block "footer" . }}
+                {{ partial "footer.html" . }}
+            {{ end }}
+        </div>
+
+        {{ partial "javascript.html" . }}
+    </body>
+</html>
--- a/themes/hello-friend-ng/layouts/_default/list.html
+++ b/themes/hello-friend-ng/layouts/_default/list.html
@ -0,0 +1,35 @@
+{{ define "main" }}
+    {{ $paginator := .Paginate .Data.Pages }}
+    
+    <main class="posts">
+        <h1>{{ .Title }}</h1>
+
+        {{ if .Content }}
+            <div class="content">{{ .Content }}</div>
+        {{ end }}
+
+        {{ range $paginator.Pages.GroupByDate "2006" }}
+            <div class="posts-group">
+                <div class="post-year">{{ .Key }}</div>
+
+                <ul class="posts-list">
+                    {{ range .Pages }}
+                        <li class="post-item">
+                            <a href="{{.Permalink}}">
+                                <span class="post-title">{{.Title}}</span>
+                                <span class="post-day">
+                                    {{ if .Site.Params.dateformShort }}
+                                        {{ .Date.Format .Site.Params.dateformShort }}
+                                    {{ else }}
+                                        {{ .Date.Format "Jan 2"}}
+                                    {{ end }}
+                                </span>
+                            </a>
+                        </li>
+                    {{ end }}
+                </ul>
+            </div>
+        {{ end }}
+    {{ partial "pagination-list.html" . }}
+    </main>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/_default/single.html
+++ b/themes/hello-friend-ng/layouts/_default/single.html
@ -0,0 +1,52 @@
+{{ define "main" }}
+<main class="post">
+
+    <div class="post-info">
+        {{ if .IsTranslated }}
+        {{ i18n "postAvailable" }}
+        {{ range .Translations }}
+        <a href="{{ .Permalink }}"><span class="flag flag-icon flag-icon-{{ index $.Site.Data.langFlags (.Lang) }} flag-icon-squared"></span></a>
+        {{ end}}
+        {{ end }}
+        </p>
+    </div>
+
+    <article>
+        <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
+
+        {{ if .Params.Cover }}
+        <figure class="post-cover">
+            <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
+
+            {{ if .Params.CoverCaption }}
+            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+            {{ end }}
+        </figure>
+        {{ end }}
+
+        {{ if .Params.toc }}
+        <hr />
+        <aside id="toc">
+            <div class="toc-title">{{ i18n "tableOfContents" }}</div>
+            {{ .TableOfContents }}
+        </aside>
+        <hr />
+        {{ end }}
+
+        <div class="post-content">
+            {{ .Content }}
+        </div>
+    </article>
+
+    <hr />
+
+    <div class="post-info">
+        {{ partial "tags.html" .Params.tags }}
+        {{ partial "categories.html" . }}
+
+        {{- if .GitInfo }}
+        <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}</p>
+        {{- end }}
+    </div>
+</main>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/index.html
+++ b/themes/hello-friend-ng/layouts/index.html
@ -0,0 +1,31 @@
+{{ define "body" }}
+    <body {{ if .Site.Params.backgroundImage -}}
+        class="background-image"
+        style="background-image: url('{{ .Site.Params.backgroundImage }}');"
+    {{- end }}>
+{{ end }}
+
+{{ define "main" }}
+    <main aria-role="main" style="width: 100%;">
+        <div>
+            {{ if .Site.Params.Portrait.Path }}
+               <img src="{{ .Site.Params.Portrait.Path }}" class="circle" alt="{{ .Site.Params.Portrait.Alt }}" style="max-width:{{ .Site.Params.Portrait.MaxWidth }}" />
+            {{ end }}
+
+            <div class="hero">
+                <div class="">
+                    <h1>Team Ortix</h1>
+                    <h2 class="center">Blog</h2>
+
+                    {{- with .Site.Params.social }}
+                        <div>
+                            {{ partial "social-icons.html" . }}
+                        </div>
+                    {{- end }}
+                </div>
+
+                <img src="/bg-header.svg" alt="">
+            </div>
+        </div>
+    </main>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/breadcrumb.html
+++ b/themes/hello-friend-ng/layouts/partials/breadcrumb.html
@ -0,0 +1,19 @@
+{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+
+{{ define "breadcrumbnav" -}}
+{{ if .p1.Parent -}}
+{{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
+{{- else if not .p1.IsHome -}}
+{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  }}
+{{- end -}}
+
+{{- if .p1.Params.tinyname -}}
+/{{ .p1.Params.tinyname }}
+{{- else if .p1.IsHome -}}
+/home
+{{- else -}}
+/{{- lower (delimit (split .p1.Title " ") "_") -}}
+{{- end }}
+
+{{- end }}
+
--- a/themes/hello-friend-ng/layouts/partials/categories.html
+++ b/themes/hello-friend-ng/layouts/partials/categories.html
@ -0,0 +1,9 @@
+{{ with .Params.categories }}
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder meta-icon"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+
+        {{ range . -}}
+            <span class="tag"><a href="{{ "categories/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
+        {{ end }}
+    </p>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/favicons.html
+++ b/themes/hello-friend-ng/layouts/partials/favicons.html
@ -0,0 +1,10 @@
+{{- with .Site.Params.favicon.color }}
+    <link rel="apple-touch-icon" sizes="180x180" href="{{"apple-touch-icon.png" | relURL}}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{"favicon-32x32.png" | relURL}}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{"favicon-16x16.png" | relURL}}">
+    <link rel="manifest" href="{{"site.webmanifest" | relURL}}">
+    <link rel="mask-icon" href="{{"safari-pinned-tab.svg" | relURL}}" color="{{.mask}}">
+    <link rel="shortcut icon" href="{{"favicon.ico" | relURL}}">
+    <meta name="msapplication-TileColor" content="{{.msapplication}}">
+    <meta name="theme-color" content="{{.theme}}">
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/footer.html
+++ b/themes/hello-friend-ng/layouts/partials/footer.html
@ -0,0 +1,20 @@
+<footer class="footer">
+    {{if or (.Site.Params.footer.trademark) (.Site.Params.footer.author) (.Site.Params.footer.copyright) (.Site.Params.footer.rss) (.Site.Params.footer.topText) }}
+    <div class="footer__inner">
+        <div class="footer__content">
+            {{ if .Site.Params.footer.trademark }}<span>&copy; {{ now.Format "2006" }}</span>{{ end }}
+            {{ if .Site.Params.footer.author }}<span>{{ .Site.Author.name | safeHTML }}</span>{{ end }}
+            {{ if .Site.Params.footer.copyright }}<span>{{ .Site.Copyright| safeHTML }}</span>{{ end }}
+            {{ if .Site.Params.footer.rss }}<span><a href="{{ "posts/index.xml" | absLangURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></span>{{ end }}
+            {{ range .Site.Params.footer.topText }}<span>{{ . | safeHTML}}</span>{{ end }}
+        </div>
+    </div>
+    {{ end }}
+    {{with .Site.Params.footer.bottomText}}
+    <div class="footer__inner">
+        <div class="footer__content">
+            {{ range . }}<span>{{ . | safeHTML}}</span>{{ end }}
+        </div>
+    </div>
+    {{ end }}
+</footer>
--- a/themes/hello-friend-ng/layouts/partials/head.html
+++ b/themes/hello-friend-ng/layouts/partials/head.html
@ -0,0 +1,73 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="author" content="{{ if .Params.author }}{{ .Params.author }}{{ else }}{{ range .Site.Author }}{{ . }} {{ end }}{{ end }}">
+<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.homeSubtitle }}{{ else }}{{ with .Params.Description }}{{ . }}{{ end }}{{ end }}" />
+<meta name="keywords" content="{{ .Site.Params.keywords }}{{ if .Params.tags }}{{ range .Params.tags }}, {{ . }}{{ end }}{{ end }}" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="{{ .Site.Params.themeColor }}" />
+<link rel="canonical" href="{{ .Permalink }}" />
+
+{{ block "title" . }}
+    <title>
+        {{- if .IsHome }}
+            {{ $.Site.Title }} {{ with $.Site.Params.Subtitle }} — {{ . }} {{ end }}
+        {{- else -}}
+            {{ .Title }} | Team Ortix
+        {{- end -}}
+    </title>
+{{ end }}
+
+<!-- CSS -->
+<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet"
+    type="text/css">
+
+{{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }}
+{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+{{ range $val := $.Site.Params.customCSS }}
+    {{ if gt (len $val) 0 }}
+        <link rel="stylesheet" type="text/css" href="{{ $val }}">
+    {{ end }}
+{{ end }}
+
+<!-- Icons -->
+{{- partial "favicons.html" . }}
+
+{{ template "_internal/schema.html" . }}
+{{ template "_internal/twitter_cards.html" . }}
+{{ template "_internal/google_news.html" . }}
+
+{{ if isset .Site.Taxonomies "series" }}
+    {{ template "_internal/opengraph.html" . }}
+{{ end }}
+
+{{ range .Params.categories }}
+    <meta property="article:section" content="{{ . }}" />
+{{ end }}
+
+{{ if isset .Params "date" }}
+    <meta property="article:published_time" content="{{ time .Date }}" />
+{{ end }}
+
+<!-- RSS -->
+{{ with .OutputFormats.Get "rss" -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+{{ end -}}
+
+<!-- JSON Feed -->
+{{ if .OutputFormats.Get "json" }}
+<link href="{{ if .OutputFormats.Get "json" }}{{ .Site.BaseURL }}feed.json{{ end }}" rel="alternate"
+    type="application/json" title="{{ .Site.Title }}" />
+{{ end }}
+
+<!-- Custom head tags -->
+{{- if templates.Exists "partials/extra-head.html" -}}
+    {{ partial "extra-head.html" . }}
+{{- end }}
+
+<!-- Google Analytics internal template -->
+{{- if .Site.GoogleAnalytics }}
+    {{ template "_internal/google_analytics.html" . }}
+{{- end}}
--- a/themes/hello-friend-ng/layouts/partials/header.html
+++ b/themes/hello-friend-ng/layouts/partials/header.html
@ -0,0 +1,21 @@
+<header class="header">
+    <span class="header__inner">
+        {{ partial "logo.html" . }}
+
+        <span class="header__right">
+            {{ if len .Site.Menus }}
+                {{ partial "menu.html" . }}
+                <span class="menu-trigger">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+                    </svg>
+                </span>
+            {{ end }}
+
+            {{- if .Site.Params.EnableThemeToggle }}
+                <span class="theme-toggle not-selectable">{{ partial "theme-toggle-icon.html" . }}</span>
+            {{- end}}
+        </span>
+    </span>
+</header>
--- a/themes/hello-friend-ng/layouts/partials/javascript.html
+++ b/themes/hello-friend-ng/layouts/partials/javascript.html
@ -0,0 +1,12 @@
+{{ $main := resources.Get "js/main.js" }}
+{{ $menu := resources.Get "js/menu.js" }}
+{{ $hljs := resources.Get "js/highlight.min.js" }}
+{{ $secureJS := slice $main $menu $hljs | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+<script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
+<script>hljs.highlightAll();</script>
+
+{{ range $val := $.Site.Params.customJS }}
+    {{ if gt (len $val) 0 }}
+        <script src="{{ $val }}"></script>
+    {{ end }}
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/logo.html
+++ b/themes/hello-friend-ng/layouts/partials/logo.html
@ -0,0 +1,14 @@
+<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;">
+    <div class="logo">
+        <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />
+        <span class="logo__mark">{{ .Site.Params.Logo.logoMark }}</span>
+        <span class="logo__text">
+            {{ partial "breadcrumb.html" .Page }}
+        </span>
+        <span class="logo__cursor" style=
+                     "{{ with.Site.Params.Logo.logoCursorDisabled }}visibility:hidden;{{ end }}
+                      {{ with.Site.Params.Logo.logoCursorColor    }}background-color:{{ . }};{{ end }}
+                      {{ with.Site.Params.Logo.logoCursorAnimate  }}animation-duration:{{ . }};{{ end }}">
+        </span>
+    </div>
+</a>
--- a/themes/hello-friend-ng/layouts/partials/menu.html
+++ b/themes/hello-friend-ng/layouts/partials/menu.html
@ -0,0 +1,8 @@
+<nav class="menu">
+    <ul class="menu__inner">
+        {{- $currentPage := . -}}
+        {{ range .Site.Menus.main -}}
+            <li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
+        {{- end }}
+    </ul>
+</nav>
--- a/themes/hello-friend-ng/layouts/partials/pagination-list.html
+++ b/themes/hello-friend-ng/layouts/partials/pagination-list.html
@ -0,0 +1,20 @@
+<div class="pagination">
+    <div class="pagination__buttons">
+        {{ if .Paginator.HasPrev }}
+            <span class="button previous">
+                <a href="{{ .Paginator.Prev.URL }}">
+                    <span class="button__icon">←</span>
+                    <span class="button__text">Newer posts</span>
+                </a>
+            </span>
+        {{ end }}
+        {{ if .Paginator.HasNext }}
+            <span class="button next">
+                <a href="{{ .Paginator.Next.URL }}">
+                    <span class="button__text">Older posts</span>
+                    <span class="button__icon">→</span>
+                </a>
+            </span>
+        {{ end }}
+    </div>
+</div>
--- a/themes/hello-friend-ng/layouts/partials/pagination-single.html
+++ b/themes/hello-friend-ng/layouts/partials/pagination-single.html
@ -0,0 +1,28 @@
+{{ if and (not $.Site.Params.DisableReadOtherPosts) (or .NextInSection .PrevInSection) }}
+    <div class="pagination">
+        <div class="pagination__title">
+            <span class="pagination__title-h">{{ .Site.Params.ReadOtherPosts }}</span>
+            <hr />
+        </div>
+
+        <div class="pagination__buttons">
+            {{ if .NextInSection }}
+            <span class="button previous">
+                <a href="{{ .NextInSection.Permalink }}">
+                    <span class="button__icon">←</span>
+                    <span class="button__text">{{ .NextInSection.Title }}</span>
+                </a>
+            </span>
+            {{ end }}
+
+            {{ if .PrevInSection }}
+            <span class="button next">
+                <a href="{{ .PrevInSection.Permalink }}">
+                    <span class="button__text">{{ .PrevInSection.Title }}</span>
+                    <span class="button__icon">→</span>
+                </a>
+            </span>
+            {{ end }}
+        </div>
+    </div>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/sharing-buttons.html
+++ b/themes/hello-friend-ng/layouts/partials/sharing-buttons.html
@ -0,0 +1,89 @@
+<!-- Sharingbutton Facebook -->
+<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on facebook">
+  <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Twitter -->
+<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?url={{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on twitter">
+  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small">
+      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Tumblr -->
+<a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;title={{ .Title }}&amp;caption={{ .Title }}&amp;canonicalUrl={{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on tumblr">
+  <div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--small">
+    <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton E-Mail -->
+<a class="resp-sharing-button__link" href="mailto:?subject={{ .Title }}&amp;body={{ .Permalink }}" target="_self" rel="noopener" aria-label="" title="Share via email">
+  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Pinterest -->
+<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;media={{ .Permalink }};description={{ .Title }}" target="_blank" rel="noopener" aria-label="" title="Share on pinterest">
+  <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton LinkedIn -->
+<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ .Permalink }}&amp;title={{ .Title }}&amp;summary={{ .Title }}&amp;source={{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on linkedin">
+  <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Reddit -->
+<a class="resp-sharing-button__link" href="https://reddit.com/submit/?url={{ .Permalink }}&amp;resubmit=true&amp;title={{ .Title }}" target="_blank" rel="noopener" aria-label="" title="Share on reddit">
+  <div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton XING -->
+<a class="resp-sharing-button__link" href="https://www.xing.com/app/user?op=share;url={{ .Permalink }};title={{ .Title }}" target="_blank" rel="noopener" aria-label="" title="Share on xing">
+  <div class="resp-sharing-button resp-sharing-button--xing resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton WhatsApp -->
+<a class="resp-sharing-button__link" href="whatsapp://send?text={{ .Title }}%20{{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on whatsapp">
+  <div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Hacker News -->
+<a class="resp-sharing-button__link" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&amp;t={{ .Title }}" target="_blank" rel="noopener" aria-label="" title="Share on hacker news">
+  <div class="resp-sharing-button resp-sharing-button--hackernews resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z"/></svg>
+    </div>
+  </div>
+</a>
+
+<!-- Sharingbutton Telegram -->
+<a class="resp-sharing-button__link" href="https://telegram.me/share/url?text={{ .Title }}&amp;url={{ .Permalink }}" target="_blank" rel="noopener" aria-label="" title="Share on telegram">
+  <div class="resp-sharing-button resp-sharing-button--telegram resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+    </div>
+  </div>
+</a>
--- a/themes/hello-friend-ng/layouts/partials/social-icons.html
+++ b/themes/hello-friend-ng/layouts/partials/social-icons.html
@ -0,0 +1,3 @@
+{{ range . -}}
+    &nbsp; <a href="{{ .url }}" target="_blank" rel="noopener" title="{{ .name | humanize }}">{{ partial "svg.html" . }}</a> &nbsp;
+{{- end -}}
--- a/themes/hello-friend-ng/layouts/partials/svg.html
+++ b/themes/hello-friend-ng/layouts/partials/svg.html
--- a/themes/hello-friend-ng/layouts/partials/tags.html
+++ b/themes/hello-friend-ng/layouts/partials/tags.html
@ -0,0 +1,9 @@
+{{ with . }}
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+
+        {{ range . -}}
+            <span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
+        {{ end }}
+    </p>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/partials/theme-toggle-icon.html
+++ b/themes/hello-friend-ng/layouts/partials/theme-toggle-icon.html
@ -0,0 +1,5 @@
+<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+   3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
+   13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
+ </svg>
--- a/themes/hello-friend-ng/layouts/posts/rss.xml
+++ b/themes/hello-friend-ng/layouts/posts/rss.xml
@ -0,0 +1,27 @@
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+        <link>{{ .Permalink }}</link>
+        <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+        <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+        <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+        <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+        <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+        <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+        <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+        {{ with .OutputFormats.Get "RSS" -}}
+            {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+        {{ end -}}
+        {{ range .Pages }}
+        <item>
+            <title>{{ .Title }}</title>
+            <link>{{ .Permalink }}</link>
+            <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+            {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+            <guid>{{ .Permalink }}</guid>
+            <description>{{ .Summary | html }}</description>
+            <content type="html">{{ printf `<![CDATA[%s]]>` .Content | safeHTML }}</content>
+        </item>
+        {{ end }}
+    </channel>
+</rss>
--- a/themes/hello-friend-ng/layouts/posts/single.html
+++ b/themes/hello-friend-ng/layouts/posts/single.html
@ -0,0 +1,114 @@
+{{ define "main" }}
+  <main class="post">
+
+    <div class="post-info">
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
+          <circle cx="12" cy="12" r="10"></circle>
+          <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        {{ i18n "readingTime" .Page.ReadingTime }}
+
+        {{ if .IsTranslated }} | {{ i18n "postAvailable" }}
+          {{ range .Translations }}
+              <a href="{{ .Permalink }}"><span class="flag flag-icon flag-icon-{{ index $.Site.Data.langFlags (.Lang) }} flag-icon-squared"></span></a>
+          {{ end}}
+        {{ end }}
+      </p>
+    </div>
+
+    <article>
+      <h1 class="post-title">
+        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+      </h1>
+
+      {{ with .Params.Description }}
+        <div class="post-excerpt">{{ . }}</div>
+      {{ end }}
+
+
+      {{ if .Params.Cover }}
+        <figure class="post-cover">
+          <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
+          
+          {{ if .Params.CoverCaption }}
+            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+          {{ end }}
+        </figure>
+      {{ end }}
+
+      {{- if and .Params.toc (gt .WordCount 400) }}
+        <hr />
+        <aside id="toc">
+          <div class="toc-title">{{ i18n "tableOfContents" }}</div>
+          {{ .TableOfContents }}
+        </aside>
+        <hr />
+      {{- end }}
+
+      {{ if .Params.Audio }}
+        <div class="post-audio">
+          <audio controls>
+            <source src="{{ .Params.Audio }}">
+          </audio>
+        </div>
+      {{ end }}
+
+      <div class="post-content">
+        {{ .Content }}
+      </div>
+    </article>
+
+    <hr />
+
+    <div class="post-info">
+
+      {{ with $a := .Page.Params.author }}
+      <p>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
+        <a href="{{ $a.url }}">{{ $a.name }}</a>
+      </p>
+      {{ end }}
+
+      {{ partial "tags.html" .Params.tags }}
+      {{ partial "categories.html" . }}
+
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+          <line x1="16" y1="13" x2="8" y2="13"></line>
+          <line x1="16" y1="17" x2="8" y2="17"></line>
+          <polyline points="10 9 9 9 8 9"></polyline>
+        </svg>
+        {{ i18n "wordCount" .Page.WordCount }}
+      </p>
+
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="16" y1="2" x2="16" y2="6"></line>
+          <line x1="8" y1="2" x2="8" y2="6"></line>
+          <line x1="3" y1="10" x2="21" y2="10"></line>
+        </svg>
+        {{ if .Site.Params.dateformNumTime }}
+          {{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
+        {{ else }}
+          {{ dateFormat "2006-01-02 15:04" .Date.Local }}
+        {{ end }}
+
+        {{ if .Lastmod }} 
+          {{ if not (eq .Lastmod .Date )}}
+            {{ if .Site.Params.dateformNumTime }}
+              ({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
+            {{ else }} 
+              ({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
+            {{ end }}
+          {{ end }}
+        {{ end }}
+      </p>
+
+    {{ partial "pagination-single.html" . }}
+
+  </main>
+{{ end }}
--- a/themes/hello-friend-ng/layouts/shortcodes/image.html
+++ b/themes/hello-friend-ng/layouts/shortcodes/image.html
@ -0,0 +1,3 @@
+{{ if .Get "src" }}
+    <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
+{{ end }}
--- a/themes/hello-friend-ng/static/fonts/Inter-UI-Bold.woff
+++ b/themes/hello-friend-ng/static/fonts/Inter-UI-Bold.woff
--- a/themes/hello-friend-ng/static/fonts/Inter-UI-Bold.woff2
+++ b/themes/hello-friend-ng/static/fonts/Inter-UI-Bold.woff2
--- a/themes/hello-friend-ng/static/fonts/Inter-UI-BoldItalic.woff
+++ b/themes/hello-friend-ng/static/fonts/Inter-UI-BoldItalic.woff
--- a/themes/hello-friend-ng/static/fonts/Inter-UI-BoldItalic.woff2
+++ b/themes/hello-friend-ng/static/fonts/Inter-UI-BoldItalic.woff2
--- a/Show More
+++ b/Show More
				`@ -0,0 +1,2 @@`
				`<h{{ .Level }} id="{{ .Anchor \| safeURL }}">{{ .Text \| safeHTML }} <a href="#{{ .Anchor \| safeURL }}">¶</a></h{{ .Level }}>`
				`@ -0,0 +1 @@`
				pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-keyword,.hljs-operator,.hljs-pattern-match{color:#f92672}.hljs-function,.hljs-pattern-match .hljs-constructor{color:#61aeee}.hljs-function .hljs-params{color:#a6e22e}.hljs-function .hljs-params .hljs-typing{color:#fd971f}.hljs-module-access .hljs-module{color:#7e57c2}.hljs-constructor{color:#e2b93d}.hljs-constructor .hljs-string{color:#9ccc65}.hljs-comment,.hljs-quote{color:#b18eb1;font-style:italic}.hljs-doctag,.hljs-formula{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}