diff --git a/sass/_mobile.scss b/sass/_mobile.scss
index 500665c..472e43c 100644
--- 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%; }
+ }
}
diff --git a/sass/_widgets.scss b/sass/_widgets.scss
new file mode 100644
index 0000000..5293dd2
--- /dev/null
+++ 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 }
+}
diff --git a/sass/style.scss b/sass/style.scss
index e29e3c6..30437f7 100644
--- 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%;
+}
diff --git a/templates/index.html b/templates/index.html
index c394ebb..cdd010a 100644
--- 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) %}
@@ -14,6 +15,9 @@
{% 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") }}
diff --git a/templates/widgets.html b/templates/widgets.html
index 3a9ac1e..6343e59 100644
--- 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 %}{{ t.lang }}{% endfor %}
+{% endmacro translations %}
+
+{% macro bubble(content, v="bottom", h="right") %}
+
+{% endmacro bubble %}