Cleaned up the calendar stuff on the main page a little.

index.php

@@ -63,7 +63,7 @@ function getEvents() {
             <div class="card-body">
               <img src="image/icon/webcam.png" class="card-img-top" alt="...">
               <h5 class="card-title">Meet Online</h5>
-              We meet online with our <a href="https://meet.homelabbrisbane.com.au/" target="jitsi">Jitsi</a> server every month. With these online meetings we can meet face to face, and even include people outside of Brisbane. They are announced on <a href="https://www.meetup.com/brisbane-homelabs/" target="meetup">meetup.com</a> and the Google calendar below.
+              We meet online with our <a href="https://meet.homelabbrisbane.com.au/" target="jitsi">Jitsi</a> server every month. With these online meetings we can meet face to face, and even include people outside of Brisbane. They are announced on <a href="https://www.meetup.com/brisbane-homelabs/" target="meetup">meetup.com</a> and the <a href="#calendar">calendar below</a>.
             </div>
           </div>
         </div>
@@ -72,7 +72,7 @@ function getEvents() {
             <div class="card-body">
               <img src="image/icon/handshake.png" class="card-img-top" alt="...">
               <h5 class="card-title">Meet In Person</h5>
-              Once a month we also meet in person in a library meeting room in Brisbane. We try to move these around to make them convenient to a broader range of people. These gatherings are also announced on <a href="https://www.meetup.com/brisbane-homelabs/" target="meetup">meetup.com</a> and on the Google calendar below.
+              Once a month we also meet in person in a library meeting room in Brisbane. We try to move these around to make them convenient to a broader range of people. These gatherings are also announced on <a href="https://www.meetup.com/brisbane-homelabs/" target="meetup">meetup.com</a> and on the <a href="#calendar">calendar below</a>.
             </div>
           </div>
         </div>
@@ -95,18 +95,22 @@ function getEvents() {
           </div>
         </div>
       </div>
-      <hr />
+      <hr id="calendar" />
       <div class="row mt-4">
+        <div class="col" style="max-width: 250px;">
+          <img src="image/icon/calendar.png" style="max-height: 200px; padding-left: 20px;" />
+        </div>
         <div class="col">
           <p>We publish our past and upcoming events on the following url. You can subscribe to them in the calendar of your choice.</p>
-          <div class="input-group input-group-lg">
+          <div class="input-group input-group-lg mb-3">
-            <span class="input-group-text" id="basic-addon1">&#128197;</span>
             <input type="text" class="form-control" disabled value="https://homelabbrisbane.com.au/cal.php">
             <button class="btn btn-outline-secondary" type="button" action="copy" value="https://homelabbrisbane.com.au/cal.php">Copy</button>
           </div>
+          <p>Subscribing to this calendar is typically an exercise in copying that address and pasting it into a "subscribe to url" dialog in your calendar platform of choice. For instructions on how to do this in Google Calendar, click <a href="https://support.google.com/calendar/answer/37100?hl=en&co=GENIE.Platform%3DDesktop" target="googleCalendarInstructions">here</a>, and for Microsoft Outlook 365, click <a href="https://support.microsoft.com/en-us/office/import-or-subscribe-to-a-calendar-in-outlook-com-or-outlook-on-the-web-cff1429c-5af6-41ec-a5b4-74f2c278e98c" target="microsoftCalendarInstructions">here</a>.</p>
+          </p>
         </div>
       </div>
-      <div class="row mt-4">
+      <div class="row mt-2">
         <div class="col">
           <?php
           $events = getEvents();