From 3cc301e99f50fd2cb0d0f85400c1dd91f3fd7635 Mon Sep 17 00:00:00 2001
From: vicky <vzhong2021@gmail.com>
Date: Mon, 5 Feb 2024 23:07:22 -0800
Subject: [PATCH] Updates blog listing page /blog/ to match figma

---
 _includes/blog-preview-card-small.html |  17 ++++
 _includes/blog-preview-card.html       |  26 +++---
 _sass/_post.scss                       | 118 +++++++++++++++++++++++--
 blog.html                              |  39 ++++----
 4 files changed, 160 insertions(+), 40 deletions(-)
 create mode 100644 _includes/blog-preview-card-small.html

diff --git a/_includes/blog-preview-card-small.html b/_includes/blog-preview-card-small.html
new file mode 100644
index 00000000..43ca920d
--- /dev/null
+++ b/_includes/blog-preview-card-small.html
@@ -0,0 +1,17 @@
+<a href={{post.url}}>
+  <div class="post-card small-post-card">
+    <img
+      class="post-card--image small-post-card--image"
+      src="{{site.baseurl}}/{{post.image}}"
+      alt="{{post.alt}}"
+    />
+    <div class="post-card--description" type="small">
+      <hr />
+      <h4>
+        <span>{{post.category}}</span> | {{post.date | date: "%b %-d, %Y"}}
+      </h4>
+      <h1>{{post.title}}</h1>
+      <h2>by {{post.author}}</h2>
+    </div>
+  </div>
+</a>
diff --git a/_includes/blog-preview-card.html b/_includes/blog-preview-card.html
index 9deb8822..c4d47cc7 100644
--- a/_includes/blog-preview-card.html
+++ b/_includes/blog-preview-card.html
@@ -1,16 +1,12 @@
-<div class="post-preview">
-    <a href={{post.url}}>
-      <img  class="post-preview-img" src="{{site.baseurl}}/{{post.image}}" alt="{{post.alt}}" />
-    </a>
-    <div class="post-info">
-      <h2 class="title">
-        <a class="tla-link" href="{{post.url}}">{{post.title}}</a>
-      </h2>
-      <p class="title">
-        by {{post.author}} <span class="text-normal">on {{ post.date | date: "%b %-d, %Y" }}</span> | category: <a class="tla-link" href="{{site.baseurl}}/blog/category/{{post.category}}/">{{post.category}}</a>
-      </p>
-      <hr class="divider"/>
-      <p class="generated-content">{{post.excerpt}}</p>
-    </div>
+<a href={{post.url}}>
+  <div class="post-card">
+    <img class="post-card--image" src="{{site.baseurl}}/{{post.image}}" alt="{{post.alt}}" />
+      <div class="post-card--description" >
+         <h4><span>{{post.category}}</span> |   {{post.date | date: "%b %-d, %Y"}}</h4>
+        <h1>{{post.title}}</h1>
+        <h2>by {{post.author}}</h2>
+        <hr/>
+        <p>{{post.excerpt}}</p>
+      </div>
   </div>
-</section>
\ No newline at end of file
+</a>
\ No newline at end of file
diff --git a/_sass/_post.scss b/_sass/_post.scss
index b0ace3e6..110921ed 100644
--- a/_sass/_post.scss
+++ b/_sass/_post.scss
@@ -1,3 +1,110 @@
+:root {
+  --primary: #5eda12;
+  --neutral: #585858;
+  --black: #313235;
+}
+
+.top-padding {
+  padding-top: 3.5rem;
+}
+
+.blogs {
+    display: grid; 
+    grid-template-columns: repeat(2, minmax(300px, 1fr));
+    gap: 4rem; 
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 2rem; 
+    }
+}
+
+.post-card {
+  display: flex;
+  gap: 2rem;
+
+  width: 100%;
+  padding: 3rem;
+  padding-right: 6rem;
+
+  border-radius: 15px;
+  border: 1px solid var(--primary);
+  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem;
+  }
+}
+
+.post-card.small-post-card {
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+  border: 0px; 
+  height: 100%; 
+}
+
+.post-card .small-post-card--image {
+  max-height: 200px;
+  max-width: 100%; 
+  border-radius: 15px;
+}
+
+.post-card--description {
+  flex: 1 1 0px;
+  color: var(--black);
+
+  h1 {
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h4 {
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  span {
+    color: var(--primary);
+
+    font-size: 18px;
+    letter-spacing: 0.3rem;
+    text-transform: uppercase;
+  }
+
+  hr {
+    border: 1px solid var(--primary);
+    margin: 10px 0;
+  }
+
+  * {
+    margin: 0.3rem;
+    padding: 0;
+  }
+}
+
+.post-card--image {
+  flex: 1 1 0px;
+  object-fit: cover;
+
+  max-width: 40%;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    max-height: 200px;
+
+    border-radius: 15px;
+  }
+}
+
+
 @media (min-width: $desktop-width) {
     .post-preview{
         display: grid;
@@ -7,13 +114,6 @@
     }
 }
 
-.post-card{
-    border: solid black 2px;
-    margin-top: 3em;
-    padding: 1em;
-    padding-top: 0em;
-}
-
 .post-preview-img{
     margin: 0.5em;
     margin-right: 1em;
@@ -167,3 +267,7 @@
 .social-RSS-icon {
     font-size: 2rem;
 }
+
+a {
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/blog.html b/blog.html
index c2f94dea..260c92d0 100644
--- a/blog.html
+++ b/blog.html
@@ -8,32 +8,35 @@ <h1 class="title page-title">The Teach LA Blog</h1>
 <p>
   We love what we do, and we want to share it with you! Here are some insights from our members on how our club operates: how we teach, write code, and create a community!
 </p>
-<p>
-  Interested in more formal reflections on the inner workings of our club? Check out <a class="tla-link" href="{{site.baseurl}}/reports">reports section</a>. Curious in how we handle teaching an artificial intelligence and machine learning class at a high school, or our joint efforts to provide AI education? Peep the <a class="ai-link" href="https://uclaacmai.github.io/blog/" target="_blank" rel="noopener noreferrer">ACM AI blog!</a>
-</p>
-<p>
-  Read posts via RSS - 
-<a href="https://teachla.uclaacm.com/feed.xml" aria-labelledby="post-icon"> 
-  <span id="post-icon" hidden>Subscribe to RSS feed for blogs</span>
-  <span class="fas fa-rss-square" aria-hidden="true""></span> 
-</a>
-</p>
 
+<h2 class="top-padding">Most Recent</h2>
+{% assign post_count = 0 %}
 
 {% for post in site.posts %}
-<section class="post-card">
+    {% assign post_count = post_count | plus: 1 %}
+
+    {% if post_count == 2 %}
+    <h2 class="top-padding">Past blogs</h2>
+<div class="blogs">
+    {% endif %}
+    
+    {% if post_count == 1 %}
+        {% include blog-preview-card.html %}
+    {% endif %}
+    {% if post_count >= 2 %}
+        {% include blog-preview-card-small.html %}
+    {% endif %}
+
+{% endfor %}
+</div>
 
-    <!-- TODO: IMPLEMENT TAGS! -->
+ <!-- TODO: IMPLEMENT TAGS! -->
 
-    {% comment %}
+    <!-- {% comment %}
     {% if post.tags %}
         tags:
         {% for tag in post.tags %}
             {{tag}}{% if forloop.last == false %}, {% endif %}
         {% endfor %}
     {% endif %}
-    {% endcomment %}
-{% include blog-preview-card.html %}
-{% endfor %}
-
-{% include contact-cta.html %}
+    {% endcomment %} -->
\ No newline at end of file