diff options
| -rw-r--r-- | pydis_site/static/css/events/base.css | 65 | ||||
| -rw-r--r-- | pydis_site/templates/events/index.html | 84 |
2 files changed, 98 insertions, 51 deletions
diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 3708bd57..b5cd69a3 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -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; + } + } +} diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index 85278499..5ed3c61c 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -45,66 +45,48 @@ <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> |