From 4ace68c85823c4c93090eb8fbbbbaf9875ae4e16 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Thu, 20 Oct 2022 22:37:29 +0100
Subject: [PATCH] Attempt some support of screens >250px

---
 new_index.html      | 15 +++++++++++----
 style/new_style.css | 11 +++++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/new_index.html b/new_index.html
index 553e65a..089f496 100644
--- a/new_index.html
+++ b/new_index.html
@@ -10,13 +10,13 @@
   </head>
   <body>
     <div class="header_image" id="header_index">
-      <div id="page_title">
+      <div id="page_title" class="hide_micro">
         <h1>Lorem ipsum</h1>
       </div>
     </div>
     <div id="menubar">
       <script src="/js/navbar.js"></script>
-      <div id="menubar_logo">
+      <div id="menubar_logo" class="hide_micro">
         <a href="/">
           <picture>
             <source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
@@ -28,7 +28,7 @@
           </picture>
         </a>
       </div>
-      <div id="menubar_hamburger">
+      <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>
@@ -49,7 +49,14 @@
         SOCIAL_LINKS
       </div>
     </div>
-    <div id="content">
+    <div class="content show_micro">
+      <h2>Sorry</h2>
+      <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">
       <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>
       <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>
diff --git a/style/new_style.css b/style/new_style.css
index aef9e51..545ac9c 100644
--- a/style/new_style.css
+++ b/style/new_style.css
@@ -114,12 +114,12 @@ body {
     width: 100%;
 }
 /* CONTENT */
-#content { /* Try z-index: 1; so it scrolls over header image */
+.content { /* Try z-index: 1; so it scrolls over header image */
     padding-top: 10px;
     padding-bottom: 10px;
     width: 100%;
 }
-#content p {
+.content p {
     width: 90%;
     margin: auto;
     margin-top: 20px;
@@ -145,4 +145,11 @@ footer p {
         position: fixed;
         bottom: 0;
     }
+}
+/* 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: 250px) {
+    .hide_micro {display: none}
+    .show_micro {display: block}
 }
\ No newline at end of file
