💄 style: major redesign

README.md

@@ -32,7 +32,7 @@ zola serve
 
 This theme was inspired by:
 - [shadharon](https://github.com/syedzayyan/shadharon). tabi started as a fork of [syedzayyan](https://github.com/syedzayyan)'s theme.
-- [Alfonso García's site](https://alfoncode.com/)
+- [tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog)
 - [tale-zola](https://github.com/aaranxu/tale-zola)
 - [internetVin's blog](https://internetvin.ghost.io)
 

config.toml

@@ -16,9 +16,8 @@ highlight_code = true
 highlight_theme = "css"
 
 [extra]
-use_cdn = false
+# If unset, uses format: "6 July 2049" ("%d %B %Y"). Don't leave it empty or dates won't appear. Either use a proper format or comment out the line.
-
+# date_format = "%d %B %Y"
-date_format = ""  # If unset, uses format: "1st January 2049"
 
 # Custom separator used in title tag and posts metadata (between date, time to read, and tags).
 separator = "•"
@@ -31,7 +30,7 @@ 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 = "$BASE_URL/" },
+    { name = "blog", url = "$BASE_URL/blog" },
     { name = "archive", url = "$BASE_URL/archive" },
     { name = "tags", url = "$BASE_URL/tags" },
     { name = "projects", url = "$BASE_URL/projects" },

content/_index.md

@@ -1,12 +1,13 @@
 +++
-paginate_by = 4
 path = "/"
-title = "Posts"
+title = "Latest posts"
 sort_by = "date"
 template = "section.html"
 
 [extra]
 header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }
+section_path = "blog/_index.md"
+max_posts = 4
 +++
 
 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.

content/blog/_index.md

@@ -0,0 +1,8 @@
++++
+paginate_by = 5
+path = "/blog"
+title = "Blog"
+sort_by = "date"
+template = "section.html"
+insert_anchor_links = "left"
++++

content/blog/almost-no-js.md

@@ -1,6 +1,8 @@
 +++
 title = "Almost no JavaScript"
-date = "2023-01-06"
+date = 2023-01-06
+description = "JavaScript is only used when HTML and CSS aren't enough."
+
 [taxonomies]
 tags = ["showcase"]
 +++

content/blog/markdown.md

@@ -1,6 +1,9 @@
 +++
 title = "Markdown examples"
-date = "2023-01-31"
+date = 2023-01-31
+updated = 2023-03-01
+description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes."
+
 [taxonomies]
 tags = ["markdown", "showcase"]
 +++

content/blog/one_more.md

@@ -0,0 +1,9 @@
++++
+title = "One more post"
+date = 2021-05-30
+description = "The only reason this post exists is to show the pagination in the blog section."
++++
+
+> ‘Look at you,’ she said, not without affection. ‘Sitting there like an owl. Melancholy bloody gargoyle. You mawkish bugger. You don’t get any insight, you know, just because it’s night. Just because some buildings have their lights on.’
+>
+> — China Miéville, The City & the City 

content/blog/security.md

@@ -1,6 +1,8 @@
 +++
 title = "Secure by default"
-date = "2023-02-22"
+date = 2023-02-22
+description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
+
 [taxonomies]
 tags = ["security", "showcase"]
 +++

content/blog/shortcodes.md

@@ -2,6 +2,8 @@
 title = "Custom shortcodes"
 date = 2023-02-19
 updated = 2023-02-27
+description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
+
 [taxonomies]
 tags = ["showcase", "shortcodes"]
 +++

content/blog/toc.md

@@ -1,6 +1,8 @@
 +++
 title = "Table of Contents"
-date = "2022-11-01"
+date = 2022-11-01
+description = "A post showcasing the optional Table of Contents."
+
 [taxonomies]
 tags = ["showcase", "markdown"]
 
@@ -13,14 +15,14 @@ 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
+### Heading 3.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 4
+#### Heading 4.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 4
+#### Heading 4.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
+### Heading 3.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 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.
@@ -31,16 +33,16 @@ 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
+### Heading 3.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 4
+#### Heading 4.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 4
+#### Heading 4.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
+### Heading 3.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 4
+#### Heading 4.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 4
+#### Heading 4.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.

sass/main.scss

@@ -32,7 +32,9 @@
 @import 'parts/home-banner.scss';
 @import 'parts/footer.scss';
 @import 'parts/theme-switch.scss';
+@import 'parts/posts_list.scss';
 @import 'parts/tags.scss';
+@import 'parts/pagination.scss';
 @import 'syntax/syntax-ayu-dark.scss';
 
 :root {
@@ -54,13 +56,13 @@
   --bg-2: #fefefe;
   --hover-color: white;
   --primary-color: #91D8E4;
-  --secondary-color: rgb(158, 158, 158);
+  --secondary-color: #d7d7d7;
   --links: #78cfcb;
   --text-color: #222226;
   --text-color-2: #45454b;
+  --text-color-high-contrast: #151516;
   --quote-color: #355f62;
   --border-color: rgb(114, 114, 114);
-  --light-border-color: rgba(255, 255, 255, 0.1);
   --meta-color: #757575;
   --accent-color: #087E96;
   --table-header-color: #BFEAF5;
@@ -71,15 +73,13 @@
   --bg-1: rgba(133, 133, 133, 0.5);
   --bg-2: rgba(23, 23, 23, 100%);
   --primary-color: #7cc4d1;
-  --hover-color: white;
+  --secondary-color: #4a4a4a;
-  --secondary-color: #696969;
   --links: #8fdfe5;
   --text-color: #eae9e9;
   --text-color-2: #c7c7c7;
+  --text-color-high-contrast: #f8f8f8;
   --quote-color: #a9c5c7;
-  --code: #ef476f;
   --border-color: rgb(0, 0, 0);
-  --light-border-color: rgba(255, 255, 255, 0.1);
   --meta-color: #BBBBBB;
   --accent-color: #91e0ee;
   --table-header-color: #b7e4e4;
@@ -130,6 +130,7 @@ article{
   margin-left: 0;
   margin-right: 0;
   font-weight: 550;
+  color: var(--text-color-high-contrast);
 }
 
 h1 {
@@ -205,18 +206,12 @@ p {
     max-width: var(--small-layout-width);
   }
 }
-@media all and (min-width: 640px) {
+@media all and (min-width: 600px) {
   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;

sass/parts/_archive.scss

@@ -1,7 +1,7 @@
 .archive {
   .listing-title {
     font-size: 1.5rem;
-    opacity: 0.8;
+    opacity: 0.9;
     margin-bottom: 1rem;
   }
 
@@ -12,7 +12,7 @@
     .post-time {
       width: 4rem;
       .date {
-        opacity: 0.4;
+        opacity: 0.5;
       }
     }
   }

sass/parts/_cards.scss

@@ -41,44 +41,3 @@
         gap: 18px;
     }
 }
-
-.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);
-    transition: 300ms;
-    width: 28%;
-    margin-right: 1%;
-    margin-top: 1%;
-}
-.bloglist-container {
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: 1rem;
-}
-.bloglist-table-row:hover {
-    box-shadow: 0.5rem 0.5rem 0 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%;
-    }
-}

sass/parts/_header.scss

@@ -56,13 +56,13 @@ header {
   justify-content: right;
   color: var(--text-color);
   padding: 0.66rem;
-  transition: 100ms;
 }
 
 .home-title {
   font-size: 1.7em;
   font-weight: 450;
-  padding-right: 0.33rem;
+  padding: 0.12rem;
+  margin-left: -0.12rem;
   border: none;
   color: var(--accent-color);
   text-decoration: none;
@@ -77,18 +77,18 @@ header {
   padding-top: 0.7vmin;
   padding-bottom: 3vmin;
   line-height: 1.4rem;
-}
   
-.meta a {
+  a {
   color: var(--meta-color);
   text-decoration-color: none;
   font-weight: inherit;
   text-decoration: none;
-}
+  }
 
-.meta ul, li{
+  ul, li {
     list-style-type: none;
     display: inline;
+  }
 }
 
 .card-meta {

sass/parts/_home-banner.scss

@@ -24,7 +24,7 @@
 .home-banner-header {
     margin-bottom: 1rem;
     font-size: 2.8rem;
-    font-weight: 600;
+    font-weight: 550;
 }
 
 #banner-home-subtitle {
@@ -36,7 +36,7 @@
 }
 
 #banner-home-subtitle p {
-    font-family: 'Inter', Arial, Helvetica, sans-serif;
+    font-family: var(--sans-serif-font);
     font-size: 1rem;
 }
 

sass/parts/_misc.scss

@@ -31,6 +31,30 @@ iframe {
   margin-bottom: 3vmin;
 }
 
+.zola-anchor {
+  font-size: 1rem;
+  position: absolute;
+  margin-left: -1.9em;
+  padding-right: 0.45em;
+  padding-left: 0.4em;
+  opacity: 0;
+}
+
+h1:hover .zola-anchor,
+h2:hover .zola-anchor,
+h3:hover .zola-anchor,
+h4:hover .zola-anchor,
+h5:hover .zola-anchor,
+h6:hover .zola-anchor {
+  opacity: 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  a:hover {
+    background-color: transparent;
+  }
+}
+
 ul {
   margin-top: 0;
 }
@@ -40,10 +64,13 @@ ul {
 }
 
 .title-container {
-  border-bottom: var(--secondary-color) solid 0.5px;
   padding-bottom: 15px;
 }
 
+.bottom-divider {
+  border-bottom: var(--secondary-color) solid 0.5px;
+}
+
 ::-moz-selection {
   background: var(--primary-color);
   color: var(--hover-color);
@@ -77,21 +104,33 @@ blockquote {
 }
 
 a {
-  color: var(--text-color);
-  text-decoration-color: var(--links);
-  font-weight: 580;
-}
-
-p a {
   color: var(--accent-color);
   text-decoration: inherit;
   font-weight: inherit;
+  position: relative;
 }
 
 a:hover {
   background-color: var(--primary-color);
   color: var(--hover-color);
 }
+
+a:not(.no-hover-padding, .zola-anchor)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.15em;
+  right: -0.15em;
+  z-index: -1;
+  background-color: var(--primary-color);
+  opacity: 0;
+}
+
+a:not(.no-hover-padding):hover::before {
+  opacity: 1;
+}
+
 /* Remove post list padding */
 @media screen and (max-width: 600px) {
   .list > ul {

sass/parts/_pagination.scss

@@ -0,0 +1,19 @@
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    font-size: 1em;
+    list-style: none;
+    padding: 0;
+
+    .page-item .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .page-numbers {
+        font-size: 0.9rem;
+        color: var(--meta-color);
+    }
+}

sass/parts/_posts_list.scss

@@ -0,0 +1,79 @@
+.bloglist-container {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.bloglist-row {
+    background-color: var(--navbar-color);
+    display: flex;
+    align-items: flex-start;
+    padding: 2.5rem 0;
+
+    .date {
+        font-size: 0.85rem;
+        font-weight: 300;
+        color: var(--meta-color);
+        width: 14.5rem;
+    }
+
+    .bloglist-tags {
+        margin-top: -0.5rem;
+
+        .tag {
+            margin-right: 0.7rem;
+            font-size: 0.7rem;
+            font-weight: 400;
+            text-transform: uppercase;
+        }
+    }
+
+    .bloglist-content {
+        flex: 1;
+
+        
+        .bloglist-title {
+            font-size: 1.2em;
+            font-weight: bold;
+
+            a {
+                color: var(--text-color-high-contrast);
+                font-weight: 550;
+
+                &:hover {
+                    color: var(--hover-color);
+                }
+            }
+        }
+
+        .description {
+            margin: 0.5rem 0 1rem;
+            color: var(--text-color);
+            font-family: var(--sans-serif-font);
+            font-size: 0.9rem;
+            font-weight: 250;
+            line-height: 1.5rem;
+        }
+    }
+}
+
+.all-posts {
+    font-size: 1.3rem;
+    font-weight: 350;
+}
+
+@media only screen and (max-width: 1100px) {
+    .bloglist-row {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 2rem 0;
+    }
+
+    .date {
+        margin-bottom: 0;
+        width: 100%;
+    }
+
+    .bloglist-content {
+        width: 100%;
+    }
+}

sass/parts/_tags.scss

@@ -6,7 +6,6 @@
     .taglist-table-row {
         padding: 2%;
         background-color: var(--navbar-color);
-        transition: 300ms;
         width: 28%;
         margin-right: 1%;
         margin-top: 1%;
@@ -52,3 +51,16 @@
         margin: 0
     }
 }
+
+.tag-cloud {
+    margin-top: 4vmin;
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .tags-item {
+        margin-top: 1rem;
+    }
+}

sass/parts/_theme-switch.scss

@@ -11,7 +11,6 @@
     height: 1rem;
     position: absolute;
     left: 0px;
-    transition: all 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -19,7 +18,6 @@
       width: 100%;
       height: auto;
       position: absolute;
-      transition: all 0.2s ease-in-out;
       border: none;
     }
     .sun {

templates/403.html

@@ -1,8 +0,0 @@
-{% extends "page.html" %}
-
-{% block main_content %}
-    <main class="centered-header">
-        {{ macros_page_header::page_header(title="403")}}
-        <span>forbidden</span>
-    </main>
-{% endblock main_content %}

templates/404.html

@@ -1,8 +1,10 @@
 {% extends "page.html" %}
 
 {% block main_content %}
+
     <main class="centered-header">
         {{ macros_page_header::page_header(title="404")}}
         <span>not found</span>
     </main>
+
 {% endblock main_content %}

templates/archive.html

@@ -1,10 +1,12 @@
-{% extends "base.html" %} {% block main_content %}
+{% extends "base.html" %}
+
+{% block main_content %}
 
 {{ macros_page_header::page_header(title=section.title) }}
 
 <div class="archive">
   <ul class="list-with-title">
-    {% set section_item = get_section(path="_index.md") %} {% for year, posts in
+    {% set section_item = get_section(path="blog/_index.md") %} {% for year, posts in
     section_item.pages | group_by(attribute="year") %} {% if posts | length > 0
     %}
     <li>
@@ -27,4 +29,5 @@
     </li>
   </ul>
 </div>
+
 {% endblock main_content %}

templates/base.html

@@ -1,12 +1,10 @@
 {% import "macros/list_posts.html" as macros_list_posts %}
-{% import "macros/format_date.html" as macros_format_date %}
 {% import "macros/page_header.html" as macros_page_header %}
 {% import "macros/page_desc.html" as macros_page_desc %}
 {% import "macros/content.html" as macros_content %}
 {% import "macros/cards_posts.html" as macros_cards_posts %}
-{% import "macros/list_title.html" as macros_list_title %}
 {% import "macros/set_title.html" as macros_set_title %}
-
+{% import "macros/paginate.html" as macros_paginate %}
 
 <!DOCTYPE html>
 <html lang = "en">

templates/cards.html

@@ -18,18 +18,6 @@
     </main>
 
     {% if paginator %}
-        <div class="pagination">
+        {{ macros_paginate::paginate() }}
-            {% if paginator.previous %}
-                <span class="page-item page-prev">
-                    <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
-                </span>
-            {% endif %}
-
-            {% if paginator.next %}
-                <span class="page-item page-next">
-                    <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
-                </span>
-            {% endif %}
-            </div>
     {% endif %}
 {% endblock main_content %}

templates/macros/cards_posts.html

@@ -1,4 +1,5 @@
 {% macro cards_posts(pages) %}
+
 <div class="cards">
     {%- for page in pages %}
     <div class="card">
@@ -21,7 +22,7 @@
 
             <div class="meta">
                 {%- if page.date %}
-                    {{ macros_format_date::format_date(date=page.date) }}
+                    {{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }}
                 {% endif -%}
                 {% if page.draft %}
                 <span class="draft-label">DRAFT</span>
@@ -38,4 +39,5 @@
 
     {% endfor -%}
 </div>
+
 {% endmacro cards_posts %}

templates/macros/content.html

@@ -1,4 +1,5 @@
 {% macro content(page) %}
+
 {% set separator = config.extra.separator | default(value="•") %}
 
 <main>
@@ -13,7 +14,7 @@
             {% endif %}
 
             {% if page.date %}
-                <span>{{ macros_format_date::format_date(date=page.date) }}</span>
+                <span>{{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }}</span>
                 {{ separator }}
             {% endif %}
 
@@ -30,7 +31,7 @@
             {% endif %}
 
             {% if page.updated %}
-                <br><span>Last updated on {{ macros_format_date::format_date(date=page.updated) }}</span>
+                <br><span>Last updated on {{ page.updated | date(format=config.extra.date_format | default (value="%d %B %Y")) }}</span>
             {% endif %}
         </ul>
 
@@ -81,4 +82,5 @@
 
     </article>
 </main>
+
 {% endmacro content %}

templates/macros/format_date.html

@@ -1,22 +0,0 @@
-{% macro format_date(date) %}
-{% if config.extra.date_format %}
-    {{ date | date(format=config.extra.date_format) }}
-{% else %}
-    {% set day = date | date(format='%-d') | int %}
-    {% if day in [11, 12, 13] %}
-        {% set suffix = "th" %}
-    {% else %}
-        {% set last_digit = day % 10 %}
-        {% if last_digit == 1 %}
-            {% set suffix = "st" %}
-        {% elif last_digit == 2 %}
-            {% set suffix = "nd" %}
-        {% elif last_digit == 3 %}
-            {% set suffix = "rd" %}
-        {% else %}
-            {% set suffix = "th" %}
-        {% endif %}
-    {% endif %}
-    {{ date | date(format="%-d") }}{{ suffix }} {{ date | date(format="%B %Y") }}
-{% endif %}
-{% endmacro %}

templates/macros/list_posts.html

@@ -1,38 +1,55 @@
-{% macro list_posts(pages) %}
+{% macro list_posts(posts, max) %}
+
 <div class="bloglist-container">
-    {% for page in pages %}
+    {% for post in posts %}
-    <section class="bloglist-table-row">
+        {% if loop.index <= max %}
-        <div class="bloglist-title">
+            {% if loop.index == max %}
-            <a href="{{ page.permalink }}">{{ page.title }}</a>
+                <section class="bloglist-row">
-        </div>
+            {% elif loop.last %}
-
+                <section class="bloglist-row">
-        <div class="card-meta">
-            {% if page.date %}
-                {{ macros_format_date::format_date(date=page.date) }}
-            {% endif %}
-
-            <br/>
-            <span>{{ page.reading_time }} min read</span>
-            {% if page.draft %}
-            <span class="draft-label">DRAFT</span>
-            {% endif %}
-        </div>
-
-        <br/>
-        <div class="description">
-            {% if page.description %}
-            {{ page.description }}
-            {% elif page.summary %}
-            {{ page.summary | safe }}&hellip;
             {% else %}
-            {% set hide_read_more = true %}
+                <section class="bloglist-row bottom-divider">
+            {% endif %}
+
+            {% if post.date %}
+                <div class="date">
+                    {{ post.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }}
+                </div>
+            {% endif %}
+
+            <div class="bloglist-content">
+                <div class="bloglist-title">
+                    <a href="{{ post.permalink }}">{{ post.title }}</a>
+                </div>
+
+                {% if post.taxonomies.tags %}
+                    <div class="bloglist-tags">
+                        {% for tag in post.taxonomies.tags %}
+                            <a class="tag" href="{{ get_taxonomy_url(kind="tags", name=tag) }}">{{ tag }}</a>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+
+                <div class="description">
+                    {% if post.description %}
+                        {{ post.description }}
+                    {% elif post.summary %}
+                        {{ post.summary | safe }}&hellip;
                     {% endif %}
                 </div>
 
-        {% if not hide_read_more %}
+                <a class="readmore" href={{ post.permalink }}>Read more →</a>
-        <a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
+            </div>
-        {% endif %}
         </section>
+    {% endif %}
+        {% if not loop.last %}
+            {% if loop.index == max %}
+                <div class="all-posts">
+                    <a href="{{ get_url(path="/blog/") }}">All posts ⟶</a>
+                </div>
+            {% endif %}
+        {% endif %}
     {% endfor %}
 </div>
+
 {% endmacro %}

templates/macros/list_title.html

@@ -1,16 +0,0 @@
-{% macro list_title(pages, tag_name=false) %}
-{% if tag_name %}
-    <div class="title-container section-title">Tag {{ term.name }}</div>
-{% else %}
-    <h1 class="page-title">All articles</h1>
-{% endif %}
-
-<ul class="posts">
-    {% for page in pages %}
-        <li class="post">
-            <div><a href="{{ page.permalink }}">{{ page.title }}</a></div>
-            <span class="meta">{{ macros_format_date::format_date(date=page.date) }}</span>
-        </li>
-    {% endfor %}
-</ul>
-{% endmacro list_title %}

templates/macros/page_desc.html

@@ -1,4 +1,5 @@
 {% macro page_desc(desc, page) %}
+
 <div id="banner-container-home">
     <div id="home-banner-text">
         <div class="home-banner-header">{{ desc.title }}</div>
@@ -10,4 +11,5 @@
         <img alt="the owner" class="banner-home-img" src={{ desc.img | replace(from="$BASE_URL", to=config.base_url) | safe}} />
     </div>
 </div>
+
 {% endmacro %}

templates/macros/page_header.html

@@ -1,5 +1,7 @@
 {% macro page_header(title) %}
-<div class="title-container section-title">
+
+<div class="title-container section-title bottom-divider">
     {{ title }}
 </div>
+
 {% endmacro page_header %}

templates/macros/paginate.html

@@ -0,0 +1,31 @@
+{% macro paginate() %}
+
+{% if paginator %}
+    <ul class="pagination">
+        {% if paginator.previous %}
+            <li class="page-item page-prev">
+                <a href="{{ paginator.previous }}" class="page-link" aria-label="Previous page">← Prev</a>
+            </li>
+        {% else %}
+            <li class="page-item page-prev">
+                <span class="page-link disabled" aria-disabled="true" aria-label="Previous (disabled)">← Prev</span>
+            </li>
+        {% endif %}
+
+        <li class="page-item page-numbers">
+            {{ paginator.current_index }} of {{ paginator.number_pagers }}
+        </li>
+
+        {% if paginator.next %}
+            <li class="page-item page-next">
+                <a href="{{ paginator.next }}" class="page-link" aria-label="Next page">Next →</a>
+            </li>
+        {% else %}
+            <li class="page-item page-next">
+                <span class="page-link disabled" aria-disabled="true" aria-label="Next page (disabled)">Next →</span>
+            </li>
+        {% endif %}
+    </ul>
+{% endif %}
+
+{% endmacro paginate %}

templates/macros/set_title.html

@@ -16,7 +16,7 @@
     {% set suffix = page.title %}
 {% elif term.name %}
     {# Individual tags. #}
-    {% set suffix = term.name ~ " tag" %}
+    {% set suffix = term.name %}
 {% elif taxonomy.name %}
     {# List of tags. #}
     {% set suffix = taxonomy.name | capitalize %}

templates/page.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
 {% block main_content %}
+
     {{ macros_content::content(page=page)}}
+
 {% endblock main_content %}

templates/partials/footer.html

@@ -3,7 +3,7 @@
         <nav class="socials nav-navs">
             {%- if config.extra.socials %}
                 {% for social in config.extra.socials %}
-        <a rel="noopener noreferrer" target="_blank" class="nav-links social" href={{ social.url | safe | replace(from="$BASE_URL", to=config.base_url) }}>
+                    <a rel="noopener noreferrer" target="_blank" class="nav-links no-hover-padding social" href={{ social.url | safe | replace(from="$BASE_URL", to=config.base_url) }}>
                         <img alt={{ social.name }} title={{ social.name }} src="{{config.base_url}}/social_icons/{{ social.icon }}.svg">
                     </a>
                 {% endfor %}

templates/partials/nav.html

@@ -8,7 +8,7 @@
             <div class="nav-navs">
                 <div>
                     {% for menu in config.extra.menu %}
-				<a class="nav-links" href={{ menu.url | safe | replace(from="$BASE_URL" , to=config.base_url) }}>{{ menu.name
+                    <a class="nav-links no-hover-padding" href={{ menu.url | safe | replace(from="$BASE_URL" , to=config.base_url) }}>{{ menu.name
                         }}</a>
                     {% endfor %}
                 </div>
@@ -23,4 +23,4 @@
         {% endif %}
 
     </nav>
-		</header>
+</header>

templates/section.html

@@ -1,8 +1,9 @@
 {% extends "base.html" %}
 
 {% block main_content %}
+
 {% if section.extra.section_path -%}
-{% set section = get_section(path=section.extra.section_path) %}
+    {% set extra_section = get_section(path=section.extra.section_path) %}
 {% endif -%}
 
 {%- if section.extra.header %}
@@ -13,28 +14,19 @@
     <div>
         {{ macros_page_header::page_header(title=section.title) }}
     </div>
+
     {%- if paginator %}
-	{%- set show_pages = paginator.pages -%}
+        {%- set pages = paginator.pages -%}
     {% else %}
-	{%- set show_pages = section.pages -%}
+        {%- set pages = extra_section.pages -%}
     {% endif -%}
 
-	{{ macros_list_posts::list_posts(pages=show_pages) }}
+	{% set max = section.extra.max_posts | default(value=999999) %}
+    {{ macros_list_posts::list_posts(posts=pages, max=max) }}
 </main>
 
 {% if paginator %}
-<div class="pagination">
+    {{ macros_paginate::paginate() }}
-	{% if paginator.previous %}
-	<span class="page-item page-prev">
-		<a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
-	</span>
-	{% endif %}
-
-	{% if paginator.next %}
-	<span class="page-item page-next">
-		<a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
-	</span>
-	{% endif %}
-</div>
 {% endif %}
+
 {% endblock main_content %}

templates/tags/list.html

@@ -2,20 +2,19 @@
 
 {% block main_content %}
 
-{{ macros_page_header::page_header(title="Tags") }}
+{{ macros_page_header::page_header(title="All tags")}}
 
-<ul class="taglist-container">
+<div class="tag-cloud">
-    {% for term in terms -%}
+    <ul class="tags">
-        <section class="taglist-table-row">
+        {% for term in terms %}
-            <div class="bloglist-title">
+            <div class="tags-item">
-                <a href="{{ term.permalink }}"> {{ term.name }}</a>
+                <li id "{{ term.name }}"><a href="{{ term.permalink | safe }}">
+                    {{ term.name }}</a>
+                    <span> – {{ term.pages | length }} post{{ term.pages | length | pluralize }}</span>
+                </li>
             </div>
-
-            <div class="card-meta">
-                {{ term.pages | length }} post{{ term.pages | length | pluralize }}
-            </div>
-        </section>
         {% endfor %}
-</ul>
+    </ul>
+</div>
 
 {% endblock main_content %}

templates/tags/single.html

@@ -2,6 +2,15 @@
 
 {% block main_content %}
 
-{{ macros_list_title::list_title(pages=term.pages, tag_name=term.name) }}
+{{ macros_page_header::page_header(title=term.name | title) }}
+
+{% set max = section.extra.max_posts | default(value=999999) %}
+{{ macros_list_posts::list_posts(posts=term.pages, max=max) }}
+
+<ul class="pagination">
+    <li class="page-item">
+        <a class="all-tags" href="{{ get_url(path="/tags/") }}">← All tags</a>
+    </li>
+</ul>
 
 {% endblock main_content %}