add tella theme

2023-08-07 10:59:23 +02:00
parent 35bc0c2cac
commit e203dc7597
107 changed files with 4495 additions and 0 deletions
--- a/themes/tella/LICENSE
+++ b/themes/tella/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 YOUR_NAME_HERE
+
+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/tella/README.md
+++ b/themes/tella/README.md
@@ -0,0 +1,106 @@
+# Tella
+
+![](https://user-images.githubusercontent.com/39876629/103476491-9d870880-4df9-11eb-9961-98015b19968c.png)
+
+Tella, A Hugo theme for Companies.
+
+The demo can be seen here: https://tella.pages.dev
+
+[![Import this project into Forestry](https://assets.forestry.io/import-to-forestryK.svg)](https://app.forestry.io/quick-start?repo=opera7133/tella&engine=hugo&version=0.80.0&config=exampleSite)
+
+## Features
+
+- Responsive
+- Carousel
+- Google Analytics
+- Pagination
+- Syntax Highlight
+- Support categories
+- Disqus
+
+## Installation
+
+### Method 1
+
+Inside the folder of your Hugo site run:
+
+```bash
+$ git clone https://github.com/opera7133/tella themes/tella
+```
+
+Updating theme:
+
+```bash
+$ cd themes/tella
+$ git pull
+```
+
+### Method 2
+
+Inside the folder of your Hugo site run:
+
+```bash
+$ git submodule add https://github.com/opera7133/tella.git themes/tella
+```
+
+Updating theme:
+
+```bash
+$ git submodule update --remote --merge
+```
+
+### Install dependencies
+
+Copy at least the following files from `themes/tella/exampleSite` to the root folder of your site.
+
+- package.json
+- tailwind.config.js
+- postcss.config.js
+
+After that, run this command.
+
+```bash
+$ npm install
+```
+
+For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
+
+## Getting started
+
+After installing the theme successfully it requires a just a few more steps to get your site running.
+
+### Update config file
+
+Copy the config.toml in the exampleSite to the root of your Hugo site. Change strings as you like.
+
+### Check your site
+
+In order to see your site in action, run Hugo's built-in local server.
+
+```bash
+$ npm run start
+```
+
+Now enter `localhost:1313` in the address bar of your browser.
+
+### Update the theme
+
+Inside the folder of your Hugo site run:
+
+```bash
+$ git submodule update --remote --merge
+```
+
+### Build your site
+
+```bash
+$ npm run build
+```
+
+## Contributing
+
+If you find a bug or have an idea for a feature, feel free to write an [issue](https://github.com/opera7133/tella/issues) or make a PR.
+
+## License
+
+This theme is released under the [MIT license](https://github.com/opera7133/tella/blob/master/LICENSE).
--- a/themes/tella/archetypes/default.md
+++ b/themes/tella/archetypes/default.md
@@ -0,0 +1,2 @@
+++
+++
--- a/themes/tella/assets/css/main.css
+++ b/themes/tella/assets/css/main.css
@@ -0,0 +1,4 @@
+/* assets */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/themes/tella/assets/css/style.css
+++ b/themes/tella/assets/css/style.css
--- a/themes/tella/exampleSite/.gitignore
+++ b/themes/tella/exampleSite/.gitignore
@@ -0,0 +1,26 @@
+# Compiled Object files, Static and Dynamic libs (Shared Objects)
+*.o
+*.a
+*.so
+
+# Folders
+_obj
+_test
+
+# Architecture specific extensions/prefixes
+*.[568vq]
+[568vq].out
+
+*.cgo1.go
+*.cgo2.c
+_cgo_defun.c
+_cgo_gotypes.go
+_cgo_export.*
+
+_testmain.go
+
+*.exe
+*.test
+
+/public
+.DS_Store
--- a/themes/tella/exampleSite/archetypes/blog.md
+++ b/themes/tella/exampleSite/archetypes/blog.md
@@ -0,0 +1,8 @@
+---
+title: ""
+date: {{ .Date }}
+image: "img/default.jpg"
+draft: true
+weight: 100
+author: ""
+---
--- a/themes/tella/exampleSite/archetypes/products.md
+++ b/themes/tella/exampleSite/archetypes/products.md
@@ -0,0 +1,5 @@
+---
+title: ""
+date: {{ .Date }}
+draft: true
+---
--- a/themes/tella/exampleSite/config.toml
+++ b/themes/tella/exampleSite/config.toml
@@ -0,0 +1,88 @@
+baseURL = "https://example.com"
+title = "Tella"
+author = "username"
+languageCode = "en"
+DefaultContentLanguage = "en"
+enableInlineShortcodes = true
+theme = "tella"
+enableRobotsTXT = true
+
+# Please enable this feature if the site is available in Japanese, Chinese or Korean.
+#hasCJKLanguage = true
+
+# If you're using Google Analytics, you can enable this feature.
+#googleAnalytics = "UA-12345678-1"
+
+# Disqus Comment System
+#disqusShortname = ""
+
+[params]
+
+  showBlog = true
+  mainSections = ['blog']
+
+  googleFonts = true
+
+  [params.logo]
+    main = "img/logo/logo.svg"
+    alt = "Tella Logo"
+
+    # The size parameter is the class name of tailwindcss
+    # https://tailwindcss.com/
+    size = "h-14"
+
+  [params.site]
+    name = "Tella"
+
+  [params.icon]
+    #If you want to use FontAwesome, set this parameter to true.
+    fontawesome = true
+
+  [params.homepage_meta_tags]
+    meta_description = "A Hugo Theme for OSSProject, Companies, Organization..."
+    meta_og_title = "Tella"
+    meta_og_type = "website"
+    meta_og_url = "https://tella.pages.dev"
+    meta_og_image = "https://raw.githubusercontent.com/opera7133/tella/master/images/tn.png"
+    meta_og_description = "A Hugo Theme for OSSProject, Companies, Organization..."
+    meta_twitter_card = "summary_large_image"
+    meta_twitter_site = "@username"
+    meta_twitter_creator = "@username"
+
+[menu]
+
+  [[menu.main]]
+    identifier = "products"
+    name = "Products"
+    url = "/products/"
+    weight = 1
+
+  [[menu.main]]
+    identifier = "blog"
+    name = "Blog"
+    url = "/blog/"
+    weight = 2
+
+  [[menu.main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
+    weight = 3
+
+  [[menu.main]]
+    identifier = "contact"
+    name = "Contact"
+    url = "/contact/"
+    weight = 4
+
+  # Footer Menu
+  [[menu.footer]]
+    name = "Home"
+    url = "/"
+      weight = 1
+
+  [[menu.footer]]
+    name = "Github"
+    url = "https://github.com/opera7133/tella"
+    pre = "<i class='icon-github text-2xl'></i>"
+      weight = 2
--- a/themes/tella/exampleSite/configTaxo.toml
+++ b/themes/tella/exampleSite/configTaxo.toml
@@ -0,0 +1,27 @@
+timeout = 30000
+enableInlineShortcodes = true
+
+[taxonomies]
+category = "categories"
+tag = "tags"
+series = "series"
+
+[privacy]
+
+  [privacy.vimeo]
+    disabled = false
+    simple = true
+
+  [privacy.twitter]
+    disabled = false
+    enableDNT = true
+    simple = true
+    disableInlineCSS = true
+
+  [privacy.instagram]
+    disabled = false
+    simple = true
+
+  [privacy.youtube]
+    disabled = false
+    privacyEnhanced = true
--- a/themes/tella/exampleSite/content/_index.md
+++ b/themes/tella/exampleSite/content/_index.md
@@ -0,0 +1,3 @@
+++
+author = "Hugo Authors"
+++
--- a/themes/tella/exampleSite/content/about.md
+++ b/themes/tella/exampleSite/content/about.md
@@ -0,0 +1,25 @@
+++
+title = "About"
+description = "Hugo, the world's fastest framework for building websites"
+date = "2019-02-28"
+aliases = ["about-us", "about-hugo", "contact"]
+author = "Hugo Authors"
+++
+
+Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
+
+Hugo makes use of a variety of open source projects including:
+
+* https://github.com/yuin/goldmark
+* https://github.com/alecthomas/chroma
+* https://github.com/muesli/smartcrop
+* https://github.com/spf13/cobra
+* https://github.com/spf13/viper
+
+Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
+
+Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
+
+Websites built with Hugo are extremely fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
+
+Learn more and contribute on [GitHub](https://github.com/gohugoio).
--- a/themes/tella/exampleSite/content/blog/_index.md
+++ b/themes/tella/exampleSite/content/blog/_index.md
@@ -0,0 +1,6 @@
+++
+aliases = ["posts", "articles", "blog", "showcase", "docs"]
+title = "Posts"
+author = "Hugo Authors"
+tags = ["index"]
+++
--- a/themes/tella/exampleSite/content/blog/emoji-support.md
+++ b/themes/tella/exampleSite/content/blog/emoji-support.md
@@ -0,0 +1,46 @@
+++
+author = "Hugo Authors"
+title = "Emoji Support"
+date = "2019-03-05"
+description = "Guide to emoji usage in Hugo"
+tags = [
+    "emoji",
+]
+++
+
+Emoji can be enabled in a Hugo project in a number of ways. 
+<!--more-->
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
+
+To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+<br>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+{{< highlight html >}}
+.emoji {
+  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+}
+{{< /highlight >}}
+
+{{< css.inline >}}
+<style>
+.emojify {
+	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+	font-size: 2rem;
+	vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+  .nowrap {
+    display: block;
+    margin: 25px 0;
+  }
+}
+</style>
+{{< /css.inline >}}
--- a/themes/tella/exampleSite/content/blog/markdown-syntax.md
+++ b/themes/tella/exampleSite/content/blog/markdown-syntax.md
@@ -0,0 +1,136 @@
+++
+author = "Hugo Authors"
+title = "Markdown Syntax Guide"
+date = "2019-03-11"
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+tags = [
+    "markdown",
+    "css",
+    "html",
+]
+categories = [
+    "themes",
+    "syntax",
+]
+series = ["Themes Guide"]
+aliases = ["migrate-from-jekyl"]
+++
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+<!--more-->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+
+#### Code block indented with four spaces
+
+    <!doctype html>
+    <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <title>Example HTML5 Document</title>
+    </head>
+    <body>
+      <p>Test</p>
+    </body>
+    </html>
+
+#### Code block with Hugo's internal highlight shortcode
+{{< highlight html >}}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
--- a/themes/tella/exampleSite/content/blog/math-typesetting.md
+++ b/themes/tella/exampleSite/content/blog/math-typesetting.md
@@ -0,0 +1,49 @@
+---
+author: Hugo Authors
+title: Math Typesetting
+date: 2019-03-08
+description: A brief guide to setup KaTeX
+math: true
+---
+
+Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
+<!--more-->
+
+In this example we will be using [KaTeX](https://katex.org/)
+
+- Create a partial under `/layouts/partials/math.html`
+- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
+- Include the partial in your templates like so:  
+
+```bash
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+```
+
+- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
+- To enable KaTex on a per page basis include the parameter `math: true` in content files
+
+**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
+
+{{< math.inline >}}
+{{ if or .Page.Params.math .Site.Params.math }}
+<!-- KaTeX -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
+{{</ math.inline >}}
+
+### Examples
+
+{{< math.inline >}}
+<p>
+Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
+</p>
+{{</ math.inline >}}
+
+Block math:
+$$
+ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$
--- a/themes/tella/exampleSite/content/blog/placeholder-text.md
+++ b/themes/tella/exampleSite/content/blog/placeholder-text.md
@@ -0,0 +1,45 @@
+++
+author = "Hugo Authors"
+title = "Placeholder Text"
+date = "2019-03-09"
+description = "Lorem Ipsum Dolor Si Amet"
+tags = [
+    "markdown",
+    "text",
+]
+++
+
+Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
+
+1. Exierant elisi ambit vivere dedere
+2. Duce pollice
+3. Eris modo
+4. Spargitque ferrea quos palude
+
+Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
+
+1. Comas hunc haec pietate fetum procerum dixit
+2. Post torum vates letum Tiresia
+3. Flumen querellas
+4. Arcanaque montibus omnes
+5. Quidem et
+
+# Vagus elidunt
+
+<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+
+[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
+
+## Mane refeci capiebant unda mulcebat
+
+Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
+
+Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
+
+Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto; }
+</style>
+{{< /css.inline >}}
--- a/themes/tella/exampleSite/content/blog/rich-content.md
+++ b/themes/tella/exampleSite/content/blog/rich-content.md
@@ -0,0 +1,33 @@
+++
+author = "Hugo Authors"
+title = "Rich Content"
+date = "2019-03-10"
+description = "A brief description of Hugo Shortcodes"
+tags = [
+    "shortcodes",
+    "privacy",
+]
+++
+
+Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
+<!--more-->
+
+
+## YouTube Privacy Enhanced Shortcode
+
+{{< youtube ZJthWmvUzzc >}}
+
+<br>
+
+
+## Twitter Simple Shortcode
+
+{{< twitter_simple 1085870671291310081 >}}
+
+<br>
+
+
+
+## Vimeo Simple Shortcode
+
+{{< vimeo_simple 48912912 >}}
--- a/themes/tella/exampleSite/content/contact.md
+++ b/themes/tella/exampleSite/content/contact.md
@@ -0,0 +1,7 @@
+---
+title: 'Contact'
+---
+
+To contact us, please fill out the form below.
+
+{{< form >}}
--- a/themes/tella/exampleSite/content/products/_index.md
+++ b/themes/tella/exampleSite/content/products/_index.md
@@ -0,0 +1,3 @@
+---
+title: "Products"
+---
--- a/themes/tella/exampleSite/content/products/example.md
+++ b/themes/tella/exampleSite/content/products/example.md
@@ -0,0 +1,10 @@
+---
+title: "Example Project"
+date: 2020-06-23T12:33:45+10:00
+draft: false
+featured: true
+weight: 1
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan dapibus purus, vel maximus erat facilisis vel.
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan dapibus purus, vel maximus erat facilisis vel. Suspendisse eu ipsum consequat, sodales nulla vel, faucibus velit. Fusce imperdiet lacus nec cursus auctor. In vulputate arcu et nulla placerat, nec pulvinar quam rhoncus. Praesent vel placerat nunc. Mauris elit felis, pulvinar egestas risus ut, fermentum ullamcorper orci. Integer tempor, neque sed fermentum eleifend, ligula est tincidunt purus, sodales semper elit enim ut mi. Vestibulum commodo tristique hendrerit. Duis interdum tristique augue id aliquam. Sed et tellus aliquam, accumsan erat at, facilisis tortor. Donec ac sapien sed lectus ullamcorper ultrices. Nullam placerat mauris nec urna rhoncus, vitae faucibus nulla venenatis. Donec vestibulum justo auctor, vestibulum diam quis, egestas erat. Vivamus volutpat et metus ut fermentum. Donec volutpat neque nec quam lacinia, nec faucibus felis ullamcorper.
--- a/themes/tella/exampleSite/data/features.json
+++ b/themes/tella/exampleSite/data/features.json
@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Simple",
+    "description": "All the bare necessities are there.",
+    "icon": "icon-desktop_windows"
+  },
+  {
+    "title": "Fast",
+    "description": "Light weight and fast loading speed.",
+    "icon": "icon-lightbulb_outline"
+  },
+  {
+    "title": "Github",
+    "description": "Please fork the Github repository and contribute to this theme!",
+    "icon": "icon-github",
+    "link": "https://github.com/opera7133/tella"
+  }
+]
--- a/themes/tella/exampleSite/data/slide.json
+++ b/themes/tella/exampleSite/data/slide.json
@@ -0,0 +1,11 @@
+[
+  {
+    "title": "Tella, A Hugo theme for Companies.",
+    "image": "img/slide/slide01.jpg"
+  },
+  {
+    "title": "Sample text here...",
+    "image": "img/slide/slide02.jpg",
+    "color": "text-black"
+  }
+]
--- a/themes/tella/exampleSite/layouts/.gitkeep
+++ b/themes/tella/exampleSite/layouts/.gitkeep
--- a/themes/tella/exampleSite/netlify.toml
+++ b/themes/tella/exampleSite/netlify.toml
@@ -0,0 +1,30 @@
+[build]
+publish = "public"
+command = "git submodule update --remote --merge && npm run build"
+
+[context.production.environment]
+HUGO_VERSION = "0.90.0"
+HUGO_ENV = "production"
+HUGO_ENABLEGITINFO = "true"
+
+[context.split1]
+command = "npm run build"
+
+[context.split1.environment]
+HUGO_VERSION = "0.90.0"
+HUGO_ENV = "production"
+
+[context.deploy-preview]
+command = "npm run build"
+
+[context.deploy-preview.environment]
+HUGO_VERSION = "0.90.0"
+
+[context.branch-deploy]
+command = "npm run build"
+
+[context.branch-deploy.environment]
+HUGO_VERSION = "0.90.0"
+
+[context.next.environment]
+HUGO_ENABLEGITINFO = "true"
--- a/themes/tella/exampleSite/package.json
+++ b/themes/tella/exampleSite/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "tella",
+  "version": "0.0.1",
+  "description": "Simple, Light, Responsive",
+  "main": "index.js",
+  "repository": "https://github.com/opera7133/tella",
+  "author": "wamo <ainznino@pm.me>",
+  "license": "MIT",
+  "scripts": {
+    "start": "concurrently npm:watch:*",
+    "watch:tw": "tailwindcss -i ./themes/tella/assets/css/main.css -o ./themes/tella/assets/css/style.css --watch",
+    "watch:hugo": "hugo server",
+    "build": "tailwindcss -i ./themes/tella/assets/css/main.css -o ./themes/tella/assets/css/style.css && hugo --minify"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.4",
+    "autoprefixer": "^10.4.7",
+    "concurrently": "^8.0.1",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^10.0.0",
+    "tailwindcss": "^3.1.6"
+  }
+}
--- a/themes/tella/exampleSite/postcss.config.js
+++ b/themes/tella/exampleSite/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/themes/tella/exampleSite/static/css/custom.css
+++ b/themes/tella/exampleSite/static/css/custom.css
@@ -0,0 +1,4 @@
+/* 
+ This CSS file is used to override the existing styles of the theme.
+ You can change the article headings, fonts, colors, etc.
+*/
--- a/themes/tella/exampleSite/static/favicon-32x32.png
+++ b/themes/tella/exampleSite/static/favicon-32x32.png
--- a/themes/tella/exampleSite/static/img/logo/logo.svg
+++ b/themes/tella/exampleSite/static/img/logo/logo.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#09348B;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="256" cy="256" r="256"/>
+<polygon class="st1" points="316.4,173.7 195.6,173.7 135.1,278.4 195.6,383.1 316.4,383.1 376.9,278.4 "/>
+<polygon class="st1" points="256,69.3 202.1,162.6 309.9,162.6 "/>
+<polygon class="st1" points="128,288.7 74.1,382.1 181.8,382.1 "/>
+<polygon class="st1" points="383.9,288.7 330,382.1 437.8,382.1 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/themes/tella/exampleSite/static/img/slide/slide01.jpg
+++ b/themes/tella/exampleSite/static/img/slide/slide01.jpg
--- a/themes/tella/exampleSite/static/img/slide/slide02.jpg
+++ b/themes/tella/exampleSite/static/img/slide/slide02.jpg
--- a/themes/tella/exampleSite/tailwind.config.js
+++ b/themes/tella/exampleSite/tailwind.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  content: ["./**/*.html", "./**/*.md", "./config.toml"],
+  theme: {
+    extend: {
+      colors: {
+        tlgray: {
+          200: "#E5E7EB",
+          400: "#9CA3AF",
+          700: "#374151",
+          800: "#1F2937"
+        }
+      }
+    }
+  },
+  variants: {},
+  plugins: [require("@tailwindcss/typography")],
+};
--- a/themes/tella/images/screenshot.png
+++ b/themes/tella/images/screenshot.png
--- a/themes/tella/images/tn.png
+++ b/themes/tella/images/tn.png
--- a/themes/tella/layouts/404.html
+++ b/themes/tella/layouts/404.html
--- a/themes/tella/layouts/_default/baseof.html
+++ b/themes/tella/layouts/_default/baseof.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  {{- partial "head.html" . -}}
+  {{ block "meta_tags" . }}{{end}}
+</head>
+
+<body class="flex flex-col min-h-screen">
+  <main class="flex-grow">
+    {{- partial "header.html" . -}}
+    <div class="scroll-top rounded-full">
+      <span class="icon-keyboard_arrow_up text-2xl"></span>
+    </div>
+    {{- block "main" . }}{{- end }}
+  </main>
+  {{- partial "footer.html" . -}}
+</body>
+
+</html>
--- a/themes/tella/layouts/_default/list.html
+++ b/themes/tella/layouts/_default/list.html
@@ -0,0 +1,48 @@
+{{ define "meta_tags" }}
+
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:locale" content="ja_JP" />
+<meta name="twitter:card" content="summary_large_image">
+<meta property="twitter:title" content="{{ .Title }}">
+
+{{ if .Params.image }}
+{{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+{{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+{{ end }}
+
+{{- if .Description }}
+<meta property="og:description" content="{{ .Description }}" />
+<meta property="twitter:description" content="{{ .Description }}" />
+{{- else if .Summary }}
+<meta property="og:description" content="{{ .Summary }}" />
+<meta property="twitter:description" content="{{ .Summary }}" />
+{{- else if .Site.Params.description }}
+<meta property="og:description" content="{{ .Site.Params.description }}" />
+<meta property="twitter:description" content="{{ .Site.Params.description }}" />
+{{- end }}
+
+{{ end }}
+
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+  <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+    <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+    <div class="content py-1">{{.Content}}</div>
+    {{ $paginator := .Paginate (where .Data.Pages "Type" "in" site.Params.mainSections) 6 }}
+    {{ range $paginator.Pages }}
+    <a href="{{ .Permalink }}">
+      <div>{{ partial "summary.html" . }}</div>
+    </a>
+    {{ end }}
+  </div>
+  {{ partial "paginator.html" . }}
+</div>
+{{ end }}
--- a/themes/tella/layouts/_default/single.html
+++ b/themes/tella/layouts/_default/single.html
@@ -0,0 +1,41 @@
+{{ define "meta_tags" }}
+
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:locale" content="ja_JP" />
+<meta name="twitter:card" content="summary_large_image">
+<meta property="twitter:title" content="{{ .Title }}">
+
+{{ if .Params.image }}
+{{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+{{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+{{ end }}
+
+{{- if .Description }}
+<meta property="og:description" content="{{ .Description }}" />
+<meta property="twitter:description" content="{{ .Description }}" />
+{{- else if .Summary }}
+<meta property="og:description" content="{{ .Summary }}" />
+<meta property="twitter:description" content="{{ .Summary }}" />
+{{- else if .Site.Params.description }}
+<meta property="og:description" content="{{ .Site.Params.description }}" />
+<meta property="twitter:description" content="{{ .Site.Params.description }}" />
+{{- end }}
+
+{{ end }}
+
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+  <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+    <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+    <div class="content prose md:prose-lg lg:prose-xl max-w-none py-1">{{.Content}}</div>
+  </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/blog/single.html
+++ b/themes/tella/layouts/blog/single.html
@@ -0,0 +1,106 @@
+{{ define "meta_tags" }}
+<meta property="og:title" content="{{site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}" />
+{{ partial "seo/print.html" . }}
+
+{{- with .Site.Params.facebookAppId }}
+<meta property="fb:app_id" content="{{ . }}" />
+{{- end }}
+<meta name="twitter:title" content="{{ .Title }}">
+<link rel="preload" href='{{ "/css/sweetalert2.min.css" | relURL }}' as="style"
+    onload="this.onload=null;this.rel='stylesheet'">
+{{ end }}
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+        <h1 class="title text-5xl font-bold mb-3">{{.Title}}</h1>
+        <section class="mb-4 text-lg">
+            <h4 id="date" class="flex flex-row items-center"><span class="icon-access_time text-2xl mr-2"></span>
+                {{ .Date.Format "2006/01/02" }} </h4>
+            {{ if .Params.author }}
+            <h4 class="flex flex-row items-center"><span class="icon-person text-2xl mr-2"></span>{{.Params.author}}
+            </h4>
+            {{ end }}
+            {{ with .Params.categories }}
+            <div id="categories" class="flex flex-row items-center">
+                <span class="icon-folder text-2xl mr-1"></span>
+                {{ range . }}
+                <span
+                    class="inline-flex py-1 leading-4 content-center justify-center px-1 text-blue-600 hover:text-blue-800 duration-200"><a
+                        href='{{ "categories" | absURL}}/{{ . | urlize }}'>{{ . }}</a></span>
+                {{ end }}
+            </div>
+            {{ end }}
+        </section>
+        {{ if .Params.image }}
+        <img class="my-4" src="{{ .Params.image | absURL }}">
+        {{ end }}
+        <div class="content prose md:prose-lg lg:prose-xl max-w-none py-1">{{.Content}}</div>
+        <div class="share m-2 grid grid-cols-2 lg:grid-cols-3 gap-2">
+            <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank"
+                title="Tweet" class="share-button twitter">
+                <div class="text-white text-center">
+                    <span class="icon-twitter text-lg mr-2"></span>Twitter
+                </div>
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank"
+                title="Facebook" class="share-button facebook">
+                <div class="text-white text-center">
+                    <span class="icon-facebook text-lg mr-2"></span>Facebook
+                </div>
+            </a>
+            <a href="https://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target="_blank"
+                title="hatena" class="share-button hatena">
+                <div class="text-white text-center">
+                    <span class="icon-hatenabookmark text-lg mr-2"></span>Hatena
+                </div>
+            </a>
+            <a href="https://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"
+                class="share-button pocket">
+                <div class="text-white text-center">
+                    <span class="icon-get-pocket text-lg mr-2"></span>Pocket
+                </div>
+            </a>
+            <a href="https://timeline.line.me/social-plugin/share?url={{ .Permalink }}" class="share-button line">
+                <div class="text-white text-center">
+                    <span class="icon-line text-lg mr-2"></span>LINE
+                </div>
+            </a>
+            <a href="javascript:OnClickURL();" class="share-button url" title="Copy to Clipboard"
+                data-clipboard-text="{{ .Title }} {{ .Permalink }}" id="url">
+                <div class="text-white text-center">
+                    <span class="icon-link text-lg mr-2"></span>Copy
+                </div>
+            </a>
+        </div>
+        <hr class="py-4">
+        {{- with .Site.Params.disqusShortname }}
+        <div class="mb-3">
+            {{ template "_internal/disqus.html" . }}
+        </div>
+        <hr class="py-4">
+        {{ end }}
+        <aside id="meta">
+            <div class="grid grid-cols-2">
+                <div class="col-span-1">
+                    {{ with .PrevInSection }}
+                    <a class="previous lg:text-2xl" href="{{.Permalink}}">
+                        <div
+                            class="transition-colors duration-300 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
+                            <span class="icon-keyboard_arrow_left"></span> {{.Title}}
+                        </div>
+                    </a>
+                    {{ end }}
+                </div>
+                {{ with .NextInSection }}
+                <a class="next lg:text-2xl" href="{{.Permalink}}">
+                    <div
+                        class="transition-colors duration-300 col-span-1 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
+                        {{.Title}} <span class="icon-keyboard_arrow_right"></span>
+                    </div>
+                </a>
+                {{ end }}
+            </div>
+        </aside>
+    </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/index.html
+++ b/themes/tella/layouts/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    {{- partial "head.html" . -}}
+    <meta name="description" content="{{ .Site.Params.homepage_meta_tags.meta_og_description }}" />
+    <meta property="og:title" content="{{ .Site.Params.homepage_meta_tags.meta_og_title }}" />
+    <meta property="og:type" content="{{ .Site.Params.homepage_meta_tags.meta_og_type }}" />
+    <meta property="og:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_url }}" />
+    <meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image }}" />
+    <meta property="og:description" content="{{ .Site.Params.homepage_meta_tags.meta_og_description }}" />
+    <meta name="twitter:card" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_card }}" />
+    <meta name="twitter:site" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_site }}" />
+    <meta name="twitter:creator" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_creator }}" />
+</head>
+
+<body>
+    {{- partial "alert.html" . -}}
+    {{- partial "header.html" . -}}
+    <div class="scroll-top rounded-full">
+        <span class="icon-keyboard_arrow_up text-2xl"></span>
+    </div>
+    {{- partial "slide.html" . -}}
+    {{- partial "strip.html" . -}}
+    {{ if ne .Site.Params.showBlog false }}
+    <div class="mx-auto my-10 max-w-6xl">
+        <h2 class="text-4xl ml-2">Blog</h2>
+        {{- partial "recent.html" . -}}
+    </div>
+    {{ end }}
+    {{- partial "footer.html" . -}}
+    <script src="{{ "/js/swiper-bundle.min.js" | relURL }}"></script>
+    <script>
+        var mySwiper = new Swiper(".swiper-container", {
+            direction: "horizontal",
+            loop: true,
+            speed: 550,
+            autoplay: {
+                delay: 6000,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+            },
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        });
+    </script>
+</body>
+
+</html>
--- a/themes/tella/layouts/partials/alert.html
+++ b/themes/tella/layouts/partials/alert.html
@@ -0,0 +1,7 @@
+{{if .Site.Data.alert}}
+<div class="bg-red-600 py-2">
+    {{ range .Site.Data.alert }}
+    <p class="ml-2 text-md text-white">>> {{ .date }} {{ .alert }}</p>
+    {{ end }}
+</div>
+{{end}}
--- a/themes/tella/layouts/partials/analytics.html
+++ b/themes/tella/layouts/partials/analytics.html
@@ -0,0 +1,13 @@
+{{ if not .Site.IsServer }}
+{{ with .Site.GoogleAnalytics }}
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ . }}');
+</script>
+{{ end }}
+{{ end }}
--- a/themes/tella/layouts/partials/footer.html
+++ b/themes/tella/layouts/partials/footer.html
@@ -0,0 +1,67 @@
+<footer class="bg-tlgray-100">
+  {{ if not .IsHome }}
+  <script src='{{ "/js/clipboard.min.js" | relURL }}'></script>
+  <script src='{{ "/js/highlight.min.js" | relURL }}'></script>
+  <script src='{{ "/js/highlightjs-line-numbers.min.js" | relURL }}'></script>
+  <script src='{{ "/js/sweetalert2.min.js" | relURL }}'></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+    hljs.initLineNumbersOnLoad();
+    new ClipboardJS('.url');
+
+    function OnClickURL() {
+      Swal.fire({
+        icon: 'success',
+        title: 'Copied!',
+        text: 'Copied the URL and title.'
+      })
+    }
+  </script>
+  {{ end }}
+  <script>
+    function toggleNav() {
+      var hamburger = document.getElementById("hamburgerbtn");
+      var overlay = document.getElementById("overlay");
+      var body = document.body;
+
+      hamburger.addEventListener("click", function () {
+        overlay.classList.toggle("open");
+        hamburger.classList.toggle("is-open");
+        body.classList.toggle("scroll-lock");
+      });
+    }
+    toggleNav();
+
+    document.querySelector('.scroll-top').addEventListener('click', () => {
+      document.documentElement.scrollTop = 0;
+    });
+  </script>
+  {{ if .Site.Params.googleFonts }}
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet" />
+  {{ else }}
+  <link href='{{ "css/webfonts.min.css" | relURL }}' rel="stylesheet" />
+  {{ end }}
+  <div class="flex items-center justify-between flex-wrap bg-gray-800 p-8 text-white">
+    <div class="items-center text-xl text-grey-900 mr-6">
+      {{ .Site.Params.site.name }}
+    </div>
+    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
+      <div class="text-lg lg:flex-grow">
+      </div>
+      <div class="flex flex-row items-center text-lg">
+        {{ range .Site.Menus.footer }}
+        <a href="{{ .URL }}" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white mr-8">
+          {{ if not .Pre }}
+          {{ .Name }}
+          {{ else }}
+          {{ .Pre }}
+          {{ end }}
+        </a>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+  <div class="copy pl-8 py-5 bg-tlgray-700 text-white text-md">
+    &copy; {{site.Title}} {{ now.Year }} All Rights Reserved.
+  </div>
+</footer>
--- a/themes/tella/layouts/partials/head.html
+++ b/themes/tella/layouts/partials/head.html
@@ -0,0 +1,23 @@
+{{- partial "analytics" . -}}
+<meta charset="utf-8">
+<title>{{site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}</title>
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<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 }}'>
+{{ if .Site.Params.icon.fontawesome }}
+<link href='{{ "/css/fa6.min.css" | relURL }}' rel="stylesheet" type="text/css">
+{{ end }}
+{{ $styles := resources.Get "css/style.css" | postCSS }}
+{{ if .Site.IsServer }}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
+{{ else }}
+{{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
+{{ end }}
+{{ if .IsHome }}
+<link rel="stylesheet" href='{{ "/css/swiper-bundle.min.css" | relURL }}'>
+{{ end }}
+<link href='{{ "/css/style.min.css" | relURL }}' rel="stylesheet" type="text/css">
+<link rel="stylesheet" href='{{ "/css/custom.css" | relURL }}'>
--- a/themes/tella/layouts/partials/header.html
+++ b/themes/tella/layouts/partials/header.html
@@ -0,0 +1,38 @@
+<header>
+    <div id="overlay">
+        <ul class="text-center list-none text-white text-3xl">
+            {{ range .Site.Menus.main }}
+            <li class="p-2">
+                <a href="{{ .URL | safeURL }}">
+                    <span>{{ .Name }}</span>
+                </a>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+    <nav class="flex items-center justify-between flex-wrap bg-opacity-100 p-8">
+        <div class="flex items-center flex-shrink-0 text-xl text-grey-900 mr-6">
+            <a href="{{ .Site.BaseURL }}"><img alt="{{ .Site.Params.logo.alt }}"
+                    class="{{ .Site.Params.logo.size }} mr-3" src="{{ .Site.Params.logo.main | relURL }}"></a>
+        </div>
+        <div class="block lg:hidden">
+            <div id="hamburgerbtn" class="flex cursor-pointer items-center w-14 h-10 py-2 rounded mopen">
+                <span class="top"></span>
+                <span class="middle"></span>
+                <span class="bottom"></span>
+            </div>
+        </div>
+        <div class="hidden w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
+            <div class="text-lg lg:flex-grow">
+            </div>
+            <div class="text-lg">
+                {{ range .Site.Menus.main }}
+                <a href="{{ .URL | safeURL }}"
+                    class="duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
+                    {{ .Name }}
+                </a>
+                {{ end }}
+            </div>
+        </div>
+    </nav>
+</header>
--- a/themes/tella/layouts/partials/navsp.html
+++ b/themes/tella/layouts/partials/navsp.html
--- a/themes/tella/layouts/partials/paginator.html
+++ b/themes/tella/layouts/partials/paginator.html
@@ -0,0 +1,53 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<nav aria-label="page navigation">
+  <ul class="flex list-none my-5 p-0 justify-center">
+    <!-- Don't show on 1st and 2nd page -->
+    {{ if and (ne $pag.PageNumber 1) (ne $pag.PageNumber 2) }}
+    <li><a href="{{ $pag.First.URL }}" rel="first"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">First</a>
+    </li>
+    {{ end }}
+
+    {{ if $pag.HasPrev }}
+    <li><a href="{{ $pag.Prev.URL }}" rel="prev"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Prev</a>
+    </li>
+    {{ end }}
+
+    {{ range $pag.Pagers }}
+    {{ if eq . $pag }}
+    <!-- Current Page -->
+    <li><a href="{{ .URL }}"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-blue-600 border-blue-600 text-white hover:border-blue-700 dark:border-gray-600">{{
+        .PageNumber }}</a></li>
+    {{ else if and (ge .PageNumber (sub $pag.PageNumber 2)) (le .PageNumber (add $pag.PageNumber 2)) }}
+    {{ $.Scratch.Set "dot_rendered" false }}
+    <!-- Render prev 2 page and next 2 pages -->
+    <li><a href="{{ .URL }}"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">{{
+        .PageNumber }}</a></li>
+    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
+    <!-- render skip pages -->
+    {{ $.Scratch.Set "dot_rendered" true }}
+    <li><a class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 cursor-auto Class
+                Properties
+                pointer-events-none">...</a></li>
+    {{ end }}
+    {{ end }}
+
+    {{ if $pag.HasNext }}
+    <li><a href="{{ $pag.Next.URL }}" rel="next"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100  bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Next</a>
+    </li>
+    {{ end }}
+
+    <!-- Don't show on last and 2nd last page -->
+    {{ if and (ne $pag.PageNumber $pag.TotalPages) ((ne $pag.PageNumber (sub $pag.TotalPages 1))) }}
+    <li class="page-item"><a href="{{ $pag.Last.URL }}" rel="last"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Last</a>
+    </li>
+    {{ end }}
+  </ul>
+</nav>
+{{ end }}
--- a/themes/tella/layouts/partials/recent.html
+++ b/themes/tella/layouts/partials/recent.html
@@ -0,0 +1,10 @@
+{{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+<a href="{{ .Permalink }}">{{ partial "summary.html" . }}</a>
+{{ end }}
+
+<div class="flex flex-wrap justify-center text-gray-300 my-5">
+    <a href="blog/"
+        class="duration-200 px-6 py-3 bg-tlgray-800 hover:opacity-80 hover:text-white relative block focus:outline-none text-md text-center">
+        All Posts >
+    </a>
+</div>
--- a/themes/tella/layouts/partials/seo/extend.html
+++ b/themes/tella/layouts/partials/seo/extend.html
@@ -0,0 +1,25 @@
+{{/* 
+	Add/Edit SEO Scratch Object
+	
+	@author The New Dynamic
+	
+	@access public
+
+	@context Page 
+
+	User does not load the partial, as the component will. 
+	This allows to overwrite some SEO object keys with project's own.
+	Project's partial should live under `layouts/partials/seo/extend.html`
+
+	@example - In Partial
+		{{- if eq "Type" "recipe" -}}
+		{{- .Scratch.SetInMap "seo" "type" "article" -}}
+		{{- end -}}
+
+		{{- $locales := dict "fr" "fr_FR" "en" "en_US" -}}
+		{{- .Scratch.SetInMap "seo" "locale" (index $locales .Lang) -}}
+
+		{{- if .IsHome -}}
+		{{- .Scratch.SetInMap "seo" "title" "Welcome Home" -}}
+		{{- end -}}
+ */}}
--- a/themes/tella/layouts/partials/seo/print.html
+++ b/themes/tella/layouts/partials/seo/print.html
@@ -0,0 +1,87 @@
+{{- $.Scratch.Set "seo" dict -}}
+
+{{/* 日付 */}}
+{{- if not .PublishDate.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "published_time" (.PublishDate.Format "2006-01-02T15:04:05-07:00") -}}
+{{- else if not .Date.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "published_time" (.Date.Format "2006-01-02T15:04:05-07:00") -}}
+{{- end -}}
+{{- if not .Lastmod.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "updated_time" (.Lastmod.Format "2006-01-02T15:04:05-07:00") -}}
+{{- end -}}
+
+ 
+{{/* 説明 */}}
+{{ $description := "" }}
+{{/* 1. SEO Description */}}
+{{- if .Params.seo.description -}}
+	{{- $description = .Params.seo.description -}}
+{{/* 2. Description
+	    As it could potentially contain HTML tags, we strip them with plainify */}}
+{{- else if .Params.description -}}
+	{{- $description = .Params.description | plainify -}}
+{{/* 3. Summary  */}}
+{{- else if .Summary -}}
+	{{- $description = substr .Summary 0 60 | plainify -}}
+{{- else -}}
+{{/* 4. site description  */}}
+	{{ $description = .Site.Params.Description }}
+{{- end -}}
+
+{{- $.Scratch.SetInMap "seo" "description" $description -}}
+
+{{/* サイト名 */}}
+{{- with .Param "seo.site_name" -}}
+	{{- $.Scratch.SetInMap "seo" "site_name" . -}}
+{{- else -}}
+	{{- $.Scratch.SetInMap "seo" "site_name" .Site.Title -}}
+{{- end -}}
+
+{{/* Twitter */}}
+{{/* Default twitter_card is "summary_large_image" */}}
+{{- $.Scratch.SetInMap "seo" "twitter_card" "summary_large_image" -}}
+
+{{/* We check the site config sports a Social.twitter and use as handle */}}
+{{- with .Site.Social.twitter -}}
+	{{- $.Scratch.SetInMap "seo" "twitter_handle" (printf "@%s" .) -}}
+{{- end -}}
+
+{{/* 種類 */}}
+{{- $.Scratch.SetInMap "seo" "type" "website" -}}
+
+{{- if in (slice "blog" "news") .Type -}}
+	{{- $.Scratch.SetInMap "seo" "type" "article" -}}
+{{ else if in (slice "article") .Type }}
+	{{- $.Scratch.SetInMap "seo" "type" "event" -}}
+{{- end -}}
+
+{{/* 言語 */}}
+{{- $.Scratch.SetInMap "seo" "locale" "ja_JP" -}}
+
+{{/* Canonical */}}
+{{ with .Params.seo.canonical }}
+  {{- $.Scratch.SetInMap "seo" "canonical" (. | absURL) -}}
+{{ else }}
+{{- $.Scratch.SetInMap "seo" "canonical" .Permalink -}}
+{{ end }}
+
+{{- partial "seo/extend" . -}}
+
+{{ partial "seo/tags" (dict "page" $ "seo" ($.Scratch.Get "seo")) }}
+{{ with .Site.Params.seo.jsonld }}
+	{{ partial "seo/jsonld" (dict "page" $ "seo" ($.Scratch.Get "seo")) }}
+{{ end }}
+
+{{ with .Site.Params.seo.debug }}
+	{{ partial "seo/debug" $ }}
+{{ end }}
+
+{{ if .Params.image }}
+    {{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+    {{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.og_image | absURL }}">
+{{ end }}
--- a/themes/tella/layouts/partials/seo/tags.html
+++ b/themes/tella/layouts/partials/seo/tags.html
@@ -0,0 +1,18 @@
+{{- $seo := .seo -}}
+<meta name="description" content="{{ $seo.description }}">
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:site_name" content="{{ $seo.site_name }}">
+<meta property="og:description" content="{{ $seo.description }}">
+<meta property="og:url" content="{{ .page.Permalink }}">
+<meta property="og:type" content="{{ $seo.type }}">
+<meta property="og:locale" content="{{ $seo.locale }}">
+<meta name="twitter:card" content="{{ $seo.twitter_card }}">
+<meta name="twitter:site" content="@tech_chiba">
+{{ with $seo.canonical }}
+<link rel="canonical" href="{{ . }}">
+{{ end }}
+<meta name="twitter:description" content="{{- $seo.description }}">
+<meta property="article:published_time" content="{{- $seo.published_time }}">
+{{- with $seo.updated_time }}
+<meta property="article:updated_time" content="{{- $seo.updated_time }}">
+{{- end }}
--- a/themes/tella/layouts/partials/slide.html
+++ b/themes/tella/layouts/partials/slide.html
@@ -0,0 +1,14 @@
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+        {{ range .Site.Data.slide }}
+        <div class="swiper-slide">
+            <img src="{{ .image }}" alt="">
+            <div class="s-fade-txt">
+                <h1 class="text-4xl {{ or .color "text-white" }}">{{ .title }}</h1>
+            </div>
+        </div>
+        {{ end }}
+    </div>
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
--- a/themes/tella/layouts/partials/strip.html
+++ b/themes/tella/layouts/partials/strip.html
@@ -0,0 +1,23 @@
+{{if .Site.Data.features}}
+<div class="bg-tlgray-200 py-6 md:py-10">
+    <div class="container mx-auto max-w-7xl">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+            {{ range .Site.Data.features }}
+            {{if .link }}<a href="{{ .link }}">{{ end }}
+                <div
+                    class="bg-white text-center mx-2 px-4 py-10 flex flex-row justify-center items-center duration-300 transform h-full hover:-translate-y-1 hover:shadow-lg">
+                    <div class="p-1">
+                        {{if .icon }}
+                        <span class="{{ .icon }} text-5xl"></span>
+                        {{ end }}
+                        <h2 class="text-2xl">{{ .title }}</h2>
+                        <p class="sans">{{ .description | markdownify }}</p>
+                    </div>
+                </div>
+                {{if .link }}
+            </a>{{ end }}
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{end}}
--- a/themes/tella/layouts/partials/summary.html
+++ b/themes/tella/layouts/partials/summary.html
@@ -0,0 +1,18 @@
+<div
+  class="sans w-full px-2 lg:max-w-full lg:flex mt-3 lg:px-0 duration-500 transform hover:-translate-y-1 hover:shadow-md">
+  {{ if .Params.image }}
+  <img id="thumb" alt="{{.Title}}" class="aspect-video object-cover w-auto lg:h-44"
+    src="{{ .Params.image | relURL }}" />
+  {{ else }}
+  <img id="thumb" alt="{{.Title}}" class="aspect-video object-cover w-auto lg:h-44"
+    src='{{ "/img/default.jpg" | relURL }}'>
+  {{ end }}
+  <div
+    class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 relative pl-4 p-6 justify-between leading-normal max-w-full w-full">
+    <div class="text-gray-900 font-bold text-xl mb-2">{{ .Title }}</div>
+    <p class="text-gray-700 text-base pb-5">{{ substr .Summary 0 130 | plainify | htmlUnescape }}...</p>
+    <p class="text-sm text-gray-600 items-center">
+      <time>{{ .Date.Format "2006/01/02" }}</time>
+    </p>
+  </div>
+</div>
--- a/themes/tella/layouts/products/list.html
+++ b/themes/tella/layouts/products/list.html
@@ -0,0 +1,13 @@
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+        <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+        <div class="content py-1">{{.Content}}</div>
+        <div class="grid grid-cols-1 md:grid-cols-2 mb-2 gap-2">
+        {{ range .Pages.ByWeight }}
+        {{ .Render "summary" }}
+        {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/products/summary.html
+++ b/themes/tella/layouts/products/summary.html
@@ -0,0 +1,8 @@
+<a href="{{ .Permalink }}">
+    <div class="summary border p-3">
+        <h2 class="text-3xl">
+            {{ .Title }}
+        </h2>
+        <p>{{ .Description }}</p>
+    </div>
+</a>
--- a/themes/tella/layouts/shortcodes/begin-task-list.html
+++ b/themes/tella/layouts/shortcodes/begin-task-list.html
@@ -0,0 +1 @@
+<span class="begin-task-list"></span>
--- a/themes/tella/layouts/shortcodes/form.html
+++ b/themes/tella/layouts/shortcodes/form.html
@@ -0,0 +1,15 @@
+<form name="contact" action="https://getform.io/" method="POST">
+    <div class="input">
+        <input type="text" placeholder="Name" name="name" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <input type="text" placeholder="Email" name="mail" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <input type="text" placeholder="Title" name="title" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <textarea rows="5" cols="30" placeholder="Message" name="message" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required></textarea>
+    </div>
+    <input type="submit" value="Submit" class="px-8 py-2 duration-200 bg-gray-800 text-white cursor-pointer transition-colors hover:bg-gray-400">
+</form>
--- a/themes/tella/layouts/shortcodes/img.html
+++ b/themes/tella/layouts/shortcodes/img.html
@@ -0,0 +1,14 @@
+{{ $name := .Get "src" }}
+{{ $extention := .Get "ext" | default "jpg" }}
+{{ $alt := .Get "alt" }}
+{{ $width := .Get "width" | default "auto" }}
+{{ $minipath := printf "/posts/%s/%s.%s" .Page.File.ContentBaseName $name $extention }}
+{{ $path := printf "content%s.webp" $minipath }}
+{{- if (fileExists $path) -}}
+<picture>
+    <source type="image/webp" srcset="{{ $minipath }}.webp">
+    <img src="{{ $minipath }}" />
+</picture>
+{{- else -}}
+<img src="{{ $minipath }}" />
+{{- end -}}
--- a/themes/tella/static/about-favicon.txt
+++ b/themes/tella/static/about-favicon.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Lato
+- Font Author: Copyright (c) 2010-2011 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato". Licensed under the SIL Open Font License, Version 1.1.
+- Font Source: http://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHvxk6XweuBCY.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
--- a/themes/tella/static/android-chrome-192x192.png
+++ b/themes/tella/static/android-chrome-192x192.png
--- a/themes/tella/static/android-chrome-512x512.png
+++ b/themes/tella/static/android-chrome-512x512.png
--- a/themes/tella/static/apple-touch-icon.png
+++ b/themes/tella/static/apple-touch-icon.png
--- a/themes/tella/static/css/fa6.min.css
+++ b/themes/tella/static/css/fa6.min.css
--- a/themes/tella/static/css/fonts/OpenSans-MediumItalic.ttf
+++ b/themes/tella/static/css/fonts/OpenSans-MediumItalic.ttf
--- a/themes/tella/static/css/fonts/OpenSans-Regular.ttf
+++ b/themes/tella/static/css/fonts/OpenSans-Regular.ttf
--- a/themes/tella/static/css/fonts/fa-brands-400.ttf
+++ b/themes/tella/static/css/fonts/fa-brands-400.ttf
--- a/themes/tella/static/css/fonts/fa-brands-400.woff2
+++ b/themes/tella/static/css/fonts/fa-brands-400.woff2
--- a/themes/tella/static/css/fonts/fa-regular-400.ttf
+++ b/themes/tella/static/css/fonts/fa-regular-400.ttf
--- a/themes/tella/static/css/fonts/fa-regular-400.woff2
+++ b/themes/tella/static/css/fonts/fa-regular-400.woff2
--- a/themes/tella/static/css/fonts/fa-solid-900.ttf
+++ b/themes/tella/static/css/fonts/fa-solid-900.ttf
--- a/themes/tella/static/css/fonts/fa-solid-900.woff2
+++ b/themes/tella/static/css/fonts/fa-solid-900.woff2
--- a/themes/tella/static/css/fonts/icomoon.svg
+++ b/themes/tella/static/css/fonts/icomoon.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="896" descent="-128" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" />
+<glyph unicode="&#xe900;" glyph-name="message" d="M768 554v86h-512v-86h512zM768 426v86h-512v-86h512zM768 298v86h-512v-86h512zM854 810q34 0 59-25t25-59v-512q0-34-25-60t-59-26h-598l-170-170v768q0 34 25 59t59 25h684z" />
+<glyph unicode="&#xe901;" glyph-name="create" d="M884 596l-78-78-160 160 78 78q12 12 30 12t30-12l100-100q12-12 12-30t-12-30zM128 160l472 472 160-160-472-472h-160v160z" />
+<glyph unicode="&#xe902;" glyph-name="email" d="M854 554v86l-342-214-342 214v-86l342-212zM854 726q34 0 59-26t25-60v-512q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h684z" />
+<glyph unicode="&#xe903;" glyph-name="access_time" d="M534 598v-224l192-114-32-54-224 136v256h64zM512 42q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 810q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xe904;" glyph-name="keyboard_arrow_left" d="M658 188l-60-60-256 256 256 256 60-60-196-196z" />
+<glyph unicode="&#xe905;" glyph-name="keyboard_arrow_right" d="M366 188l196 196-196 196 60 60 256-256-256-256z" />
+<glyph unicode="&#xe906;" glyph-name="desktop_windows" d="M896 214v512h-768v-512h768zM896 810q34 0 60-25t26-59v-512q0-34-26-60t-60-26h-298v-86h84v-84h-340v84h84v86h-298q-34 0-60 26t-26 60v512q0 34 26 59t60 25h768z" />
+<glyph unicode="&#xe907;" glyph-name="discord" d="M862.805 896c59.989 0 108.373-48.512 111.232-105.6v-918.4l-114.219 96.981-62.72 57.088-68.437 59.648 28.587-94.080h-598.955c-59.819 0-108.373 45.44-108.373 105.643v692.907c0 57.088 48.64 105.685 108.587 105.685h704zM601.771 653.525h-1.28l-8.619-8.533c88.448-25.6 131.243-65.579 131.243-65.579-57.003 28.501-108.373 42.752-159.744 48.512-37.12 5.76-74.24 2.731-105.6 0h-8.533c-20.053 0-62.72-8.533-119.893-31.36-19.925-8.661-31.36-14.336-31.36-14.336s42.752 42.752 136.96 65.579l-5.76 5.76c0 0-71.339 2.731-148.352-54.187 0 0-77.013-134.144-77.013-299.52 0 0 42.667-74.24 159.701-77.056 0 0 17.067 22.741 34.347 42.752-65.707 19.968-91.307 59.904-91.307 59.904s5.717-2.816 14.293-8.533h2.56c1.28 0 1.877-0.64 2.56-1.28v-0.256c0.683-0.683 1.28-1.28 2.56-1.28 14.080-5.803 28.16-11.52 39.68-17.067 19.883-8.619 45.44-17.195 76.8-22.869 39.68-5.76 85.163-8.533 136.96 0 25.6 5.76 51.2 11.392 76.8 22.827 16.64 8.533 37.12 17.067 59.605 31.445 0 0-25.6-39.936-94.080-59.904 14.080-19.883 33.92-42.667 33.92-42.667 117.077 2.56 162.56 76.8 165.12 73.643 0 165.12-77.44 299.52-77.44 299.52-69.76 51.797-135.040 53.76-146.56 53.76zM608.939 465.237c29.995 0 54.187-25.6 54.187-56.96 0-31.573-24.32-57.173-54.187-57.173s-54.187 25.6-54.187 56.917c0.085 31.573 24.448 57.088 54.187 57.216zM415.104 465.237c29.867 0 54.016-25.6 54.016-56.96 0-31.573-24.32-57.173-54.187-57.173s-54.187 25.6-54.187 56.917c0 31.573 24.32 57.088 54.357 57.216z" />
+<glyph unicode="&#xe908;" glyph-name="folder" d="M426 726l86-86h342q34 0 59-26t25-60v-426q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h256z" />
+<glyph unicode="&#xe909;" glyph-name="lightbulb_outline" d="M634 338q92 64 92 174 0 88-63 151t-151 63-151-63-63-151q0-46 27-96t65-78l36-26v-98h172v98zM512 810q124 0 211-87t87-211q0-156-128-244v-98q0-18-12-30t-30-12h-256q-18 0-30 12t-12 30v98q-128 88-128 244 0 124 87 211t211 87zM384 0v42h256v-42q0-18-12-30t-30-12h-172q-18 0-30 12t-12 30z" />
+<glyph unicode="&#xe90a;" glyph-name="person" d="M512 298q108 0 225-47t117-123v-86h-684v86q0 76 117 123t225 47zM512 384q-70 0-120 50t-50 120 50 121 120 51 120-51 50-121-50-120-120-50z" />
+<glyph unicode="&#xe90b;" glyph-name="file_download" d="M214 128h596v-86h-596v86zM810 512l-298-298-298 298h170v256h256v-256h170z" />
+<glyph unicode="&#xe90c;" glyph-name="remove_red_eye" d="M512 512q52 0 90-38t38-90-38-90-90-38-90 38-38 90 38 90 90 38zM512 170q88 0 151 63t63 151-63 151-151 63-151-63-63-151 63-151 151-63zM512 704q158 0 286-88t184-232q-56-144-184-232t-286-88-286 88-184 232q56 144 184 232t286 88z" />
+<glyph unicode="&#xe90d;" glyph-name="keyboard_arrow_up" d="M316 238l-60 60 256 256 256-256-60-60-196 196z" />
+<glyph unicode="&#xe90e;" glyph-name="line" d="M826.24 475.179c14.891 0 26.88-12.16 26.88-26.923 0-14.72-11.989-26.88-26.88-26.88h-74.88v-48h74.88c14.891 0 26.88-12.075 26.88-26.88 0-14.677-11.989-26.837-26.88-26.837h-101.803c-14.72 0-26.752 12.16-26.752 26.837v203.563c0 14.72 12.032 26.88 26.88 26.88h101.803c14.763 0 26.752-12.16 26.752-26.88 0-14.891-11.989-26.88-26.88-26.88h-74.88v-48zM661.76 346.496c0-11.52-7.424-21.76-18.432-25.429-2.731-0.896-5.675-1.323-8.491-1.323-9.003 0-16.683 3.84-21.76 10.667l-104.235 141.525v-125.44c0-14.677-11.904-26.837-26.923-26.837-14.763 0-26.709 12.16-26.709 26.837v203.563c0 11.52 7.381 21.76 18.347 25.387 2.56 0.981 5.803 1.408 8.277 1.408 8.32 0 16-4.437 21.12-10.837l105.045-142.080v126.123c0 14.72 12.032 26.88 26.88 26.88 14.72 0 26.88-12.16 26.88-26.88zM416.811 346.496c0-14.677-12.032-26.837-26.923-26.837-14.72 0-26.752 12.16-26.752 26.837v203.563c0 14.72 12.032 26.88 26.88 26.88 14.763 0 26.795-12.16 26.795-26.88zM311.595 319.659h-101.803c-14.72 0-26.88 12.16-26.88 26.837v203.563c0 14.72 12.16 26.88 26.88 26.88 14.848 0 26.88-12.16 26.88-26.88v-176.683h74.923c14.848 0 26.837-12.075 26.837-26.88 0-14.677-12.032-26.837-26.837-26.837zM1024 455.936c0 229.163-229.76 415.659-512 415.659s-512-186.496-512-415.659c0-205.269 182.187-377.259 428.16-409.941 16.683-3.499 39.381-11.008 45.141-25.173 5.12-12.843 3.371-32.683 1.621-46.080l-6.997-43.52c-1.92-12.843-10.24-50.603 44.757-27.52 55.083 22.997 295.083 173.995 402.603 297.6 73.557 80.597 108.715 163.157 108.715 254.635z" />
+<glyph unicode="&#xe90f;" glyph-name="hatenabookmark" d="M873.387 896c83.2 0 150.613-67.413 150.613-150.613v-722.773c0-83.2-67.413-150.613-150.613-150.613h-722.773c-83.2 0-150.613 67.413-150.613 150.613v722.773c0 83.2 67.413 150.613 150.613 150.613zM715.307 278.613c-33.28 0-60.16-26.88-60.16-60.16s26.88-60.331 60.16-60.331 60.16 27.52 60.16 60.8-26.88 60.16-60.16 59.691zM367.36 160.128c51.2 0 87.723 1.792 110.080 5.12 22.443 3.584 41.643 9.472 56.32 17.579 19.2 9.899 33.28 24.064 43.52 42.24s15.36 39.040 15.36 63.147c0 33.28-8.96 59.861-26.88 79.787-17.92 20.48-42.24 31.317-74.24 33.877 28.16 7.68 49.323 19.2 62.123 34.56 13.44 14.677 19.84 35.157 19.84 60.757 0 20.48-4.395 37.76-12.8 53.76-8.96 15.36-21.035 27.52-37.675 37.12-14.72 8.32-31.36 13.44-51.84 17.28-19.797 3.157-55.040 5.12-105.557 5.12h-124.373v-447.403h126.123zM398.763 338.688c30.080 0 50.56-3.755 61.44-11.179 11.52-7.68 16.64-21.12 16.64-39.68 0-17.28-5.76-29.44-17.92-36.48-11.52-7.68-32.64-10.837-61.44-10.837h-42.923v98.005zM768.085 308.565v301.227h-104.96v-301.227zM380.8 508.587c30.293 0 50.56-3.413 61.099-10.24 10.453-6.827 15.659-18.56 15.659-35.413 0-16.213-5.547-27.563-16.64-34.304-11.307-6.571-31.872-9.899-61.952-9.899h-24.32v89.856z" />
+<glyph unicode="&#xe935;" glyph-name="price-tag" d="M976 896h-384c-26.4 0-63.274-15.274-81.942-33.942l-476.116-476.116c-18.668-18.668-18.668-49.214 0-67.882l412.118-412.118c18.668-18.668 49.214-18.668 67.882 0l476.118 476.118c18.666 18.666 33.94 55.54 33.94 81.94v384c0 26.4-21.6 48-48 48zM736 512c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z" />
+<glyph unicode="&#xe9c9;" glyph-name="sphere" d="M480 832c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM751.59 192c8.58 40.454 13.996 83.392 15.758 128h127.446c-3.336-44.196-13.624-87.114-30.68-128h-112.524zM208.41 512c-8.58-40.454-13.996-83.392-15.758-128h-127.444c3.336 44.194 13.622 87.114 30.678 128h112.524zM686.036 512c9.614-40.962 15.398-83.854 17.28-128h-191.316v128h174.036zM512 576v187.338c14.59-4.246 29.044-11.37 43.228-21.37 26.582-18.74 52.012-47.608 73.54-83.486 14.882-24.802 27.752-52.416 38.496-82.484h-155.264zM331.232 658.484c21.528 35.878 46.956 64.748 73.54 83.486 14.182 10 28.638 17.124 43.228 21.37v-187.34h-155.264c10.746 30.066 23.616 57.68 38.496 82.484zM448 512v-128h-191.314c1.88 44.146 7.666 87.038 17.278 128h174.036zM95.888 192c-17.056 40.886-27.342 83.804-30.678 128h127.444c1.762-44.608 7.178-87.546 15.758-128h-112.524zM256.686 320h191.314v-128h-174.036c-9.612 40.96-15.398 83.854-17.278 128zM448 128v-187.34c-14.588 4.246-29.044 11.372-43.228 21.37-26.584 18.74-52.014 47.61-73.54 83.486-14.882 24.804-27.75 52.418-38.498 82.484h155.266zM628.768 45.516c-21.528-35.876-46.958-64.746-73.54-83.486-14.184-9.998-28.638-17.124-43.228-21.37v187.34h155.266c-10.746-30.066-23.616-57.68-38.498-82.484zM512 192v128h191.314c-1.88-44.146-7.666-87.040-17.28-128h-174.034zM767.348 384c-1.762 44.608-7.178 87.546-15.758 128h112.524c17.056-40.886 27.344-83.806 30.68-128h-127.446zM830.658 576h-95.9c-18.638 58.762-44.376 110.294-75.316 151.428 42.536-20.34 81.058-47.616 114.714-81.272 21.48-21.478 40.362-44.938 56.502-70.156zM185.844 646.156c33.658 33.658 72.18 60.932 114.714 81.272-30.942-41.134-56.676-92.666-75.316-151.428h-95.898c16.138 25.218 35.022 48.678 56.5 70.156zM129.344 128h95.898c18.64-58.762 44.376-110.294 75.318-151.43-42.536 20.34-81.058 47.616-114.714 81.274-21.48 21.478-40.364 44.938-56.502 70.156zM774.156 57.844c-33.656-33.658-72.18-60.934-114.714-81.274 30.942 41.134 56.678 92.668 75.316 151.43h95.9c-16.14-25.218-35.022-48.678-56.502-70.156z" />
+<glyph unicode="&#xe9cb;" glyph-name="link" d="M440.236 260.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-116c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
+<glyph unicode="&#xea96;" glyph-name="twitter" d="M1024 669.6c-37.6-16.8-78.2-28-120.6-33 43.4 26 76.6 67.2 92.4 116.2-40.6-24-85.6-41.6-133.4-51-38.4 40.8-93 66.2-153.4 66.2-116 0-210-94-210-210 0-16.4 1.8-32.4 5.4-47.8-174.6 8.8-329.4 92.4-433 219.6-18-31-28.4-67.2-28.4-105.6 0-72.8 37-137.2 93.4-174.8-34.4 1-66.8 10.6-95.2 26.2 0-0.8 0-1.8 0-2.6 0-101.8 72.4-186.8 168.6-206-17.6-4.8-36.2-7.4-55.4-7.4-13.6 0-26.6 1.4-39.6 3.8 26.8-83.4 104.4-144.2 196.2-146-72-56.4-162.4-90-261-90-17 0-33.6 1-50.2 3 93.2-59.8 203.6-94.4 322.2-94.4 386.4 0 597.8 320.2 597.8 597.8 0 9.2-0.2 18.2-0.6 27.2 41 29.4 76.6 66.4 104.8 108.6z" />
+<glyph unicode="&#xea9d;" glyph-name="youtube" d="M1013.8 588.8c0 0-10 70.6-40.8 101.6-39 40.8-82.6 41-102.6 43.4-143.2 10.4-358.2 10.4-358.2 10.4h-0.4c0 0-215 0-358.2-10.4-20-2.4-63.6-2.6-102.6-43.4-30.8-31-40.6-101.6-40.6-101.6s-10.2-82.8-10.2-165.8v-77.6c0-82.8 10.2-165.8 10.2-165.8s10-70.6 40.6-101.6c39-40.8 90.2-39.4 113-43.8 82-7.8 348.2-10.2 348.2-10.2s215.2 0.4 358.4 10.6c20 2.4 63.6 2.6 102.6 43.4 30.8 31 40.8 101.6 40.8 101.6s10.2 82.8 10.2 165.8v77.6c-0.2 82.8-10.4 165.8-10.4 165.8zM406.2 251.2v287.8l276.6-144.4-276.6-143.4z" />
+<glyph unicode="&#xeab0;" glyph-name="github" d="M512.008 883.358c-282.738 0-512.008-229.218-512.008-511.998 0-226.214 146.704-418.132 350.136-485.836 25.586-4.738 34.992 11.11 34.992 24.632 0 12.204-0.48 52.542-0.696 95.324-142.448-30.976-172.504 60.41-172.504 60.41-23.282 59.176-56.848 74.916-56.848 74.916-46.452 31.778 3.51 31.124 3.51 31.124 51.4-3.61 78.476-52.766 78.476-52.766 45.672-78.27 119.776-55.64 149.004-42.558 4.588 33.086 17.852 55.68 32.506 68.464-113.73 12.942-233.276 56.85-233.276 253.032 0 55.898 20.004 101.574 52.76 137.428-5.316 12.9-22.854 64.972 4.952 135.5 0 0 43.006 13.752 140.84-52.49 40.836 11.348 84.636 17.036 128.154 17.234 43.502-0.198 87.336-5.886 128.256-17.234 97.734 66.244 140.656 52.49 140.656 52.49 27.872-70.528 10.35-122.6 5.036-135.5 32.82-35.856 52.694-81.532 52.694-137.428 0-196.654-119.778-239.95-233.79-252.624 18.364-15.89 34.724-47.046 34.724-94.812 0-68.508-0.596-123.644-0.596-140.508 0-13.628 9.222-29.594 35.172-24.566 203.322 67.776 349.842 259.626 349.842 485.768 0 282.78-229.234 511.998-511.992 511.998z" />
+<glyph unicode="&#xf09a;" glyph-name="facebook" d="M1008 384c0-247.56-181.381-452.76-418.5-490v346.62h115.561l22 143.381h-137.561v93.1c0 39.221 19.221 77.461 80.82 77.461h62.561v122s-56.762 9.68-111.041 9.68c-113.34 0-187.34-68.66-187.34-192.961v-109.279h-126v-143.381h126v-346.62c-237.12 37.24-418.5 242.44-418.5 490 0 274 222 496 496 496s496-222 496-496z" />
+<glyph unicode="&#xf265;" glyph-name="get-pocket" d="M815.2 768c45.4 0 80.801-36.4 80.801-81.199v-270.4c0-249.4-199.6-448.4-447.6-448.4-249 0-448.4 199-448.4 448.4v270.4c0 44.199 37 81.199 81.199 81.199h734zM491.2 231c223.8 215 229.602 210.8 229.602 246.4 0 33.799-27.602 61.4-61.4 61.4-33.801 0-29.801-4.801-211-178.602-178.201 171-176.4 178.602-210.4 178.602-33.801 0-61.4-27.602-61.4-61.4 0-36.201 2.4-28.6 229.8-246.4 22-22.199 60-23.6 84.799 0z" />
+</font></defs></svg>
--- a/themes/tella/static/css/fonts/icomoon.ttf
+++ b/themes/tella/static/css/fonts/icomoon.ttf
--- a/themes/tella/static/css/fonts/icomoon.woff
+++ b/themes/tella/static/css/fonts/icomoon.woff
--- a/themes/tella/static/css/monokai-sublime.min.css
+++ b/themes/tella/static/css/monokai-sublime.min.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f}.hljs,.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
--- a/themes/tella/static/css/style.css
+++ b/themes/tella/static/css/style.css
@@ -0,0 +1,391 @@
+/* font */
+
+@font-face {
+  font-family: 'icomoon';
+  src: url('./fonts/icomoon.ttf?k0g81o') format('truetype'),
+    url('./fonts/icomoon.woff?k0g81o') format('woff'),
+    url('./fonts/icomoon.svg?k0g81o#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-facebook:before {
+  content: '\f09a';
+}
+.icon-get-pocket:before {
+  content: '\f265';
+}
+.icon-line:before {
+  content: '\e90e';
+}
+.icon-hatenabookmark:before {
+  content: '\e90f';
+}
+.icon-discord:before {
+  content: '\e907';
+}
+.icon-email:before {
+  content: '\e902';
+}
+.icon-message:before {
+  content: '\e900';
+}
+.icon-create:before {
+  content: '\e901';
+}
+.icon-access_time:before {
+  content: '\e903';
+}
+.icon-file_download:before {
+  content: '\e90b';
+}
+.icon-folder:before {
+  content: '\e908';
+}
+.icon-desktop_windows:before {
+  content: '\e906';
+}
+.icon-keyboard_arrow_left:before {
+  content: '\e904';
+}
+.icon-keyboard_arrow_right:before {
+  content: '\e905';
+}
+.icon-keyboard_arrow_up:before {
+  content: '\e90d';
+}
+.icon-remove_red_eye:before {
+  content: '\e90c';
+}
+.icon-person:before {
+  content: '\e90a';
+}
+.icon-lightbulb_outline:before {
+  content: '\e909';
+}
+.icon-price-tag:before {
+  content: '\e935';
+}
+.icon-sphere:before {
+  content: '\e9c9';
+}
+.icon-link:before {
+  content: '\e9cb';
+}
+.icon-twitter:before {
+  content: '\ea96';
+}
+.icon-youtube:before {
+  content: '\ea9d';
+}
+.icon-github:before {
+  content: '\eab0';
+}
+body {
+  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
+  font-weight: 300;
+}
+.content {
+  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+/* slide */
+
+@keyframes ScaleAni {
+  0% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.swiper-slide .s-fade-txt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+.swiper-slide .s-fade-txt {
+  animation: FadeAni 0.5s ease 1s 1 normal both;
+}
+@keyframes FadeAni {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.wrap {
+  overflow: hidden;
+}
+
+.swiper-wrapper img {
+  width: 100%;
+  height: 85vh;
+  object-fit: cover;
+}
+.active {
+  display: block !important;
+}
+.slide-wrap img {
+  width: 100%;
+  height: 85vh;
+  object-fit: cover;
+}
+.slide-class {
+  margin: 0 auto;
+}
+.animation-slide {
+  position: relative;
+}
+.swiper-button-prev:after,
+.swiper-container-rtl,
+.swiper-button-next:after {
+  color: #fff;
+}
+.swiper-pagination-bullet {
+  background: #fff;
+}
+
+/* menu */
+.mopen {
+  float: left;
+  display: block;
+  background: rgba(255, 255, 255, 0);
+  position: relative;
+  z-index: 1000;
+}
+
+.mopen span {
+  transition: all 0.3s;
+  transform: rotate(0deg);
+  width: 50px;
+  height: 2px;
+  display: block;
+  background: #000;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -25px;
+}
+.mopen .top {
+  transform: translateY(-17px);
+}
+.mopen .bottom {
+  transform: translateY(17px);
+}
+.mopen.is-open span {
+  background: #fff;
+}
+.mopen.is-open .middle {
+  background: rgba(255, 255, 255, 0);
+}
+.mopen.is-open .top {
+  transform: rotate(-45deg) translateY(0px);
+}
+.mopen.is-open .bottom {
+  transform: rotate(45deg) translateY(0px);
+}
+
+/* menu bg */
+#overlay {
+  visibility: hidden;
+  display: flex;
+  transition: 0.3s linear;
+  position: absolute;
+  z-index: 900;
+  align-items: center;
+  justify-content: center;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #222;
+  opacity: 0;
+}
+#overlay.open {
+  visibility: visible;
+  opacity: 0.95;
+}
+body.scroll-lock {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+}
+.scroll-top {
+  background-color: #222;
+  text-align: center;
+  color: #fff;
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
+  cursor: pointer;
+}
+
+/* form */
+
+input[type='text'],
+textarea {
+  width: 100%;
+  max-width: 72em;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+input,
+textarea {
+  -webkit-appearance: none;
+}
+input[type='checkbox'] {
+  -webkit-appearance: checkbox;
+}
+span.begin-task-list + ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+/* pagination */
+
+.pagination {
+  display: flex;
+  list-style: none;
+  border-radius: 0.25rem;
+  margin: 20px 0;
+  padding: 0;
+  justify-content: center;
+}
+.page-link {
+  position: relative;
+  display: block;
+  padding: 0.75rem 1rem;
+  margin-left: -1px;
+  line-height: 1.25;
+  border: 1px solid #dee2e6;
+}
+.homepage .page-link,
+.listing .page-link {
+  background-color: #fff;
+}
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: auto;
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+.page-item.active .page-link {
+  z-index: 1;
+}
+
+/* toc */
+
+#TableOfContents > ul {
+  border: 1px solid #999;
+  border-radius: 3px;
+  padding: 0.5em 1em;
+  line-height: 2;
+}
+#TableOfContents > ul:before {
+  content: 'Table of Contents';
+  text-align: center;
+  font-size: 1.5em;
+  font-weight: 400;
+}
+#TableOfContents ul {
+  list-style-type: none;
+}
+#TableOfContents li {
+  padding-top: 0;
+}
+#TableOfContents li > ul {
+  padding-left: 1em;
+  width: 100%;
+}
+#TableOfContents a {
+  display: block;
+  border-bottom: dashed 1px lightgray;
+}
+
+/* hljs */
+.hljs-ln-code {
+  padding-left: 0.8em !important;
+}
+.content code table.hljs-ln {
+  margin: 0;
+}
+.content code table.hljs-ln tr {
+  border-bottom-width: 0px;
+}
+
+/* scroll bar */
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 8px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-thumb {
+  background-color: #121212;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px #121212;
+}
+
+/* share */
+.share-button {
+  padding-top: 10px;
+  padding-bottom: 8px;
+  transition: all 0.3s;
+}
+.share-button:hover {
+  opacity: 0.7;
+}
+.twitter {
+  background-color: #1da1f2;
+}
+.line {
+  background-color: #00c300;
+}
+.facebook {
+  background-color: #3b5998;
+}
+.pocket {
+  background-color: #ef4056;
+}
+.hatena {
+  background-color: #00a4de;
+}
+.url {
+  background-color: #222;
+}
--- a/themes/tella/static/css/style.min.css
+++ b/themes/tella/static/css/style.min.css
--- a/themes/tella/static/css/sweetalert2.min.css
+++ b/themes/tella/static/css/sweetalert2.min.css
--- a/themes/tella/static/css/swiper-bundle.min.css
+++ b/themes/tella/static/css/swiper-bundle.min.css
--- a/themes/tella/static/css/webfonts.css
+++ b/themes/tella/static/css/webfonts.css
@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-Medium.ttf') format('truetype');
+  font-weight: medium;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-MediumItalic.ttf') format('truetype');
+  font-weight: medium;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./webfonts/OpenSans-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-Medium.ttf') format('truetype');
+  font-weight: medium;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-MediumItalic.ttf') format('truetype');
+  font-weight: medium;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./webfonts/Montserrat-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
--- a/themes/tella/static/css/webfonts.min.css
+++ b/themes/tella/static/css/webfonts.min.css
@@ -0,0 +1 @@
+@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Medium.ttf') format('truetype');font-weight:medium;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-MediumItalic.ttf') format('truetype');font-weight:medium;font-style:italic}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Medium.ttf') format('truetype');font-weight:medium;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-MediumItalic.ttf') format('truetype');font-weight:medium;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Italic.ttf') format('truetype');font-weight:400;font-style:italic}
--- a/themes/tella/static/css/webfonts/Montserrat-Bold.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-Bold.ttf
--- a/themes/tella/static/css/webfonts/Montserrat-BoldItalic.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-BoldItalic.ttf
--- a/themes/tella/static/css/webfonts/Montserrat-Italic.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-Italic.ttf
--- a/themes/tella/static/css/webfonts/Montserrat-Medium.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-Medium.ttf
--- a/themes/tella/static/css/webfonts/Montserrat-MediumItalic.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-MediumItalic.ttf
--- a/themes/tella/static/css/webfonts/Montserrat-Regular.ttf
+++ b/themes/tella/static/css/webfonts/Montserrat-Regular.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-Bold.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-Bold.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-BoldItalic.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-BoldItalic.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-Italic.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-Italic.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-Medium.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-Medium.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-MediumItalic.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-MediumItalic.ttf
--- a/themes/tella/static/css/webfonts/OpenSans-Regular.ttf
+++ b/themes/tella/static/css/webfonts/OpenSans-Regular.ttf
--- a/themes/tella/static/favicon-16x16.png
+++ b/themes/tella/static/favicon-16x16.png
--- a/themes/tella/static/favicon-32x32.png
+++ b/themes/tella/static/favicon-32x32.png
--- a/themes/tella/static/favicon.ico
+++ b/themes/tella/static/favicon.ico
--- a/themes/tella/static/img/default.jpg
+++ b/themes/tella/static/img/default.jpg
--- a/themes/tella/static/js/clipboard.min.js
+++ b/themes/tella/static/js/clipboard.min.js
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				.hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f}.hljs,.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
				`@@ -0,0 +1 @@`
				@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Medium.ttf') format('truetype');font-weight:medium;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-MediumItalic.ttf') format('truetype');font-weight:medium;font-style:italic}@font-face{font-family:'Open Sans';src:url('./webfonts/OpenSans-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Medium.ttf') format('truetype');font-weight:medium;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-MediumItalic.ttf') format('truetype');font-weight:medium;font-style:italic}@font-face{font-family:Montserrat;src:url('./webfonts/Montserrat-Italic.ttf') format('truetype');font-weight:400;font-style:italic}