Skip to content

Commit

Permalink
Events: Use Masonry layout for gallery of events
Browse files Browse the repository at this point in the history
  • Loading branch information
@hedyhli
hedyhli committed Jan 21, 2024
1 parent 1d3d8d6 commit 117ead5
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 51 deletions.
65 changes: 65 additions & 0 deletions pydis_site/static/css/events/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,68 @@ pre {
border-radius: 10px;
max-width: 50%;
}

/* CSS-only Masonry layout:
* https://tobiasahlin.com/blog/masonry-with-css/
*
* Adapted for responsiveness:
* - Mobile (<=700px) No columns at all
* - Tablets (700~900px) Two columns Masonry
* - Desktop+ (>=900px) Three columns Masonry
*/
@media (min-width: 700px) {
.event-gallery {
display: flex;
flex-flow: column wrap;
align-content: space-between;
}

@media (min-width: 900px) {
/* 3 columns */
.event-gallery {
/* Required. Must be only slightly taller than the tallest column */
height: 60rem;
}

.event-gallery .box {
width: calc(33% - 1rem);
margin-bottom: 1rem;
}

/* Reorder vertically */
.event-gallery .box:nth-child(3n+1) { order: 1; }
.event-gallery .box:nth-child(3n+2) { order: 2; }
.event-gallery .box:nth-child(3n) { order: 3; }

/* 2 line breaks to force new columns, for each gap between the three columns. */
.event-gallery::before, .event-gallery::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}

@media (max-width: 900px) {
/* 2 columns */
.event-gallery {
height: 80rem;
}

.event-gallery .box {
width: calc(50% - 1rem);
margin-bottom: 1rem;
}

.event-gallery .box:nth-child(2n+1) { order: 1; }
.event-gallery .box:nth-child(2n) { order: 2; }

/* 1 line break to force a new column, for the gap between the two columns. */
.event-gallery::before {
content: "";
flex-basis: 100%;
width: 0;
order: 1;
}
}
}
84 changes: 33 additions & 51 deletions pydis_site/templates/events/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,66 +45,48 @@ <h2 class="title is-6">July-December</h2>


<h2 class="title is-4">All events</h2>
<div class="columns is-multiline event-gallery">

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
<p>Once a year we host a code jam for members of our server to participate in. The code jam is an event where we place you in a team with 5 other random server members. You then have 11 days to code some sort of application or program in Python. Your program must use the specified technology/framework and incorporate the theme chosen by the server.</p>
</div>
<div class="event-gallery">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2>
<p>Once a year we host a code jam for members of our server to participate in. The code jam is an event where we place you in a team with 5 other random server members. You then have 11 days to code some sort of application or program in Python. Your program must use the specified technology/framework and incorporate the theme chosen by the server.</p>
</div>

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</a></h2>
<p>For the past 15 years, PyWeek has been running a bi-annual game jam for the Python language. As of 2020, we are excited to say we are officially partnered with PyWeek to co-run these events.</p>
<div class="has-text-centered">
<img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="max-width: 100%;" alt="PyWeek logo">
</div>
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</a></h2>
<p>For the past 15 years, PyWeek has been running a bi-annual game jam for the Python language. As of 2020, we are excited to say we are officially partnered with PyWeek to co-run these events.</p>
<div class="has-text-centered">
<img src="https://pyweek.readthedocs.io/en/latest/_static/pyweek.svg" style="max-width: 100%;" alt="PyWeek logo">
</div>
</div>

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</a></h2>
<p>A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.</p>
<div class="has-text-centered">
<img src="/static/images/events/pixels_logo_transparent.gif" alt="Logo for pixels">
</div>
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="pixels" %}">Pixels</a></h2>
<p>A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.</p>
<div class="has-text-centered">
<img src="/static/images/events/pixels_logo_transparent.gif" alt="Logo for pixels">
</div>
</div>

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
<p>An advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like, including Python.</p>
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
</div>
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
<p>An advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like, including Python.</p>
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
</div>
</div>

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
<p>
Revival of Code is a Python Discord hosted event where we release old Advent of Code puzzles from a previous year. The puzzles start off easy and gradually get more difficult, all while revealing a fun little story that is appropriate for some seasons more than others. Questions will be posted every other day, and you'll be able to discuss your solutions in dedicated threads.
</p>
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
</div>
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
<p>
Revival of Code is a Python Discord hosted event where we release old Advent of Code puzzles from a previous year. The puzzles start off easy and gradually get more difficult, all while revealing a fun little story that is appropriate for some seasons more than others. Questions will be posted every other day, and you'll be able to discuss your solutions in dedicated threads.
</p>
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" alt="Server icon for AoC">
</div>
</div>

<div class="column is-one-third-desktop is-half-tablet">
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="game-jams" %}">Game Jams</a></h2>
<p>The Game Jam is similar to our Code Jams, but smaller in scope. Instead of having to complete a qualifier
and being teamed up with random strangers, members of our community can just sign-up individually or pair up
with whoever they like.</p>
<div class="has-text-centered">
<img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" alt="Game Jam 2020">
</div>
<div class="box">
<h2 class="title is-4"><a href="{% url "events:page" path="game-jams" %}">Game Jams</a></h2>
<p>The Game Jam is similar to our Code Jams, but smaller in scope. Instead of having to complete a qualifier
and being teamed up with random strangers, members of our community can just sign-up individually or pair up
with whoever they like.</p>
<div class="has-text-centered">
<img src="https://user-images.githubusercontent.com/33516116/77593036-5fb09780-6eeb-11ea-9feb-336b2e5e23de.png" alt="Game Jam 2020">
</div>
</div>
</div>
Expand Down

0 comments on commit 117ead5

Please sign in to comment.