Adding a back button when profiles are open.

www/css/main.css

@@ -193,6 +193,21 @@ div {
   text-align: center;
 }
 
+#backbutton {
+  position: fixed;
+  top: -3rem;
+  right: -3rem;
+  height: 3rem;
+  width: 3rem;
+  z-index: 100;
+  border-radius: 1rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: rgba(192, 192, 192, 0.5);
+  font-size: 2rem;
+  line-height: 3rem;
+  text-align: center;
+}
+
 .splash.jason, .main.jason {
   background-color: var(--jason-bg-color);
   font-family: 'Raleway', sans-serif;

www/index.html

@@ -71,11 +71,15 @@
 		</div>
 	</div>
 
+	<div id="backbutton" class="jason" data-person="none">
+		<a href="/" class="closelink"><i class="fa-solid fa-left-long"></i></a>
+	</div>
+
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <script src="/js/vendor/modernizr-3.11.2.min.js"></script>
-  <script src="/js/plugins.js"></script>
-  <script src="/js/main.js"></script>
+	<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
+	<script src="/js/plugins.js"></script>
+	<script src="/js/main.js"></script>
 
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
   <script>

www/js/main.js

@@ -24,12 +24,12 @@ $(() => {
   };
 
   // Handle clicks on profile links (by doing nothing)
-  $('a.openlink').click(function(e) {
+  $('a.openlink, a.closelink').click(function(e) {
     e.preventDefault();
   })
 
   // Handle clicks on the banner
-  $('div.banner').click(function() {
+  $('div.banner, div#backbutton').click(function() {
     // If there's no person to open, do nothing
     if (typeof $(this).attr('data-person') == 'undefined') return;
 
@@ -134,6 +134,14 @@ $(() => {
       queue: true
     })
 
+    $('#backbutton').animate({
+      top: '-3rem',
+      right: '-3rem'
+    }, {
+      duration: 300
+    })
+
+
     if (window.matchMedia('(orientation: portrait)').matches) {
       // If we're closing in portrait mode...
       $('.main.not' + p).css('width', '100vw')
@@ -178,13 +186,19 @@ $(() => {
     }
   }
 
-  // Animate the display of links for a defined person
+  // Animate the display of links for a defined person, and show the back button
   function animateLinks(p) {
     $('#links-' + p).animate({
       height: $('#links-' + p).get(0).scrollHeight
     }, {
-      duration: 300,
-      queue: true
+      duration: 300
+    })
+
+    $('#backbutton').animate({
+      top: '2.5rem',
+      right: '2.5rem'
+    }, {
+      duration: 300
     })
   }
 })

www/lucy.html

@@ -52,6 +52,10 @@
     </div>
   </div>
 
+	<div id="backbutton" class="jason">
+		<a href="/"><i class="fa-solid fa-left-long"></i></a>
+	</div>
+
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="/js/vendor/modernizr-3.11.2.min.js"></script>