diff options
| -rw-r--r-- | Makefile | 13 | ||||
| -rw-r--r-- | sass/c-hyde.scss | 825 | ||||
| -rw-r--r-- | templates/base.html | 24 | ||||
| -rw-r--r-- | templates/index.html | 2 | ||||
| -rw-r--r-- | templates/post.html | 5 | ||||
| -rw-r--r-- | templates/sidebar.html | 17 |
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>© 2024. All rights reserved. + </div> +</div> |