add mobile notice

_data/locale.toml

@@ -13,3 +13,7 @@ es = "posts recientes"
 [listening-to]
 en = "listening to..."
 es = "estoy escuchando..."
+
+[mobile-warning]
+en = "this site is NOT optimized for mobile (yet). the groundwork is laid but i have not finished the css so things will look very ugly for you. sorry!!"
+es = "aún NO optimizo el sitio para verlo en celulares o pantallas más chicas. aunque escribí el html pensando también en soportar celulares, la parte de css no está hecha así que se verá bien feo para ti. sorry!!"

_includes/general.scss

@@ -1,5 +1,7 @@
 @use "main-palette.scss" as mp;
 
+$breakpoint: 768px;
+
 * {
     margin: 0;
     box-sizing: border-box;

_layouts/base.njk

@@ -22,6 +22,10 @@ lastfm: false
                 {% include "default_navbar.njk" %}
             </div>
             
+            <div id="mobile-warning" class="warning">
+                <p>{{ "mobile-warning" | i18n }}</p>
+            </div>
+
             <div class="base-content-wrapper">
                 {{ content | safe }}
             </div>

css/main.scss

@@ -17,6 +17,17 @@ body {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 0.8em;
     }
+
+    .warning {
+        padding: 2px;
+        margin: 2px auto;
+        text-align: center;
+        border-top: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        border-bottom: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        background: c.adjust($color: mp.$border, $saturation: 15%, $lightness: -20%);
+    }
+
+    @media (min-width: general.$breakpoint) { #mobile-warning { display: none; }}
 }
 
 .header-wrapper {