Cleanup layout for narrow screens

config.toml

@@ -16,9 +16,9 @@ taxonomies = [
 
 [languages.pt]
 generate_feeds = true
-feed_filenames = ["rss.xml", "atom.xml"]
+feed_filenames = ["atom.xml"]
 title = "jutty.dev"
-description = "Vazamentos de memória nerd-computantes"
+description = "Vazamentos de uma memória nerd-computante"
 
 [markdown]
 smart_punctuation = true

static/assets/css/style.css

@@ -123,9 +123,20 @@ main {
 }
 
 .index-see-all {
-  margin-left: 20px;
-  padding-left: 30px;
+  margin-top: 0px;
   font-size: 12pt;
+  font-style: italic;
+  filter: brightness(60%);
+}
+
+.link-box {
+    border: 2px dotted #888;
+    border-radius: 12px;
+    margin: 0 20px;
+}
+
+.link-title {
+    margin-bottom: 5px;
 }
 
 .post-date, .link-date {
@@ -135,8 +146,12 @@ main {
   text-decoration-thickness: 0.1px;
 }
 
-.link-date {
-  margin-left: 30px;
+.link-data {
+    margin-top: 0
+}
+
+.link-data .link-author {
+    margin-right: 20px;
 }
 
 article .post-date {
@@ -262,7 +277,7 @@ footer {
   font-size: 13px;
 }
 
-/* phone */
+/* narrow */
 @media (max-width: 650px) {
   .article {
     margin: 0 20px;
@@ -274,7 +289,7 @@ footer {
     grid-template-areas: "nav nav" "lang lang";
   }
 
-  ul#posts {
+  ul#posts, ul#links {
     margin-left: 0px;
     padding-left: 20px;
   }
@@ -285,9 +300,31 @@ footer {
   }
 
   .index-see-all {
-    margin-left: 0%;
-    padding-left: 30px;
+    margin-left: 20px;
   }
+
+  .post-date { display: block; }
+  .link-date { display: block; }
+  .link-author { display: block; }
+
+  ul#posts li:before, ul#links li:before {
+      display: none;
+  }
+
+  ul#posts li, ul#links li {
+      padding-bottom: 20px;
+  }
+
+  .index-h2 {
+    margin-left: 20px;
+    margin-bottom: 10px;
+  }
+
+  .index-posts ul#posts {
+    margin-top: 0px;
+    padding-top: 0px;
+  }
+
 }
 
 /* tablet */
@@ -307,11 +344,15 @@ footer {
     margin-top: 40px;
   }
 
-  ul#posts {
+  ul#posts, ul#links {
     margin-left: 30px;
     padding-left: 20px;
   }
 
+  .index-see-all {
+  margin-left: 50px;
+  }
+
   .article {
     margin: 0 45px;
   }
@@ -337,7 +378,7 @@ footer {
     grid-template-columns: 12% 62% 14% 12%;
   }
 
-  .index-posts ul#posts {
+  .index-posts ul#posts, .index-posts ul#links  {
     margin-left: 40px;
   }
 
@@ -441,4 +482,8 @@ footer {
   details summary {
       color: #39959A;
   }
+
+  .link-box {
+      border-color: #aaa;
+  }
 }

templates/index.html

@@ -39,9 +39,9 @@
             {% endfor %}
           </ul>
         </nav>
-        <a class="index-see-all" href="{{ posts.permalink }}">
+        <p class="index-see-all"><a href="{{ posts.permalink }}">
           {%- if lang == "pt" %}Ver todos{% else %}See all{% endif %}
-        </a>
+        </a></p>
 
         <h2 class="index-h2">
           {%- if lang == "pt" %}Últimas notas{% else %}Latest notes{% endif -%}
@@ -62,9 +62,10 @@
             {% endfor %}
           </ul>
         </nav>
-        <a class="index-see-all" href="{{ notes.permalink }}">
+
+        <p class="index-see-all"><a href="{{ notes.permalink }}">
           {%- if lang == "pt" %}Ver todos{% else %}See all{% endif %}
-        </a>
+        </a></p>
 
         <h2 class="index-h2">
           {%- if lang == "pt" %}Últimos links{% else %}Latest links{% endif -%}
@@ -86,13 +87,14 @@
                   {{ link.extra.url | safe }}
                   {%- endif -%}
               ">{{ link.title }}</a>
+                <small class="link-author">by {{ link.authors | join(sep=", ") }}</small>
             </li>
             {% if loop.index == 5  %}{% break %}{% endif %}
             {% endfor %}
           </ul>
         </nav>
-        <a class="index-see-all" href="{{ links.permalink }}">
+        <p class="index-see-all"><a href="{{ links.permalink }}">
           {%- if lang == "pt" %}Ver todos{% else %}See all{% endif %}
-        </a>
+        </a></p>
 
 {%- endblock content %}

templates/link-page.html

@@ -1,8 +1,11 @@
 {% extends "content.html" %}
 
 {%- block content %}
-        <h1 id="post-title"><a href="{{ page.extra.url }}">{{ page.title }}</a></h1>
-        <time class="link-date"><strong>{% if lang == "pt" %}Linkado{% else %}Linked{% endif %} {{ page.date | date(format="%Y-%m-%d %H:%M:%S") }}</strong></time>
+        <div class="link-box">
+        <h1 class="link-title"><a href="{{ page.extra.url }}">{{ page.title }}</a></h1>
+        <p class="link-data"><span class="link-author">by {{ page.authors | join(sep=", ") }}</span>
+        <time class="link-date"><strong>{% if lang == "pt" %}Linkado{% else %}Linked{% endif %} {{ page.date | date(format="%Y-%m-%d %H:%M:%S") }}</strong></time></p>
+        </div>
 
         {%- if page.extra.comment %}<p>{{ page.extra.comment }}</p>{% endif %}
         {{- page.content | safe }}

templates/links.html

@@ -3,12 +3,12 @@
 {%- block content %}
 {%- set english_section = get_section(path="links/_index.md", lang="en") %}
         <h1 class="title">{{ section.title }}</h1>
-        <ul id="posts">
+        <ul id="links">
           {%- for page in english_section.pages %}
           <li>
           {%- if page.content -%}
           {%- set portuguese_page = get_page(path="links/" ~ page.slug ~ ".pt.md") %}
-            <time class="post-date"><a href="
+            <time class="link-date"><a href="
             {%- if lang == "pt" -%}
               {{ portuguese_page.permalink -}}
             {%- else -%}
@@ -16,9 +16,10 @@
             {%- endif -%}
             ">{{ page.date | date(format="%Y-%m-%d") -}}</a></time>
           {%- else %}
-            <time class="post-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
+            <time class="link-date">{{ page.date | date(format="%Y-%m-%d") }}</time>
           {%- endif %}
             <a href="{{ page.extra.url | safe }}">{{ page.title }}</a>
+            <small class="link-author">by {{ page.authors | join(sep=", ") }}</small>
           </li>
           {%- endfor %}
         </ul>