2022-10-29 20:12:58 +01:00
63 changed files with 476 additions and 32 deletions
--- a/downloads/f.boniface_ed25519.pub
+++ b/downloads/f.boniface_ed25519.pub
@ -0,0 +1 @@
+ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKQad6se97C/WF58JCRcLCbSPSci/5m1au8f0wkxI2eq Fred Boniface
--- a/favicon.ico
+++ b/favicon.ico
--- a/gpg.php
+++ b/gpg.php
@ -1,31 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-  <head>
-    <?php include "./page-blocks/head.php"; ?>
-    <title>GPG/PGP</title>
-  </head>
-
-  <body>
-  
-    <?php include "./page-blocks/menu.php"; ?>
-
-    <h1 class="page-title">GPG/PGP</h1>
-      <div class="page-main-content">
-      <p>
-          PGP stand for 'Pretty Good Privacy', GPG stands for 'GNU Privacy Guard'
-          , for the scope of this website they are interchangable.
-        </p>
-
-        <p>
-          My public GPG keys will be published below.  You can use my public key to 
-          confirm that a signed email came from me, to verify signed files, and 
-          to verify commits and downloads from my <a href="https://git.fjla.uk"> 
-          gitea server</a>.
-        </p>
-      </div>
-
-    <?php include "./page-blocks/footer.php"; ?>
-
-  </body>
-</html>
--- a/images/favicon.png
+++ b/images/favicon.png
--- a/images/headers/index/1024.jpg
+++ b/images/headers/index/1024.jpg
--- a/images/headers/index/1024.jxl
+++ b/images/headers/index/1024.jxl
--- a/images/headers/index/1024.webp
+++ b/images/headers/index/1024.webp
--- a/images/headers/index/1920.jpg
+++ b/images/headers/index/1920.jpg
--- a/images/headers/index/1920.jxl
+++ b/images/headers/index/1920.jxl
--- a/images/headers/index/1920.webp
+++ b/images/headers/index/1920.webp
--- a/images/headers/index/2800.jpg
+++ b/images/headers/index/2800.jpg
--- a/images/headers/index/2800.jxl
+++ b/images/headers/index/2800.jxl
--- a/images/headers/index/2800.webp
+++ b/images/headers/index/2800.webp
--- a/images/headers/index/300.jpg
+++ b/images/headers/index/300.jpg
--- a/images/headers/index/300.jxl
+++ b/images/headers/index/300.jxl
--- a/images/headers/index/300.webp
+++ b/images/headers/index/300.webp
--- a/images/headers/index/4096.jpg
+++ b/images/headers/index/4096.jpg
--- a/images/headers/index/4096.jxl
+++ b/images/headers/index/4096.jxl
--- a/images/headers/index/4096.webp
+++ b/images/headers/index/4096.webp
--- a/images/headers/index/500.jpg
+++ b/images/headers/index/500.jpg
--- a/images/headers/index/500.jxl
+++ b/images/headers/index/500.jxl
--- a/images/headers/index/500.webp
+++ b/images/headers/index/500.webp
--- a/images/headers/index/800.jpg
+++ b/images/headers/index/800.jpg
--- a/images/headers/index/800.jxl
+++ b/images/headers/index/800.jxl
--- a/images/headers/index/800.webp
+++ b/images/headers/index/800.webp
--- a/images/headers/index/face-100.webp
+++ b/images/headers/index/face-100.webp
--- a/images/headers/index/face-150.webp
+++ b/images/headers/index/face-150.webp
--- a/images/headers/index/face-600.webp
+++ b/images/headers/index/face-600.webp
--- a/images/headers/index/full.jpg
+++ b/images/headers/index/full.jpg
--- a/images/headers/readme.txt
+++ b/images/headers/readme.txt
@ -0,0 +1,9 @@
+ Each set of header images should contain the following image widths.  The minimum height should be 275px.
+
+  - 4096
+  - 2800
+  - 1920
+  - 1024
+  - 800
+  - 500
+  - 300
--- a/images/logo/favicon.xcf
+++ b/images/logo/favicon.xcf
--- a/images/logo/full-20.jxl
+++ b/images/logo/full-20.jxl
--- a/images/logo/full-20.png
+++ b/images/logo/full-20.png
--- a/images/logo/full-20.webp
+++ b/images/logo/full-20.webp
--- a/images/logo/full-40.jxl
+++ b/images/logo/full-40.jxl
--- a/images/logo/full-40.png
+++ b/images/logo/full-40.png
--- a/images/logo/full-40.webp
+++ b/images/logo/full-40.webp
--- a/images/logo/full-60.jxl
+++ b/images/logo/full-60.jxl
--- a/images/logo/full-60.png
+++ b/images/logo/full-60.png
--- a/images/logo/full-60.webp
+++ b/images/logo/full-60.webp
--- a/images/logo/full-95.jxl
+++ b/images/logo/full-95.jxl
--- a/images/logo/full-95.png
+++ b/images/logo/full-95.png
--- a/images/logo/full-95.webp
+++ b/images/logo/full-95.webp
--- a/images/logo/full.xcf
+++ b/images/logo/full.xcf
--- a/images/logo/short-20.jxl
+++ b/images/logo/short-20.jxl
--- a/images/logo/short-20.png
+++ b/images/logo/short-20.png
--- a/images/logo/short-40.jxl
+++ b/images/logo/short-40.jxl
--- a/images/logo/short-40.png
+++ b/images/logo/short-40.png
--- a/images/logo/short-60.jxl
+++ b/images/logo/short-60.jxl
--- a/images/logo/short-60.png
+++ b/images/logo/short-60.png
--- a/images/logo/short-95.jxl
+++ b/images/logo/short-95.jxl
--- a/images/logo/short-95.png
+++ b/images/logo/short-95.png
--- a/images/logo/short.xcf
+++ b/images/logo/short.xcf
--- a/js/navbar.js
+++ b/js/navbar.js
@ -5,3 +5,17 @@ function inflateSidebar() {
 function collapseSidebar() {
  document.getElementById("sidebar").style.width = "0px";
 }
+
+function sidebarOpen() {
+  document.getElementById("sidebar").style.width = "50%";
+  document.getElementById("sidebar_open_short").style.display = "none";
+  document.getElementById("sidebar_close_short").style.display = "block";
+  document.getElementById("sidebar_social").style.display = "flex";
+}
+
+function sidebarClose() {
+  document.getElementById("sidebar").style.width = "0%"
+  document.getElementById("sidebar_open_short").style.display = "block";
+  document.getElementById("sidebar_close_short").style.display = "none";
+  document.getElementById("sidebar_social").style.display = "none";
+}
--- a/keys.php
+++ b/keys.php
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <?php include "./page-blocks/head.php"; ?>
+    <title>GPG/PGP</title>
+  </head>
+
+  <body>
+  
+    <?php include "./page-blocks/menu.php"; ?>
+
+    <h1 class="page-title">Keys</h1>
+      <div class="page-main-content">
+        <p>
+          <a href="/downloads/f.boniface_ed25519.pub">Download SSH Public Key</a>
+        </p>
+      </div>
+
+    <?php include "./page-blocks/footer.php"; ?>
+
+  </body>
+</html>
--- a/new_index.html
+++ b/new_index.html
@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Frederick Boniface">
+    <link rel="icon" type="image/png" href="/images/favicon.png">
+    <link rel="stylesheet" href="/style/new_style.css">
+    <title>Home</title>
+  </head>
+  <body>
+    <div class="header_image" id="header_index">
+      <div id="page_title" class="hide_micro">
+        <picture id="header_face">
+          <source srcset="/images/headers/index/face-150.webp" type="image/webp">
+          <img src="/images/headers/index/face-100.webp" alt="Face image">
+        </picture>
+        <h1>Hello</h1>
+      </div>
+    </div>
+    <div id="menubar">
+      <script src="/js/navbar.js"></script>
+      <div id="menubar_logo" class="hide_micro">
+        <a href="/">
+          <picture>
+            <source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
+            <source media="(min-width: 290px)" srcset="/images/logo/full-40.webp" type="image/webp">
+            <source media="(min-width: 290px)" srcset="/images/logo/full-40.png" type="image/png">
+            <source media="(max-width: 289px)" srcset="/images/logo/short-20.jxl" type="image/jxl">
+            <source media="(max-width: 289px)" srcset="/images/logo/short-20.png" type="image/png">
+            <img src="/images/logo/full-40.png" alt="Fred Boniface logo">
+          </picture>
+        </a>
+      </div>
+      <div id="menubar_hamburger" class="hide_micro">
+        <button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
+        <button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">&times;</button>
+      </div>
+    </div>
+    <div id="sidebar">
+      <a href="/">Home</a>
+      <a href="/keys.php">Keys</a>
+      <a href="/projects.php">Things I Do</a>
+      <a href="/contact.php">Contact</a>
+      <a href="/about.php">About</a>
+      <div id="sidebar_logo">
+        <picture>
+          <source srcset="/images/logo/short-40.jxl" type="image/jxl">
+          <img src="/images/logo/short-40.png" alt="">
+        </picture>
+      </div>
+      <div id="sidebar_social">
+        <a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
+          <picture>
+            <source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
+            <source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
+            <source srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
+            <source srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
+            <img src="/images/social-icons/500px_seek_58.png" alt="500px Logo">
+          </picture>
+        </a>
+        <a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
+          <picture>
+            <source media="(min-width: 399px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
+            <source srcset="/images/social-icons/fb_blue_58.png" type="image/png">
+            <img src="/images/social-icons/fb_blue_58.png" alt="Facebook Logo">
+          </picture>
+        </a>
+        <a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
+          <picture>
+            <source media="(min-width: 399px)" srcset="/images/social-icons/gh_white_120.png" type="image/png">
+            <source srcset="/images/social-icons/gh_white_64.png" type="image/png">
+            <img src="/images/social-icons/gh_white_64.png" alt="Github Logo">
+          </picture>
+        </a>
+      </div>
+    </div>
+    <div class="content show_micro">
+      <p>
+        This website cannot correctly render on a screen this narrow, 
+        Please resize your window or visit on a larger device.
+      </p>
+    </div>
+    <div class="content hide_micro">
+      <h2>Lorem</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut eros leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras tempus, leo sit amet placerat sollicitudin, magna massa vehicula nisi, sed malesuada odio velit iaculis est. Cras egestas nec lectus ac ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse cursus odio et massa finibus consequat non sed dolor. Suspendisse eu leo ut nunc tincidunt lacinia. Sed faucibus eu enim sit amet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo laoreet odio, ac sollicitudin odio.</p>
+        <p>Sed volutpat, dolor quis dignissim varius, risus urna tincidunt nulla, non bibendum urna ante eget enim. Pellentesque sit amet neque lobortis, auctor nulla sagittis, bibendum nisl. Proin fermentum tristique dolor, in vehicula mi efficitur et. Fusce ac justo nulla. In eget odio felis. Suspendisse et tellus tincidunt, consequat mi eu, gravida neque. In elementum lacus ut convallis ornare. Mauris elementum lorem felis, et tincidunt massa consectetur in. Suspendisse ut augue blandit, efficitur augue nec, pellentesque odio. Nulla aliquet arcu vitae vehicula ultricies.</p>
+      <h2>Ispum</h2>
+        <p>Sed eleifend massa sed sagittis malesuada. Phasellus velit urna, congue sit amet felis dictum, congue ornare tortor. Donec consequat lectus sit amet iaculis ornare. Pellentesque luctus, orci a sagittis efficitur, dolor justo convallis dolor, vitae aliquam dolor eros a nunc. Sed suscipit volutpat est ac ultrices. Cras tempus tellus est, eu tristique est gravida eget. Nulla turpis odio, aliquam id vehicula non, dignissim egestas orci. Suspendisse pulvinar enim eu tortor tincidunt, vel luctus purus pellentesque. Curabitur efficitur mollis est, at imperdiet dui auctor a. Ut malesuada lacus ac nulla tempor sollicitudin. Pellentesque enim elit, eleifend eget ligula sit amet, sagittis efficitur elit. Donec blandit tellus ut vestibulum iaculis. Fusce vel ipsum non felis bibendum porttitor a ut dui. Donec ornare augue augue, a elementum justo ornare quis. Praesent ante tellus, blandit in ultricies id, bibendum sit amet mi. Suspendisse tristique ornare erat.</p>
+        <p>Praesent malesuada sit amet libero eu volutpat. Duis lacinia turpis sit amet malesuada bibendum. Pellentesque ut velit at turpis placerat consequat id sed augue. Cras eleifend augue sem, sed hendrerit nibh feugiat eu. Nam cursus lectus fermentum quam feugiat porttitor. Sed bibendum a enim ut commodo. Maecenas lacinia dolor ante, vel bibendum nulla venenatis aliquam. Aenean ultricies felis eros, quis cursus arcu dictum vitae.</p>
+        <p>Ut magna urna, pretium tincidunt congue id, sodales sed lacus. Suspendisse potenti. Aenean nec quam ultrices, dignissim velit sit amet, cursus nisl. Duis nec risus a nisl porta fringilla. Phasellus vel fermentum justo, a malesuada ex. Nullam eu metus quis arcu sodales vestibulum. Maecenas efficitur gravida risus vitae pretium. Donec non nulla sodales, consectetur est ut, tristique nisl. Phasellus sed dui sed erat efficitur cursus. Vestibulum eget est purus. Aliquam mi ante, hendrerit ac ornare ac, imperdiet et diam. Nunc fermentum nunc faucibus massa finibus mattis.</p>
+    </div>
+    <footer>
+      <p>
+        &copy; Fred Boniface 2022
+      </p>
+    </footer>
+  </body>
+</html>
--- a/page-blocks/menu.php
+++ b/page-blocks/menu.php
@ -1,9 +1,10 @@
 <div id="sidebar" class="sidebar">
  <a href="javascript:void(0)" class="close" onclick="collapseSidebar()">&times;</a>
  <a href="/">Home</a>
-  <a href="/gpg.php">GPG/PGP</a>
+  <a href="/keys.php">Keys</a>
  <a href="/projects.php">Projects</a>
  <a href="/contact.php">Contact</a>
+  <a href="/new_index.html">WIP Design</a>
 </div>

 <div class="inflate" id="inflate">
--- a/projects.php
+++ b/projects.php
@ -13,6 +13,7 @@
    <h1 class="page-title">Projects</h1>
      <div class="page-main-content">
        <p>Sorry, there's nothing here yet</p>
+        <p>In the meantime check out my <a href="https://git.fjla.uk">Gitea</a> or <a href="/contact.php">Social Links</a></p>
      </div>

    <?php include "./page-blocks/footer.php"; ?>
--- a/style/fonts/indie-flower/OFL.txt
+++ b/style/fonts/indie-flower/OFL.txt
@ -0,0 +1,93 @@
+Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/style/fonts/indie-flower/indie-flower.ttf
+++ b/style/fonts/indie-flower/indie-flower.ttf
--- a/style/fonts/indie-flower/indie-flower.woff
+++ b/style/fonts/indie-flower/indie-flower.woff
--- a/style/fonts/indie-flower/indie-flower.woff2
+++ b/style/fonts/indie-flower/indie-flower.woff2
--- a/style/new_style.css
+++ b/style/new_style.css
@ -0,0 +1,234 @@
+/* COLOR VARS */
+:root {
+    --main-bg-color: lightslategrey;
+    --accent-color: darkslategrey;
+    --overlay-color: #2f4f4fb8;
+    --main-text-color: azure;
+    --link-color: cyan;
+}
+/* FONTS */
+@font-face {
+    font-family: 'indie-flower';
+    src: url('/style/fonts/indie-flower/indie-flower.woff2') format('woff2'),
+         url('/style/fonts/indie-flower/indie-flower.woff') format('woff'),
+         url('/style/fonts/indie-flower/indie-flower.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'oxygen';
+    src: url('/style/fonts/oxygen/oxygen-regular.woff2') format('woff2'),
+         url('/style/fonts/oxygen/oxygen-regular.woff') format('woff'),
+         url('/style/fonts/oxygen/oxygen-regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'oxygen';
+    src: url('/style/fonts/oxygen/oxygen-bold.woff2') format('woff2'),
+         url('/style/fonts/oxygen/oxygen-bold.woff') format('woff'),
+         url('/style/fonts/oxygen/oxygen-bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'oxygen';
+    src: url('/style/fonts/oxygen/oxygen-light.woff2') format('woff2'),
+         url('/style/fonts/oxygen/oxygen-light.woff') format('woff'),
+         url('/style/fonts/oxygen/oxygen-light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+/* HTML & BODY */
+html {height: 100%;}
+body {
+    width: 100%;
+    margin: auto;
+    background-color: var(--main-bg-color);
+}
+/* PAGE HEADER */
+.header_image {
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: cover;
+    height: 273px;
+    min-width: 100%;
+    max-width: 100%;
+    margin: auto;
+    margin-top: 40px;
+    position: sticky;
+    top: -145px;
+}
+#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */
+@media(min-width:  50px){#header_index{background-image:url("/images/headers/index/300.webp")}}
+@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}}
+@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}}
+@media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
+@media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
+@media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
+@media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
+#header_face {
+    display: flex;
+    position: absolute;
+    top: -184px;
+    width: 100%;
+    height: 185px;
+    text-align: center;
+}
+#header_face img {
+    margin: auto;
+    border-radius: 40px;
+    border-style: solid;
+    border-color: var(--accent-color);
+    border-width: 3px;
+    max-height: 150px;
+    height: 30vw;
+}
+@media(min-width:400px){#header_face img{border-radius:50px;}}
+@media(min-width:540px){#header_face img{border-radius:55px;}}
+#page_title { /* This may be best floating above content div rather than inside header div */
+    background-color: var(--overlay-color);
+    font-family: indie-flower, cursive;
+    font-size: large;
+    width: 100%;
+    height: 90px;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    color: var(--main-text-color);
+}
+#menubar {
+    background-color: var(--accent-color);
+    color: var(--main-text-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+}
+#menubar_logo img { /* Logo file is controlled by media="" in <picture> */
+    max-height: 20px;
+    padding: 10px;
+}
+#menubar_hamburger {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    padding: 5px;
+}
+.sidebar_control {
+    background-color: transparent;
+    color: var(--main-text-color);
+    border: none;
+    font-family: sans-serif;
+    font-size: larger;
+}
+#sidebar_open_short {display: block;}
+#sidebar_close_short {
+    display: none;
+    font-size: x-large;
+}
+#sidebar {
+    position: fixed;
+    top: 40px;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    display: block;
+    max-width: 250px;
+    width: 0;
+    background-color: var(--overlay-color);
+    transition: 0.4s;
+}
+#sidebar a {
+    padding: 8px 8px 8px 8px;
+    margin-top: 10px;
+    font-family: indie-flower, sans-serif;
+    font-weight: 300;
+    text-decoration: none;
+    text-align: center;
+    font-size: 25px;
+    color: var(--link-color);
+    display: block;
+    white-space: nowrap;
+    transition: 0.5s;
+  }
+@media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}}
+#sidebar a:hover {color: var(--main-text-color)}
+#sidebar a:active {color: var(--main-text-color)}
+#sidebar_logo {
+    margin-top: 30%;
+    text-align: center;
+}
+@media screen and (max-height: 640px){#sidebar_logo{display:none}
+}
+#sidebar_social {
+    position: absolute;
+    display: none;
+    bottom: 50px;
+    width: 100%;
+    margin: auto;
+    justify-content: center;
+}
+#sidebar_social img {
+    width: 12vw;
+    max-width: 50px;
+    transition: 0.5s;
+}
+@media screen and (min-height: 600px){#sidebar_social img{margin-bottom:20px}}
+@media screen and (max-height: 360px){#sidebar_social img{display:none}}
+/* CONTENT */
+.content { /* Try z-index: 1; so it scrolls over header image */
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+}
+.content h2 {
+    color: var(--main-text-color);
+    text-align: center;
+    font-family: oxygen, sans-serif;
+    font-weight: 700;
+}
+.content p {
+    width: 90%;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    color: var(--main-text-color);
+    font-family: oxygen, sans-serif;
+    font-weight: normal;
+}
+/* FOOTER */
+footer {
+    position: relative;
+    width: 100%;
+    background-color: var(--accent-color);
+    height: 30px;
+    bottom: 0;
+}
+footer p {
+    padding: 0;
+    padding-top: 5px;
+    margin: auto;
+    margin-top: 9px;
+    text-align: center;
+    color: var(--main-text-color);
+    font-family: monospace;
+}
+@media screen and (min-height: 600px) {
+    footer {
+        position: fixed;
+        bottom: 0;
+    }
+    footer p {
+        padding-top: 0px;
+        margin-top: 6px;
+    }
+}
+/* Handle ultra small screens somewhat gracefully */
+/* Hide .hide_micro on screens smaller than 250px and show .show_micro while not showing it on full screens */
+.show_micro {display:none}
+@media only screen and (max-width: 249px) {
+    .hide_micro {display: none}
+    .show_micro {display: block}
+}
				`@ -0,0 +1 @@`
				`ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKQad6se97C/WF58JCRcLCbSPSci/5m1au8f0wkxI2eq Fred Boniface`