feat: app is complete however needs styling

keynotes.app/public/css/style.css

@@ -75,10 +75,44 @@ h6 {
   isolation: isolate;
 }
 
+a {
+  text-decoration: none;
+}
+
+nav {
+  font-size: 1.5rem;
+  margin: 1em 0 2em;
+}
+
+nav > ul {
+  list-style: none;
+}
+
+ul {
+  padding: 0;
+  margin: auto;
+  justify-content: space-around;
+  max-width: 80vw;
+}
+
+ul > li {
+  display: inline-block;
+  text-align: center;
+}
+
+form {
+  width: 100%;
+  max-width: 50vw;
+}
+
 .flex {
   display: flex;
 }
 
+.col {
+  flex-direction: column;
+}
+
 .container.flex.hero {
   align-items: center;
   justify-content: center;
@@ -98,6 +132,14 @@ h6 {
   padding: 1em;
 }
 
+.center-horizontal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
 .hero__heading {
   margin: 0;
   font-size: var(--mobile-heading-font-size);
@@ -138,7 +180,84 @@ h6 {
   flex-wrap: wrap;
 }
 
+.feed-heading {
+  margin-left: 1em;
+  text-transform: capitalize;
+}
+
+.feed-heading span {
+  text-transform: initial;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1em;
+  padding: 2em;
+  grid-auto-flow: dense;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.grid-item.card {
+  border: 1px solid black;
+  text-align: center;
+  padding: 1.5em 1.5em 0.5em;
+}
+
+.grid__card__metadata {
+  font-size: 0.8em;
+  justify-content: space-between;
+}
+
+.card .card__message {
+  margin-bottom: 1em;
+}
+
+.form-item {
+  flex-direction: column;
+  width: 100%;
+}
+
+/*.active__underline {*/
+/**/
+/*}*/
+
+.hover__underline {
+  /*display: inline-block;*/
+  position: relative;
+}
+
+.red {
+  color: red;
+}
+
+.hover__underline::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: black;
+  transform-origin: bottom left;
+  transition: transform 0.25s ease-out;
+}
+
+.hover__underline:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
 @media only screen and (min-width: 750px) {
+  ul {
+    max-width: 60vw;
+  }
   .hero__heading {
     margin: 0;
     font-size: var(--desktop-heading-font-size);
@@ -159,8 +278,11 @@ h6 {
   #main > .container.flex {
     gap: 10em;
   }
-
-  .form-item > .btn {
-    max-width: 200px;
+  .grid__span_two {
+    grid-column-end: span 2;
   }
+
+  /*.form-item > .btn {*/
+  /*  max-width: 200px;*/
+  /*}*/
 }