.

base.css

@@ -60,7 +60,7 @@ main{
     vertical-align: middle;
     font-size: 16px;
     text-align: left;
-    padding: 0 2px;
+    padding: 2px;
 }
 .so-pane > label{
     background-color: transparent;
@@ -117,8 +117,9 @@ main{
     box-sizing: content-box;
     position: fixed;
     top: 85px;
+    max-height: 100%;
     width: auto;
-    height: 24px;
+    height: auto;
     padding: 4px;
     text-align: center;
     border-style: solid;
@@ -216,6 +217,9 @@ main{
         border-width: 4px;
 	    margin: 10px;
     }
+    .small-only-row{
+        display: none !important;
+    }
 }
 @media (min-width: 640px){
     .nav{

index.go.html

@@ -27,7 +27,7 @@
     {{ end }}
     {{ end }}
     <input class="sort-menu" type="checkbox" id="sort-menu"/>
-    <label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><b>&#8595;</b></div></label>
+    <label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><img src="{{ .Data.SortImageLocation }}" width="64px" alt='&#8595;'></div></label>
     <form class="so-pane" action="?" method="get" id="so-form">
         {{ if .Light }}
         <input id="so-theme" type="hidden" name="light" />
@@ -96,6 +96,11 @@
                     <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
                 </div>
             </div>
+            <div class="small-only-row">
+                <div class="item-table-full">
+                    <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
+                </div>
+            </div>
             <div>
                 <div class="item-table-full">
                     <div class="content">{{ .Data.About.GetContent }}</div>
@@ -104,6 +109,11 @@
                     <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
                 </div>
             </div>
+            <div class="small-only-row">
+                <div class="item-table-full">
+                    <div class="centered"><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
+                </div>
+            </div>
         </div>
     </div>
     {{ range .GetEntries }}
@@ -121,6 +131,15 @@
                     {{ end }}
                 </div>
             </div>
+            <div class="small-only-row">
+                <div class="item-table-full">
+                    {{ if eq .GetStartDate .GetEndDate }}
+                    <div class="centered"><h4>{{ .GetStartDate }}</h4></div>
+                    {{ else }}
+                    <div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
+                    {{ end }}
+                </div>
+            </div>
             <div>
                 <div class="item-table-full">
                     <div class="content">{{ .GetContent }}</div>
@@ -138,6 +157,20 @@
                     </div>
                 </div>
             </div>
+            <div class="small-only-row">
+                <div class="item-table-full">
+                    <div class="centered">
+                        {{ if eq .VideoLocation "" }}
+                        <img src="{{ $.Data.NoVideoImageLocation }}" alt="No Video" width="360px">
+                        {{ else }}
+                        <video controls width="360px">
+                            <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
+                            <a href="{{ .VideoLocation }}">The Video</a>
+                        </video>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
             {{ if not (eq .GetImageCount 0) }}
             <div class="item-table-caption">
                 <div class="image-box">

index.go.yml

@@ -8,6 +8,7 @@ noVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/novideo.p
 logoImageLocation: "https://cityuni.captainalm.com/resources/assets/logo.png"
 moonImageLocation: "https://cityuni.captainalm.com/resources/assets/moon.png"
 sunImageLocation: "https://cityuni.captainalm.com/resources/assets/sun.png"
+sortImageLocation: "https://cityuni.captainalm.com/resources/assets/sort.png"
 headerLinks:
   Main Portfolio: "https://portfolio.captainalm.com/"
   Root Site Home: "https://www.captainalm.com/"

pageHandler/pages/index/data.go

@@ -12,6 +12,7 @@ type DataYaml struct {
 	LogoImageLocation    template.URL            `yaml:"logoImageLocation"`
 	SunImageLocation     template.URL            `yaml:"sunImageLocation"`
 	MoonImageLocation    template.URL            `yaml:"moonImageLocation"`
+	SortImageLocation    template.URL            `yaml:"sortImageLocation"`
 	About                AboutYaml               `yaml:"about"`
 	Entries              []EntryYaml             `yaml:"entries"`
 }