trying to add posts 17

ColinB19 · Sep 8, 2024 · e5a3e9b · e5a3e9b
1 parent 5f675f9
commit e5a3e9b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 32 deletions.
diff --git a/_includes/posts.html b/_includes/posts.html
@@ -1,4 +1,4 @@
-<div class="user-details">
+<!-- <div class="user-details">
   <h1> Blog Posts</h1>
 </div>
 <div id="posts">
@@ -23,4 +23,24 @@ <h3> Another Blog Post </h3>
     <a class="project-link" href="{{ post_url 'another-post-date' }}">Check it out</a>
   </div>
 </div>
+</div> -->
+
+<div class="user-details">
+  <h1>Blog Posts</h1>
 </div>
+<div id="posts">
+  <div class="post">
+    <img alt="mountains" src="{{ "/assets/img/mountains.jpg" | prepend: site.baseurl }}" />
+    <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="{{ post_url '2020-09-15-gradient-descent' }}">Check it out</a>
+  </div>
+  <div class="post">
+    <img alt="mountains" src="{{ "/assets/img/mountains.jpg" | prepend: site.baseurl }}" />
+    <h3>Another Blog Post</h3>
+    <p>Here's another example of a blog post. This description provides some insights into the content of this post.</p>
+    <a class="project-link" href="{{ post_url '2020-09-17-vector-calculus' }}">Check it out</a>
+  </div>
+  <!-- Add more posts here as needed -->
+</div>
+
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5127,39 +5127,61 @@ body {
 
 #posts {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns, adjusts to fit */
-    gap: 20px; /* Space between grid items */
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
     width: 90%;
-    max-width: 960px;
+    max-width: 1200px; /* Adjust as needed */
     margin: 0 auto;
-}
-
-.user-posts {
-    margin: 20px auto;
-}
-
-.user-posts img {
-    display: block;
+  }
+
+  .user-details {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .post {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #fff;
+  }
+
+  .post img {
     width: 100%;
     height: auto;
     border-radius: 5px;
-}
-
-.user-posts h5,
-body {
-    margin: 0;
-}
-
-.user-posts p {
-    margin-right: 5px;
-}
-
-.image-center {
-    img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 5px;
-        display: block;
-        margin: 0 auto; /* Center the image */
-    }
-}
+  }
+
+  .post h3 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .post p {
+    margin-bottom: 10px;
+  }
+
+  .project-link {
+    display: inline-block;
+    margin: 10px 0;
+    padding: 5px;
+    color: #1a222c;
+    background-color: transparent;
+    border: 1px solid #1a222c;
+    border-radius: 10px;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
+  }
+
+  .project-link:hover,
+  .project-link:active {
+    background-color: #54516a;
+    border-color: #54516a;
+    color: #fff;
+  }