Minor tweak to css (#89)

Author: ray2c

src/layouts/Base.astro

@@ -89,10 +89,16 @@ const {
       text-align: center;
       font-size: smaller;
       padding-bottom: 0.5em;
+      margin-left: 20px;
+      margin-right: 20px;
       margin-bottom: 0.5em;
       border-bottom: 1px solid lightgray;
     }
 
+    .lang-menu a {
+      white-space: nowrap;
+    }
+
     footer {
       /* padding: 0px; */
       /* margin: 0px; */
@@ -125,6 +131,7 @@ const {
       height: 1em; 
       content: ""; 
       display: inline-block; 
+      margin-left: -1.5em;
       margin-right: 0.5em;
     }
 
@@ -136,6 +143,7 @@ const {
       height: 1em; 
       content: ""; 
       display: inline-block; 
+      margin-left: -1.5em;
       margin-right: 0.5em;
     }
 
@@ -147,6 +155,7 @@ const {
       height: 1em; 
       content: ""; 
       display: inline-block; 
+      margin-left: -1.5em;
       margin-right: 0.5em;
     }
 
@@ -158,6 +167,7 @@ const {
       height: 1em; 
       content: ""; 
       display: inline-block; 
+      margin-left: -1.5em;
       margin-right: 0.5em;
     }
 
@@ -169,11 +179,12 @@ const {
       height: 1em; 
       content: ""; 
       display: inline-block; 
+      margin-left: -1.5em;
       margin-right: 0.5em;
     }
 
     .header-icons {
-      position: absolute;
+      float: right;
       right: 1rem;
       z-index: 1000;
       display: inline-flex;

src/layouts/Default.astro

@@ -42,7 +42,8 @@ const languageEntries = Object.entries(languages);
   {lockdown_banner ?? "LOCKDOWN"}<br/><span id="countdown">&nbsp;</span>
   </div>
   <header>
-    <h1>{title}<span class="header-icons"><a href="https://techhub.social/@keepandroidopen" class="header-icon-link" aria-label="Mastodon" title="Mastodon" rel="me" target="_blank"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16.45 17.77c2.77-.33 5.18-2.03 5.49-3.58.47-2.45.44-5.97.44-5.97 0-4.77-3.15-6.17-3.15-6.17-1.58-.72-4.3-1.03-7.13-1.05h-.07c-2.83.02-5.55.33-7.13 1.05 0 0-3.14 1.4-3.14 6.17v.91c-.01.88-.02 1.86 0 2.88.12 4.67.87 9.27 5.2 10.4 2 .53 3.72.64 5.1.57 2.51-.14 3.92-.9 3.92-.9l-.08-1.8s-1.8.56-3.8.5c-2-.08-4.1-.22-4.43-2.66a4.97 4.97 0 0 1-.04-.68s1.96.48 4.44.59c1.51.07 2.94-.09 4.38-.26Zm2.22-3.4h-2.3v-5.6c0-1.19-.5-1.79-1.5-1.79-1.1 0-1.66.71-1.66 2.12v3.07h-2.3V9.1c0-1.4-.55-2.12-1.65-2.12-1 0-1.5.6-1.5 1.78v5.61h-2.3V8.6c0-1.18.3-2.12.9-2.81a3.17 3.17 0 0 1 2.47-1.05c1.18 0 2.07.45 2.66 1.35l.57.96.58-.96a2.97 2.97 0 0 1 2.66-1.35c1.01 0 1.83.36 2.46 1.05.6.7.9 1.63.9 2.81v5.78Z"></path></svg></a><ThemeToggle /></span></h1>
+    <span class="header-icons"><a href="https://techhub.social/@keepandroidopen" class="header-icon-link" aria-label="Mastodon" title="Mastodon" rel="me" target="_blank"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16.45 17.77c2.77-.33 5.18-2.03 5.49-3.58.47-2.45.44-5.97.44-5.97 0-4.77-3.15-6.17-3.15-6.17-1.58-.72-4.3-1.03-7.13-1.05h-.07c-2.83.02-5.55.33-7.13 1.05 0 0-3.14 1.4-3.14 6.17v.91c-.01.88-.02 1.86 0 2.88.12 4.67.87 9.27 5.2 10.4 2 .53 3.72.64 5.1.57 2.51-.14 3.92-.9 3.92-.9l-.08-1.8s-1.8.56-3.8.5c-2-.08-4.1-.22-4.43-2.66a4.97 4.97 0 0 1-.04-.68s1.96.48 4.44.59c1.51.07 2.94-.09 4.38-.26Zm2.22-3.4h-2.3v-5.6c0-1.19-.5-1.79-1.5-1.79-1.1 0-1.66.71-1.66 2.12v3.07h-2.3V9.1c0-1.4-.55-2.12-1.65-2.12-1 0-1.5.6-1.5 1.78v5.61h-2.3V8.6c0-1.18.3-2.12.9-2.81a3.17 3.17 0 0 1 2.47-1.05c1.18 0 2.07.45 2.66 1.35l.57.96.58-.96a2.97 2.97 0 0 1 2.66-1.35c1.01 0 1.83.36 2.46 1.05.6.7.9 1.63.9 2.81v5.78Z"></path></svg></a><ThemeToggle /></span>
+    <h1>{title}</h1>
     <div class="lang-menu">
       {languageEntries.map(([_code, { label, path }], i) => (
         <>
@@ -57,7 +58,7 @@ const languageEntries = Object.entries(languages);
   </main>
   <footer>
     <div style="display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 2em; margin-left: auto; margin-right: auto;">
-      <div style="flex: 1; min-width: 22em; margin: 5px;">
+      <div style="flex: 1; min-width: 22em; margin: 20px;">
         <h4 style="margin-top: 0; margin-bottom: 10px; font-size: 16px;">
           {contact_header}
         </h4>
@@ -67,7 +68,7 @@ const languageEntries = Object.entries(languages);
           <li style="list-style: none; margin-bottom: 5px;">{site_problems_header}: <a target="_blank" href="https://github.com/keepandroidopen/keepandroidopen.github.io/issues" style="text-decoration: none;">{site_report_issues}</a></li>
         </ul>
       </div>
-      <div style="flex: 3; min-width: 300px; margin: 20px;">
+      <div style="flex: 3; min-width: 280px; margin: 20px;">
         <p><Fragment set:html={markdownify(site_disclaimer)} /></p>
         <p><Fragment set:html={markdownify(site_privacy)} /></p>
         <p>