style: move language selector to right side of footer layout

static/style.css

@@ -320,7 +320,7 @@ main {
 }
 
 .site-footer {
-  max-inline-size: 540px;
+  max-inline-size: 700px;
   margin-block-start: 64px;
   margin-inline: auto;
   padding-inline: 20px;
@@ -329,12 +329,23 @@ main {
   font-size: 13px;
   line-height: 1.6;
   color: var(--color-label-secondary);
-  text-align: center;
 
   .footer-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 24px;
     padding-block-start: 24px;
   }
 
+  .footer-left {
+    text-align: start;
+  }
+
+  .footer-right {
+    flex-shrink: 0;
+  }
+
   a {
     color: var(--color-link);
     text-decoration: none;
@@ -366,13 +377,13 @@ main {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      justify-content: center;
+      justify-content: flex-start;
       gap: 4px 16px;
     }
   }
 
   .footer-lang {
-    margin-block-start: 16px;
+    margin-block-start: 0;
   }
 
   .lang-select {
@@ -437,6 +448,15 @@ main {
     padding-inline: 16px;
     padding-block-end: 32px;
     font-size: 12px;
+
+    .footer-inner {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .footer-lang {
+      margin-block-start: 16px;
+    }
   }
 
   .error-banner {

templates/_footer.html

@@ -4,11 +4,3 @@
   <span class="footer-sep" aria-hidden="true">|</span>
   <a href="https://github.com/NetworkCats/Merged-IP-Data"><i class="icon-social-github" aria-hidden="true"></i> {{ t_footer_db }}</a>
 </nav>
-<div class="footer-lang">
-  <label for="lang-select" class="sr-only">{{ t_language }}</label>
-  <select id="lang-select" class="lang-select" autocomplete="off" onchange="if(this.value)window.location.href=this.value">
-    {% for l in all_locales %}
-    <option value="/{{ l.tag() }}/"{% if *l == locale %} selected{% endif %}>{{ l.name() }}</option>
-    {% endfor %}
-  </select>
-</div>

templates/_footer_lang.html

@@ -0,0 +1,8 @@
+<div class="footer-lang">
+  <label for="lang-select" class="sr-only">{{ t_language }}</label>
+  <select id="lang-select" class="lang-select" autocomplete="off" onchange="if(this.value)window.location.href=this.value">
+    {% for l in all_locales %}
+    <option value="/{{ l.tag() }}/"{% if *l == locale %} selected{% endif %}>{{ l.name() }}</option>
+    {% endfor %}
+  </select>
+</div>

templates/error_alert.html

@@ -30,7 +30,12 @@
 {% block footer %}
   <footer class="site-footer">
     <div class="footer-inner">
-      {% include "_footer.html" %}
+      <div class="footer-left">
+        {% include "_footer.html" %}
+      </div>
+      <div class="footer-right">
+        {% include "_footer_lang.html" %}
+      </div>
     </div>
   </footer>
 {% endblock %}

templates/index.html

@@ -207,16 +207,21 @@ curl {{ site_domain }}/tor</code></pre>
 {% block footer %}
   <footer class="site-footer">
     <div class="footer-inner">
-      {% include "_footer.html" %}
-      <div class="footer-attribution">
-        <p>{{ t_footer_attribution }}</p>
-        <ul>
-          <li><a href="https://www.maxmind.com/">MaxMind GeoLite2</a></li>
-          <li><a href="https://ipinfo.io/">IPinfo Lite</a></li>
-          <li><a href="https://db-ip.com/">DB-IP</a></li>
-          <li><a href="https://www.routeviews.org/">RouteViews ASN</a></li>
-          <li><a href="https://github.com/NetworkCats/OpenProxyDB">OpenProxyDB</a></li>
-        </ul>
+      <div class="footer-left">
+        {% include "_footer.html" %}
+        <div class="footer-attribution">
+          <p>{{ t_footer_attribution }}</p>
+          <ul>
+            <li><a href="https://www.maxmind.com/">MaxMind GeoLite2</a></li>
+            <li><a href="https://ipinfo.io/">IPinfo Lite</a></li>
+            <li><a href="https://db-ip.com/">DB-IP</a></li>
+            <li><a href="https://www.routeviews.org/">RouteViews ASN</a></li>
+            <li><a href="https://github.com/NetworkCats/OpenProxyDB">OpenProxyDB</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer-right">
+        {% include "_footer_lang.html" %}
       </div>
     </div>
   </footer>