Skip to content

Commit 5e14a56

Browse files
naomivgongnaomivgong
committed
updated teams
2 parents b466f4c + 114b0d1 commit 5e14a56

File tree

4 files changed

+160
-40
lines changed

4 files changed

+160
-40
lines changed

‎_includes/blog-preview-card-small.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<a href={{post.url}}>
2+
<div class="post-card small-post-card">
3+
<img
4+
class="post-card--image small-post-card--image"
5+
src="{{site.baseurl}}/{{post.image}}"
6+
alt="{{post.alt}}"
7+
/>
8+
<div class="post-card--description" type="small">
9+
<hr />
10+
<h4>
11+
<span>{{post.category}}</span> | {{post.date | date: "%b %-d, %Y"}}
12+
</h4>
13+
<h1>{{post.title}}</h1>
14+
<h2>by {{post.author}}</h2>
15+
</div>
16+
</div>
17+
</a>

‎_includes/blog-preview-card.html‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
<div class="post-preview">
2-
<a href={{post.url}}>
3-
<img class="post-preview-img" src="{{site.baseurl}}/{{post.image}}" alt="{{post.alt}}" />
4-
</a>
5-
<div class="post-info">
6-
<h2 class="title">
7-
<a class="tla-link" href="{{post.url}}">{{post.title}}</a>
8-
</h2>
9-
<p class="title">
10-
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>
11-
</p>
12-
<hr class="divider"/>
13-
<p class="generated-content">{{post.excerpt}}</p>
14-
</div>
1+
<a href={{post.url}}>
2+
<div class="post-card">
3+
<img class="post-card--image" src="{{site.baseurl}}/{{post.image}}" alt="{{post.alt}}" />
4+
<div class="post-card--description" >
5+
<h4><span>{{post.category}}</span> | {{post.date | date: "%b %-d, %Y"}}</h4>
6+
<h1>{{post.title}}</h1>
7+
<h2>by {{post.author}}</h2>
8+
<hr/>
9+
<p>{{post.excerpt}}</p>
10+
</div>
1511
</div>
16-
</section>
12+
</a>

‎_sass/_post.scss‎

Lines changed: 111 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,110 @@
1+
:root {
2+
--primary: #5eda12;
3+
--neutral: #585858;
4+
--black: #313235;
5+
}
6+
7+
.top-padding {
8+
padding-top: 3.5rem;
9+
}
10+
11+
.blogs {
12+
display: grid;
13+
grid-template-columns: repeat(2, minmax(300px, 1fr));
14+
gap: 4rem;
15+
16+
@media (max-width: 768px) {
17+
grid-template-columns: 1fr;
18+
gap: 2rem;
19+
}
20+
}
21+
22+
.post-card {
23+
display: flex;
24+
gap: 2rem;
25+
26+
width: 100%;
27+
padding: 3rem;
28+
padding-right: 6rem;
29+
30+
border-radius: 15px;
31+
border: 1px solid var(--primary);
32+
-webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
33+
-moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
34+
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
35+
36+
@media (max-width: 768px) {
37+
flex-direction: column;
38+
gap: 1rem;
39+
padding: 2rem;
40+
}
41+
}
42+
43+
.post-card.small-post-card {
44+
flex-direction: column;
45+
gap: 1rem;
46+
padding: 2rem;
47+
border: 0px;
48+
height: 100%;
49+
}
50+
51+
.post-card .small-post-card--image {
52+
max-height: 200px;
53+
max-width: 100%;
54+
border-radius: 15px;
55+
}
56+
57+
.post-card--description {
58+
flex: 1 1 0px;
59+
color: var(--black);
60+
61+
h1 {
62+
font-size: 24px;
63+
}
64+
65+
h2 {
66+
font-size: 18px;
67+
}
68+
69+
h4 {
70+
font-size: 12px;
71+
font-weight: 400;
72+
}
73+
74+
span {
75+
color: var(--primary);
76+
77+
font-size: 18px;
78+
letter-spacing: 0.3rem;
79+
text-transform: uppercase;
80+
}
81+
82+
hr {
83+
border: 1px solid var(--primary);
84+
margin: 10px 0;
85+
}
86+
87+
* {
88+
margin: 0.3rem;
89+
padding: 0;
90+
}
91+
}
92+
93+
.post-card--image {
94+
flex: 1 1 0px;
95+
object-fit: cover;
96+
97+
max-width: 40%;
98+
99+
@media (max-width: 768px) {
100+
max-width: 100%;
101+
max-height: 200px;
102+
103+
border-radius: 15px;
104+
}
105+
}
106+
107+
1108
@media (min-width: $desktop-width) {
2109
.post-preview{
3110
display: grid;
@@ -7,13 +114,6 @@
7114
}
8115
}
9116

10-
.post-card{
11-
border: solid black 2px;
12-
margin-top: 3em;
13-
padding: 1em;
14-
padding-top: 0em;
15-
}
16-
17117
.post-preview-img{
18118
margin: 0.5em;
19119
margin-right: 1em;
@@ -167,3 +267,7 @@
167267
.social-RSS-icon {
168268
font-size: 2rem;
169269
}
270+
271+
a {
272+
text-decoration: none;
273+
}

‎blog.html‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,35 @@ <h1 class="title page-title">The Teach LA Blog</h1>
88
<p>
99
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!
1010
</p>
11-
<p>
12-
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>
13-
</p>
14-
<p>
15-
Read posts via RSS -
16-
<a href="https://teachla.uclaacm.com/feed.xml" aria-labelledby="post-icon">
17-
<span id="post-icon" hidden>Subscribe to RSS feed for blogs</span>
18-
<span class="fas fa-rss-square" aria-hidden="true""></span>
19-
</a>
20-
</p>
2111

12+
<h2 class="top-padding">Most Recent</h2>
13+
{% assign post_count = 0 %}
2214

2315
{% for post in site.posts %}
24-
<section class="post-card">
16+
{% assign post_count = post_count | plus: 1 %}
17+
18+
{% if post_count == 2 %}
19+
<h2 class="top-padding">Past blogs</h2>
20+
<div class="blogs">
21+
{% endif %}
22+
23+
{% if post_count == 1 %}
24+
{% include blog-preview-card.html %}
25+
{% endif %}
26+
{% if post_count >= 2 %}
27+
{% include blog-preview-card-small.html %}
28+
{% endif %}
29+
30+
{% endfor %}
31+
</div>
2532

26-
<!-- TODO: IMPLEMENT TAGS! -->
33+
<!-- TODO: IMPLEMENT TAGS! -->
2734

28-
{% comment %}
35+
<!-- {% comment %}
2936
{% if post.tags %}
3037
tags:
3138
{% for tag in post.tags %}
3239
{{tag}}{% if forloop.last == false %}, {% endif %}
3340
{% endfor %}
3441
{% endif %}
35-
{% endcomment %}
36-
{% include blog-preview-card.html %}
37-
{% endfor %}
38-
39-
{% include contact-cta.html %}
42+
{% endcomment %} -->

0 commit comments

Comments
 (0)