.

base.css

@@ -157,7 +157,7 @@ main{
     border-width: 1px;
 	margin: 2px;
 }
-@media (min-width: 480px){
+@media (min-width: 540px){
     .main-box > div{
         margin: 5px;
     }
@@ -165,13 +165,14 @@ main{
         display: table-cell;
         vertical-align: middle;
         width: 360px;
+        overflow: hidden;
     }
 	.image-box > a{
         border-width: 4px;
 	    margin: 10px;
     }
 }
-@media (min-width: 600px){
+@media (min-width: 640px){
     .nav{
         max-height: none;
         top: 0;

dark.css

@@ -30,8 +30,14 @@ a{
 .main-box{
 	background-color: #0f0f0f;
 }
+.item-table{
+	background-color: #3f3f3f;
+}
 .item-table > div > div, .item-table-caption{
-	border-color: #F5DEB3FF;
+	border-color: #f5deb3;
+}
+.image-box{
+	background-color: #4f4f4f;
 }
 .image-box > a{
 	border-color: #b0b0f0;

index.go.html

@@ -42,7 +42,7 @@
                     <div>{{ .Data.About.GetContent }}</div>
                 </div>
                 <div class="item-table-360">
-                    <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="Image of Me." width="360px"></a></div>
+                    <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
                 </div>
             </div>
         </div>
@@ -67,8 +67,9 @@
                     <div>{{ .GetContent }}</div>
                 </div>
                 <div class="item-table-360">
-                    <div><video controls="" width="360">
+                    <div><video controls width="360">
                         <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
+                        <a href="{{ .VideoLocation }}">The Video</a>
                     </video></div>
                 </div>
             </div>
@@ -76,7 +77,7 @@
             <div class="item-table-caption">
                 <div class="image-box">
                     {{ range .GetImages }}
-                    <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
+                    <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" width="240"></a>
                     {{ end }}
                 </div>
             </div>

index.go.yml

@@ -14,6 +14,7 @@ about:
     <p>#birth#</p>
   thumbnailLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou.jpg"
   imageLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou.jpg"
+  imageAltText: "Image of me."
   birthYear: 2002
   contactEmail: "alfred@captainalm.com"
 entries:
@@ -46,6 +47,10 @@ entries:
       - "https://cityuni.captainalm.com/resources/assets/pic1.png"
       - "https://cityuni.captainalm.com/resources/assets/pic2.png"
       - "https://cityuni.captainalm.com/resources/assets/pic3.png"
+    imageAltTexts:
+      - "Picture 1."
+      - "Picture 2."
+      - "Picture 3."
   - name: "City Game Project 2022: Ninjaformer (Alpha, Beta)"
     content: >
       <p>
@@ -76,3 +81,7 @@ entries:
       - "https://cityuni.captainalm.com/resources/assets/pic4.png"
       - "https://cityuni.captainalm.com/resources/assets/pic5.png"
       - "https://cityuni.captainalm.com/resources/assets/pic6.png"
+    imageAltTexts:
+      - "Picture 4."
+      - "Picture 5."
+      - "Picture 6."

pageHandler/pages/index/about.go

@@ -12,6 +12,7 @@ type AboutYaml struct {
 	Content           string `yaml:"content"`
 	ThumbnailLocation string `yaml:"thumbnailLocation"`
 	ImageLocation     string `yaml:"imageLocation"`
+	ImageAltText      string `yaml:"imageAltText"`
 	BirthYear         int    `yaml:"birthYear"`
 	ContactEmail      string `yaml:"contactEmail"`
 }

pageHandler/pages/index/entry.go

@@ -18,11 +18,13 @@ type EntryYaml struct {
 	VideoContentType   string        `yaml:"videoContentType"`
 	ThumbnailLocations []string      `yaml:"thumbnailLocations"`
 	ImageLocations     []string      `yaml:"imageLocations"`
+	ImageAltTexts      []string      `yaml:"imageAltTexts"`
 }
 
 type ImageReference struct {
 	ThumbnailLocation string
 	ImageLocation     string
+	ImageAltText      string
 }
 
 func (ey EntryYaml) GetStartDate() string {
@@ -54,15 +56,16 @@ func (ey EntryYaml) GetDuration() time.Duration {
 }
 
 func (ey EntryYaml) GetImageCount() int {
-	return int(math.Min(float64(len(ey.ThumbnailLocations)), float64(len(ey.ImageLocations))))
+	return int(math.Min(math.Min(float64(len(ey.ThumbnailLocations)), float64(len(ey.ImageLocations))), float64(len(ey.ImageAltTexts))))
 }
 
 func (ey EntryYaml) GetImages() []ImageReference {
 	toReturn := make([]ImageReference, ey.GetImageCount())
-	for i := 0; i < len(ey.ThumbnailLocations) && i < len(ey.ImageLocations); i++ {
+	for i := 0; i < len(ey.ThumbnailLocations) && i < len(ey.ImageLocations) && i < len(ey.ImageAltTexts); i++ {
 		toReturn[i] = ImageReference{
 			ThumbnailLocation: ey.ThumbnailLocations[i],
 			ImageLocation:     ey.ImageLocations[i],
+			ImageAltText:      ey.ImageAltTexts[i],
 		}
 	}
 	return toReturn