Update layout for full flex-box with table fallback.

Fix up sort drop down css and html.
Resize nav bar.
Round some objects.
Add copyright messages.

base.css

@@ -1,10 +1,14 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 main{
-	padding-top: 90px;
+	padding-top: 70px;
 	padding-left: 6px;
 }
 .no-dec{
@@ -27,11 +31,14 @@ main{
     position: fixed;
     top: 0;
     width: 100%;
+    z-index: 100;
+    border-style: solid;
+    border-width: 0 0 2px;
 }
 .home-button, .sort-button{
     display: inline-block;
     width: 64px;
-    height: 82px;
+    height: 62px;
     overflow: hidden;
     text-align: center;
 }
@@ -40,7 +47,7 @@ main{
 }
 .home-button > div, .sort-button > div{
     display: inline;
-    font-size: 60px;
+    font-size: 48px;
     padding: 10px;
     vertical-align: middle;
 }
@@ -56,27 +63,62 @@ main{
     position: fixed;
     max-height: 0;
 }
-.so-pane > *{
+.so-pane > form > div{
+    display: table-row;
+    background-color: transparent;
+    box-sizing: inherit;
+    max-width: 100%;
+    width: 100%;
+}
+.so-pane > form > div > div, .so-pane > form > div > span{
+    background-color: transparent;
+    box-sizing: inherit;
+    padding: 2px;
+    text-align: center;
+    vertical-align: middle;
+}
+.so-pane > form > div > div{
+    display: table-cell;
+    max-width: 50%;
+    width: 50%;
+}
+.so-pane > form > div > span{
+    display: block;
+    max-width: 100%;
+    width: 100%;
+}
+.so-pane-full{
+    display: table-caption !important;
+    caption-side: bottom;
+}
+.so-pane > form > div > * > *{
+    max-width: 100%;
+    width: 100%;
     vertical-align: middle;
     font-size: 16px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+.so-pane > form > div > div > *{
     text-align: left;
-    padding: 2px;
 }
-.so-pane > label{
+.so-pane > form > div > div > label{
     background-color: transparent;
+    text-align: center;
 }
-.nav-menu, .sort-menu, .data-hold{
+.nav-menu, .sort-menu{
 	display: none;
 }
 .menu a{
     display: block;
-    padding: 32px 18px;
+    padding: 22px 18px;
 }
 .hmb{
     cursor: pointer;
     float: right;
 	background-color: transparent;
-    padding: 40px 20px;
+    padding: 30px 20px;
 }
 .hmb-line{
     display: block;
@@ -98,34 +140,63 @@ main{
 .hmb-line::after{
     top: -5px;
 }
-.nav-menu:checked ~ nav{
+.nav-menu:checked ~ nav, .nav-open{
     max-height: 100%;
 }
-.nav-menu:checked ~ .hmb .hmb-line{
+.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
     background: transparent;
 }
-.nav-menu:checked ~ .hmb .hmb-line::before{
+.nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{
     transform: rotate(-45deg);
     top:0;
 }
-.nav-menu:checked ~ .hmb .hmb-line::after{
+.nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{
     transform: rotate(45deg);
     top:0;
 }
-.sort-menu:checked ~ .so-pane{
+.sort-menu:checked ~ .so-pane, .so-pane-open{
     display: block;
+    z-index: 101;
     box-sizing: content-box;
     position: fixed;
-    top: 85px;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    padding: 4px;
     text-align: center;
+    top: 66px;
+    left: 136px;
+    max-height: 100%;
+    width: 230px;
+    height: auto;
+    -webkit-border-bottom-left-radius: 8px;
+    -webkit-border-bottom-right-radius: 8px;
+    -moz-border-radius-bottomleft: 8px;
+    -moz-border-radius-bottomright: 8px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    padding: 4px;
     border-style: solid;
-    border-width: 2px;
+    border-width: 0 2px 2px;
+    overflow: hidden;
 }
-.main-box{
+.sort-menu:checked ~ .so-pane > form, .so-pane-open > form{
+    display: table;
+    box-sizing: inherit;
+}
+.main-box > div, footer > p{
+    max-width: 100%;
+    margin: 3px 0;
+    padding: 2px;
+    box-sizing: content-box;
+}
+.item-table{
+    display: table;
+    box-sizing: content-box;
+    background-color: transparent;
+    -webkit-border-radius: 32px;
+    -moz-border-radius: 32px;
+    border-radius: 32px;
+    border-width: 1px;
+    border-style: solid;
+}
+.flex-col{
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -140,46 +211,17 @@ main{
     flex-direction: column;
     -webkit-align-content: center;
     align-content: center;
+    max-width: 100%;
     width: 100%;
-}
+    overflow: hidden;
-.main-box > div, footer > p{
-    margin: 3px 0;
-    padding: 2px;
-    box-sizing: content-box;
-}
-.item-table{
-    display: table;
-    width: 100%;
-    box-sizing: content-box;
-    background-color: transparent;
 }
 .item-table > div{
     display: table-row;
-    background-color: transparent;
     box-sizing: inherit;
-}
+    max-width: 100%;
-.item-table > div > div > div{
-    padding: 2px;
-}
-.item-table-caption{
-    display: table-caption !important;
-    caption-side: bottom;
-}
-.item-table-full, .item-table-360, .item-table-caption{
-    border-style: solid;
-    border-width: 1px;
-    background-color: transparent;
-    box-sizing: inherit;
-}
-.item-table-full{
-    display: table-cell;
-    vertical-align: top;
     width: 100%;
 }
-.item-table-360{
+.flex-row, .item-table > div{
-    display: none;
-}
-.image-box{
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -197,6 +239,33 @@ main{
     flex-wrap: wrap;
     -webkit-justify-content: center;
     justify-content: center;
+    max-width: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+.item-table > div > div > div{
+    padding: 2px;
+}
+.item-table-caption, .so-pane-caption{
+    display: table-caption !important;
+    caption-side: bottom;
+}
+.item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{
+    background-color: transparent;
+    box-sizing: inherit;
+}
+.item-table-full{
+    display: table-cell;
+    vertical-align: top;
+    width: 100%;
+}
+.item-table-360{
+    display: table-cell;
+    vertical-align: middle;
+    max-width: 360px;
+    width: 360px;
+    overflow: hidden;
+    text-align: center;
 }
 .image-box > a{
     border-style: solid;
@@ -204,22 +273,29 @@ main{
 	margin: 2px;
 }
 @media (min-width: 560px){
-    .main-box > div, footer > p{
+    .main-box > div{
-        margin: 5px;
+        padding: 12px;
     }
-    .item-table-360{
+    footer > p{
-        display: table-cell;
+        padding: 4px;
-        vertical-align: middle;
+    }
-        width: 360px;
+    .item-table > div{
-        overflow: hidden;
+        -ms-flex-wrap: nowrap;
+        -webkit-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+    }
+    .item-table-full{
+        max-width: -webkit-calc(100% - 361px);
+        max-width: -moz-calc(100% - 361px);
+        max-width: calc(100% - 361px);
+        width: -webkit-calc(100% - 361px);
+        width: -moz-calc(100% - 361px);
+        width: calc(100% - 361px);
     }
 	.image-box > a{
         border-width: 4px;
 	    margin: 10px;
     }
-    .small-only-row{
-        display: none !important;
-    }
 }
 @media (min-width: 640px){
     .nav{
@@ -239,3 +315,11 @@ main{
         display: none;
     }
 }
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .item-table-full, .item-table-360 {
+        display: block !important;
+    }
+    .item-table-caption{
+        display: block !important;
+    }
+}

dark.css

@@ -1,3 +1,7 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 body{
 	color: #f9f9f9;
 	background-color: #050506;
@@ -9,10 +13,10 @@ a{
 .header, .nav, footer, .so-pane{
 	background-color: #1d1d1e;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > *{
+.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
@@ -23,14 +27,12 @@ a{
 }
 .item-table{
 	background-color: #3f3f3f;
-}
-.so-pane{
-	border-color: #3f3f3f;
-}
-.item-table > div > div, .item-table-caption{
 	border-color: #f5deb3;
 }
-.image-box{
+.so-pane, .header{
+	border-color: #6f6f6f;
+}
+.image-box, .item-heading{
 	background-color: #4f4f4f;
 }
 .image-box > a{

index.go.html

@@ -7,9 +7,9 @@
     <title>City University Portfolio</title>
     <link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
     {{ if .Light }}
-    <link rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
+    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
     {{ else }}
-    <link rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
+    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
     {{ end }}
     <script src="{{ .Data.JScriptURL }}"></script>
 </head>
@@ -28,13 +28,15 @@
     {{ 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><img src="{{ .Data.SortImageLocation }}" width="64px" alt='&#8595;'></div></label>
-    <form class="so-pane" action="?" method="get" id="so-form">
+    <div class="so-pane" id="so-pane">
+    <form action="?" method="get" id="so-form">
         {{ if .Light }}
         <input id="so-theme" type="hidden" name="light" />
         {{ end }}
+        <div>
         {{ $sort := 0 }}
-        <label class="no-dec" for="so-order">Order by:</label>
+            <div><label class="no-dec" for="so-order">Order by:</label></div>
-        <select name="order" id="so-order">
+            <div><select name="order" id="so-order">
             {{ if eq .OrderStartDate 0 }}
             <option value="start">Start Date</option>
             {{ else }}
@@ -59,9 +61,11 @@
             <option value="duration" selected>Duration</option>
             {{ $sort = .OrderDuration }}
             {{ end }}
-        </select>
+            </select></div>
-        <label class="no-dec" for="so-sort">Sort:</label>
+        </div>
-        <select name="sort" id="so-sort">
+        <div>
+            <div><label class="no-dec" for="so-sort">Sort:</label></div>
+            <div><select name="sort" id="so-sort">
             {{ if gt $sort 0 }}
             <option value="asc" selected>Ascending</option>
             {{ else }}
@@ -72,9 +76,13 @@
             {{ else }}
             <option value="desc">Descending</option>
             {{ end }}
-        </select>
+            </select></div>
-        <input id="so-submit" type="submit" value="Commit">
+        </div>
+        <div class="so-pane-full">
+        <span><input id="so-submit" type="submit" value="Commit"></span>
+        </div>
     </form>
+    </div>
     <input class="nav-menu" type="checkbox" id="nav-menu"/>
     <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
     <nav class="nav" id="nav">
@@ -85,10 +93,10 @@
         </ul>
     </nav>
 </header>
-<main class="main-box">
+<main class="main-box flex-col">
     <div>
-        <div class="item-table">
+        <div class="item-table flex-col">
-            <div>
+            <div class="item-heading">
                 <div class="item-table-full">
                     <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
                 </div>
@@ -96,11 +104,6 @@
                     <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>
@@ -109,17 +112,12 @@
                     <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 }}
     <div>
-        <div class="item-table">
+        <div class="item-table flex-col">
-            <div>
+            <div class="item-heading">
                 <div class="item-table-full">
                     <div class="centered"><h1>{{ .Name }}</h1></div>
                 </div>
@@ -131,15 +129,6 @@
                     {{ 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>
@@ -157,23 +146,9 @@
                     </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">
+                <div class="image-box flex-row">
                     {{ range .GetImages }}
                     <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
                     {{ end }}
@@ -181,9 +156,11 @@
             </div>
             {{ end }}
         </div>
+        <!-- This needs to be moved into a script tag along with other stuff not here yet for JS support
         <div class="data-hold">{{ .GetInt64Duration }}</div>
         <div class="data-hold">{{ .GetStartDateHTML }}</div>
         <div class="data-hold">{{ .GetEndDateHTML }}</div>
+        -->
     </div>
     {{ end }}
 </main>

index.js

@@ -0,0 +1,4 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/

light.css

@@ -1,3 +1,7 @@
+/*
+This file is (C) Captain ALM
+Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+*/
 body{
     color: #060606;
     background-color: #fafaf9;
@@ -9,10 +13,10 @@ a{
 .header, .nav, footer, .so-pane{
     background-color: #e2e2e1;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > *{
+.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
@@ -23,14 +27,12 @@ a{
 }
 .item-table{
     background-color: #c0c0c0;
-}
-.so-pane{
-    border-color: #c0c0c0;
-}
-.item-table > div > div, .item-table-caption{
     border-color: #0a214c;
 }
-.image-box{
+.so-pane, .header{
+    border-color: #909090;
+}
+.image-box, .item-heading{
     background-color: #b0b0b0;
 }
 .image-box > a{

pageHandler/pages/index/data.go

@@ -3,18 +3,19 @@ package index
 import "html/template"
 
 type DataYaml struct {
-	HeaderLinks          map[string]template.URL `yaml:"headerLinks"`
+	HeaderLinks            map[string]template.URL `yaml:"headerLinks"`
-	CSSBaseURL           template.URL            `yaml:"cssBaseURL"`
+	CSSBaseURL             template.URL            `yaml:"cssBaseURL"`
-	CSSLightURL          template.URL            `yaml:"cssLightURL"`
+	CSSLightURL            template.URL            `yaml:"cssLightURL"`
-	CSSDarkURL           template.URL            `yaml:"cssDarkURL"`
+	CSSDarkURL             template.URL            `yaml:"cssDarkURL"`
-	JScriptURL           template.URL            `yaml:"jScriptURL"`
+	JScriptURL             template.URL            `yaml:"jScriptURL"`
-	NoVideoImageLocation template.URL            `yaml:"noVideoImageLocation"`
+	PlayVideoImageLocation template.URL            `yaml:"playVideoImageLocation"`
-	LogoImageLocation    template.URL            `yaml:"logoImageLocation"`
+	NoVideoImageLocation   template.URL            `yaml:"noVideoImageLocation"`
-	SunImageLocation     template.URL            `yaml:"sunImageLocation"`
+	LogoImageLocation      template.URL            `yaml:"logoImageLocation"`
-	MoonImageLocation    template.URL            `yaml:"moonImageLocation"`
+	SunImageLocation       template.URL            `yaml:"sunImageLocation"`
-	SortImageLocation    template.URL            `yaml:"sortImageLocation"`
+	MoonImageLocation      template.URL            `yaml:"moonImageLocation"`
-	About                AboutYaml               `yaml:"about"`
+	SortImageLocation      template.URL            `yaml:"sortImageLocation"`
-	Entries              []EntryYaml             `yaml:"entries"`
+	About                  AboutYaml               `yaml:"about"`
+	Entries                []EntryYaml             `yaml:"entries"`
 }
 
 func (dy DataYaml) GetHeaderLabels() []string {