diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index b8db02e..a2bb084 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -42,9 +42,13 @@ nav {
   font-weight: bold;
 }
 
+#nav-menu ul {
+  padding-left: 0px;
+}
+
 #nav-menu li {
   display: inline-block;
-  margin-left: 20px;
+  margin-right: 20px;
 }
 
 #skip-to-main {
@@ -78,6 +82,13 @@ ul {
   list-style: none;
 }
 
+.post-date {
+  color: #777;
+  font-size: 14px;
+  margin-top: 0px;
+  text-decoration-thickness: 0.1px;
+}
+
 ol {
   margin-top: 5px;
   margin-left: 30px;
@@ -119,7 +130,11 @@ h1 {
   font-size: 25px;
   font-weight: bold;
   color: #444;
-  margin: 40px 0px 10px 0px;
+  margin: 40px 0px 30px 30px;
+}
+
+article h1 {
+  margin: 40px 0px 10px 30px;
 }
 
 h2,h3,h4 {
@@ -188,17 +203,48 @@ table th, td {
 }
 
 footer {
-  margin-top: 40px;
+  margin-top: 60px;
 }
 
 .footer-text {
-  padding: 20px 20px;
+  padding: 0px 20px;
+  text-align: center;
 }
 
 .footer-back {
   float: right;
 }
 
+.header-art {
+  display: grid;
+  grid-template-columns: 12% 76% 12%;
+  grid-template-areas: "margin-left art margin-right";
+  margin: 25px 0px 15px 20px;
+}
+
+.header-art pre {
+  grid-area: art;
+  justify-self: center;
+  font-size: 2.5vw;
+}
+
+#user-controls {
+  display: grid;
+  grid-template-columns: 2% 63% 33% 2%;
+  grid-template-areas: "margin-left nav lang margin-right";
+  margin: 20px;
+}
+
+#nav-menu {
+  grid-area: nav;
+  justify-self: start;
+}
+
+#language-selector {
+  justify-self: end;
+  grid-area: lang;
+}
+
 #language-icon {
   width: 22px;
   display: inline-block;
@@ -212,22 +258,10 @@ footer {
     margin: 0 20px;
   }
 
-  h1 {
-    margin-left: 20px;
-  }
-
   #user-controls {
-    grid-template-columns: 1fr;
-  }
-
-  #language-selector {
-    justify-self: end;
-    margin-bottom: 15px;
-  }
-
-  .header-art {
-    margin: 25px 0px 15px 20px;
-    font-size: 8px;
+    grid-template-columns: 100%;
+    grid-template-rows: auto;
+    grid-template-areas: "nav nav" "lang lang";
   }
 
   ul#posts {
@@ -236,7 +270,8 @@ footer {
   }
 
   main pre {
-    margin: 30px 0px;
+    margin: 30px 0;
+    padding: 20px 10px 30px 30px;
   }
 }
 
@@ -246,70 +281,97 @@ footer {
     margin: 0 45px;
   }
 
-  h1 {
+  .index-user-controls#user-controls {
+    grid-template-columns: 13% 64% 10% 13%;
+  }
+
+  .index-posts ul#posts {
+    margin-left: 14%;
+    padding-left: 20px;
+  }
+
+  ul#posts {
     margin-left: 30px;
+    padding-left: 20px;
+  }
+
+  .header-art pre {
+    margin-top: 100px;
+    font-size: 2vw;
+  }
+}
+
+/* wide screen */
+@media (min-width: 1000px) {
+
+  .header-art {
+    grid-template-columns: 12% 76% 12%;
+  }
+
+  .header-art pre {
+    margin-top: 120px;
+    font-size: 20px;
+  }
+
+  .index-user-controls#user-controls {
+    grid-template-columns: 1fr 680px 140px 1fr;
   }
 
   #user-controls {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 12% 62% 14% 12%;
   }
 
-  #language-selector {
-    justify-self: end;
+  .index-posts {
+    display: grid;
+    grid-template-columns: 1fr 900px 1fr;
+    grid-template-areas: "margin-left posts margin-right";
   }
 
-  .header-art {
-    margin: 25px 0px 15px 35px;
+  .index-posts ul {
+    grid-area: posts;
+    justify-self: start;
+  }
+
+  .index-posts ul#posts {
+    margin-left: 0px;
+  }
+
+  main {
+    margin: 0 10%;
   }
 }
 
-.post-date {
-  color: #777;
-  font-size: 14px;
-  margin-top: 0px;
-  text-decoration-thickness: 0.1px;
-}
-
-/* widescreen */
-@media (min-width: 1000px) {
-  .article {
+/* very wide screen */
+@media (min-width: 1921px) {
+  main {
     margin: 0 20%;
   }
 
-  h1 {
-    margin-left: 30px;
+  .header-art pre {
+    margin-top: 160px;
   }
 
-  #user-controls {
-    grid-template-columns: 600px 2fr;
+  .index-user-controls#user-controls {
+    grid-template-columns: 1fr 575px 200px 1fr;
   }
 
-  #language-selector {
-    justify-self: start;
+  .subpage-user-controls#user-controls {
+    grid-template-columns: 100%;
+    grid-template-areas: "nav nav" "lang lang";
   }
 
-  .header-art {
-    margin: 60px 0px 20px 85px;
-  }
-}
-
-/* fullscreen */
-@media (min-width: 1500px) {
-  .article {
-    margin: 0 30%;
+  .subpage-user-controls #nav-menu {
+    justify-self: center;
   }
 
-  h1 {
-    margin-left: 30px;
+  .subpage-user-controls #language-selector {
+    justify-self: center;
   }
 
-  #user-controls {
-    grid-template-columns: 600px 2fr;
+  .index-posts {
+    grid-template-columns: 1fr 800px 1fr;
   }
 
-  #language-selector {
-    justify-self: start;
-  }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/templates/base.html b/templates/base.html
index b4a3ab3..fdf91ee 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,75 +10,65 @@
   <html lang="{{ lang }}" id="theme">
     {% endif %}
 
-<head prefix="og: https://ogp.me/ns/website#">
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <head prefix="og: https://ogp.me/ns/website#">
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-  {%- set title_tail = " ~ " ~ config.title %}
+      {%- set title_tail = " ~ " ~ config.title %}
 
-  {%- if page.title %}
-    {%- set title = page.title ~ title_tail %}
-  {%- elif section.title %}
-    {%- set title = section.title ~ title_tail %}
-  {%- else %}
-    {%- set title = config.title %}
-  {%- endif %}
+      {%- if page.title %}
+      {%- set title = page.title ~ title_tail %}
+      {%- elif section.title %}
+      {%- set title = section.title ~ title_tail %}
+      {%- else %}
+      {%- set title = config.title %}
+      {%- endif %}
 
-  <title>{{ title }}</title>
+      <title>{{ title }}</title>
 
-  <link href="{{ get_url(path="assets/css/style.css", trailing_slash=false) }}" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-dark.css", trailing_slash=false) }}" media="(prefers-color-scheme: dark)" />
-  <link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-light.css", trailing_slash=false) }}" media="(prefers-color-scheme: light)" />
+      <link href="{{ get_url(path="assets/css/style.css", trailing_slash=false) }}" rel="stylesheet">
+      <link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-dark.css", trailing_slash=false) }}" media="(prefers-color-scheme: dark)" />
+      <link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-light.css", trailing_slash=false) }}" media="(prefers-color-scheme: light)" />
 
-
-  {%- set description = page.content | default(value=config.description) | striptags | regex_replace(pattern="\n", rep=" ") | truncate(length=120) %}
       <link rel="icon" type="image/png" sizes="36x36" href="{{ get_url(path="assets/img/icons/kitty/kitty_32.png", trailing_slash=false) }}">
       <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="assets/img/icons/kitty/kitty_16.png", trailing_slash=false) }}">
       <link rel="icon" type="image/png" sizes="128x128" href="{{ get_url(path="assets/img/icons/kitty/kitty_circle_128.png", trailing_slash=false) }}">
 
-  <meta property="og:title" content="{{ title }}" />
-  <meta property="og:description" content="{{ description }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="{{ current_url | default(value= get_url(path="/")) | safe }}" />
+      {%- set description = page.content | default(value=config.description) | striptags | regex_replace(pattern="\n", rep=" ") | truncate(length=120) %}
 
-  {% block rss %}<link rel="alternate" type="application/rss+xml" title="RSS ({{ lang }})" href="{{ get_url(path="rss.xml", lang=lang, trailing_slash=false) }}">
-  <link rel="alternate" type="application/rss+xml" title="Atom ({{ lang }})" href="{{ get_url(path="atom.xml", lang=lang, trailing_slash=false) }}">{% endblock %}
-</head>
+      <meta property="og:title" content="{{ title }}" />
+      <meta property="og:description" content="{{ description }}" />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="{{ current_url | default(value= get_url(path="/")) | safe }}" />
       <meta property="og:image" content="{{ get_url(path="assets/img/icons/kitty/kitty_circle_192.png") }}" />
 
-<body>
-  {% if lang == "pt" %}
-  <a id="skip-to-main" href="#main">Saltar para o conteúdo</a>
-  {% else %}
-  <a id="skip-to-main" href="#main">Skip to content</a>
-  {% endif %}
+      {% block rss %}<link rel="alternate" type="application/rss+xml" title="RSS ({{ lang }})" href="{{ get_url(path="rss.xml", lang=lang, trailing_slash=false) }}">
+      <link rel="alternate" type="application/rss+xml" title="Atom ({{ lang }})" href="{{ get_url(path="atom.xml", lang=lang, trailing_slash=false) }}">{% endblock %}
+    </head>
 
-  {% block header %}{% endblock %}
-  <div id="user-controls">
-    <nav>
-      <ul id="nav-menu">
-        {% if lang == "pt" %}
-        <li><a id="home" href="{{ get_url(path="/") }}">Início</a></li>
-        {% else %}
-        <li><a id="home" href="{{ get_url(path="/") }}">Home</a></li>
-        {% endif %}
-        <li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li>
-        <li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
-        <li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
-          <li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
-      </ul>
-    </nav>
-    <div id="language-selector">
-      {% if current_path %}
-      {% set prepared_path = current_path | replace(from="pt/", to="")  %}
+    <body>
       {% if lang == "pt" %}
-          <a href="{{ get_url(path=prepared_path) }}">English</a>
+      <a id="skip-to-main" href="#main">Saltar para o conteúdo</a>
       {% else %}
-          <a href="{{ get_url(path="pt" ~ prepared_path) }}">Português</a>
-      {% endif %}{% endif %}
-    </div>
-  </div>
+      <a id="skip-to-main" href="#main">Skip to content</a>
+      {% endif %}
+
+      {% block header %}{% endblock %}
+      <div id="user-controls" class="{% if current_path and (current_path == "/" or current_path == "pt/"  ) %}index-user-controls{% else %}subpage-user-controls{% endif %}">
+        <nav id="nav-menu">
+          <ul>
+            {% if lang == "pt" %}
+            <li><a id="home" href="{{ get_url(path="/pt") }}">Início</a></li>
+            {% else %}
+            <li><a id="home" href="{{ get_url(path="/") }}">Home</a></li>
+            {% endif %}
+            <li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li>
+            <li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
+            <li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
+            <li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
+          </ul>
+        </nav>
         {% if current_path and translation_count > 1 %}
         {% set english_path = current_path | regex_replace(pattern="^/pt", rep="")  %}
         <div id="language-selector">
@@ -88,9 +78,10 @@
         {% endif %}
       </div>
 
-  <main id="main">
-      {% block content %} {% endblock %}
-  </main>
+      <main id="main">
+        {% block content %}{% endblock %}
+      </main>
 
-</body>
-</html>
+    {% block footer %}{% endblock %}
+    </body>
+  </html>
diff --git a/templates/index.html b/templates/index.html
index fe16c22..8d1d25a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,18 +2,19 @@
 
 {% block header %}
   <header>
-    <pre class="header-art"
-      role="img" aria-label="ASCII art with 'jutty.dev' in a 3D, slanted font">
-                 __    __                    __
-     __         /\ \__/\ \__                /\ \
-    /\_\  __  __\ \ ,_\ \ ,_\  __  __       \_\ \     __   __  __
-    \/\ \/\ \/\ \\ \ \/\ \ \/ /\ \/\ \      /'_` \  /'__`\/\ \/\ \
-     \ \ \ \ \_\ \\ \ \_\ \ \_\ \ \_\ \  __/\ \L\ \/\  __/\ \ \_/ |
-     _\ \ \ \____/ \ \__\\ \__\\/`____ \/\_\ \___,_\ \____\\ \___/
-    /\ \_\ \/___/   \/__/ \/__/ `/___/> \/_/\/__,_ /\/____/ \/__/
-    \ \____/                       /\___/
-     \/___/                        \/__/
-    </pre>
+    <div class="header-art">
+      <pre role="img" aria-label="ASCII art with 'jutty.dev' in a 3D, slanted font">
+             __    __                    __
+ __         /\ \__/\ \__                /\ \
+/\_\  __  __\ \ ,_\ \ ,_\  __  __       \_\ \     __   __  __
+\/\ \/\ \/\ \\ \ \/\ \ \/ /\ \/\ \      /'_` \  /'__`\/\ \/\ \
+ \ \ \ \ \_\ \\ \ \_\ \ \_\ \ \_\ \  __/\ \L\ \/\  __/\ \ \_/ |
+ _\ \ \ \____/ \ \__\\ \__\\/`____ \/\_\ \___,_\ \____\\ \___/
+/\ \_\ \/___/   \/__/ \/__/ `/___/  \/_/\/__,_ /\/____/ \/__/
+\ \____/                       /\___/
+ \/___/                        \/__/
+      </pre>
+    </div>
   </header>
 {% endblock header %}
 
diff --git a/templates/post-page.html b/templates/post-page.html
index c59274b..b2f4afe 100644
--- a/templates/post-page.html
+++ b/templates/post-page.html
@@ -1,11 +1,27 @@
 {% extends "base.html" %}
 
 {% block content %}
-
-  <h1 id="post-title">
-    {{ page.title }}
-  </h1>
-  <p class="post-date"><strong>{{ page.date }}</strong></p>
-  {{ page.content | safe }}
-
+  <article class="blog-post">
+    <h1 id="post-title">
+      {{ page.title }}
+    </h1>
+    <p class="post-date"><strong>{{ page.date }}</strong></p>
+    {{ page.content | safe }}
+  </article>
 {% endblock content %}
+
+{% block footer %}
+  <footer>
+    <hr/>
+        <p class="footer-text">
+          made by <a href="https://jutty.dev">jutty</a>
+          with <a href="https://www.getzola.org/">Zola</a>
+          &bullet;
+          BSD-licensed <a href="https://github.com/jultty/blog">source code</a>
+          &bullet;
+          <a href="{{ get_url(path="acknowledgments") }}">acknowledgments</a>
+          <br/>
+          built {{ now(utc=true) | date(format="%Y-%m-%d %H:%M") }} UTC, {{ now(timestamp=true) }} non-leap seconds since the Unix Epoch
+        </p>
+  </footer>
+{% endblock footer %}