style: add markdown style

12 files changed, 158 insertions, 94 deletions

diff --git a/assets/css/markdown.css b/assets/css/markdown.css
new file mode 100644
index 0000000..75ccc2d
--- /dev/null
+++ b/assets/css/markdown.css
@@ -0,0 +1,102 @@
+/* Additional vertical padding used by kbd tag. */
+.py-05 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.markdown {
+  @apply text-gray-900 leading-normal break-words;
+}
+
+.markdown > * + * {
+  @apply mt-0 mb-4;
+}
+
+.markdown li + li {
+  @apply mt-1;
+}
+
+.markdown li > p + p {
+  @apply mt-6;
+}
+
+.markdown strong {
+  @apply font-semibold;
+}
+
+.markdown a {
+  @apply text-blue-600 font-semibold;
+}
+
+.markdown strong a {
+  @apply font-bold;
+}
+
+.markdown h1 {
+  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
+}
+
+.markdown h2 {
+  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
+}
+
+.markdown h3 {
+  @apply leading-snug text-lg font-semibold mb-4 mt-6;
+}
+
+.markdown h4 {
+  @apply leading-none text-base font-semibold mb-4 mt-6;
+}
+
+.markdown h5 {
+  @apply leading-tight text-sm font-semibold mb-4 mt-6;
+}
+
+.markdown h6 {
+  @apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
+}
+
+.markdown blockquote {
+  @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
+}
+
+.markdown code {
+  @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
+}
+
+.markdown pre {
+  @apply bg-gray-100 rounded p-4;
+}
+
+.markdown pre code {
+  @apply block bg-transparent p-0 overflow-auto rounded-none;
+}
+
+.markdown ul {
+  @apply text-base pl-8 list-disc;
+}
+
+.markdown ol {
+  @apply text-base pl-8 list-decimal;
+}
+
+.markdown kbd {
+  @apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-mono shadow;
+}
+
+.markdown table {
+  @apply text-base border-gray-600;
+}
+
+.markdown th {
+  @apply border py-1 px-3;
+}
+
+.markdown td {
+  @apply border py-1 px-3;
+}
+
+/* Override pygments style background color. */
+.markdown .highlight pre {
+  @apply bg-gray-100 !important;
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 909e46a..9611800 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -4,5 +4,6 @@
 @import "node_modules/tailwindcss/components";
 /* Site Specific */
 @import "assets/css/site";
+@import "assets/css/markdown";
 /* Tailwind's utility classes - generated based on config file */
 @import "node_modules/tailwindcss/utilities";
\ No newline at end of file
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 18e1ce1..3094aa7 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,21 +1,3 @@
-theme = "hugo-theme-tailwindcss-starter"
+baseURL = "http://example.org/"
 languageCode = "en-us"
-baseurl = "http://example.com/"
-title = "Hugo Tailwindcss Starter"
-
-author = "Dirk Olbrich"
-copyright = "Copyright © 2019, Dirk Olbrich, all rights reserved."
-
-# Code higlighting settings
-pygmentsCodefences = true
-pygmentsStyle = "vs"
-
-[params]
-    name = "Hugo Tailwindcss Starter"
-    description = "A simple bootstraped theme for Hugo, build with Tailwindcss."
-
-    github_user = "dirkolbrich"
-    github_repo = "https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter"
-    github_banner = true
-
-    favicon = "favicon.ico"
+title = "My New Hugo Site"
\ No newline at end of file
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index d2806e7..43faa94 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,7 +1,7 @@
 ---
-author: Dirk Olbrich
 title: Hi, and welcome.
-date: 2019-05-15
+date: 2020-05-13
+draft: false
 ---
 
 Live long and code.
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index 5cc32d0..bb3057b 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -1,11 +1,7 @@
 ---
-author: Dirk Olbrich
 title: About
-date: 2019-05-13
-description: A short description about me.
-keywords: [about, creator]
+date: 2020-05-13
+description: About me.
 ---
 
-Hugo Starter Theme for Tailwindcss.
-
-Made by [me](https://github.com/dirkolbrich/).
+About
diff --git a/exampleSite/content/post/first-post.md b/exampleSite/content/post/first-post.md
new file mode 100644
index 0000000..07d2f74
--- /dev/null
+++ b/exampleSite/content/post/first-post.md
@@ -0,0 +1,7 @@
+---
+title: First Post
+date: 2020-05-13
+draft: false
+---
+
+Wise words.
\ No newline at end of file
diff --git a/exampleSite/content/post/second-post.md b/exampleSite/content/post/second-post.md
new file mode 100644
index 0000000..78da919
--- /dev/null
+++ b/exampleSite/content/post/second-post.md
@@ -0,0 +1,7 @@
+---
+title: A second Post
+date: 2020-05-13
+draft: false
+---
+
+A lot more Wise words.
\ No newline at end of file
diff --git a/exampleSite/content/posts/first-post.md b/exampleSite/content/posts/first-post.md
deleted file mode 100644
index 14b51f1..0000000
--- a/exampleSite/content/posts/first-post.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-author: Dirk Olbrich
-title: First Post
-date: 2019-05-13
----
-
-Wise words.
\ No newline at end of file
diff --git a/exampleSite/content/posts/second-post.md b/exampleSite/content/posts/second-post.md
deleted file mode 100644
index 409bf03..0000000
--- a/exampleSite/content/posts/second-post.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-author: Dirk Olbrich
-title: A second Post
-date: 2019-05-14
----
-
-A lot more Wise words.
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6644923..9cd86dd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,8 @@
 {{ define "main" }}
 <article class="text-gray-700 sm:mx-12">
     <h1 class="font-bold text-3xl text-gray-700">{{ .Title }}</h1>
-    {{ .Content }}
+    <div class="markdown">
+        {{ .Content}}
+    </div>
 </article>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 2581e5c..1930029 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<article class="text-center text-gray-700">
+<article class="text-gray-700">
     <h1 class="font-serif font-thin text-5xl text-gray-500">{{ .Title }}</h1>
     {{ .Content }}
 </article>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 82027a0..6a98741 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,51 +1,32 @@
-<header class="w-full px-4 pt-4">
-    {{/*  CSS functionality for menu toggle  */}}
-    <style type="text/css">
-        input#nav-toggle:checked~label#show-button {
-            display: none;
-        }
-
-        input#nav-toggle:checked~label#hide-button {
-            display: flex;
-        }
-
-        input#nav-toggle:checked~#nav-menu {
-            display: block;
-        }
-    </style>
-
-    <nav class="flex items-center justify-between flex-wrap">
-        <a href="{{ .Site.Home.Permalink }}" class="flex items-center text-gray-700 font-bold">
-            {{ .Site.Title }}
-        </a>
-
-        <input id="nav-toggle" type=checkbox class="hidden">
-        <label id="show-button" for="nav-toggle"
-            class="flex items-center block sm:hidden text-gray-500 hover:text-blue-500">
-            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <title>Menu Open</title>
-                <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" />
-            </svg>
-        </label>
-        <label id="hide-button" for="nav-toggle" class="flex items-center hidden text-gray-700 hover:text-blue-500">
-            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <title>Menu Close</title>
-                <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
-                    transform="rotate(45 10 10)" />
-            </svg>
-        </label>
-
-        <ul id="nav-menu" class="sm:flex w-full sm:w-auto hidden sm:block mt-2 sm:mt-0 sm:space-x-2">
-            {{ with .Site.GetPage "/about" }}
-            <li>
-                <a href="{{ .Permalink }}" class="text-gray-500 hover:text-blue-400">{{ .Title }}</a>
-            </li>
-            {{ end }}
-            {{ range .Site.Sections }}
-            <li>
-                <a href="{{ .Permalink }}" class="text-gray-500 hover:text-blue-400">{{ .Title }}</a>
-            </li>
-            {{ end }}
-        </ul>
+<header>
+    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-4">
+        <div class="flex items-center flex-shrink-0 text-white mr-6">
+            <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
+                </svg>
+            <a href="/" class="font-semibold text-xl tracking-tight">{{ .Site.Title }}</a>
+        </div>
+        <div class="block md:hidden">
+            <button
+                class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
+                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <title>Menu</title>
+                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+                </svg>
+            </button>
+        </div>
+        <div class="w-full block flex-grow md:flex md:items-center md:w-auto">
+            <div class="text-sm md:flex-grow">
+                {{ range .Site.Menus.main }}
+                <a href="{{ .URL }}" class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white mr-4">{{ .Name }}</a>
+                {{ end }}
+            </div>
+            <div>
+                <a href="#"
+                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 md:mt-0">Download</a>
+            </div>
+        </div>
     </nav>
 </header>
\ No newline at end of file