base.css

@@ -21,18 +21,18 @@ main{
     top: 0;
     width: 100%;
 }
-.home-button{
+.home-button, .sort-button{
     display: inline-block;
-    width: 76px;
+    width: 64px;
     height: 82px;
     overflow: hidden;
+    text-align: center;
 }
-.home-button > div{
+.home-button > div, .sort-button > div{
     display: inline;
     font-size: 60px;
-    padding: 12px 8px;
+    padding: 10px;
     vertical-align: middle;
-    text-align: center;
 }
 .nav{
     width: 100%;
@@ -40,7 +40,7 @@ main{
     overflow: hidden;
 	max-height: 0;
 }
-.nav-menu{
+.nav-menu, .sort-menu, .duration-hold{
 	display: none;
 }
 .menu a{
@@ -104,7 +104,7 @@ main{
     align-content: center;
     width: 100%;
 }
-.main-box > div{
+.main-box > div, footer > p{
     margin: 3px 0;
     padding: 2px;
     box-sizing: content-box;
@@ -166,7 +166,7 @@ main{
 	margin: 2px;
 }
 @media (min-width: 540px){
-    .main-box > div{
+    .main-box > div, footer > p{
         margin: 5px;
     }
     .item-table-360{

dark.css

@@ -12,7 +12,7 @@ a{
 .home-button > div, .menu a{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button div, .sort-menu:checked ~ .sort-button div{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{

index.go.html

@@ -26,6 +26,8 @@
     <a href="?light&{{ .Parameters }}" class="home-button no-dec"><div><b>&#9737;</b></div></a>
     {{ end }}
     {{ end }}
+    <input class="sort-menu" type="checkbox" id="sort-menu"/>
+    <label class="sort-button no-dec" for="sort-menu"><div><b>&#8595;</b></div></label>
     <input class="nav-menu" type="checkbox" id="nav-menu"/>
     <label class="hmb" for="nav-menu"><span class="hmb-line"></span></label>
     <nav class="nav">
@@ -93,6 +95,7 @@
             </div>
             {{ end }}
         </div>
+        <div class="duration-hold">{{ .GetInt64Duration }}</div>
     </div>
     {{ end }}
 </main>

light.css

@@ -12,7 +12,7 @@ a{
 .home-button > div, .menu a{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button div, .sort-menu:checked ~ .sort-button div{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{

pageHandler/pages/index/entry.go

@@ -55,6 +55,10 @@ func (ey EntryYaml) GetDuration() time.Duration {
 	return ey.GetEndTime().Sub(ey.StartDate.Time).Truncate(time.Second)
 }
 
+func (ey EntryYaml) GetInt64Duration() int64 {
+	return int64(ey.GetDuration())
+}
+
 func (ey EntryYaml) GetImageCount() int {
 	return int(math.Min(math.Min(float64(len(ey.ThumbnailLocations)), float64(len(ey.ImageLocations))), float64(len(ey.ImageAltTexts))))
 }