modernizing nav design

app/globals.css

@@ -13,8 +13,9 @@ a {
   color: inherit;
   text-decoration: none;
 }
-a:hover {
+a:hover, .active{
   color: lightskyblue;
+  box-shadow: #262626 0.2rem 0.2rem 0.3rem inset;
 }
 
 * {
@@ -39,6 +40,14 @@ nav {
   box-shadow: #111111 0.3rem 0rem 1rem;
 }
 
+nav > a {
+  text-align: center;
+  border: #262626 solid 0.1rem;
+  border-radius: 1rem;
+  padding: 0.5rem;
+  box-shadow: #262626 0.2rem 0.2rem 0.3rem;
+}
+
 .social {
   display: flex;
   flex-direction: row;
@@ -52,7 +61,7 @@ nav {
   gap: 0.5rem;
   font-size: 12px;
   margin: 0;
-  padding: 0.3rem;
+  padding-bottom: 0.3rem;
   padding-top: 1.3rem;
 }
 
@@ -83,16 +92,23 @@ nav {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 0.3rem;
+  gap: 2rem;
   align-content: center;
 }
 
 .postContent {
-  padding-left: 0.3rem;
+  padding-left: 0.6rem;
-  padding-right: 0.3rem;
+  padding-right: 0.6rem;
   margin: 0;
   border: 0.1rem solid #34495E;
-  box-shadow: #111111 0.3rem 0.3rem 0.3rem;
+  box-shadow: #111111 0.3rem 0.3rem 0.3rem, #111111 0.1rem 0 0.3rem inset;
+}
+
+.date {
+  font-size: small;
+  padding-top: 0.3rem;
+  color: #95A5A6;
+  text-align: right;
 }
 
 .postParagraph {

app/page.js

@@ -25,6 +25,9 @@ export default async function Page({ children }) {
                                     </div>
                                 ))}
                             </div>
+                            <div className="date">
+                                {item.created.slice(0,-7)}
+                            </div>
                             {item.content.split(/\r?\n/).map((item, i) => (
                                 <p className="postParagraph" key={i}>
                                     {item}