Finished layout for footer

public/css/style.css

@@ -70,38 +70,60 @@ nav {
   align-items: center;
   justify-content: space-between;
 }
-
+nav > * {
+  width: 33.33%;
+}
 .nav-logo > img {
   width: 64px;
   height: 64px;
 }
-
 .nav-title {
-  display: flex;
   align-items: center;
+}
+.nav-hyperlinks, .nav-title {
+  display: flex;
   flex-direction: column;
 }
-.nav-title > ul {
+.nav-hyperlinks {
+  align-items: end;
+}
+.nav-hyperlinks > ul {
   list-style: none;
   margin: 0.5rem 0;
   padding: 0;
 }
-.nav-title > ul > li {
+.nav-hyperlinks > ul > li {
   display: inline;
   float: left;
 }
-.nav-title > ul > li > a {
+.nav-hyperlinks > ul > li > a {
   padding: 0 1rem;
 }
+.nav-hyperlinks a {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+}
+.nav-hyperlinks a:hover {
+  color: rgba(var(--black), .86);
+}
+.nav-hyperlinks ion-icon {
+  font-size: 28px;
+}
 
-.nav-socials > a > ion-icon {
-  color: rgba(var(--lightblue), .86);
-  background-color: rgba(var(--brown), .86);
-  border-radius: 100%;
-  border: var(--borders);
-  box-sizing: content-box;
-  padding: 0.5rem;
-  margin: 1rem 0.5rem;
+.nav-hyperlinks a span {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 0;
+  transition: max-width 0.25s linear;
+  margin-left: 0.25rem;
+}
+
+.nav-hyperlinks a:hover span {
+  max-width: 100px;
 }
 
 .flex-adaptive {
@@ -114,17 +136,81 @@ nav {
 
 footer {
   padding: 3rem 1.5rem;
+  color: rgba(var(--black), .86);
+}
+footer a {
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+}
+footer a:hover {
+  color: rgba(var(--black), .86);
 }
 footer h3 {
   font-size: 2rem;
 }
+footer h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+}
+footer p {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.85rem;
+  color: rgba(var(--black), .52);
+}
 footer > div {
   display: flex;
   flex-direction: column;
+  justify-content: space-around;
   width: 100%;
 }
 footer > div > * {
-  width: 50%;
+  width: 100%;
+  text-align: center;
+}
+footer > div > :last-child {
+  margin-top: 1rem;
+}
+footer ul {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+footer ul li {
+  margin: 0.5rem 0;
+}
+footer ul li:first-child {
+  margin-top: 0;
+}
+footer ul li:last-child {
+  margin-bottom: 0;
+}
+.footer-socials > a > ion-icon {
+  color: rgba(var(--lightblue), .86);
+  background-color: rgba(var(--brown), .86);
+  border-radius: 100%;
+  border: var(--borders);
+  box-sizing: content-box;
+  padding: 0.5rem;
+  margin: 0 0.5rem;
+}
+.footer-socials > a:first-child > ion-icon {
+  margin-left: 0;
+}
+.footer-socials > a:last-child > ion-icon {
+  margin-right: 0;
+}
+.footer-links {
+  display: flex;
+  text-align: center;
+  margin: 1rem 0 0 0;
+}
+.footer-links > * {
+  flex-grow: 1;
+}
+.footer-links > :last-child {
+  margin-left: rem;
 }
 
 /* -xs */
@@ -147,14 +233,23 @@ footer > div > * {
   .flex-adaptive {
     flex-direction: row;
   }
+  footer ul {
+    width: fit-content;
+  }
   footer > div {
     flex-direction: row;
   }
-  footer > div > :first-child {
-    text-align: left;
+  footer > div > * {
+    width: fit-content;
+  }
+  footer > div > *:first-child {
+    text-align: start;
   }
   footer > div > :last-child {
-    text-align: right;
+    margin-top: 0;
+  }
+  .footer-links {
+    text-align: start;
   }
 }
 /* -lg */