Update footer

index.html

@@ -366,24 +366,30 @@ <h2 id="title">Typewriter Formatting</h2>
     </main>
 
     <footer>
-      <div>
-        <p><strong>Contact and Social</strong></p>
-        <a href="mailto:[email protected]" target="_blank" rel="noopener">Email</a>
-        <a href="http://www.linkedin.com/in/tylergordonhill" target="_blank" rel="noopener"
-          >LinkedIn</a
-        >
-        <a href="https://github.com/TyHil" target="_blank" rel="noopener">GitHub</a>
-        <a href="https://replit.com/@TylerGHill" target="_blank" rel="noopener">Replit</a>
-        <a href="https://thangs.com/TylerHill" target="_blank" rel="noopener">Thangs</a>
+      <div id="footer-main">
+        <div>
+          <p><strong>Contact and Social</strong></p>
+          <a href="mailto:[email protected]" target="_blank" rel="noopener">Email</a>
+          <a href="http://www.linkedin.com/in/tylergordonhill" target="_blank" rel="noopener"
+            >LinkedIn</a
+          >
+          <a href="https://github.com/TyHil" target="_blank" rel="noopener">GitHub</a>
+          <a href="https://replit.com/@TylerGHill" target="_blank" rel="noopener">Replit</a>
+          <a href="https://thangs.com/TylerHill" target="_blank" rel="noopener">Thangs</a>
+        </div>
+        <div>
+          <p><strong>Subsites</strong></p>
+          <a href="/set-operations-for-spotify">Set Operations for Spotify</a>
+          <a href="/typewriter-formatting">Typewriter Formatting</a>
+          <a href="/cah-maker">Cards Against Humanity Card Maker</a>
+          <a href="/response-display">Response Display</a>
+          <a href="/password-generator">Password Generator</a>
+          <a href="/recipes">Recipes</a>
+        </div>
       </div>
-      <div>
-        <p><strong>Subsites</strong></p>
-        <a href="/set-operations-for-spotify">Set Operations for Spotify</a>
-        <a href="/typewriter-formatting">Typewriter Formatting</a>
-        <a href="/cah-maker">Cards Against Humanity Card Maker</a>
-        <a href="/response-display">Response Display</a>
-        <a href="/password-generator">Password Generator</a>
-        <a href="/recipes">Recipes</a>
+      <div id="footer-sub">
+        <a href="/legal/privacy-policy">Privacy Policy</a>
+        <a href="/sitemap.xml">Sitemap</a>
       </div>
     </footer>
 

style.css

@@ -315,27 +315,38 @@ input[type='file']:focus-visible::file-selector-button {
 footer {
   padding: 2rem 1rem;
   background-color: var(--dark1);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+#footer-main {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   gap: 2rem;
 }
-footer div {
+#footer-main > div {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
 }
-footer div p {
+#footer-sub {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+footer p {
   margin-bottom: 0.25rem;
 }
-footer div a,
-footer div a:visited {
+footer a,
+footer a:visited {
   color: var(--light1);
   text-decoration-color: transparent;
   transition: text-decoration-color 200ms;
 }
-footer div a:hover {
+footer a:hover {
   text-decoration-color: var(--light1);
 }