commit 0b117d16417d630b30fdd3876f35bd935201bd86 Author: welpo Date: Thu Feb 2 15:53:54 2023 +0100 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..f10409c --- /dev/null +++ b/README.md @@ -0,0 +1,35 @@ +# tabi + +A simple blog theme powered by [Zola](getzola.org). See a live preview [here](https://welpo.github.io/tabi). + +> tabi — 旅 — Journey + + + +## Features + +- [X] Dark and light modes. Default theme is dark with a switcher in the navbar. +- [X] Projects page. +- [x] Social Links. +- [x] Tags. + + +### TODO: +- [] Archive. +- [] Syntax highlighting. + +## Quick start + +```bash +git clone git@github.com:welpo/tabi.git +cd tabi +zola serve +# open http://127.0.0.1:1111/ in the browser +``` + +## Inspiration + +This theme was inspired by: +- [shadharon](https://github.com/syedzayyan/shadharon). tabi started as a fork of syedzayyan's theme. +- [Alfonso García's site](https://alfoncode.com/) +- [tale-zola](https://github.com/aaranxu/tale-zola) \ No newline at end of file diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..8921985 --- /dev/null +++ b/config.toml @@ -0,0 +1,36 @@ +# Necessary stuff. +base_url = "https://welpo.github.io/tabi" +title = "~/tabi" +description = "tabi is a simple personal site and blogging theme for Zola." +generate_feed = true +compile_sass = true +minify_html = true + +taxonomies = [ + {name = "tags", feed = true}, +] + +[markdown] +highlight_code = true +highlight_theme = "ayu-dark" + +[extra] +toc = true +use_cdn = false + +#Full path after the base URL required. So if you were to place it in "static" it would be "/favicon.ico" +favicon = "" + +#This header image is used for SEO. For example if you were to share an image via Messenger/Instagram/Twitter a preview picture is also presented +headerImage = "" + +# The icon is display besides the menu text but is not necessary. It needs to be placed under "menu_icon" in the static "folder" +menu = [ + { name = "home", url = "/", weight = 1}, + { name = "tags", url = "/tags", weight = 1 }, + { name = "projects", url = "/projects", weight = 1 }, +] +#The icons available can be found in "social_icons" in the "static" folder +socials = [ + { name = "github", url = "https://github.com/welpo/", icon = "github" }, +] \ No newline at end of file diff --git a/content/.DS_Store b/content/.DS_Store new file mode 100644 index 0000000..2eba19c Binary files /dev/null and b/content/.DS_Store differ diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..84e555d --- /dev/null +++ b/content/_index.md @@ -0,0 +1,10 @@ ++++ +paginate_by = 4 +path = "posts" +title = "Posts" +sort_by = "date" +template = "section.html" + +[extra] +desc = {title = "Hello! I'm tabi~", img = "https://avatars.githubusercontent.com/u/6399341", text = "Tabi is a simple theme for Zola. It aims to be a personal page and home to blog posts. It features responsive design, dark and light modes, and high performance." } ++++ diff --git a/content/almost-no-js.md b/content/almost-no-js.md new file mode 100644 index 0000000..1fabb83 --- /dev/null +++ b/content/almost-no-js.md @@ -0,0 +1,12 @@ ++++ +title = "Almost no JavaScript" +date = "2022-11-22" +[taxonomies] +tags = ["test"] ++++ + +# Javascript? + +This theme has almost no JavaScript. It includes a single ~800 byte `.js` file with the logic for the light/dark mode switch. + +Other than that, it's a fast site with html and css. Just the way (most of) the web should be :-) \ No newline at end of file diff --git a/content/lorem.md b/content/lorem.md new file mode 100644 index 0000000..145a7d9 --- /dev/null +++ b/content/lorem.md @@ -0,0 +1,20 @@ ++++ +title = "Lorem Ipsum" +date = "2022-10-02" +[taxonomies] +tags = ["test"] ++++ + +# Heading 1 +Who is Lauren Ipsum? Fun grid ac labels Sed sed, rhoncus nocode pixel perfect property accessibility custom code university nam lens flares exploring shades of consequat fluid science and magic In rogue pixels. Cms scelerisque editor bibendum neque et Semper grid quantum field quis visually tempor. + +## Heading 1.1 +Adding lens cras eget ratio Webflow generation nocode dui code screen neque responsifying cloneable frosted glass beautiful Grimur dapibus block sticky nav Est disrupt membership ecommerce augue fluid quick find responsive. Don't touch my design. Marketplace nam proofreading labels and tooltips combo. Late night coffee spill. + +# Heading 2 + +Marketplace client-first 3D jello disrupt visual code superpowers visually alchemy wizardry cut to black. Fun contrast ratio agency accessibility sticky nav reverse-proxy. Sprinkling on some wow. Interaction freelance enterprise cms optimizing for IE6 cloneable making it pop logic div block McGuire Instagrimur. + +Designer adding lens flares symbols responsive images. Sprinkling on some wow. Proofreading labels and tooltips fluid frosted glass Webp neumorphic button the magical div block interaction SEO cms grid library superpowers accessible client-first DevLink generation nocode alt tag combo class. To set. + +Exploring shades of gray responsive images 3D university attributes designer nocode the magical div block. Don't touch my design. Pixel perfect component frosted glass. Cat-herding rogue pixels. Making it pop wizardry Webp generation nocode combo class reverse-proxy fun create component adding lens. \ No newline at end of file diff --git a/content/lorem2.md b/content/lorem2.md new file mode 100644 index 0000000..f410a6e --- /dev/null +++ b/content/lorem2.md @@ -0,0 +1,26 @@ ++++ +title = "Lorem Ipsum pt. II" +date = "2022-10-12" +[taxonomies] +tags = ["test"] ++++ + +# Heading 1 +Prohibere. Striga! Ut custodiant te sermonem dicens - periculi ... periculo! Non ego illud numquam. Dixi sunt implicatae. Elatus deinde manubrio! + +Gus sit amet suum motum. Nescio quando, aut quomodo, nescio quo. Illud scio, amet tortor. Suarum impotens prohibere eum. + +Sum expectantes. Ego hodie expectantes. Expectantes, et misit unum de pueris Gus interficere. Et suus vos. Nescio quis, qui est bonus usus liberi ad Isai? Qui nosti ... Quis dimisit filios ad necem ... hmm? Gus! Est, ante me factus singulis decem gradibus. Et nunc ad aliud opus mihi tandem tollendum est puer ille consensus et nunc fugit. Ipse suus obtinuit eam. Non solum autem illa, sed te tractantur in se trahens felis. + +No! Hoc non credant? Gus habet cameras ubique placet. Audire te! Non, omnia novit, omnia simul. Ubi eras hodie? In Lab! Et vos nolite cogitare suus 'possible ut Tyrus de cigarette elevaverunt CAPSA vestris? Age! Tu non vides? Pompeius extrema partem es. Tu omne quod ille voluit. + +## Heading 1.1 +At nolo de me ipso turpis. Ut nullam curae. Scis quid mihi quod infernum sit amet nunc magis animum, nunc eros eget quam cogitatione emptio damnat. Purus? Sic, si fieri justi ... amabo. + +# Heading 2 + +Sumus tam adultis. Non est enim tibi nescio fingunt. Confusio esse cupio. Scio te debeo meae. At etiam, ut caveant ab his eu. In tuo positum, idem fecissem. Constitutione, quam molesta est mihi tres menses nescio quid de contractu fines nostros. Scis quare hoc facere. Lorem satis quaesitum. + +Loquélæ. Brevis oratio. Hodie particeps tua perdideris. Quid sui nominis - Emilio? Emilio gradiens ad carcerem. Tulitque omnem pecuniam tuam in DEA tuus Lab. Vos got nihil. Quadratum unum. Et ego agnosco rem, nisi te scire elit. Cogito ... maybe vos possem socium ascendit. + +Paenitet me quod tu me rogas? Oh, sic, qui stultus plastic continentis rogavi te ut emas. Vides non manducare acidum hydrofluoric per plastic. Erit autem dissolvere metalli petram, vitrum, tellus. Ita quod illic '. Quam de aliquo cum aliqua interdum, maybe? Aliquid viride, huh? Quam vos sunt etiam vivere? \ No newline at end of file diff --git a/content/markdown.md b/content/markdown.md new file mode 100644 index 0000000..915c9a0 --- /dev/null +++ b/content/markdown.md @@ -0,0 +1,24 @@ ++++ +title = "Markdown Test" +date = "2023-01-31" +[taxonomies] +tags = ["markdown", "test"] ++++ + +## Code Block + +```rust +fn main() { + println!("Hello World"); +} +``` +## Quote + +> We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't. + +— Charlie Kaufman, Synecdoche, New York + +## Code tags + +Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit. +`Lorem ipsum dolor sit amet, consectetur adipiscing elit.` \ No newline at end of file diff --git a/content/projects/.DS_Store b/content/projects/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/content/projects/.DS_Store differ diff --git a/content/projects/_index.md b/content/projects/_index.md new file mode 100644 index 0000000..51242eb --- /dev/null +++ b/content/projects/_index.md @@ -0,0 +1,5 @@ ++++ +title = "projects" +sort_by = "weight" +template = "cards.html" ++++ diff --git a/content/projects/tabi.md b/content/projects/tabi.md new file mode 100644 index 0000000..6032609 --- /dev/null +++ b/content/projects/tabi.md @@ -0,0 +1,9 @@ ++++ +title = "tabi" +description = "A cute Zola theme." +weight = 1 + +[extra] +remote_image = "https://i.natgeofe.com/n/8a3e578f-346b-479f-971d-29dd99a6b699/nationalgeographic_2751013_16x9.jpg" +link_to = "https://github.com/welpo/tabi" ++++ \ No newline at end of file diff --git a/content/toc.md b/content/toc.md new file mode 100644 index 0000000..f4767ff --- /dev/null +++ b/content/toc.md @@ -0,0 +1,44 @@ ++++ +title = "Table of Contents Test" +date = "2022-11-22" +[taxonomies] +tags = ["test"] ++++ + +# Heading 1 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. + +## Heading 2 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +### Heading 3 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. + +### Heading 3 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. + +--- + + +## Heading 2 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +### Heading 3 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. + +### Heading 3 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. +#### Heading 4 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. \ No newline at end of file diff --git a/sass/.DS_Store b/sass/.DS_Store new file mode 100644 index 0000000..309427e Binary files /dev/null and b/sass/.DS_Store differ diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..b0f44e3 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,130 @@ +@font-face { + font-family: 'Inter'; + src: url('/fonts/Inter.ttf'); +} +@import 'parts/_cards.scss'; +@import 'parts/_code.scss'; +@import 'parts/_header.scss'; +@import 'parts/_image.scss'; +@import 'parts/misc.scss'; +@import 'parts/table.scss'; +@import 'parts/home-banner.scss'; +@import 'parts/footer.scss'; +@import 'parts/theme-switch.scss'; + +:root { + --max-layout-width: 1000px; + --normal-layout-width: 600px; + --medium-layout-width: 350px; + --small-layout-width: 200px; + font-family: 'Inter', Arial, Helvetica, sans-serif; + line-height: 190%; + + --bg-0: #818181; + --bg-1: rgba(255, 255, 255, 5%); + --bg-2: rgba(23, 23, 23, 100%); + --primary-color: #ef5350; + --hover-color: white; + --background-color: #1f1f1f; + // --navbar-color:#222226; + --secondary-color: #696969; + --highlights: #b35a5a; + --links: #d35d6e; + --text-color: #d3d3d3; + --code: #ef476f; + --border-color: rgb(0, 0, 0); + --light-border-color: rgba(255, 255, 255, 0.1); + --input-back: #4b4a4a; + --input-color: #294797; + --meta-color: rgb(198, 197, 197); + --accent-color: #ff9a8c; +} + +[data-theme='light'] { + --bg-0: #fff; + --bg-1: #f2f2f2; + --bg-2: #fefefe; + --hover-color: white; + --background-color: #fff; + // --navbar-color:#e3e3e3; + --secondary-color: rgb(158, 158, 158); + --links: #799351; + --text-color: #222226; + --border-color: rgb(114, 114, 114); + --light-border-color: rgba(255, 255, 255, 0.1); + --input-back: #161616; + --input-color: #294797; + --input-back: rgb(158, 158, 158); + --input-color: #e0a615; + --meta-color: rgb(53, 53, 53); + --accent-color: #aacb73; +} + +html { + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6em; +} +body { + margin: 0; + padding: 0; +} +.content { + max-width: var(--max-layout-width); + margin: 0 auto; + padding: 0 24px; + word-wrap: break-word; + min-height: 80vh; +} +h1 { + display: block; + font-size: 1.7em; + margin-top: 0.67em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 650; +} + +h2 { + display: block; + font-size: 2em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +@media only screen and (max-width: 1000px) { + .content { + max-width: var(--normal-layout-width); + } +} +@media only screen and (max-width: 600px) { + .content { + max-width: var(--medium-layout-width); + } +} +@media only screen and (max-width: 300px) { + .content { + max-width: var(--small-layout-width); + } +} +@media all and (min-width: 640px) { + html { + font-size: 16.5px; + } +} + +@media all and (min-width: 720px) { + html { + font-size: 17px; + } +} + +@media all and (min-width: 960px) { + html { + font-size: 20px; + } +} diff --git a/sass/parts/.DS_Store b/sass/parts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/sass/parts/.DS_Store differ diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss new file mode 100644 index 0000000..a112546 --- /dev/null +++ b/sass/parts/_cards.scss @@ -0,0 +1,75 @@ +.cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: auto; + gap: 24px; + padding: 12px 0; +} + +.card { + min-height: 100px; + background: var(--bg-2); + border: 2px solid var(--border-color); + border-radius: 10px; + overflow: hidden; +} + +.card-info { + padding: 0 24px 24px 24px; +} + +.card-title { + margin-top: 0.7em; +} + +.card-image { + border: unset; + width: 100%; +} + +.card-image-placeholder { + height: 12px; + width: 100%; +} + +.card-description { + margin-top: 0.5em; + overflow: hidden; +} + +@media all and (max-width:720px) { + .cards { + gap: 18px; + } +} + +.bloglist-table-row{ + padding:2%; + background-color:var(--navbar-color); + border-radius: 5px; + transition: 300ms; + width: 28%; + margin-right:1%; + margin-top:3%; +} +.bloglist-container{ + display:flex; + flex-wrap: wrap; +} +.bloglist-table-row:hover{ + box-shadow: 10px 10px 0px var(--border-color); +} +.bloglist-links{ + text-decoration:none; +} +.bloglist-table-row-data{ + padding:10px; +} +.bloglist-table-row-date{ + font-size:12px; +} +@media only screen and (max-width:600px) { + .bloglist-table-row{ + width:100%; + } + } \ No newline at end of file diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss new file mode 100644 index 0000000..0ff23d1 --- /dev/null +++ b/sass/parts/_code.scss @@ -0,0 +1,112 @@ +code { + background-color: var(--bg-1); + padding: 0.1em 0.2em; + border-radius: 5px; + border: 1px solid var(--border-color); +} + +pre { + /* Rounded border */ + border-radius: 5px; + border: 1px solid var(--border-color); + + line-height: 1.4; + overflow-x: auto; + padding: 1em; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; + + // We only want a border around `code` and not `pre code` blocks. + border: 0; +} + +pre { + font-family: var(--code-font); + position: relative; + -webkit-overflow-scrolling: touch; +} + +pre code[class*="language-"] { + -webkit-overflow-scrolling: touch; +} + +pre code[class*="language-"]::before { + background: black; + border-radius: 0 0 0.25rem 0.25rem; + color: white; + font-size: 12px; + letter-spacing: 0.025rem; + padding: 0.1rem 0.5rem; + position: absolute; + right: 0.1rem; + margin-top: 0.1rem; + text-align: right; + text-transform: uppercase; + top: 0; +} + +pre code[class="language-javaScript"]::before, +pre code[class="language-js"]::before { + content: "js"; + background: #f7df1e; + color: black; +} + +pre code[class*="language-yml"]::before, +pre code[class*="language-yaml"]::before { + content: "yaml"; + background: #f71e6a; + color: white; +} + +pre code[class*="language-shell"]::before, +pre code[class*="language-bash"]::before, +pre code[class*="language-sh"]::before { + content: "shell"; + background: green; + color: white; +} + +pre code[class*="language-json"]::before { + content: "json"; + background: dodgerblue; + color: #000000; +} + +pre code[class*="language-python"]::before, +pre code[class*="language-py"]::before { + content: "py"; + background: blue; + color: yellow; +} + +pre code[class*="language-css"]::before { + content: "css"; + background: cyan; + color: black; +} + +pre code[class*="language-go"]::before { + content: "Go"; + background: cyan; + color: royalblue; +} + +pre code[class*="language-md"]::before, +pre code[class*="language-md"]::before { + content: "Markdown"; + background: royalblue; + color: whitesmoke; +} + +pre code[class*="language-rust"]::before, +pre code[class*="language-rs"]::before { + content: "rust"; + background: #fff8f6; + color: #ff4647; +} \ No newline at end of file diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss new file mode 100644 index 0000000..8ece5c5 --- /dev/null +++ b/sass/parts/_footer.scss @@ -0,0 +1,44 @@ +footer { + padding: 10px; + font-family: var(--post-font-family); + } + + footer section { + display: flex; + flex-direction: column; + align-items: center; + gap: 0rem; + } + + footer nav { + display: flex; + gap: 0rem; + margin: 0 0rem; + } + + .socials { + justify-content: center; + /* flex-child */ + flex-grow: 0; + /* flex-container */ + display: flex; + flex-wrap: wrap; + align-items: flex-end; + // gap: 0px; + } + + .social { + background-image: unset; + padding: 2px; + } + + .social>img { + width: 32px; + height: 32px; + padding: 18px; + filter: invert(1); + } + + [data-theme="light"] .social>img { + filter: invert(0); + } \ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss new file mode 100644 index 0000000..1ef2a45 --- /dev/null +++ b/sass/parts/_header.scss @@ -0,0 +1,114 @@ +header { + width: 100%; + // background-color: var(--navbar-color); + .main { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + gap: 12px; + font-size: 1.5rem; + /* Otherwise header and menu is too close on small screens*/ + margin-bottom: 10px; + } +} + +.page-header { + font-size: 3em; + line-height: 100%; + font-family: var(--header-font); + margin: 4rem 0px 1rem 0px; +} + +.centered-header { + font-family: var(--header-font); + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 1em; +} + +.navbar { + max-width: var(--max-layout-width); + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 1em 0; + margin: 0 auto; + margin-bottom: 0.2rem; +} + +.nav-navs { + display: flex; + gap: 5px; + img { + border: none; + } +} + +.nav-links { + font-size: 1em; + font-weight: 340; + text-decoration: none; + justify-content: right; + color: var(--text-color); + padding: 5px; + border-radius: 5px; + transition: 100ms; + &:hover { + color: var(--links); + justify-content: right; + background-color: var(--secondary-color); + } +} + +.home-title { + font-size: 1.7em; + font-weight: 600; + border: none; + color: var(--accent-color); + text-decoration: none; +} + +.meta { + color: var(--meta-color); + letter-spacing: -0.5px; +} + +@media only screen and (max-width: 1000px) { + .navbar { + max-width: 100%; + justify-content: right; + } + + .nav-title { + margin: 0 auto; + } + + .nav-navs { + margin: 0 auto; + display: flex; + justify-content: flex-end; + } +} + +@media only screen and (max-width: 600px) { + .nav-title { + margin: 0; + } + + .navbar { + max-width: var(--medium-layout-width); + } +} + +@media only screen and (max-width: 300px) { + .navbar { + max-width: var(--small-layout-width); + } +} diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss new file mode 100644 index 0000000..b40b37c --- /dev/null +++ b/sass/parts/_home-banner.scss @@ -0,0 +1,53 @@ +#banner-container-home { + display: flex; + width: 100%; + margin: 10px auto; + align-items: center; + justify-content: center; +} + +.image-container-home { + position: relative; + width: 22%; + overflow: hidden; + border-radius: 10px; +} + +#home-banner-text { + width: 78%; + margin-bottom: 30px; + font-size: 1.875rem; + line-height: 3rem; + color: var(--accent-color); + } + + #banner-home-subtitle { + width: 95%; + padding-right: 5%; + font-size: 1rem; + font-weight: 250; + line-height: 1.75rem; + color: var(--text-color); +} +.banner-home-img { + border-radius: 50%; + max-height: 80%; + border: none; +} + +@media only screen and (max-width: 600px) { + #banner-container-home { + display: block; + margin: 0 auto; + } + + .image-container-home { + width: 95%; + height: 50vh; + } + + #home-banner-text { + width: 95%; + + } +} \ No newline at end of file diff --git a/sass/parts/_image.scss b/sass/parts/_image.scss new file mode 100644 index 0000000..447f930 --- /dev/null +++ b/sass/parts/_image.scss @@ -0,0 +1,35 @@ +img { + border: 3px solid #ececec; + max-width: 100%; +} + +figure { + box-sizing: border-box; + display: inline-block; + margin: 0; + max-width: 100%; +} + +figure img { + max-height: 500px; +} + +@media screen and (min-width: 600px) { + figure { + padding: 0 40px; + } +} + +figure h4 { + font-size: 1rem; + margin: 0; + margin-bottom: 1em; +} + +figure h4::before { + content: "↳ "; +} + +svg { + max-height: 15px; +} \ No newline at end of file diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss new file mode 100644 index 0000000..84e48cd --- /dev/null +++ b/sass/parts/_misc.scss @@ -0,0 +1,63 @@ +.primary-color { + color: var(--primary-color); +} + +.draft-label { + color: var(--hover-color); + text-decoration: none; + padding: 2px 4px; + border-radius: 4px; + margin-left: 6px; + background-color: var(--primary-color); +} + +.title-container { + border-bottom: var(--secondary-color) solid 0.5px; + padding-bottom: 15px; +} + +::-moz-selection { + background: var(--primary-color); + color: var(--hover-color); + text-shadow: none; +} + +::selection { + background: var(--primary-color); + color: var(--hover-color); +} + +p { + line-height: 1.5; +} + +hr { + border: 0; + border-top: 3px solid var(--border-color); + margin: 1em 0; +} + +blockquote { + border-left: 3px solid var(--border-color); + color: #737373; + margin: 0; + padding-left: 1em; +} + +a { + color: var(--text-color); + text-decoration-color: var(--links); + font-weight: 1000; +} + +a:hover { + background-color: var(--primary-color); + color: var(--hover-color); +} +/* Remove post list padding */ +@media screen and (max-width: 600px) { + .list > ul { + margin: 0; + padding: 0; + } +} \ No newline at end of file diff --git a/sass/parts/_table.scss b/sass/parts/_table.scss new file mode 100644 index 0000000..247db0f --- /dev/null +++ b/sass/parts/_table.scss @@ -0,0 +1,15 @@ +table { + border-spacing: 0; + border-collapse: collapse; +} + +table th { + padding: 6px 13px; + border: 1px solid #dfe2e5; + font-size: large; +} + +table td { + padding: 6px 13px; + border: 1px solid #dfe2e5; +} \ No newline at end of file diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss new file mode 100644 index 0000000..7569405 --- /dev/null +++ b/sass/parts/_theme-switch.scss @@ -0,0 +1,45 @@ +.theme-switcher { + align-self: center; + margin-left: 5px; + width: 20px; + height: 20px; + position: relative; + cursor: pointer; + + .switch { + height: 20px; + width: 20px; + position: absolute; + // top: -30px; + left: 0px; + border-radius: 50%; + transition: all 0.3s ease-in-out; + display: flex; + justify-content: center; + align-items: center; + img { + width: 100%; + height: auto; + position: absolute; + transition: all 0.2s ease-in-out; + border: none; + } + .sun { + opacity: 1; + } + .moon { + opacity: 0; + } + } + input { + display: none; + &:checked + .switch { + .sun { + opacity: 0; + } + .moon { + opacity: 1; + } + } + } +} diff --git a/static/.DS_Store b/static/.DS_Store new file mode 100644 index 0000000..543572d Binary files /dev/null and b/static/.DS_Store differ diff --git a/static/fonts/.DS_Store b/static/fonts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/static/fonts/.DS_Store differ diff --git a/static/fonts/Inter.ttf b/static/fonts/Inter.ttf new file mode 100755 index 0000000..ec3164e Binary files /dev/null and b/static/fonts/Inter.ttf differ diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..def90cd --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,27 @@ +//https://codepen.io/codeorum/pen/bGedRJO + +var themeSwitcher = document.querySelector('.theme-switcher input'); +var currentTheme = localStorage.getItem('theme'); + +// check what is current theme right now and activate it +if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + if (currentTheme === 'light') { + themeSwitcher.checked = true; + } +} + +// switch between themes +function switchTheme(e) { + if (e.target.checked) { + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); + } + else { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } +} + +// event listener on checkbox change +themeSwitcher.addEventListener('change', switchTheme, false); \ No newline at end of file diff --git a/static/menu_icon/.DS_Store b/static/menu_icon/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/static/menu_icon/.DS_Store differ diff --git a/static/menu_icon/moon.png b/static/menu_icon/moon.png new file mode 100644 index 0000000..f77aecb Binary files /dev/null and b/static/menu_icon/moon.png differ diff --git a/static/menu_icon/sun.png b/static/menu_icon/sun.png new file mode 100644 index 0000000..29804f9 Binary files /dev/null and b/static/menu_icon/sun.png differ diff --git a/static/social_icons/LICENSE b/static/social_icons/LICENSE new file mode 100644 index 0000000..993facc --- /dev/null +++ b/static/social_icons/LICENSE @@ -0,0 +1 @@ +All icons in this directory are downloaded from [FontAwesome](https://fontawesome.com/). They are part of the [free offer](https://fontawesome.com/license/free) and are licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). \ No newline at end of file diff --git a/static/social_icons/apple.svg b/static/social_icons/apple.svg new file mode 100644 index 0000000..d0532d5 --- /dev/null +++ b/static/social_icons/apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/bitcoin.svg b/static/social_icons/bitcoin.svg new file mode 100644 index 0000000..941d9b0 --- /dev/null +++ b/static/social_icons/bitcoin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/deviantart.svg b/static/social_icons/deviantart.svg new file mode 100644 index 0000000..7dbd0b6 --- /dev/null +++ b/static/social_icons/deviantart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/diaspora.svg b/static/social_icons/diaspora.svg new file mode 100644 index 0000000..55527b5 --- /dev/null +++ b/static/social_icons/diaspora.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/discord.svg b/static/social_icons/discord.svg new file mode 100644 index 0000000..f0dfeab --- /dev/null +++ b/static/social_icons/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/discourse.svg b/static/social_icons/discourse.svg new file mode 100644 index 0000000..343bea6 --- /dev/null +++ b/static/social_icons/discourse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/email.svg b/static/social_icons/email.svg new file mode 100644 index 0000000..85245e2 --- /dev/null +++ b/static/social_icons/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/ethereum.svg b/static/social_icons/ethereum.svg new file mode 100644 index 0000000..af202de --- /dev/null +++ b/static/social_icons/ethereum.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/etsy.svg b/static/social_icons/etsy.svg new file mode 100644 index 0000000..ebc040a --- /dev/null +++ b/static/social_icons/etsy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/facebook.svg b/static/social_icons/facebook.svg new file mode 100644 index 0000000..0afaf7a --- /dev/null +++ b/static/social_icons/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/github.svg b/static/social_icons/github.svg new file mode 100644 index 0000000..e32807a --- /dev/null +++ b/static/social_icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/gitlab.svg b/static/social_icons/gitlab.svg new file mode 100644 index 0000000..b577d3f --- /dev/null +++ b/static/social_icons/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/google.svg b/static/social_icons/google.svg new file mode 100644 index 0000000..b3776b0 --- /dev/null +++ b/static/social_icons/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/hacker-news.svg b/static/social_icons/hacker-news.svg new file mode 100644 index 0000000..23e3980 --- /dev/null +++ b/static/social_icons/hacker-news.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/instagram.svg b/static/social_icons/instagram.svg new file mode 100644 index 0000000..89f63c4 --- /dev/null +++ b/static/social_icons/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/linkedin.svg b/static/social_icons/linkedin.svg new file mode 100644 index 0000000..d54fcf5 --- /dev/null +++ b/static/social_icons/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/mastodon.svg b/static/social_icons/mastodon.svg new file mode 100644 index 0000000..5e12f81 --- /dev/null +++ b/static/social_icons/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/paypal.svg b/static/social_icons/paypal.svg new file mode 100644 index 0000000..efdc81a --- /dev/null +++ b/static/social_icons/paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/pinterest.svg b/static/social_icons/pinterest.svg new file mode 100644 index 0000000..eb977c2 --- /dev/null +++ b/static/social_icons/pinterest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/quora.svg b/static/social_icons/quora.svg new file mode 100644 index 0000000..375d302 --- /dev/null +++ b/static/social_icons/quora.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/reddit.svg b/static/social_icons/reddit.svg new file mode 100644 index 0000000..a8a3a96 --- /dev/null +++ b/static/social_icons/reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/rss.svg b/static/social_icons/rss.svg new file mode 100644 index 0000000..b862886 --- /dev/null +++ b/static/social_icons/rss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/skype.svg b/static/social_icons/skype.svg new file mode 100644 index 0000000..3369aba --- /dev/null +++ b/static/social_icons/skype.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/slack.svg b/static/social_icons/slack.svg new file mode 100644 index 0000000..0dbc26d --- /dev/null +++ b/static/social_icons/slack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/snapchat.svg b/static/social_icons/snapchat.svg new file mode 100644 index 0000000..2cd79dd --- /dev/null +++ b/static/social_icons/snapchat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/soundcloud.svg b/static/social_icons/soundcloud.svg new file mode 100644 index 0000000..4724d74 --- /dev/null +++ b/static/social_icons/soundcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/spotify 2.svg b/static/social_icons/spotify 2.svg new file mode 100644 index 0000000..1d393ba --- /dev/null +++ b/static/social_icons/spotify 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/spotify.svg b/static/social_icons/spotify.svg new file mode 100644 index 0000000..1d393ba --- /dev/null +++ b/static/social_icons/spotify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/stack-exchange.svg b/static/social_icons/stack-exchange.svg new file mode 100644 index 0000000..0a3177f --- /dev/null +++ b/static/social_icons/stack-exchange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/stack-overflow 2.svg b/static/social_icons/stack-overflow 2.svg new file mode 100644 index 0000000..2ca50c7 --- /dev/null +++ b/static/social_icons/stack-overflow 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/stack-overflow.svg b/static/social_icons/stack-overflow.svg new file mode 100644 index 0000000..2ca50c7 --- /dev/null +++ b/static/social_icons/stack-overflow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/steam 2.svg b/static/social_icons/steam 2.svg new file mode 100644 index 0000000..b61f374 --- /dev/null +++ b/static/social_icons/steam 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/steam.svg b/static/social_icons/steam.svg new file mode 100644 index 0000000..b61f374 --- /dev/null +++ b/static/social_icons/steam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/telegram 2.svg b/static/social_icons/telegram 2.svg new file mode 100644 index 0000000..02f48c0 --- /dev/null +++ b/static/social_icons/telegram 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/telegram.svg b/static/social_icons/telegram.svg new file mode 100644 index 0000000..02f48c0 --- /dev/null +++ b/static/social_icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/twitter 2.svg b/static/social_icons/twitter 2.svg new file mode 100644 index 0000000..0778f72 --- /dev/null +++ b/static/social_icons/twitter 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/twitter.svg b/static/social_icons/twitter.svg new file mode 100644 index 0000000..0778f72 --- /dev/null +++ b/static/social_icons/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/vimeo 2.svg b/static/social_icons/vimeo 2.svg new file mode 100644 index 0000000..d98368e --- /dev/null +++ b/static/social_icons/vimeo 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/vimeo.svg b/static/social_icons/vimeo.svg new file mode 100644 index 0000000..d98368e --- /dev/null +++ b/static/social_icons/vimeo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/whatsapp 2.svg b/static/social_icons/whatsapp 2.svg new file mode 100644 index 0000000..d259142 --- /dev/null +++ b/static/social_icons/whatsapp 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/whatsapp.svg b/static/social_icons/whatsapp.svg new file mode 100644 index 0000000..d259142 --- /dev/null +++ b/static/social_icons/whatsapp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/social_icons/youtube.svg b/static/social_icons/youtube.svg new file mode 100644 index 0000000..287dca2 --- /dev/null +++ b/static/social_icons/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/.DS_Store b/templates/.DS_Store new file mode 100644 index 0000000..6332033 Binary files /dev/null and b/templates/.DS_Store differ diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000..76cd10b --- /dev/null +++ b/templates/404.html @@ -0,0 +1,8 @@ +{% extends "page.html" %} + +{% block main_content %} +
+ {{ post_macros::page_header(title="404")}} + not found +
+{% endblock main_content %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..e3bc474 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,19 @@ +{% import "macros/macros.html" as post_macros %} + + + +{% include "partials/header.html" %} + + + {% include "partials/nav.html" %} +
+ + {# Post page is the default #} + {% block main_content %} + Nothing here?! + {% endblock main_content %} +
+ {% include "partials/footer.html" %} + + + \ No newline at end of file diff --git a/templates/cards.html b/templates/cards.html new file mode 100644 index 0000000..2c67f32 --- /dev/null +++ b/templates/cards.html @@ -0,0 +1,35 @@ +{% extends "base.html" %} + +{% block main_content %} + {% if section.extra.section_path -%} + {% set section = get_section(path=section.extra.section_path) %} + {% endif -%} + + {{ post_macros::page_header(title=section.title) }} + +
+ {%- if paginator %} + {%- set show_pages = paginator.pages -%} + {% else %} + {%- set show_pages = section.pages -%} + {% endif -%} + + {{ post_macros::cards_posts(pages=show_pages) }} +
+ + {% if paginator %} + + {% endif %} +{% endblock main_content %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..e1f3940 --- /dev/null +++ b/templates/index.html @@ -0,0 +1 @@ +{% extends "section.html" %} \ No newline at end of file diff --git a/templates/macros/.DS_Store b/templates/macros/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/templates/macros/.DS_Store differ diff --git a/templates/macros/macros.html b/templates/macros/macros.html new file mode 100644 index 0000000..f87f2b4 --- /dev/null +++ b/templates/macros/macros.html @@ -0,0 +1,219 @@ +{% macro list_posts(pages) %} +
+ {%- for page in pages %} +
+

+ {{page.title}} +

+ +
+ {%- if page.date %} + + {% endif -%} +
+ {{ page.reading_time }} minute read + {% if page.draft %} + DRAFT + {% endif %} + +
+ +
+
+ {% if page.description %} + {{ page.description }} + {% elif page.summary %} + {{ page.summary | safe }}… + {% else %} + {% set hide_read_more = true %} + {% endif %} +
+ + {% if not hide_read_more %} + Read more ⟶ + {% endif %} +
+ + {% endfor -%} +
+{% endmacro list_posts %} + +{% macro tags(page, short=false) %} +{%- if page.taxonomies and page.taxonomies.tags %} + + {%- if short %} + :: + {%- set sep = "," -%} + {% else %} + :: tags:  + {%- set sep = " " -%} + {% endif -%} + {%- for tag in page.taxonomies.tags %} + #{{ tag }} + {%- if not loop.last %}{{ sep | safe }}{% endif -%} + {% endfor -%} + +{% endif -%} +{% endmacro tags %} + +{% macro page_header(title) %} +

+ {{ title }} +

+{% endmacro content %} + + +{% macro page_desc(desc) %} + +{% endmacro content %} + +{% macro content(page) %} +
+
+
+ {#

{{ page.title }}

#} + {{ post_macros::page_header(title=page.title) }} + +
+ {% if page.date %} + Posted on + ~ + {% endif %} + {{ page.reading_time }} minute read + {% if page.draft %} + DRAFT + {% endif %} + + {% if page.taxonomies and page.taxonomies.tags %} +
+ +
+ {% endif %} +
+
+ + {% if page.extra.tldr %} +
+ tl;dr: + {{ page.extra.tldr }} +
+ {% endif %} + + {# Optional table of contents #} + {% if config.extra.toc | default(value=false) %} + {% if page.toc %} +

Table of Contents

+
    + {% for h1 in page.toc %} +
  • + {{ h1.title }} + {% if h1.children %} +
      + {% for h2 in h1.children %} +
    • + {{ h2.title }} +
      • + + {% if h2.children %} + + {% endif %} + {% endfor %} +
    + {% endif %} +
    • + {% endfor %} +
+ {% endif %} + {% endif %} + +
+ {{ page.content | safe }} +
+ +
+
+{% endmacro content %} + +{% macro cards_posts(pages) %} +
+ {%- for page in pages %} +
+ {% if page.extra.local_image %} + {{ + {% elif page.extra.remote_image %} + {{ + {% else %} +
+ {% endif %} + +
+

+ {% if page.extra.link_to %} + {{page.title}} + {% else %} + {{page.title}} + {% endif %} +

+ +
+ {%- if page.date %} + + {% endif -%} + {% if page.draft %} + DRAFT + {% endif %} +
+ +
+ {% if page.description %} + {{ page.description }} + {% endif %} +
+
+
+ + {% endfor -%} +
+{% endmacro cards_posts %} + +{% macro list_title(pages, tag_name=false) %} +{% if tag_name %} +

Entries tagged - "{{ term.name }}"

+{% else %} +

All articles

+{% endif %} + + +{% endmacro list_title %} \ No newline at end of file diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..9bf0abb --- /dev/null +++ b/templates/page.html @@ -0,0 +1,5 @@ +{% extends "base.html" %} + +{% block main_content %} + {{ post_macros::content(page=page)}} +{% endblock main_content %} \ No newline at end of file diff --git a/templates/partials/footer.html b/templates/partials/footer.html new file mode 100644 index 0000000..d64769a --- /dev/null +++ b/templates/partials/footer.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/templates/partials/header.html b/templates/partials/header.html new file mode 100644 index 0000000..bdebc14 --- /dev/null +++ b/templates/partials/header.html @@ -0,0 +1,65 @@ +{% import "macros/macros.html" as post_macros %} + + + + + + + {# Site title #} + {% set current_path = current_path | default(value="/") %} + {% if current_path == "/" %} + + {{ config.title | default(value="Home") }} + + {% else %} + + {{ page.title | default(value=config.title) | default(value="Post") }} + + {% endif %} + + {# Favicon #} + {% if config.extra.favicon %} + + {% endif %} + + + + {# RSS #} + + + + + {% if config.extra.stylesheets %} + {% for stylesheet in config.extra.stylesheets %} + + {% endfor %} + {% endif %} + + + + + + {% if is_404 %} + + {% else %} + + {% endif %} + + + + + {% if config.extra.headerImage %} + + + {% endif %} + + {% set current_url = current_url | default(value="/") %} + + + + + + + \ No newline at end of file diff --git a/templates/partials/nav.html b/templates/partials/nav.html new file mode 100644 index 0000000..65d3d6d --- /dev/null +++ b/templates/partials/nav.html @@ -0,0 +1,26 @@ +
+ +
\ No newline at end of file diff --git a/templates/section.html b/templates/section.html new file mode 100644 index 0000000..01d1ff5 --- /dev/null +++ b/templates/section.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} + +{% block main_content %} +{% if section.extra.section_path -%} +{% set section = get_section(path=section.extra.section_path) %} +{% endif -%} + +{%- if section.extra.desc %} + {{ post_macros::page_desc(desc=section.extra.desc) }} +{% endif -%} + +
+
+ {{ post_macros::page_header(title=section.title) }} +
+ {%- if paginator %} + {%- set show_pages = paginator.pages -%} + {% else %} + {%- set show_pages = section.pages -%} + {% endif -%} + + {{ post_macros::list_posts(pages=show_pages) }} +
+ +{% if paginator %} + +{% endif %} +{% endblock main_content %} \ No newline at end of file diff --git a/templates/tags/list.html b/templates/tags/list.html new file mode 100644 index 0000000..0acd1a4 --- /dev/null +++ b/templates/tags/list.html @@ -0,0 +1,22 @@ +{% extends "index.html" %} + +{% block main_content %} +

Tags

+ +
+ +
+ +{% endblock main_content %} \ No newline at end of file diff --git a/templates/tags/single.html b/templates/tags/single.html new file mode 100644 index 0000000..6e0bd11 --- /dev/null +++ b/templates/tags/single.html @@ -0,0 +1,7 @@ +{% extends "index.html" %} + +{% block main_content %} + +{{ post_macros::list_title(pages=term.pages, tag_name=term.name) }} + +{% endblock main_content %} \ No newline at end of file diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..a3ea014 --- /dev/null +++ b/theme.toml @@ -0,0 +1,19 @@ +name = "tabi" +description = "Simple blog theme powered by Zola" +license = "MIT" +homepage = "https://github.com/welpo/tabi" +# The minimum version of Zola required +min_version = "0.4.0" +# An optional live demo URL +demo = "https://welpo.github.io/tabi" + +# Any variable there can be overridden in the end user `config.toml` +# You don't need to prefix variables by the theme name but as this will +# be merged with user data, some kind of prefix or nesting is preferable +# Use snake_casing to be consistent with the rest of Zola +[extra] + +# The theme author info: you! +[author] +name = "welpo" +homepage = "https://welpo.ooo"