importing posts scss, moved to css dir 3

ColinB19 · Sep 9, 2024 · d75702f · d75702f
1 parent a212534
commit d75702f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/_includes/posts.html b/_includes/posts.html
@@ -1,5 +1,5 @@
 <div class="user-details">
-  <h1>Blog Posts</h1>
+  <h1 class="posts-header">Blog Posts</h1>
 </div>
 
 <section id="posts">
@@ -14,6 +14,7 @@ <h3>Gradient Descent from Scratch</h3>
     </div>
   </div>
 
+  <!-- Add more post-wrapper divs for additional posts -->
   <div class="post-wrapper">
     <div class="post-image">
       <img src="{{ "/assets/img/mountains.jpg" | prepend: site.baseurl }}" alt="Mountains"/>
@@ -25,5 +26,25 @@ <h3>Gradient Descent from Scratch</h3>
     </div>
   </div>
 
-  <!-- Add more .post-wrapper divs for additional posts -->
-</section>
+  <div class="post-wrapper">
+    <div class="post-image">
+      <img src="{{ "/assets/img/mountains.jpg" | prepend: site.baseurl }}" alt="Mountains"/>
+    </div>
+    <div class="post-content">
+      <h3>Gradient Descent from Scratch</h3>
+      <p>Have you ever wondered what makes gradient descent tick? Well check out my write-up on how to code it up from scratch in Python! You'll learn all the inner details of gradient descent so you can understand your favorite ML frameworks even better!</p>
+      <a class="project-link" href="{{ site.baseurl }}/2020-09-15-gradient-descent">Check it out</a>
+    </div>
+  </div>
+
+  <div class="post-wrapper">
+    <div class="post-image">
+      <img src="{{ "/assets/img/mountains.jpg" | prepend: site.baseurl }}" alt="Mountains"/>
+    </div>
+    <div class="post-content">
+      <h3>Gradient Descent from Scratch</h3>
+      <p>Have you ever wondered what makes gradient descent tick? Well check out my write-up on how to code it up from scratch in Python! You'll learn all the inner details of gradient descent so you can understand your favorite ML frameworks even better!</p>
+      <a class="project-link" href="{{ site.baseurl }}/2020-09-15-gradient-descent">Check it out</a>
+    </div>
+  </div>
+</section>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5011,7 +5011,7 @@ sup {
 
 .user-details {
     text-align: center;
-    margin: 10px auto
+    margin: 30px;
 }
 
 #projects {
@@ -5125,40 +5125,38 @@ body {
     color: #fff
 }
 
-/* Main container for posts */
+/* Grid Layout for Posts */
 #posts {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
+    gap: 20px; /* Space between grid items */
     width: 90%;
-    max-width: 1200px; /* Adjust as needed */
-    margin: 0 auto;
+    max-width: 1200px;
+    margin: 0 auto; /* Center the grid */
   }
 
-  /* Style for each post */
-  .post {
+  /* Styling for each post-wrapper */
+  .post-wrapper {
     border: 1px solid #ddd;
     border-radius: 5px;
     overflow: hidden;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     background-color: #fff;
+    padding: 10px;
+    text-align: center;
   }
 
-  .post img {
+  .post-image img {
     width: 100%;
     height: auto;
-    border-radius: 5px;
+    display: block;
   }
 
-  .post h3 {
+  .post-content h3 {
     margin-top: 10px;
-    margin-bottom: 10px;
+    font-size: 1.25rem;
   }
 
-  .post p {
+  .post-content p {
     margin-bottom: 10px;
-  }
-
+    font-size: 1rem;
+  }