💄 style: major redesign

welpo · Mar 6, 2023 · 58fe89b · 58fe89b
2 parents de46a24 + 1f4f3a9
commit 58fe89b
Show file tree

Hide file tree

Showing 41 changed files with 404 additions and 272 deletions.
diff --git a/README.md b/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)
 

diff --git a/config.toml b/config.toml
@@ -16,9 +16,8 @@ highlight_code = true
 highlight_theme = "css"
 
 [extra]
-use_cdn = false
-
-date_format = ""  # If unset, uses format: "1st January 2049"
+# 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"
 
 # 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" },

diff --git a/content/_index.md b/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.
diff --git a/content/blog/_index.md b/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"
++++
diff --git a/content/almost-no-js.md → content/blog/almost-no-js.md b/content/almost-no-js.md → 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"]
 +++

diff --git a/content/markdown.md → content/blog/markdown.md b/content/markdown.md → 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"]
 +++

diff --git a/content/blog/one_more.md b/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 
diff --git a/content/security.md → content/blog/security.md b/content/security.md → 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"]
 +++

diff --git a/content/shortcodes.md → content/blog/shortcodes.md b/content/shortcodes.md → 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"]
 +++

diff --git a/content/toc.md → content/blog/toc.md b/content/toc.md → 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.
diff --git a/sass/main.scss b/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: #696969;
+  --secondary-color: #4a4a4a;
   --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;

diff --git a/sass/parts/_archive.scss b/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;
       }
     }
   }

diff --git a/sass/parts/_cards.scss b/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%;
-    }
-}
diff --git a/sass/parts/_header.scss b/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{
-  list-style-type: none;
-  display: inline;
+  ul, li {
+    list-style-type: none;
+    display: inline;
+  }
 }
 
 .card-meta {

diff --git a/sass/parts/_home-banner.scss b/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;
 }