summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Makefile13
-rw-r--r--sass/c-hyde.scss825
-rw-r--r--templates/base.html24
-rw-r--r--templates/index.html2
-rw-r--r--templates/post.html5
-rw-r--r--templates/sidebar.html17
6 files changed, 877 insertions, 9 deletions
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..a67831f
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,13 @@
+# Makefile
+
+
+scss:
+ sass sass/c-hyde.scss Resources/assets/c-hyde.css
+
+generate:
+ python3 generate_me.py
+
+all: scss generate
+
+clean:
+ rm -r docs/*
diff --git a/sass/c-hyde.scss b/sass/c-hyde.scss
new file mode 100644
index 0000000..26cd3b7
--- /dev/null
+++ b/sass/c-hyde.scss
@@ -0,0 +1,825 @@
+/*
+Latex CSS
+*/
+
+@font-face {
+ font-family: 'Latin Modern';
+ font-style: normal;
+ font-weight: normal;
+ font-display: swap;
+ src: url('/assets/fonts/LM-regular.woff2') format('woff2'),
+ url('/assets/fonts/LM-regular.woff') format('woff'),
+ url('/assets/fonts/LM-regular.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Latin Modern';
+ font-style: italic;
+ font-weight: normal;
+ font-display: swap;
+ src: url('/assets/LM-italic.woff2') format('woff2'),
+ url('LM-italic.woff') format('woff'),
+ url('/assets/fonts/LM-italic.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Latin Modern';
+ font-style: normal;
+ font-weight: bold;
+ font-display: swap;
+ src: url('/assets/fonts/LM-bold.woff2') format('woff2'),
+ url('/assets/fonts/LM-bold.woff') format('woff'),
+ url('/assets/fonts/LM-bold.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Latin Modern';
+ font-style: italic;
+ font-weight: bold;
+ font-display: swap;
+ src: url('/assets/fonts/LM-bold-italic.woff2') format('woff2'),
+ url('/assets/fonts/LM-bold-italic.woff') format('woff'),
+ url('/assets/fonts/LM-bold-italic.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: normal;
+ font-weight: normal;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-regular.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: italic;
+ font-weight: normal;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-italic.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: normal;
+ font-weight: bold;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-bold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: italic;
+ font-weight: bold;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-bold-italic.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-semibold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Libertinus';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url('/assets/fonts/Libertinus-semibold-italic.woff2') format('woff2');
+}
+
+
+/*
+Port of @mdo's Hyde Theme by Zola
+
+MIT License
+
+Copyright (c) 2017 Vincent Prouillet
+
+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.
+*/
+
+
+/*
+ * ___
+ * /\_ \
+ * _____ ___ ___\//\ \ __
+ * /\ '__`\ / __`\ / __`\\ \ \ /'__`\
+ * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
+ * \ \ ,__/\ \____/\ \____//\____\ \____\
+ * \ \ \/ \/___/ \/___/ \/____/\/____/
+ * \ \_\
+ * \/_/
+ *
+ * Designed, built, and released under MIT license by @mdo. Learn more at
+ * https://github.com/poole/poole.
+ */
+
+
+/*
+ * Contents
+ *
+ * Body resets
+ * Custom type
+ * Messages
+ * Container
+ * Masthead
+ * Posts and pages
+ * Footnotes
+ * Pagination
+ * Reverse layout
+ * Themes
+ */
+
+
+/*
+ * Body resets
+ *
+ * Update the foundational and global aspects of the page.
+ */
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+}
+@media (min-width: 38em) {
+ html {
+ font-size: 20px;
+ }
+}
+
+body {
+ color: #515151;
+ background-color: #fff;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+/* No `:visited` state is required by default (browsers will use `a`) */
+a {
+ color: #268bd2;
+ text-decoration: none;
+}
+/* `:focus` is linked to `:hover` for basic accessibility */
+a:hover,
+a:focus {
+ text-decoration: underline;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: .5rem;
+ font-weight: bold;
+ line-height: 1.25;
+ color: #313131;
+ text-rendering: optimizeLegibility;
+}
+h1 {
+ font-size: 2rem;
+}
+h2 {
+ margin-top: 1rem;
+ font-size: 1.5rem;
+}
+h3 {
+ margin-top: 1.5rem;
+ font-size: 1.25rem;
+}
+h4, h5, h6 {
+ margin-top: 1rem;
+ font-size: 1rem;
+}
+
+/* Body text */
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+strong {
+ color: #303030;
+}
+
+
+/* Lists */
+ul, ol, dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+dt {
+ font-weight: bold;
+}
+dd {
+ margin-bottom: .5rem;
+}
+
+/* Misc */
+hr {
+ position: relative;
+ margin: 1.5rem 0;
+ border: 0;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #fff;
+}
+
+abbr {
+ font-size: 85%;
+ font-weight: bold;
+ color: #555;
+ text-transform: uppercase;
+}
+abbr[title] {
+ cursor: help;
+ border-bottom: 1px dotted #e5e5e5;
+}
+
+/* Code */
+code,
+pre {
+ font-family: Menlo, Monaco, "Courier New", monospace;
+}
+code {
+ padding: .25em .5em;
+ font-size: 85%;
+ color: #bf616a;
+ background-color: #f9f9f9;
+ border-radius: 3px;
+}
+pre {
+ display: block;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ font-size: .8rem;
+ line-height: 1.4;
+ overflow-x: scroll;
+ background-color: #f9f9f9;
+}
+pre code {
+ padding: 0;
+ font-size: 100%;
+ color: inherit;
+ background-color: transparent;
+}
+.highlight {
+ margin-bottom: 1rem;
+ border-radius: 4px;
+}
+.highlight pre {
+ margin-bottom: 0;
+}
+
+/* Quotes */
+blockquote {
+ padding: .5rem 1rem;
+ margin: .8rem 0;
+ color: #7a7a7a;
+ border-left: .25rem solid #e5e5e5;
+}
+blockquote p:last-child {
+ margin-bottom: 0;
+}
+@media (min-width: 30em) {
+ blockquote {
+ padding-right: 5rem;
+ padding-left: 1.25rem;
+ }
+}
+
+img {
+ display: block;
+ margin: 0 0 1rem;
+ border-radius: 5px;
+ max-width: 100%;
+}
+
+/* Tables */
+table {
+ margin-bottom: 1rem;
+ width: 100%;
+ border: 1px solid #e5e5e5;
+ border-collapse: collapse;
+}
+td,
+th {
+ padding: .25rem .5rem;
+ border: 1px solid #e5e5e5;
+}
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+ background-color: #f9f9f9;
+}
+
+
+/*
+ * Custom type
+ *
+ * Extend paragraphs with `.lead` for larger introductory text.
+ */
+
+.lead {
+ font-size: 1.25rem;
+ font-weight: 300;
+}
+
+
+/*
+ * Messages
+ *
+ * Show alert messages to users. You may add it to single elements like a `<p>`,
+ * or to a parent if there are multiple elements to show.
+ */
+
+.message {
+ margin-bottom: 1rem;
+ padding: 1rem;
+ color: #717171;
+ background-color: #f9f9f9;
+}
+
+
+/*
+ * Container
+ *
+ * Center the page content.
+ */
+
+.container {
+ max-width: 38rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+/*
+ * Masthead
+ *
+ * Super small header above the content for site name and short description.
+ */
+
+.masthead {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ margin-bottom: 3rem;
+}
+.masthead-title {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #505050;
+}
+.masthead-title a {
+ color: #505050;
+}
+.masthead-title small {
+ font-size: 75%;
+ font-weight: 400;
+ color: #c0c0c0;
+ letter-spacing: 0;
+}
+
+
+/*
+ * Posts and pages
+ *
+ * Each post is wrapped in `.post` and is used on default and post layouts. Each
+ * page is wrapped in `.page` and is only used on the page layout.
+ */
+
+.page,
+.post {
+ margin-bottom: 4em;
+}
+
+/* Blog post or page title */
+.page-title,
+.post-title,
+.post-title a {
+ color: #303030;
+}
+.page-title,
+.post-title {
+ margin-top: 0;
+}
+
+/* Meta data line below post title */
+.post-date {
+ display: block;
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ color: #9a9a9a;
+}
+
+/* Related posts */
+.related {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ border-top: 1px solid #eee;
+}
+.related-posts {
+ padding-left: 0;
+ list-style: none;
+}
+.related-posts h3 {
+ margin-top: 0;
+}
+.related-posts li small {
+ font-size: 75%;
+ color: #999;
+}
+.related-posts li a:hover {
+ color: #268bd2;
+ text-decoration: none;
+}
+.related-posts li a:hover small {
+ color: inherit;
+}
+
+
+/* Footnotes */
+.footnote-definition:first-of-type {
+ border-top: 1px solid;
+ padding-top: 1rem;
+}
+.footnote-definition {
+ margin-top: 1rem;
+}
+.footnote-definition sup {
+ margin-left: -1rem;
+ float: left;
+}
+
+
+/*
+ * Pagination
+ *
+ * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
+ * there are no more previous or next posts to show.
+ */
+
+.pagination {
+ overflow: hidden; /* clearfix */
+ margin-left: -1rem;
+ margin-right: -1rem;
+ font-family: "PT Sans", Helvetica, Arial, sans-serif;
+ color: #ccc;
+ text-align: center;
+}
+
+/* Pagination items can be `span`s or `a`s */
+.pagination-item {
+ display: block;
+ padding: 1rem;
+ border: 1px solid #eee;
+}
+.pagination-item:first-child {
+ margin-bottom: -1px;
+}
+
+/* Only provide a hover state for linked pagination items */
+a.pagination-item:hover {
+ background-color: #f5f5f5;
+}
+
+@media (min-width: 30em) {
+ .pagination {
+ margin: 3rem 0;
+ }
+ .pagination-item {
+ float: left;
+ width: 50%;
+ }
+ .pagination-item:first-child {
+ margin-bottom: 0;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .pagination-item:last-child {
+ margin-left: -1px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+}
+
+/*
+ * __ __
+ * /\ \ /\ \
+ * \ \ \___ __ __ \_\ \ __
+ * \ \ _ `\/\ \/\ \ /'_` \ /'__`\
+ * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
+ * \ \_\ \_\/`____ \ \___,_\ \____\
+ * \/_/\/_/`/___/> \/__,_ /\/____/
+ * /\___/
+ * \/__/
+ *
+ * Designed, built, and released under MIT license by @mdo. Learn more at
+ * https://github.com/poole/hyde.
+ */
+
+
+/*
+ * Contents
+ *
+ * Global resets
+ * Sidebar
+ * Container
+ * Reverse layout
+ * Themes
+ */
+
+
+/*
+ * Global resets
+ *
+ * Update the foundational and global aspects of the page.
+ */
+
+html {
+ font-family: "PT Sans", Helvetica, Arial, sans-serif;
+}
+@media (min-width: 48em) {
+ html {
+ font-size: 16px;
+ }
+}
+@media (min-width: 58em) {
+ html {
+ font-size: 20px;
+ }
+}
+
+
+/*
+ * Sidebar
+ *
+ * Flexible banner for housing site name, intro, and "footer" content. Starts
+ * out above content in mobile and later moves to the side with wider viewports.
+ */
+
+.sidebar {
+ text-align: center;
+ padding: 2rem 1rem;
+ color: rgba(255,255,255,.5);
+ background-color: #202020;
+}
+@media (min-width: 48em) {
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 18rem;
+ text-align: left;
+ }
+}
+
+/* Sidebar links */
+.sidebar a {
+ color: #fff;
+}
+
+/* About section */
+.sidebar-about h1 {
+ color: #fff;
+ margin-top: 0;
+ font-family: "Abril Fatface", serif;
+ font-size: 3.25rem;
+}
+
+/* Sidebar nav */
+.sidebar-nav {
+ padding-left: 0;
+ list-style: none;
+}
+.sidebar-nav-item {
+ display: block;
+}
+a.sidebar-nav-item:hover,
+a.sidebar-nav-item:focus {
+ text-decoration: underline;
+}
+.sidebar-nav-item.active {
+ font-weight: bold;
+}
+
+/* Sticky sidebar
+ *
+ * Add the `sidebar-sticky` class to the sidebar's container to affix it the
+ * contents to the bottom of the sidebar in tablets and up.
+ */
+
+@media (min-width: 48em) {
+ .sidebar-sticky {
+ position: absolute;
+ right: 1rem;
+ bottom: 1rem;
+ left: 1rem;
+ }
+
+ // The #{} stuff is needed because of https://github.com/sass/sass/issues/2378
+ @supports(padding: m#{a}x(0px)) {
+ body:not(.layout-reverse) .sidebar-sticky {
+ // Notch is to left of sidebar; pad appropriately
+ padding-left: m#{a}x(1rem, env(safe-area-inset-left));
+ }
+
+ .layout-reverse .sidebar-sticky {
+ // Support iPhone X rounded corners and notch in landscape
+ // Notch is to right of sidebar; pad appropriately
+ padding-right: m#{a}x(1rem, env(safe-area-inset-right));
+ }
+ }
+}
+
+
+/* Container
+ *
+ * Align the contents of the site above the proper threshold with some margin-fu
+ * with a 25%-wide `.sidebar`.
+ */
+
+.content {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+
+@supports(padding: m#{a}x(0px)) {
+ body:not(.layout-reverse) .content {
+ // Notch is to right of content text; pad it appropriately
+ padding-right: m#{a}x(1rem, env(safe-area-inset-right));
+ }
+
+ .layout-reverse .content {
+ // Notch is to left of content text; pad it appropriately
+ padding-left: m#{a}x(1rem, env(safe-area-inset-left));
+ }
+}
+
+
+@media (min-width: 48em) {
+ .content {
+ max-width: 38rem;
+ margin-left: 20rem;
+ margin-right: 2rem;
+ }
+}
+
+@media (min-width: 64em) {
+ .content {
+ margin-left: 22rem;
+ margin-right: 4rem;
+ }
+}
+
+
+/*
+ * Reverse layout
+ *
+ * Flip the orientation of the page by placing the `.sidebar` on the right.
+ */
+
+@media (min-width: 48em) {
+ .layout-reverse .sidebar {
+ left: auto;
+ right: 0;
+ }
+ .layout-reverse .content {
+ margin-left: 2rem;
+ margin-right: 20rem;
+ }
+}
+
+@media (min-width: 64em) {
+ .layout-reverse .content {
+ margin-left: 4rem;
+ margin-right: 22rem;
+ }
+}
+
+
+
+/*
+ * Themes
+ *
+ * As of v1.1, Hyde includes optional themes to color the sidebar and links
+ * within blog posts. To use, add the class of your choosing to the `body`.
+ */
+
+/* Base16 (http://chriskempson.github.io/base16/#default) */
+
+/* Red */
+.theme-base-08 .sidebar {
+ background-color: #ac4142;
+}
+.theme-base-08 .content a,
+.theme-base-08 .related-posts li a:hover {
+ color: #ac4142;
+}
+
+/* Orange */
+.theme-base-09 .sidebar {
+ background-color: #d28445;
+}
+.theme-base-09 .content a,
+.theme-base-09 .related-posts li a:hover {
+ color: #d28445;
+}
+
+/* Yellow */
+.theme-base-0a .sidebar {
+ background-color: #f4bf75;
+}
+.theme-base-0a .content a,
+.theme-base-0a .related-posts li a:hover {
+ color: #f4bf75;
+}
+
+/* Green */
+.theme-base-0b .sidebar {
+ background-color: #90a959;
+}
+.theme-base-0b .content a,
+.theme-base-0b .related-posts li a:hover {
+ color: #90a959;
+}
+
+/* Cyan */
+.theme-base-0c .sidebar {
+ background-color: #75b5aa;
+}
+.theme-base-0c .content a,
+.theme-base-0c .related-posts li a:hover {
+ color: #75b5aa;
+}
+
+/* Blue */
+.theme-base-0d .sidebar {
+ background-color: #6a9fb5;
+}
+.theme-base-0d .content a,
+.theme-base-0d .related-posts li a:hover {
+ color: #6a9fb5;
+}
+
+/* Magenta */
+.theme-base-0e .sidebar {
+ background-color: #aa759f;
+}
+.theme-base-0e .content a,
+.theme-base-0e .related-posts li a:hover {
+ color: #aa759f;
+}
+
+/* Brown */
+.theme-base-0f .sidebar {
+ background-color: #8f5536;
+}
+.theme-base-0f .content a,
+.theme-base-0f .related-posts li a:hover {
+ color: #8f5536;
+}
+
+
+/* LaTeX Style Reset */
+
+body.libertinus {
+ font-family: 'Libertinus', Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+
+body {
+ font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
+ text-rendering: optimizeLegibility;
+}
diff --git a/templates/base.html b/templates/base.html
index 0ff6f13..37265f5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,14 +2,26 @@
<html lang="en">
<head>
{% block head %}
- <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+ <title>{% block title %}{% endblock %}</title>
+
+ <!--
+ <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+ -->
+
+ <link rel="stylesheet" href="/assets/c-hyde.css" />
+
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
+
<link rel="stylesheet" href="/assets/main.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{% block title %}{% endblock %}</title>
<meta name="og:site_name" content="Navan Chauhan" />
<link rel="canonical" href="https://web.navan.dev{% block canURL %}{% endblock %}" />
- <meta name="twitter:url" content="https://web.navan.dev{% block twURL %}{% endblock %} />
+ <meta name="twitter:url" content="https://web.navan.dev{% block twURL %}{% endblock %}" />
<meta name="og:url" content="https://web.navan.dev{% block ogURL %}{% endblock %}" />
<meta name="twitter:title" content="{% block twittertitle %}Hey - Home{% endblock %}" />
<meta name="og:title" content="{% block ogtitle %}Hey - Home{% endblock %}" />
@@ -29,9 +41,11 @@
<link rel="manifest" href="/manifest.json" />
{% endblock %}
</head>
-<body>
- {% include "header.html" %}
+<body class="theme-base-0d">
+ {% include "sidebar.html" %}
+ <div class="content container">
{% block body %}{% endblock %}
+ </div>
<script src="assets/manup.min.js"></script>
<script src="/pwabuilder-sw-register.js"></script>
</body>
diff --git a/templates/index.html b/templates/index.html
index 9f68a00..cf2ca69 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,7 +6,7 @@
<main>
{{ content}}
-<h2>Recent Posts</h2>
+<h1>Recent Posts</h1>
<ul>
{% for post in posts[:5] %}
<li><a href="{{post.link}}">{{ post.title }}</a></li>
diff --git a/templates/post.html b/templates/post.html
index 994b661..5bb2b97 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -14,14 +14,13 @@
{% block twimage %}{{content.metadata.image_link}}{% endblock %}
{% block body %}
-<main>
-
+ <div class="post">
{{ content}}
+ </div>
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="https://comments.navan.dev/"
src="https://comments.navan.dev/js/embed.min.js"></script>
<section id="isso-thread">
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
-</main>
{% endblock %}
diff --git a/templates/sidebar.html b/templates/sidebar.html
new file mode 100644
index 0000000..57066ae
--- /dev/null
+++ b/templates/sidebar.html
@@ -0,0 +1,17 @@
+<div class="sidebar">
+ <div class="container sidebar-sticky">
+ <div class="sidebar-about">
+ <h1><a href="/">Navan</a></h1>
+ <p class="lead">Something Funny</p>
+ </div>
+
+ <ul class="sidebar-nav">
+ <li><a class="sidebar-nav-item" href="/about/">about/links</a></li>
+ <li><a class="sidebar-nav-item" href="/posts/">posts</a></li>
+ <li><a class="sidebar-nav-item" href="/3D-Designs/">3D designs</a></li>
+ <li><a class="sidebar-nav-item" href="/feed.rss">RSS Feed</a></li>
+ <li><a class="sidebar-nav-item" href="/colophon/">colophon</a></li>
+ </ul>
+ <p>&copy; 2024. All rights reserved.
+ </div>
+</div>