corrected issues with the post preview. Duplicated lines of margin

Hopelezz · Aug 15, 2022 · 539306c · 539306c
1 parent 9366e2d
commit 539306c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -6,7 +6,7 @@ import Dark from '../components/darkmode.astro';
 const posts = await getSearchData();
 ---
 
-<div class="brand nav">
+<div class="nav">
     <div class="logoContainer">
         <a href="/" class="logo">
             <!-- <img src='../assets/LOGO.svg' width={90} height={90} alt='Logo' /> -->
@@ -75,9 +75,11 @@ h2 a{
 .menu ul li a{
     text-decoration: none;
 }
+
 .menu ul .active{
     font-weight: 600;
 }
+
 @media (max-width: 930px) {
     .menu{
         height: 100%;
@@ -86,6 +88,10 @@ h2 a{
     .hamburger{
         display: none;
     }
+    .nav{
+        display: flex;
+        justify-content: space-between;
+    }
 }
 @media (max-width:560px) {
     .logoContainer{

diff --git a/src/components/blog/PostPreview.astro b/src/components/blog/PostPreview.astro
@@ -13,7 +13,7 @@ const tag = tags.split(",")[0]; // returns the first tag
 
 ---
 <!--Article-->
-<div class="details">
+<div class="postContainer">
     <a href={post.url}>
     <article class='postCard'>
         <div class="coffee">
@@ -33,6 +33,15 @@ const tag = tags.split(",")[0]; // returns the first tag
 
 <style>
 /*----------------Section--------------*/
+.postContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    /* margin: 0     auto; */
+    /* width: 100%; */
+    /* height: 25% */
+}
 .postCard {
     flex-basis: var(--size-content-1);
     display: flex;
@@ -42,12 +51,10 @@ const tag = tags.split(",")[0]; // returns the first tag
     padding: var(--size-4);
     border-radius: var(--radius-3);
     box-shadow: var(--shadow-3);
-    margin: var(--size-5);
+    margin: var(--size-3);
     border: 1px solid var(--brand);
     width: 500px;
     height: 200px;
-    margin: 25px;
-    padding: 20px;
     transition: all 0.3s ease-in-out;
 }
 
@@ -113,8 +120,9 @@ a {
 @media (max-width: 768px) {
     .postCard {
         display: flex;
-        flex-direction: column;
-        width: 460px;
+        /* flex-direction: column; */
+        /* width: 100%; */
+        margin-left: 10%;
     }
     .postCard:pointer {
         box-shadow: var(--shadow-4);

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -51,7 +51,8 @@ const permalink = '#';
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-content: flex-start;
-	margin-top: 3.5rem;
+	height: fit-content;
+	margin-top: 4rem;
 }
 
 </style>