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,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" },
-]
+]

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"]
 +++
@@ -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 :-)
+Other than that, it's a fast site with html and css. Just the way (most of) the web should be :-)

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.
+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.

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? 
+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? 

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.`
+`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`

content/projects/_index.md

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

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"
-+++
++++

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.
+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

@@ -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/_code.scss

@@ -107,4 +107,4 @@ pre code[class*="language-rs"]::before {
   content: "rust";
   background: #fff8f6;
   color: #ff4647;
-}
+}

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

sass/parts/_image.scss

@@ -32,4 +32,4 @@ figure h4::before {
 
 svg {
   max-height: 15px;
-}
+}

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

sass/parts/_table.scss

@@ -12,4 +12,4 @@ table th {
 table td {
   padding: 6px 13px;
   border: 1px solid #dfe2e5;
-}
+}

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/403.html

@@ -5,4 +5,4 @@
         {{ post_macros::page_header(title="403")}}
         <span>forbidden</span>
     </main>
-{% endblock main_content %}
+{% endblock main_content %}

templates/404.html

@@ -5,4 +5,4 @@
         {{ post_macros::page_header(title="404")}}
         <span>not found</span>
     </main>
-{% endblock main_content %}
+{% endblock main_content %}

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/base.html

@@ -16,4 +16,4 @@
     {% include "partials/footer.html" %}
 </body>
 
-</html>
+</html>

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 %}
+{% endblock main_content %}

templates/index.html

@@ -1 +1 @@
-{% extends "section.html" %}
+{% extends "section.html" %}

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>
-					{{ desc.title }}
-        </h1>
+        <h3>
+            {{ desc.title }}
+        </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,8 +215,8 @@
     {% 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>
-{% endmacro list_title %}
+{% endmacro list_title %}

templates/page.html

@@ -2,4 +2,4 @@
 
 {% block main_content %}
     {{ post_macros::content(page=page)}}
-{% endblock main_content %}
+{% endblock main_content %}

templates/partials/footer.html

@@ -11,4 +11,4 @@
     </nav>
     </section>
     <script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
-</footer>
+</footer>

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">
@@ -62,4 +59,4 @@
 
     <meta http-equiv="Content-Security-Policy" 
     content="default-src 'self' ws://127.0.0.1:1024/; img-src 'self' https://*; script-src 'self'; style-src 'self'; font-src 'self'" />
-</head>
+</head>

templates/partials/nav.html

@@ -22,4 +22,4 @@
 		{% endif %}
 
 	</nav>
-</header>
+</header>

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 %}
+{% 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,8 +16,9 @@
             <a href="{{ term.permalink | safe }}">
                 {{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
             </a>
+        </div>
             {% endfor %}
     </ul>
 </div>
 
-{% endblock main_content %}
+{% endblock main_content %}

templates/tags/single.html

@@ -4,4 +4,4 @@
 
 {{ post_macros::list_title(pages=term.pages, tag_name=term.name) }}
 
-{% endblock main_content %}
+{% endblock main_content %}