base.css

@@ -14,7 +14,6 @@ main{
 	list-style: none;
 }
 .header{
-    box-shadow: 1px 1px 5px 0px;
     position: fixed;
     top: 0;
     width: 100%;
@@ -48,7 +47,6 @@ main{
     height: 2px;
     position: relative;
     width: 24px;
-
 }
 .hmb-line::before, .hmb-line::after{
     content: '';
@@ -78,15 +76,43 @@ main{
     transform: rotate(45deg);
     top:0;
 }
-.flex-main{
+.main-table{
-  display: flex;
-  flex-direction: column;
-}
-.box-main{
     display: table;
     width: 100%;
-	margin: 1px;
+}
-	align-self: center;
+.main-table > div{
+    display: table-row;
+    background-color: transparent;
+}
+.main-table > div > div{
+    display: table-cell;
+    padding: 3px 0;
+    border-style: solid;
+    border-width: 1px;
+}
+.item-table{
+    display: table;
+    width: 100%;
+    background-color: transparent;
+}
+.item-table > div{
+    display: table-row;
+    background-color: transparent;
+}
+.item-table-full, .item-table-half, .item-table-480{
+    display: table-cell;
+    border-style: solid;
+    border-width: 1px;
+    background-color: transparent;
+}
+.item-table-full{
+    width: 100%;
+}
+.item-table-half{
+    width: 50%;
+}
+.item-table-480{
+    width: 480px;
 }
 @media (min-width: 480px){
     .nav{
@@ -101,12 +127,11 @@ main{
     }
     .menu a:hover{
         background-color: transparent;
-
     }
     .hmb{
         display: none;
     }
-	.box-main{
+    .main-table > div > div{
-		margin: 5px 10px;
+        padding: 5px;
     }
 }

dark.css

@@ -12,9 +12,6 @@ body{
 .home-button:hover{
 	background-color: #606061;
 }
-.header{
-	box-shadow-color: #696969;
-}
 .menu a{
     color: #e0e0e0;
 }
@@ -27,3 +24,13 @@ body{
 .hmb-line, .hmb-line::before, .hmb-line::after{
     background: #e0e0e0;
 }
+.main-table{
+	border-color: wheat;
+	background-color: #1d1d1e;
+}
+.main-table > div > div{
+	border-color: wheat;
+}
+.item-table > div > div{
+	border-color: whitesmoke;
+}

index.go.html

@@ -26,7 +26,29 @@
         </ul>
     </nav>
 </header>
-<main>
+<main class="main-table">
+    <div>
+        <div>
+            <div class="item-table">
+                <div>
+                    <div class="item-table-half">
+                        <h1>{{ .Data.About.Title }}</h1>
+                    </div>
+                    <div class="item-table-half">
+                        <h1>Email:</h1> <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a>
+                    </div>
+                </div>
+                <div>
+                    <div class="item-table-full">
+                        {{ .Data.About.GetContent }}
+                    </div>
+                    <div class="item-table-480">
+                        <a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="Image of Me." width="480px"></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </main>
 </body>
 </html>

pageHandler/pages/index/about.go

@@ -2,6 +2,8 @@ package index
 
 import (
 	"html/template"
+	"strconv"
+	"strings"
 	"time"
 )
 
@@ -15,7 +17,7 @@ type AboutYaml struct {
 }
 
 func (ay AboutYaml) GetContent() template.HTML {
-	return template.HTML(ay.Content)
+	return template.HTML(strings.ReplaceAll(strings.ReplaceAll(ay.Content, "#age#", strconv.Itoa(ay.GetAge())), "#birth#", strconv.Itoa(ay.BirthYear)))
 }
 
 func (ay AboutYaml) GetAge() int {