Skip to content

Commit 044723a

Browse files
lwasserlwasser
committed
Feat(events): add styles for event cards
1 parent 9f83f93 commit 044723a

8 files changed

+163
-31
lines changed

‎_includes/event-cards.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<article class="event-card">
2+
<a href="{{ post.url | relative_url }}">
3+
<div class="event-card__content">
4+
<div class="event-card__date">
5+
<div class="event-card__date-background"
6+
style="background-image: url('{{ post.header.overlay_image | relative_url }}');"></div>
7+
<div class="event-card__date-text">
8+
{% assign start_date = post.start_date | date: "%d" %}
9+
{% assign end_date = post.end_date | date: "%d" %}
10+
{% assign start_month = post.start_date | date: "%b" %}
11+
{% assign start_year = post.start_date | date: "%Y" %}
12+
{% if end_date and end_date != start_date %}
13+
<span>howdy {{ start_date }}-{{ end_date }}</span>
14+
{% else %}
15+
<span>{{ start_date }}</span>
16+
{% endif %}
17+
<span>{{ start_month }}</span>
18+
<span>{{ start_year }}</span>
19+
</div>
20+
</div>
21+
<div class="event-card__details">
22+
<h3 class="event-card__title">{{ post.title | markdownify | strip_html }}</h3>
23+
<p>{{ post.excerpt }}</p>
24+
<a href="{{ post.url | relative_url }}" class="event-card__button">Learn More</a>
25+
</div>
26+
</div>
27+
</a>
28+
</article>

‎_layouts/posts_events.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ <h2>Past events</h2>
6363
{% for year in eventsByYear %}
6464
<section id="{{ year.name }}" class="taxonomy__section">
6565
<h2 class="archive__subtitle">{{ year.name }}</h2>
66-
<div class="blog__grid">
66+
<div class="event__grid">
6767
{% for post in year.items %}
6868
{% capture posttime %}{{post.event_date | date: '%s'}}{% endcapture %}
6969
{% if posttime < nowunix %}
70-
{% include archive-cards.html %}
70+
{% include event-cards.html %}
7171
{% endif %}
7272
{% endfor %}
7373
</div>

‎_pages/events.md

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,3 @@ author_profile: false
1212

1313
pyOpenSci runs free and paid training events that teach skills that scientists need
1414
to make their science more open and collaborative.
15-
16-
Note the past events counter currently is off by one.
17-
18-
<!--
19-
{% comment %}
20-
{% include base_path %}
21-
{% include group-by-array collection=site.posts field="categories" %}
22-
23-
{% for category in group_names %}
24-
{% assign posts = group_items[forloop.index0] %}
25-
<h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2>
26-
{% for post in posts %}
27-
{% include archive-single.html %}
28-
{% endfor %}
29-
{% endfor %}
30-
{% endcomment %}
31-
32-
{% include base_path %}
33-
34-
{% for post in site.posts %}
35-
{% include archive-single.html %}
36-
{% endfor %} -->

‎_posts/events/2024-04-29-create-your-first-python-package-pyopensci-online-workshop.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ header:
99
overlay_filter: rgba(20, 13, 36, 0.8)
1010
categories:
1111
- events
12+
start_date: 2024-04-29
1213
classes: wide
13-
toc: true
1414
type: "event"
1515
comments: true
1616
---

‎_posts/events/2024-06-25-create-your-first-python-package-scipy-2024.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ header:
99
overlay_filter: rgba(20, 13, 36, 0.8)
1010
categories:
1111
- events
12+
start_date: 2024-07-13
1213
classes: wide
13-
toc: true
1414
type: "event"
1515
comments: true
1616
---

‎_posts/events/2024-07-25-pyopensci-fall-festival.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ header:
1313
categories:
1414
- events
1515
classes: wide
16-
toc: true
1716
type: "event"
1817
comments: true
1918
---

‎_sass/minimal-mistakes/_pyos-cards.scss

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,133 @@
102102

103103

104104
// events
105+
.event-card {
106+
display: flex;
107+
margin-bottom: 1.5rem;
108+
border: 1px solid #ddd;
109+
border-radius: 4px;
110+
overflow: hidden;
111+
transition: box-shadow 0.3s ease, transform 0.3s ease;
112+
max-width: 1000px;
113+
114+
&:hover {
115+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
116+
transform: scale(1.03);
117+
}
118+
119+
a {
120+
text-decoration: none;
121+
color: inherit;
122+
}
123+
&__title {
124+
width: 100%
125+
}
126+
127+
&__content {
128+
display: flex;
129+
flex-grow: 1;
130+
}
131+
132+
&__date {
133+
position: relative;
134+
width: 180px; // Increased width for the date box
135+
min-width: 180px;
136+
display: flex;
137+
align-items: center;
138+
justify-content: center;
139+
background-color: #f5f5f5;
140+
padding: 1rem;
141+
height: 100%;
142+
143+
&-background {
144+
position: absolute;
145+
top: 0;
146+
left: 0;
147+
right: 0;
148+
bottom: 0;
149+
background-size: cover;
150+
background-position: center;
151+
opacity: 0.1;
152+
}
153+
154+
&-text {
155+
position: relative;
156+
z-index: 1;
157+
text-align: center;
158+
font-size: 1.2rem;
159+
font-weight: bold;
160+
line-height: 1.2;
161+
162+
span {
163+
display: block;
164+
}
165+
166+
span:last-of-type {
167+
text-transform: uppercase;
168+
font-size: 0.8rem;
169+
margin-top: 0.2rem;
170+
}
171+
}
172+
}
173+
174+
&__details {
175+
flex-grow: 1;
176+
padding: 1rem;
177+
display: flex;
178+
flex-direction: column;
179+
justify-content: center;
180+
181+
h3 {
182+
margin-bottom: 0.5rem;
183+
}
184+
185+
p {
186+
margin-bottom: 1rem;
187+
}
188+
189+
&__button {
190+
padding: 0.5rem 1rem;
191+
background-color: #007bff;
192+
color: #fff;
193+
border-radius: 4px;
194+
text-decoration: none;
195+
transition: background-color 0.3s ease;
196+
197+
&:hover {
198+
background-color: #0056b3;
199+
}
200+
}
201+
}
202+
}
203+
204+
// Responsive design adjustments
205+
@media (max-width: 600px) {
206+
.event-card {
207+
flex-direction: column;
208+
209+
&__date {
210+
width: 100%;
211+
min-width: auto;
212+
height: auto;
213+
padding: 0.5rem;
214+
}
215+
216+
&__details {
217+
padding: 1rem 0.5rem;
218+
}
219+
220+
&__content {
221+
flex-direction: column;
222+
223+
}
224+
}
225+
}
226+
227+
228+
229+
230+
231+
105232
.upcoming-event {
106233
background-color: $pyos-lightpurple;
107234
border-radius: 10px;

‎_sass/minimal-mistakes/_reset.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ html {
88
/* apply a natural box layout model to all elements */
99
box-sizing: border-box;
1010
background-color: $background-color;
11-
font-size: 16px;
11+
font-size: 15px;
1212

1313
@include breakpoint($medium) {
14-
font-size: 18px;
14+
font-size: 17px;
1515
}
1616

1717
@include breakpoint($large) {
18-
font-size: 20px;
18+
font-size: 19px;
1919
}
2020

2121
@include breakpoint($x-large) {
22-
font-size: 22px;
22+
font-size: 21px;
2323
}
2424

2525
-webkit-text-size-adjust: 100%;

0 commit comments

Comments
 (0)