From 98b1380d2af29d6f8d43c263d9e0b3801555740c Mon Sep 17 00:00:00 2001
From: Captain ALM <captainalm@captainalm.com>
Date: Tue, 26 Jul 2022 22:13:09 +0100
Subject: [PATCH] Switch main to flex box.

---
 base.css      | 27 ++++++++++++++-
 dark.css      |  2 +-
 index.go.html | 94 +++++++++++++++++++++++----------------------------
 3 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/base.css b/base.css
index 0270cbd..0eed3e6 100644
--- a/base.css
+++ b/base.css
@@ -79,6 +79,28 @@ main{
     transform: rotate(45deg);
     top:0;
 }
+.main-box{
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-align-content: center;
+    align-content: center;
+    width: 100%;
+}
+.main-box > div{
+    margin: 3px 0;
+    padding: 2px;
+    box-sizing: content-box;
+}
 .main-table{
     display: table;
     width: 100%;
@@ -114,7 +136,7 @@ main{
     padding: 2px;
 }
 .item-table-caption{
-    display: table-caption;
+    display: table-caption !important;
     caption-side: bottom;
 }
 .item-table-full, .item-table-360, .item-table-caption{
@@ -156,6 +178,9 @@ main{
 	margin: 2px;
 }
 @media (min-width: 480px){
+    .main-box > div{
+        margin: 5px;
+    }
     .main-table > div > div > div{
         margin: 5px;
     }
diff --git a/dark.css b/dark.css
index cabd55b..d9c8428 100644
--- a/dark.css
+++ b/dark.css
@@ -27,7 +27,7 @@ a{
 .hmb-line, .hmb-line::before, .hmb-line::after{
     background: #e0e0e0;
 }
-.main-table{
+.main-table, .main-box{
 	background-color: #0f0f0f;
 }
 .item-table > div > div, .item-table-caption{
diff --git a/index.go.html b/index.go.html
index ddef6ce..88c68d1 100644
--- a/index.go.html
+++ b/index.go.html
@@ -26,69 +26,61 @@
         </ul>
     </nav>
 </header>
-<main class="main-table">
+<main class="main-box">
     <div>
-        <div>
+        <div class="item-table">
             <div>
-                <div class="item-table">
-                    <div>
-                        <div class="item-table-full">
-                            <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
-                        </div>
-                        <div class="item-table-360">
-                            <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>{{ .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>
-                    </div>
+                <div class="item-table-full">
+                    <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
+                </div>
+                <div class="item-table-360">
+                    <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>{{ .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>
             </div>
         </div>
     </div>
     {{ range .Data.Entries }}
     <div>
-        <div>
+        <div class="item-table">
             <div>
-                <div class="item-table">
-                    <div>
-                        <div class="item-table-full">
-                            <div class="centered"><h1>{{ .Name }}</h1></div>
-                        </div>
-                        <div class="item-table-360">
-                            {{ 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>{{ .GetContent }}</div>
-                        </div>
-                        <div class="item-table-360">
-                            <div><video controls="" width="360">
-                                <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
-                            </video></div>
-                        </div>
-                    </div>
-                    {{ if not (eq .GetImageCount 0) }}
-                    <div class="item-table-caption">
-                        <div class="image-box">
-                            {{ range .GetImages }}
-                            <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
-                            {{ end }}
-                        </div>
-                    </div>
+                <div class="item-table-full">
+                    <div class="centered"><h1>{{ .Name }}</h1></div>
+                </div>
+                <div class="item-table-360">
+                    {{ 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>{{ .GetContent }}</div>
+                </div>
+                <div class="item-table-360">
+                    <div><video controls="" width="360">
+                        <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
+                    </video></div>
+                </div>
+            </div>
+            {{ if not (eq .GetImageCount 0) }}
+            <div class="item-table-caption">
+                <div class="image-box">
+                    {{ range .GetImages }}
+                    <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
+                    {{ end }}
+                </div>
+            </div>
+            {{ end }}
         </div>
     </div>
     {{ end }}