Add columns widget and enhance responsiveness

sass/_widgets.scss

@@ -0,0 +1,46 @@
+.widget-menu {
+    font-weight: bold;
+    > a { margin: 0 1rem; } // Spacing entries
+    padding: 0.5rem; // Leaving background space around entries
+}
+
+.widget-columns {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-evenly;
+    // TODO: could be site theming instead?
+    text-align: center;
+}
+
+.widget-columns-column {
+    // For mobile view
+    width: 95vw;
+    margin: auto;
+
+    // For wide screens
+    @media (min-width: 48em) {
+        max-width: 500px;
+        width: 30vw;
+    }
+    > img:first-child, > i:first-child {
+        // For images
+        max-height: 4rem;
+        height: 4rem;
+        // For text
+        font-size: 4rem;
+        line-height: 1;
+    }
+    a { font-weight: bold; }
+    > p:first-child { height: 4rem; }
+	> h1 { font-size: 2rem; }
+}
+
+// For images we need to introduce additional padding
+// on mobile view otherwise it gets clogged. Only apply
+// to images because <i>text</i> already has nice layout
+@media (max-width: 48em) {
+    .widget-columns-column:not(first-child) > img:first-child {
+        padding-top: 1rem;
+    }
+}

sass/style.scss

@@ -1,11 +1,21 @@
+@import 'widgets';
+
+// Override water.css
 body {
-    max-width: none; // Override water.css
+    max-width: none;
+    margin: 0;
+    padding: 0;
 }
 
-.nav-menu {
-    font-weight: bold;
-    > a { margin: 0 1rem; } // Spacing entries
-    padding: 0.5rem; // Leaving background space around entries
+@media (max-width: 48em) {
+    // water.css applies padding to the whole page, i think
+    // it's fine but only on mobile view, and should apply to
+    // individual blocks rather than whole page
+    main {
+        padding: 0 10px;
+    }
+    // Reduce main title sizes on mobile view
+    h1 { font-size: 1.8rem; line-height: 1.2; }
 }
 
 header {
@@ -16,7 +26,7 @@ header {
 article > div:first-child > h1, section > h1:first-child {
     text-align: center;
     font-size: 2.6em;
-    @media screen and (max-width: 64em) {
+    @media screen and (max-width: 48em) {
         font-size: 1.3em;
     }
 }
@@ -53,3 +63,9 @@ main {
 pre {
     overflow-x: auto;
 }
+
+footer {
+    padding: 0.5rem 0;
+    // WTF water.css doesn't have good contrast here?
+    color: var(--text-bright);
+}

templates/widgets.html

@@ -6,23 +6,14 @@ Provide the widget with a content page
 
 {{ widgets::menu(content="_common/menus/main.md") }}
 
-If the content page has a translation, it will be
-automatically loaded in the current language, as long as
-your parent template has a `lang` variable set, like so:
-
-{% set lang = section.lang | default(value=page.lang) %}
-
 Separate entries with a thematic break:
     either ---, ~~~, ___ or <hr />
 
-An entry can be either text, a link, or
-a submenu. A submenu is an actual list
-   defined using Markdown or HTML.
-
  You cannot use <p> tags in the menu.
+ That's because we can't access raw markdown
 ######################################}
 {% macro menu(path) %}
-<nav class="nav-menu" role="navigation">
+<nav class="widget-menu" role="navigation">
     {%- set source = self::i18n_content(path=path) -%}
     {% set entries = source | split(pat="<hr />") %}
     {#- fetch page content and divide it with separator -#}
@@ -33,6 +24,20 @@ a submenu. A submenu is an actual list
 </nav>
 {% endmacro menu %}
 
+{% macro columns(path) %}
+<div class="widget-columns">
+    {%- set source = self::i18n_content(path=path) -%}
+    {% set entries = source | split(pat="<hr />") %}
+    {#- fetch page content and divide it with separator -#}
+    {%- for entry in entries %}
+        <div class="widget-columns-column">
+        {{ entry | trim | replace(from="<p>", to="") | replace(from="</p>", to="") | safe }}
+        {# strip paragraph tags away for nicer markup #}
+        </div>
+    {%- endfor %}
+</div>
+{% endmacro columns %}
+
 {%- macro i18n_path(path) -%}
     {% if lang == config.default_language %}{{ path }}
     {%- else -%}