Merge pull request #18 from welpo/fix/style

💄style: various style changes for consistency and aesthetics

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.

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,9 +32,10 @@ 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" },

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.
+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/almost-no-js.md

@@ -1,6 +1,6 @@
 +++
 title = "Almost no JavaScript"
-date = "2022-11-22"
+date = "2021-04-02"
 [taxonomies]
 tags = ["test"]
 +++

content/lorem.md

@@ -1,6 +1,6 @@
 +++
 title = "Lorem Ipsum"
-date = "2022-10-02"
+date = "2022-06-30"
 [taxonomies]
 tags = ["test"]
 +++

content/projects/_index.md

@@ -1,5 +1,5 @@
 +++
-title = "projects"
+title = "Projects"
 sort_by = "weight"
 template = "cards.html"
 +++

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

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;

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%;
     }
+}

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);
+[data-theme="light"] {
+  .social {
+    &:hover {
+      &>img {
+        filter: invert(1);
+      }
+    }
+
+    &>img {
+      filter: none;
+    }
   }
+}

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;
   }

sass/parts/_home-banner.scss

@@ -11,6 +11,7 @@
     width: 22%;
     overflow: hidden;
     border-radius: 10px;
+    text-align: center;
 }
 
 #home-banner-text {
@@ -19,9 +20,9 @@
     font-size: 1.875rem;
     line-height: 3rem;
     color: var(--accent-color);
-    }
+}
 
-    #banner-home-subtitle {
+#banner-home-subtitle {
     width: 95%;
     padding-right: 5%;
     font-size: 1rem;
@@ -29,9 +30,14 @@
     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%;
-
     }
 }

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 {

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;

templates/archive.html

@@ -1,8 +1,6 @@
 {% extends "base.html" %} {% block main_content %}
 
-<div class="title-container">
-  {{ post_macros::page_header(title=section.title) }}
-</div>
+{{ post_macros::page_header(title=section.title) }}
 
 <div class="archive">
   <ul class="list-with-title">

templates/cards.html

@@ -18,7 +18,7 @@
     </main>
 
     {% if paginator %}
-        <ul class="pagination">
+        <div class="pagination">
             {% 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>
@@ -30,6 +30,6 @@
                     <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
                 </span>
             {% endif %}
-        </ul>
+            </div>
     {% endif %}
 {% endblock main_content %}

templates/macros/macros.html

@@ -2,13 +2,13 @@
 <div class="bloglist-container">
     {%- for page in pages %}
     <section class="bloglist-table-row">
-        <h3>
+        <div class="bloglist-title">
             <a href={{ page.permalink }}>{{page.title}}</a>
-        </h3>
+        </div>
 
         <div class="meta">
             {%- if page.date %}
-            <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+            {{ page.date | date(format=config.extra.timeformat) }}
             {% endif -%}
             <br />
             <span>{{ page.reading_time }} minute read</span>
@@ -57,18 +57,18 @@
 {% endmacro tags %}
 
 {% macro page_header(title) %}
-<h2>
+<div class="title-container section-title">
     {{ title }}
-</h2>
+</div>
 {% endmacro page_header %}
 
 
 {% macro page_desc(desc, page) %}
 <div id="banner-container-home">
     <div id="home-banner-text">
-        <h1>
+        <h3>
             {{ desc.title }}
-        </h1>
+        </h3>
         <section id="banner-home-subtitle">
 					{{ page.content | safe }}
         </section>
@@ -83,13 +83,13 @@
 {% macro content(page) %}
 <main>
     <article>
-        <div class="title">
+        <div>
             {#<h1 class="title">{{ page.title }}</h1>#}
             {{ post_macros::page_header(title=page.title) }}
 
             <div class="meta">
                 {% if page.date %}
-                Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+                Posted on {{ page.date | date(format=config.extra.timeformat) }}
                 ~
                 {% endif %}
                 <span> {{ page.reading_time }} minute read</span>
@@ -122,7 +122,7 @@
         {% endif %}
 
         {# Optional table of contents #}
-        {% if config.extra.toc | default(value=false) %}
+        {% if page.extra.toc | default(value=false) %}
         {% if page.toc %}
         <h2>Table of Contents</h2>
         <ul>
@@ -185,7 +185,7 @@
 
             <div class="meta">
                 {%- if page.date %}
-                <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+                {{ page.date | date(format=config.extra.timeformat) }}
                 {% endif -%}
                 {% if page.draft %}
                 <span class="draft-label">DRAFT</span>
@@ -206,7 +206,7 @@
 
 {% macro list_title(pages, tag_name=false) %}
 {% if tag_name %}
-<h1>Entries tagged - "{{ term.name }}"</h1>
+<h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
 {% else %}
 <h1 class="page-title">All articles</h1>
 {% endif %}
@@ -215,7 +215,7 @@
     {% for page in pages %}
     <li class="post">
         <a href="{{ page.permalink }}">{{ page.title }}</a>
-        <span class="meta">{{ page.date | date(format="%Y-%m-%d") }}</span>
+        <span class="meta">{{ page.date | date(format=config.extra.timeformat) }}</span>
     </li>
     {% endfor %}
 </ul>

templates/partials/header.html

@@ -25,7 +25,7 @@
 
 
     {# RSS #}
-    <link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path=" atom.xml",
+    <link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path="atom.xml",
         trailing_slash=false) }}">
     <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css" ) }} />
 
@@ -36,9 +36,6 @@
     {% endfor %}
     {% endif %}
 
-
-    <meta name="description" content="{{ config.description }}">
-
     <meta name="description" content="{{ config.description }}">
     {% if is_404 %}
     <meta name="robots" content="noindex, follow">

templates/section.html

@@ -10,7 +10,7 @@
 {% endif -%}
 
 <main class="list">
-	<div class="title-container">
+	<div>
 		{{ post_macros::page_header(title=section.title) }}
 	</div>
 	{%- if paginator %}
@@ -23,7 +23,7 @@
 </main>
 
 {% if paginator %}
-<ul class="pagination">
+<div class="pagination">
 	{% 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>
@@ -35,6 +35,6 @@
 		<a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
 	</span>
 	{% endif %}
-</ul>
+</div>
 {% endif %}
 {% endblock main_content %}

templates/tags/list.html

@@ -1,7 +1,8 @@
 {% extends "index.html" %}
 
 {% block main_content %}
-<h1 class="page-title">Tags</h1>
+
+{{ post_macros::page_header(title="Tags")}}
 
 <div class="tag-cloud">
     <ul class="tags">
@@ -15,6 +16,7 @@
             <a href="{{ term.permalink | safe }}">
                 {{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
             </a>
+        </div>
             {% endfor %}
     </ul>
 </div>