Update to use new style elements.

4 files changed, 30 insertions, 22 deletions

diff --git a/html/main/about.tmpl.html b/html/main/about.tmpl.html
index 69caeb1..e749b4d 100644
--- a/html/main/about.tmpl.html
+++ b/html/main/about.tmpl.html
@@ -4,19 +4,21 @@
 {{ define "canonical" }}/about{{end}}
 
 {{ define "main" }}
-    <h1>alexscerba.com<wbr>/about</h1>
-    <section class="postContent">
-    <h2>About</h2>
-    <figure>
-        <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory.">
-        <figcaption>Highschool senior photo.</figcaption>
-    </figure>
-    <p>My name is Alex Scerba, and I am a design student at the College for Creative Studies in Detroit, MI.</p>
-    <blockquote>"It's just a machine. Open it up and see what's wrong."</blockquote>
-    <p>This phrase is mostly what my life revolves around. Tinkering, making, repairing, and improving the world through these outlets is what I strive to do in my lifetime.</p>
-    <p>This site is my anti social media and is where I post about my life and school projects &lpar;when allowed&rpar; and serves as a way to keep up with my appreciation for software programming. The backend is written in <a href="https://go.dev" target="_blank" rel="noopener noreferrer">Go</a> &lpar;source can be found <a href="https://notabug.org/thinkpadmaster/alexscerba.com" target="_blank" rel="noopener noreferrer">at notabug.org</a>&rpar; and uses a templating system to keep hand-editing of pages to a bare minimum.</p>
-    <p>I keep my <a href="https://old.alexscerba.com" target="_blank" rel="noopener noreferrer">old site</a> hosted for posterity. The blog page and others are extremely slow to load due to amount of content on the pages and size of images, but it is a fun project to look back on.</p>
-    <p>My friend Ángel Castañeda has also been working on a site built in Go at the same time. Check it out at <a href="https://www.angel-castaneda.com" target="_blank" rel="noopener noreferrer">www.angel-castaneda.com</a></p>
-    <p>Contact me at <a href="mailto:ascerba@collegeforcreativestudies.edu">ascerba@collegeforcreativestudies.edu</a></p>
+    <h1>About</h1>
+    <section class="postBackground">
+      <div class="postContent">
+        <h2>Me and This Website</h2>
+        <figure>
+          <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory.">
+          <figcaption>Highschool senior photo.</figcaption>
+        </figure>
+        <p>My name is Alex Scerba, and I am a design student at the College for Creative Studies in Detroit, MI.</p>
+        <blockquote>"It's just a machine. Open it up and see what's wrong."</blockquote>
+        <p>This phrase is mostly what my life revolves around. Tinkering, making, repairing, and improving the world through these outlets is what I strive to do in my lifetime.</p>
+        <p>This site is my anti social media and is where I post about my life and school projects &lpar;when allowed&rpar; and serves as a way to keep up with my appreciation for software programming. The backend is written in <a href="https://go.dev" target="_blank" rel="noopener noreferrer">Go</a> &lpar;source can be found <a href="https://notabug.org/thinkpadmaster/alexscerba.com" target="_blank" rel="noopener noreferrer">at notabug.org</a>&rpar; and uses a templating system to keep hand-editing of pages to a bare minimum.</p>
+        <p>I keep my <a href="https://old.alexscerba.com" target="_blank" rel="noopener noreferrer">old site</a> hosted for posterity. The blog page and others are extremely slow to load due to amount of content on the pages and size of images, but it is a fun project to look back on.</p>
+        <p>My friend Ángel Castañeda has also been working on a site built in Go at the same time. Check it out at <a href="https://www.angel-castaneda.com" target="_blank" rel="noopener noreferrer">www.angel-castaneda.com</a></p>
+        <p>Contact me at <a href="mailto:ascerba@ccsdetroit.edu">ascerba@ccsdetroit.edu</a></p>
+      </div>
     </section>
 {{ end }}
\ No newline at end of file
diff --git a/html/main/blog.tmpl.html b/html/main/blog.tmpl.html
index 055d2ec..989743c 100644
--- a/html/main/blog.tmpl.html
+++ b/html/main/blog.tmpl.html
@@ -4,12 +4,14 @@
 {{ define "canonical" }}/blog{{end}}
 
 {{ define "main" }}
-    <h1>alexscerba.com<wbr>/blog</h1>
+    <h1>Blog</h1>
 
-    <section class="postContent">
-      <h2>Entries</h2>
+    <section class="postBackground">
+      <div class="postContent">
+        <h2>Entries</h2>
 {{ range .Posts.Contents}}
         <p>- <a href="/blog/{{ .FileName }}">{{ .Title }}</a></p>
 {{ end }}
+      </div>
     </section>
 {{ end }}
\ No newline at end of file
diff --git a/html/main/index.tmpl.html b/html/main/index.tmpl.html
index e30fefb..6760fae 100644
--- a/html/main/index.tmpl.html
+++ b/html/main/index.tmpl.html
@@ -5,8 +5,10 @@
 {{ define "main" }}
     <h1 style="animation: 1s ease-out 0s 1 fadeIn">alexscerba.com</h1>
     <div class="frontpage-subtitle" style="animation: 1s ease-out 0s 1 fadeIn">
-      <p>My place to:</p>
-      <p><strong>showcase design projects.<br>post life updates.<br>bulid web-development skills.</strong></p>
+      <div class="subtitle-text">
+        <p>My place to:</p>
+        <p><strong>showcase design projects.<br>post life updates.<br>bulid web-development skills.</strong></p>
+      </div>
     </div>
     <section class="bottom">
       <h2>Latest Design Projects</h2>
diff --git a/html/main/projects.tmpl.html b/html/main/projects.tmpl.html
index 9afc81d..18ad060 100644
--- a/html/main/projects.tmpl.html
+++ b/html/main/projects.tmpl.html
@@ -4,10 +4,11 @@
 {{ define "canonical" }}/projects{{end}}
 
 {{ define "main" }}
-    <h1>alexscerba.com<wbr>/projects</h1>
+    <h1>Projects</h1>
 
-    <section class="projectList">
-      <h2>Completed</h2>
+    <section class="postBackground">
+      <div class="projectList">
+        <h2>Completed</h2>
 {{ range .Posts.Contents }}
         <figure class="thumbnail">
           <a href="/projects/{{ .FileName }}">
@@ -16,5 +17,6 @@
           </a>
         </figure>
 {{ end }}
+      </div>
     </section>
 {{ end }}
\ No newline at end of file