diff --git a/README.md b/README.md index 8f681f5..47a0f3a 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ A simple blog theme powered by [Zola](getzola.org). See a live preview [here](ht - [X] Dark and light modes. Default theme is dark with a switcher in the navbar. - [X] Projects page. +- [X] Archive page. - [x] Social Links. - [x] Tags. - [X] Syntax highlighting. diff --git a/config.toml b/config.toml index 193762f..3397940 100644 --- a/config.toml +++ b/config.toml @@ -15,9 +15,10 @@ highlight_code = true highlight_theme = "css" [extra] -toc = true use_cdn = false +timeformat = "%d %B %Y" # Default format: "31 January 2049" + #Full path after the base URL required. So if you were to place it in "static" it would be "/favicon.ico" favicon = "" @@ -31,12 +32,13 @@ menu = [ { name = "tags", url = "$BASE_URL/tags" }, { name = "projects", url = "$BASE_URL/projects" }, ] + #The icons available can be found in "social_icons" in the "static" folder socials = [ - { name = "github", url = "$BASE_URL/atom.xml", icon = "rss" }, + { name = "atom feed", url = "$BASE_URL/atom.xml", icon = "rss" }, { name = "github", url = "https://github.com/welpo/", icon = "github" }, { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" }, { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" }, { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" }, { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" }, -] \ No newline at end of file +] diff --git a/content/_index.md b/content/_index.md index 18d5875..dcb8790 100644 --- a/content/_index.md +++ b/content/_index.md @@ -9,4 +9,4 @@ template = "section.html" desc = {title = "Hello! I'm tabi~", img = "https://avatars.githubusercontent.com/u/6399341" } +++ -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. \ No newline at end of file +Tabi is a simple theme for [Zola](https://www.getzola.org/). 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 index 1fabb83..335ae86 100644 --- a/content/almost-no-js.md +++ b/content/almost-no-js.md @@ -1,6 +1,6 @@ +++ title = "Almost no JavaScript" -date = "2022-11-22" +date = "2021-04-02" [taxonomies] tags = ["test"] +++ @@ -9,4 +9,4 @@ tags = ["test"] 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 +Other than that, it's a fast site with html and css. Just the way (most of) the web should be :-) diff --git a/content/lorem.md b/content/lorem.md index 145a7d9..ef8e70d 100644 --- a/content/lorem.md +++ b/content/lorem.md @@ -1,6 +1,6 @@ +++ title = "Lorem Ipsum" -date = "2022-10-02" +date = "2022-06-30" [taxonomies] tags = ["test"] +++ @@ -17,4 +17,4 @@ Marketplace client-first 3D jello disrupt visual code superpowers visually alche 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 +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. diff --git a/content/lorem2.md b/content/lorem2.md index f410a6e..9a89f1b 100644 --- a/content/lorem2.md +++ b/content/lorem2.md @@ -23,4 +23,4 @@ Sumus tam adultis. Non est enim tibi nescio fingunt. Confusio esse cupio. Scio t 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 +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? diff --git a/content/markdown.md b/content/markdown.md index 915c9a0..4c001dd 100644 --- a/content/markdown.md +++ b/content/markdown.md @@ -21,4 +21,4 @@ fn main() { ## Code tags Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit. -`Lorem ipsum dolor sit amet, consectetur adipiscing elit.` \ No newline at end of file +`Lorem ipsum dolor sit amet, consectetur adipiscing elit.` diff --git a/content/projects/_index.md b/content/projects/_index.md index 51242eb..9b00a12 100644 --- a/content/projects/_index.md +++ b/content/projects/_index.md @@ -1,5 +1,5 @@ +++ -title = "projects" +title = "Projects" sort_by = "weight" template = "cards.html" +++ diff --git a/content/projects/tabi.md b/content/projects/tabi.md index 731eaee..48e0f63 100644 --- a/content/projects/tabi.md +++ b/content/projects/tabi.md @@ -6,4 +6,4 @@ weight = 1 [extra] remote_image = "https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png" link_to = "https://github.com/welpo/tabi" -+++ \ No newline at end of file ++++ diff --git a/content/toc.md b/content/toc.md index f4767ff..8b2efd5 100644 --- a/content/toc.md +++ b/content/toc.md @@ -3,6 +3,9 @@ title = "Table of Contents Test" date = "2022-11-22" [taxonomies] tags = ["test"] + +[extra] +toc = true +++ # Heading 1 @@ -26,7 +29,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue --- - ## 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 @@ -41,4 +43,4 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue #### 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 +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. diff --git a/sass/main.scss b/sass/main.scss index 157aa1b..ec2417d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -78,9 +78,20 @@ body { word-wrap: break-word; min-height: 80vh; } + +.section-title { + display: block; + font-size: 2.2em; + margin-top: 0.67em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 650; +} + h1 { display: block; - font-size: 1.7em; + font-size: 2em; margin-top: 0.67em; margin-bottom: 0em; margin-left: 0; @@ -90,7 +101,37 @@ h1 { h2 { display: block; - font-size: 2em; + font-size: 1.7em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +h3 { + display: block; + font-size: 1.5em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +h4 { + display: block; + font-size: 1.2em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +h5 { + display: block; + font-size: 1em; margin-top: 0.83em; margin-bottom: 0em; margin-left: 0; diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss index a112546..28acfcb 100644 --- a/sass/parts/_cards.scss +++ b/sass/parts/_cards.scss @@ -37,39 +37,50 @@ overflow: hidden; } -@media all and (max-width:720px) { +@media all and (max-width: 720px) { .cards { gap: 18px; } } -.bloglist-table-row{ - padding:2%; - background-color:var(--navbar-color); +.bloglist-title{ + display: block; + font-size: 1.2em; + margin-top: 1.2em; + margin-bottom: 0.83em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +.bloglist-table-row { + padding: 2%; + background-color: var(--navbar-color); border-radius: 5px; transition: 300ms; width: 28%; - margin-right:1%; - margin-top:3%; + margin-right: 1%; + margin-top: 1%; } -.bloglist-container{ - display:flex; +.bloglist-container { + display: flex; flex-wrap: wrap; + padding-bottom: 1rem; } -.bloglist-table-row:hover{ +.bloglist-table-row:hover { box-shadow: 10px 10px 0px var(--border-color); } -.bloglist-links{ - text-decoration:none; +.bloglist-links { + text-decoration: none; } -.bloglist-table-row-data{ - padding:10px; +.bloglist-table-row-data { + padding: 10px; } -.bloglist-table-row-date{ - font-size:12px; +.bloglist-table-row-date { + font-size: 12px; } -@media only screen and (max-width:600px) { - .bloglist-table-row{ - width:100%; +@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 index 1ba21a0..f03dce9 100644 --- a/sass/parts/_code.scss +++ b/sass/parts/_code.scss @@ -107,4 +107,4 @@ 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 index 8ece5c5..f5befc3 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -30,15 +30,29 @@ footer { .social { background-image: unset; padding: 2px; + display: flex; + justify-content: center; + align-items: center; } .social>img { + color: #000000; width: 32px; height: 32px; padding: 18px; filter: invert(1); } - [data-theme="light"] .social>img { - filter: invert(0); - } \ No newline at end of file +[data-theme="light"] { + .social { + &:hover { + &>img { + filter: invert(1); + } + } + + &>img { + filter: none; + } + } +} diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index fdeb83b..3c062d3 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,6 +1,5 @@ header { width: 100%; - // background-color: var(--navbar-color); .main { display: flex; flex-direction: row; @@ -38,7 +37,7 @@ header { flex-wrap: wrap; align-items: center; justify-content: space-between; - padding: 1em 0; + padding: 1em 24px; margin: 0 auto; margin-bottom: 0.2rem; } @@ -57,7 +56,7 @@ header { text-decoration: none; justify-content: right; color: var(--text-color); - padding: 5px; + padding: 0.66rem; border-radius: 5px; transition: 100ms; } @@ -68,6 +67,7 @@ header { border: none; color: var(--accent-color); text-decoration: none; + border-radius: 5px; } .meta { @@ -77,16 +77,10 @@ header { @media only screen and (max-width: 1000px) { .navbar { - max-width: 100%; - justify-content: right; - } - - .nav-title { - margin: 0 auto; + max-width: var(--normal-layout-width); } .nav-navs { - margin: 0 auto; display: flex; justify-content: flex-end; } diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss index b40b37c..02c8771 100644 --- a/sass/parts/_home-banner.scss +++ b/sass/parts/_home-banner.scss @@ -11,27 +11,33 @@ width: 22%; overflow: hidden; border-radius: 10px; + text-align: center; } #home-banner-text { width: 78%; - margin-bottom: 30px; - font-size: 1.875rem; - line-height: 3rem; - color: var(--accent-color); - } - - #banner-home-subtitle { - width: 95%; + 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); + font-weight: 250; + line-height: 1.75rem; + color: var(--text-color); } + .banner-home-img { + aspect-ratio: 1 / 1; border-radius: 50%; - max-height: 80%; + max-width: 15rem; + max-height: 15rem; + width: 100%; + height: auto; border: none; } @@ -41,13 +47,16 @@ margin: 0 auto; } + .banner-home-img { + max-width: 12rem; + max-height: 12rem; + } + .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 index 447f930..70875ee 100644 --- a/sass/parts/_image.scss +++ b/sass/parts/_image.scss @@ -32,4 +32,4 @@ figure h4::before { svg { max-height: 15px; -} \ No newline at end of file +} diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 9c65508..ba42c89 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -47,7 +47,7 @@ blockquote { a { color: var(--text-color); text-decoration-color: var(--links); - font-weight: 1000; + font-weight: 800; } a:hover { @@ -60,4 +60,4 @@ a:hover { margin: 0; padding: 0; } -} \ No newline at end of file +} diff --git a/sass/parts/_table.scss b/sass/parts/_table.scss index 247db0f..d380dc5 100644 --- a/sass/parts/_table.scss +++ b/sass/parts/_table.scss @@ -12,4 +12,4 @@ table th { 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 index 7569405..0f5be7e 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -1,14 +1,14 @@ .theme-switcher { align-self: center; - margin-left: 5px; - width: 20px; - height: 20px; + margin-left: 0.5rem; + width: 1rem; + height: 1rem; position: relative; cursor: pointer; .switch { - height: 20px; - width: 20px; + width: 1rem; + height: 1rem; position: absolute; // top: -30px; left: 0px; diff --git a/templates/403.html b/templates/403.html index 427504c..b4bfa56 100644 --- a/templates/403.html +++ b/templates/403.html @@ -5,4 +5,4 @@ {{ post_macros::page_header(title="403")}} forbidden -{% endblock main_content %} \ No newline at end of file +{% endblock main_content %} diff --git a/templates/404.html b/templates/404.html index 76cd10b..0782011 100644 --- a/templates/404.html +++ b/templates/404.html @@ -5,4 +5,4 @@ {{ post_macros::page_header(title="404")}} not found -{% endblock main_content %} \ No newline at end of file +{% endblock main_content %} diff --git a/templates/archive.html b/templates/archive.html index 5c49cf6..ecb6727 100644 --- a/templates/archive.html +++ b/templates/archive.html @@ -1,8 +1,6 @@ {% extends "base.html" %} {% block main_content %} -
- {{ post_macros::page_header(title=section.title) }} -
+{{ post_macros::page_header(title=section.title) }}
{% endif %} -{% endblock main_content %} \ No newline at end of file +{% endblock main_content %} diff --git a/templates/index.html b/templates/index.html index e1f3940..d0dfc01 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1 +1 @@ -{% extends "section.html" %} \ No newline at end of file +{% extends "section.html" %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 55955af..d818ec7 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -2,13 +2,13 @@
{%- for page in pages %}
-

+
{{page.title}} -

+
{%- if page.date %} - + {{ page.date | date(format=config.extra.timeformat) }} {% endif -%}
{{ page.reading_time }} minute read @@ -57,18 +57,18 @@ {% endmacro tags %} {% macro page_header(title) %} -

+
{{ title }} -

+
{% endmacro page_header %} {% macro page_desc(desc, page) %}