css and posts

static/style.css

@@ -12,18 +12,109 @@
   text-align: center;
 }
 
-header {
-  background-color: transparent;
-  border-bottom: 1px solid whitesmoke;
-  padding: 1rem 1rem;
+#navbar {
+  display: flex;
+  background: #000;
+  border: 1px solid whitesmoke;
+  border-radius: 32px;
+  padding: 10px 20px;
+  margin: 0 auto;
+  width: 95%;
+  justify-content: space-between;
+  align-items: center;
+
+  position: fixed;
+  top: 10;
+  left: 0;
+  right: 0;
+  z-index: 9999;
 }
 
-nav {
-  display: flex; /* Aligns logo and menu horizontally */
-  justify-content: space-between; /* Pushes logo to left, menu to right */
-  align-items: center;
-  max-width: 1000px;
-  margin: 0 auto; /* Centers the header content */
+@keyframes hoverShadow {
+  0% {
+    text-shadow: none;
+    box-shadow: none;
+  }
+  50% {
+    text-shadow: 
+      -6px -3px cornflowerblue, 
+      6px 3px orangered;
+    box-shadow:
+      -6px -3px cornflowerblue, 
+      6px 3px orangered;
+  }
+}
+
+img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+}
+
+.postpreview {
+  border: 1px solid whitesmoke;
+  border-radius: 32px;
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  background-color: linear-gradient(150deg, #222, #040404);
+  text-align: center;
+
+}
+
+.postpreview:hover {
+  /* border: 10px solid whitesmoke;
+  background-color: yellow;
+  font-size: 18px; */
+  background-color: linear-gradient(330deg, #222, #040404);
+  animation: hoverShadow 0.4s linear ;
+}
+
+a {
+  text-decoration: none;
+}
+
+.hover-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.hover-underline::after,
+.hover-underline::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, cornflowerblue, orangered);
+  bottom: -5px;
+  left: 0;
+
+.hover-underline::before {
+  top: -5px;
+  transform-origin: left;
+}
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.2s linear;
+}
+
+.hover-underline:hover::after,
+.hover-underline:hover::before {
+  transform: scaleX(1);
+}
+
+.content {
+  width: 80%;
+  margin: auto;
+}
+
+.content p {
+  text-align: left;
+}
+
+.content li {
+  text-align: left;
 }
 
 nav ul {
@@ -34,18 +125,6 @@ nav ul {
   padding: 0;
 }
 
-#name {
-  text-align: center;
-  font-size: 5rem;
-  margin: 20px;
-  padding: 0px;
-  animation: nameShadow 5s linear infinite;
-  letter-spacing: 2px;
-  color: whitesmoke;
-  font-family: "Ethnocentric", sans-serif;
-  transform: skewX(-20deg);
-}
-
 @keyframes nameShadow {
   0% {
     text-shadow: none;
@@ -57,7 +136,20 @@ nav ul {
   }
 }
 
+#name {
+  font-size: 5rem;
+  margin: 20px;
+  padding: 0px;
+  animation: nameShadow 5s linear infinite;
+  letter-spacing: 2px;
+  color: whitesmoke;
+  font-family: "Ethnocentric", sans-serif;
+  transform: skewX(-20deg);
+  text-align: center;
+}
+
 body {
   min-height: 100vh;
   background-image: linear-gradient(330deg, #222, #040404);
 }
+