Added translation links

3 years ago · 64f62a22e6
parent 644b5f05e7
commit 64f62a22e6
5 changed files with 101 additions and 3 deletions
--- a/sass/_mobile.scss
+++ b/sass/_mobile.scss
@ -1,4 +1,7 @@
@media screen and (max-width: 62em) {
    // Do not overflow the ASCII art on smaller screens
-    header > pre { font-size: 0.4em; }
+    header {
+        > pre { font-size: 0.4em; }
+        > .widget-bubble { max-width: 60%; }
+    }
 }
--- a/sass/_widgets.scss
+++ b/sass/_widgets.scss
@ -0,0 +1,72 @@
+.widget-bubble {
+	background: #efefef;
+	border: 1px solid #a7a7a7;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+	margin: 0 auto;
+	position: relative;
+}
+
+.widget-bubble-arrow::after {
+	content: "";
+	position: absolute;
+}
+
+.widget-bubble-arrow::before {
+	content: "";
+	position: absolute;
+}
+
+.widget-bubble-arrow {
+	position: absolute;
+}
+
+.widget-bubble-left {
+    > .widget-bubble-arrow { left: 15px; }
+    > .widget-bubble-arrow::before {
+        left: 5px;
+	    border-right: 23px solid transparent;
+    }
+    > .widget-bubble-arrow::after {
+	    left: 6px;
+	    border-right: 21px solid transparent;
+    }
+}
+
+.widget-bubble-right {
+    > .widget-bubble-arrow { right: 15px; }
+    > .widget-bubble-arrow::before {
+        right: 5px;
+	    border-left: 23px solid transparent;
+    }
+    > .widget-bubble-arrow::after {
+	    right: 6px;
+	    border-left: 21px solid transparent;
+    }
+}
+
+.widget-bubble-bottom {
+    > .widget-bubble-arrow::after {
+        border-top: 21px solid #efefef;
+	    bottom: 4px;
+    }
+    > .widget-bubble-arrow::before {
+        border-top: 23px solid #a7a7a7;
+        bottom: 2px;
+    }
+    > .widget-bubble-arrow { bottom: -25px }
+}
+
+.widget-bubble-top {
+    > .widget-bubble-arrow::after {
+        border-bottom: 21px solid #efefef;
+	    top: 4px;
+    }
+    > .widget-bubble-arrow::before {
+        border-bottom: 23px solid #a7a7a7;
+        top: 2px;
+    }
+    > .widget-bubble-arrow { top: -25px }
+}
--- a/sass/style.scss
+++ b/sass/style.scss
@ -1,14 +1,18 @@
@import 'mobile';
+@import 'widgets';

 .nav-menu {
    font-weight: bold;
    > a { margin: 0 1rem; } // Spacing entries
-    background-color: rgb(239, 239, 239);
    color: black;
    padding: 0.5rem; // Leaving background space around entries
 }

-header { text-align: center; font-weight: bold; }
+header {
+    text-align: center;
+    font-weight: bold;
+    background-color: rgb(239, 239, 239);
+}

 article > div:first-child > h1, section > h1:first-child {
    text-align: center;
@ -45,3 +49,7 @@ main {
    text-align: center;
    font-weight: bold;
 }
+
+.widget-bubble {
+    max-width: 30%;
+}
--- a/templates/index.html
+++ b/templates/index.html
@ -1,5 +1,6 @@
 {% import "widgets.html" as widgets %}
 {% set lang = section.lang | default(value=page.lang) %}
+{% set translations = section.translations | default(value=page.translations) %}
 <!DOCTYPE html>
 <html class="no-js" lang="{{ lang | default(value=config.default_language)}}">
    <head>
@ -14,6 +15,9 @@
        <header>
            {% set header = get_page(path="_common/header.md") %}
            {{ header.content | markdown | safe }}
+            {% if translations %}
+                {{ widgets::bubble(content=widgets::translations(translations=translations), v="top", h="right")  }}
+            {% endif %}
            {{ widgets::menu(content="_common/menu.md") }}
        </header>
        <main>
--- a/templates/widgets.html
+++ b/templates/widgets.html
@ -54,3 +54,14 @@ a submenu. A submenu is an actual list
 {%- else -%}
    {%- set p = lang ~ "/" ~ path -%}{{ get_url(path=p) }}{%- endif -%}
 {%- endmacro i18n_url -%}
+
+{% macro translations(translations) %}
+{% for t in translations %}<a href="{{ t.permalink }}">{{ t.lang }}</a>{% endfor %}
+{% endmacro translations %}
+
+{% macro bubble(content, v="bottom", h="right") %}
+<div class="widget-bubble widget-bubble-{{ v }} widget-bubble-{{ h }}">
+    <div class="widget-bubble-arrow"></div>
+    {{ content | safe }}
+</div>
+{% endmacro bubble %}