add language box

_data/locale.toml

@@ -16,8 +16,12 @@ en = "listening to..."
 es = "estoy escuchando..."
 
 [site-lang]
-en = "este sitio también está disponible en"
+en = "site language"
-es = "this site is also available in"
+es = "idioma"
+
+[site-lang-avail]
+en = "este sitio tambien está en"
+es = "this site is also in"
 
 [home-lang-img]
 en = "/img/es.jpg"

_includes/lang-available.njk

@@ -1,3 +1,3 @@
 {% for link in page.url | locale_links %}
-<p class="lang-available" lang="{{ link.lang }}">{{ "lang-available" | i18n }} <a href="{{ link.url }}" hreflang="{{ link.lang }}">{{ link.label | lower }}</a></p>
+<p class="lang-available" lang="{{ link.lang }}">{{ avail_text | i18n if avail_text else "lang-available" | i18n }} <a href="{{ link.url }}" hreflang="{{ link.lang }}">{{ link.label | lower }}</a></p>
 {% endfor %}

_layouts/home.njk

@@ -1,4 +1,5 @@
 ---
+avail_text: "site-lang-avail"
 lastfm: true
 flight: 
     img: "/img/Witch-on-broom.gif"
@@ -8,10 +9,15 @@ flight:
 
 {% block content %}
     <div class="welcome-aside-left">
+        <div class="home-lang box">
+            {% include "lang-available.njk" %}
+            <img src="/img/nekojiru.png">
+        </div>
         <div id="listening" title="{{ "listening-to" | i18n }}"></div>
-        <!-- TODO: fake ad
+        <!-- TODO: fake ad -->
-        <div class="leftside-fake-ad"></div>
+        <div class="umihara-kawase">
-        -->
+            <a href={{ "/etc/umihara-kawase" | locale_url }}><img src="/img/umihara-kawase.gif"></a>
+        </div>
         <div class="buttons-wrapper box">
             <h2>{{ "please-visit" | i18n }}</h2>
             <div class="buttons">

css/main.scss

@@ -145,7 +145,7 @@ body {
 
     .box {
         border: 1px solid mp.$border;
-        margin: 10px;
+        margin: 10px 10px 0px 10px;
 
         h2 {
             padding: 3px 6px;
@@ -162,7 +162,24 @@ body {
     .welcome-aside-left {
         width: max-content;
 
+        .home-lang {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: row;
+            p {
+                font-size: 0.7em;
+                text-align: right;
+                margin: auto 0px auto 6px;
+            }
+            img {
+                display: block;
+                margin: 4px 4px 4px auto;
+                height: 64px;
+            }
+        }
+
         .now-playing-wrapper {
+            margin-bottom: 0px;
             width: 190px;
 
             h3, a { text-decoration: none; }
@@ -197,8 +214,18 @@ body {
                 }
             }
         }
+
+        .umihara-kawase {
+            margin: 0px;
+            a,img { 
+                display: block;
+                width: 81px;
+                margin: 0px auto; 
+            }
+        }
         
         .buttons-wrapper {
+            margin-top: 0px;
             width: 190px;
             .buttons {
                 display: flex;
@@ -276,6 +303,9 @@ body {
 }
 
 footer {
+    marquee {
+        margin: 8px 0px;
+    }
     p {
         margin: 2px;
         font-size: 0.7em;