From 51bfa2cb88dd5c29f80bb8f9aa9d724d33a87d45 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 20 Jan 2024 14:27:42 +0800 Subject: Events: Initial redesign - Added standalone pages for each event - Added initial design of new layout - Refactored some sidebars and templates to update current/upcoming event - Put two CJ10 assets into their own dedicated folder Includes dummy text for event descriptions and content that is not up-to-date: Current and Upcoming event components. --- pydis_site/static/css/events/base.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 9e244ed9..3708bd57 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -12,9 +12,14 @@ pre { } .panel .panel-heading { - /* - * Remove whitespace between the panel heading and the first item in a panel, - * since it makes the first panel item taller than the others. - */ - margin-bottom: 0 !important + /* + * Remove whitespace between the panel heading and the first item in a panel, + * since it makes the first panel item taller than the others. + */ + margin-bottom: 0 !important +} + +.event-gallery img { + border-radius: 10px; + max-width: 50%; } -- cgit v1.2.3 From 117ead56d30173987ae79fde09ec821fd2d05f4e Mon Sep 17 00:00:00 2001 From: hedy Date: Sun, 21 Jan 2024 18:11:41 +0800 Subject: Events: Use Masonry layout for gallery of events --- pydis_site/static/css/events/base.css | 65 ++++++++++++++++++++++++++ pydis_site/templates/events/index.html | 84 +++++++++++++--------------------- 2 files changed, 98 insertions(+), 51 deletions(-) (limited to 'pydis_site/static/css') 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 @@

All events

-
- -
-
-

Code Jams

-

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.

-
+
+
+

Code Jams

+

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.

- -
-
-

PyWeek

-

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.

-
- PyWeek logo -
+
+

PyWeek

+

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.

+
+ PyWeek logo
- -
-
-

Pixels

-

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

-
- Logo for pixels -
+
+

Pixels

+

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

+
+ Logo for pixels
- -
-
-

Advent of code

-

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.

-
- Server icon for AoC -
+
+

Advent of code

+

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.

+
+ Server icon for AoC
- -
-
-

Revival of Code

-

- 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. -

-
- Server icon for AoC -
+
+

Revival of Code

+

+ 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. +

+
+ Server icon for AoC
- -
-
-

Game Jams

-

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.

-
- Game Jam 2020 -
+
+

Game Jams

+

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.

+
+ Game Jam 2020
-- cgit v1.2.3 From bbb3f56eef45987a74267130ee1c19d6c50a53ee Mon Sep 17 00:00:00 2001 From: hedy Date: Mon, 22 Jan 2024 15:28:16 +0800 Subject: Events: Use nice cover images with backgrounds --- pydis_site/static/css/events/base.css | 19 ++++++-- .../static/images/events/gallery/adventofcode.png | Bin 0 -> 48332 bytes .../static/images/events/gallery/gamejam.png | Bin 0 -> 28464 bytes pydis_site/static/images/events/gallery/pixels.png | Bin 0 -> 4904 bytes pydis_site/static/images/events/gallery/pyweek.png | Bin 0 -> 13951 bytes pydis_site/templates/events/index.html | 54 +++++++++++---------- 6 files changed, 43 insertions(+), 30 deletions(-) create mode 100644 pydis_site/static/images/events/gallery/adventofcode.png create mode 100644 pydis_site/static/images/events/gallery/gamejam.png create mode 100644 pydis_site/static/images/events/gallery/pixels.png create mode 100644 pydis_site/static/images/events/gallery/pyweek.png (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index b5cd69a3..777a2bcf 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,9 +19,20 @@ pre { margin-bottom: 0 !important } + +.event-gallery .box { + padding: 0; +} + +.event-gallery .box-content { + padding: 1.25rem; +} + .event-gallery img { - border-radius: 10px; - max-width: 50%; + object-fit: cover; + /* Same as that of box */ + border-top-left-radius: 6px; + border-top-right-radius: 6px; } /* CSS-only Masonry layout: @@ -43,7 +54,7 @@ pre { /* 3 columns */ .event-gallery { /* Required. Must be only slightly taller than the tallest column */ - height: 60rem; + height: 80rem; } .event-gallery .box { @@ -68,7 +79,7 @@ pre { @media (max-width: 900px) { /* 2 columns */ .event-gallery { - height: 80rem; + height: 90rem; } .event-gallery .box { diff --git a/pydis_site/static/images/events/gallery/adventofcode.png b/pydis_site/static/images/events/gallery/adventofcode.png new file mode 100644 index 00000000..77b6e015 Binary files /dev/null and b/pydis_site/static/images/events/gallery/adventofcode.png differ diff --git a/pydis_site/static/images/events/gallery/gamejam.png b/pydis_site/static/images/events/gallery/gamejam.png new file mode 100644 index 00000000..fa9b80b3 Binary files /dev/null and b/pydis_site/static/images/events/gallery/gamejam.png differ diff --git a/pydis_site/static/images/events/gallery/pixels.png b/pydis_site/static/images/events/gallery/pixels.png new file mode 100644 index 00000000..55398a53 Binary files /dev/null and b/pydis_site/static/images/events/gallery/pixels.png differ diff --git a/pydis_site/static/images/events/gallery/pyweek.png b/pydis_site/static/images/events/gallery/pyweek.png new file mode 100644 index 00000000..dd40570e Binary files /dev/null and b/pydis_site/static/images/events/gallery/pyweek.png differ diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index 5ed3c61c..f51576fa 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -47,46 +47,48 @@

All events

-

Code Jams

-

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.

+
+

Code Jams

+

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.

+
-

PyWeek

-

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.

-
- PyWeek logo + PyWeek logo +
+

PyWeek

+

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.

-

Pixels

-

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

-
- Logo for pixels + Logo for pixels +
+

Pixels

+

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

-

Advent of code

-

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.

-
- Server icon for AoC + Server icon for AoC +
+

Advent of code

+

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.

-

Revival of Code

-

- 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. -

-
- Server icon for AoC + Server icon for AoC +
+

Revival of Code

+

+ 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. +

-

Game Jams

-

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.

-
- Game Jam 2020 + Game Jam 2020 +
+

Game Jams

+

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.

-- cgit v1.2.3 From f47f9b3cea36e3cc616cc8a1b1801deddb09819f Mon Sep 17 00:00:00 2001 From: hedy Date: Mon, 22 Jan 2024 15:31:57 +0800 Subject: Events: Revert height change --- pydis_site/static/css/events/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 777a2bcf..604b81cc 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -54,7 +54,7 @@ pre { /* 3 columns */ .event-gallery { /* Required. Must be only slightly taller than the tallest column */ - height: 80rem; + height: 60rem; } .event-gallery .box { @@ -79,7 +79,7 @@ pre { @media (max-width: 900px) { /* 2 columns */ .event-gallery { - height: 90rem; + height: 80rem; } .event-gallery .box { -- cgit v1.2.3 From 13521559402df023ea699ce76a3d5f7eba28a6ff Mon Sep 17 00:00:00 2001 From: hedy Date: Mon, 22 Jan 2024 19:34:18 +0800 Subject: Events: Make good use of bulma components --- pydis_site/static/css/events/base.css | 30 +-- .../static/images/events/icons/adventofcode.png | Bin 0 -> 18455 bytes pydis_site/static/images/events/icons/codejam.svg | 264 +++++++++++++++++++++ pydis_site/static/images/events/icons/pixels.png | Bin 0 -> 4426 bytes pydis_site/static/images/events/icons/pyweek.png | Bin 0 -> 4369 bytes pydis_site/templates/events/current_event.html | 19 ++ pydis_site/templates/events/index.html | 145 +++++++---- .../templates/events/sidebar/events_list.html | 62 ++++- pydis_site/templates/events/upcoming_event.html | 15 -- 9 files changed, 450 insertions(+), 85 deletions(-) create mode 100644 pydis_site/static/images/events/icons/adventofcode.png create mode 100644 pydis_site/static/images/events/icons/codejam.svg create mode 100644 pydis_site/static/images/events/icons/pixels.png create mode 100644 pydis_site/static/images/events/icons/pyweek.png delete mode 100644 pydis_site/templates/events/upcoming_event.html (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 604b81cc..80be4338 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,20 +19,8 @@ pre { margin-bottom: 0 !important } - -.event-gallery .box { - padding: 0; -} - -.event-gallery .box-content { - padding: 1.25rem; -} - -.event-gallery img { - object-fit: cover; - /* Same as that of box */ - border-top-left-radius: 6px; - border-top-right-radius: 6px; +.event-gallery .card { + border-radius: 6px; } /* CSS-only Masonry layout: @@ -57,15 +45,15 @@ pre { height: 60rem; } - .event-gallery .box { + .event-gallery .card { 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; } + .event-gallery .card:nth-child(3n+1) { order: 1; } + .event-gallery .card:nth-child(3n+2) { order: 2; } + .event-gallery .card: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 { @@ -82,13 +70,13 @@ pre { height: 80rem; } - .event-gallery .box { + .event-gallery .card { width: calc(50% - 1rem); margin-bottom: 1rem; } - .event-gallery .box:nth-child(2n+1) { order: 1; } - .event-gallery .box:nth-child(2n) { order: 2; } + .event-gallery .card:nth-child(2n+1) { order: 1; } + .event-gallery .card:nth-child(2n) { order: 2; } /* 1 line break to force a new column, for the gap between the two columns. */ .event-gallery::before { diff --git a/pydis_site/static/images/events/icons/adventofcode.png b/pydis_site/static/images/events/icons/adventofcode.png new file mode 100644 index 00000000..e9501737 Binary files /dev/null and b/pydis_site/static/images/events/icons/adventofcode.png differ diff --git a/pydis_site/static/images/events/icons/codejam.svg b/pydis_site/static/images/events/icons/codejam.svg new file mode 100644 index 00000000..b6a8a1db --- /dev/null +++ b/pydis_site/static/images/events/icons/codejam.svg @@ -0,0 +1,264 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pydis_site/static/images/events/icons/pixels.png b/pydis_site/static/images/events/icons/pixels.png new file mode 100644 index 00000000..8b5bd841 Binary files /dev/null and b/pydis_site/static/images/events/icons/pixels.png differ diff --git a/pydis_site/static/images/events/icons/pyweek.png b/pydis_site/static/images/events/icons/pyweek.png new file mode 100644 index 00000000..f74bc43b Binary files /dev/null and b/pydis_site/static/images/events/icons/pyweek.png differ diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html index dd94fb3f..dd59b040 100644 --- a/pydis_site/templates/events/current_event.html +++ b/pydis_site/templates/events/current_event.html @@ -1 +1,20 @@ +{% load static %} + {# Current or ongoing event #} +{# (n/a) #} + +{# Next event to promote #} +
+
+
+

Upcoming event

+

PyWeek 37

+

March 17-24

+
+
+ PyWeek logo +
+
+

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.

+ Learn more +
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index f51576fa..df83d895 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -10,34 +10,87 @@

Briefly describe events. Explain how to subscribe to updates from the #roles channel.

- {% include "events/current_event.html" %} - {% include "events/upcoming_event.html" %} - -

Scheduled events

-
-
-
-

January-June

- -
-
-
-
-

July-December

- -
+
+

Scheduled events for 2024

+
+
+

+ +

+
+
+
+
PyWeek 37
+

March 17-24

+

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

+
+ Learn more +
+
+
+
+

+ +

+
+
+
+
Revival of Code
+

TBD

+

Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.

+
+ Learn more +
+
+
+
+

+ +

+
+
+
+
Code Jam
+

TBD

+

Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.

+
+ Learn more +
+
+
+
+

+ +

+
+
+
+
PyWeek 38
+

September

+

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

+
+ Learn more +
+
+
+
+

+ +

+
+
+
+
Advent of Code
+

December 1-25

+

Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.

+
+ Learn more +
+
-
{% include "events/sidebar/events_list.html" %}
@@ -46,45 +99,55 @@

All events

-
-
+
+

Code Jams

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.

-
- PyWeek logo -
+
+
+ PyWeek logo +
+

PyWeek

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.

-
- Logo for pixels -
+
+
+ Logo for pixels +
+

Pixels

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

-
- Server icon for AoC -
+
+
+ Server icon for AoC +
+

Advent of code

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.

-
- Server icon for AoC -
+
+
+ Server icon for AoC +
+

Revival of Code

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.

-
- Game Jam 2020 -
+
+
+ Game Jam 2020 +
+

Game Jams

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 diff --git a/pydis_site/templates/events/sidebar/events_list.html b/pydis_site/templates/events/sidebar/events_list.html index 0d3493e4..df443e8d 100644 --- a/pydis_site/templates/events/sidebar/events_list.html +++ b/pydis_site/templates/events/sidebar/events_list.html @@ -1,16 +1,62 @@ -

Recent events

- +

Previous events from 2023

+ + +
+
+

+ +

+
+
+
+
PyWeek 36
+

September

+
+
+
+
-

All events

+

All events

  • Code Jams
  • PyWeek
    • diff --git a/pydis_site/templates/events/upcoming_event.html b/pydis_site/templates/events/upcoming_event.html deleted file mode 100644 index 10165bae..00000000 --- a/pydis_site/templates/events/upcoming_event.html +++ /dev/null @@ -1,15 +0,0 @@ -{% load static %} - -

    Upcoming event

    -
    -

    PyWeek 37

    -

    March 17-24

    -
    -
    -

    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.

    -
    -
    - PyWeek logo -
    -
    -
    -- cgit v1.2.3 From 9be58994d7a7607afd513f5b8c5e8788c9f5e595 Mon Sep 17 00:00:00 2001 From: hedy Date: Wed, 24 Jan 2024 18:21:31 +0800 Subject: Events: Adjust spacing --- pydis_site/static/css/events/base.css | 24 ++++++++++--- pydis_site/templates/events/current_event.html | 4 +-- pydis_site/templates/events/index.html | 40 +++++++++++----------- .../templates/events/sidebar/events_list.html | 18 +++++----- 4 files changed, 51 insertions(+), 35 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 80be4338..25b4f4e2 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -21,6 +21,24 @@ pre { .event-gallery .card { border-radius: 6px; + margin-bottom: 1.5rem; +} + +.event-gallery .card img { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +@media (min-width: 700px) { + .scheduled-events .media-left { + margin-left: 2rem; + margin-right: 2rem; + } + + .previous-events .media-left { + margin-left: 1rem; + margin-right: 1rem; + } } /* CSS-only Masonry layout: @@ -42,12 +60,11 @@ pre { /* 3 columns */ .event-gallery { /* Required. Must be only slightly taller than the tallest column */ - height: 60rem; + height: 70rem; } .event-gallery .card { width: calc(33% - 1rem); - margin-bottom: 1rem; } /* Reorder vertically */ @@ -67,12 +84,11 @@ pre { @media (max-width: 900px) { /* 2 columns */ .event-gallery { - height: 80rem; + height: 90rem; } .event-gallery .card { width: calc(50% - 1rem); - margin-bottom: 1rem; } .event-gallery .card:nth-child(2n+1) { order: 1; } diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html index dd59b040..735f1eb4 100644 --- a/pydis_site/templates/events/current_event.html +++ b/pydis_site/templates/events/current_event.html @@ -8,7 +8,7 @@

    Upcoming event

    -

    PyWeek 37

    +

    PyWeek 37

    March 17-24

    @@ -16,5 +16,5 @@

    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.

    - Learn more + Learn more
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index df83d895..aeb7a218 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -12,29 +12,29 @@

Briefly describe events. Explain how to subscribe to updates from the #roles channel.

{% include "events/current_event.html" %} -
+

Scheduled events for 2024

-
+

- +

-
+
-
PyWeek 37
+
PyWeek 37

March 17-24

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

- Learn more + Learn more
-
+

- +

-
+
Revival of Code
@@ -45,26 +45,26 @@
-
+

- +

-
+
-
Code Jam
+
Code Jam

TBD

Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.

- Learn more + Learn more
-
+

- +

-
+
PyWeek 38
@@ -75,11 +75,11 @@
-
+

- +

-
+
Advent of Code
diff --git a/pydis_site/templates/events/sidebar/events_list.html b/pydis_site/templates/events/sidebar/events_list.html index df443e8d..3a3bb1dd 100644 --- a/pydis_site/templates/events/sidebar/events_list.html +++ b/pydis_site/templates/events/sidebar/events_list.html @@ -1,11 +1,11 @@ -
+

Previous events from 2023

-
+

-
+
PyWeek 35
@@ -14,11 +14,11 @@
-
+

-
+
Summer Code Jam 2023
@@ -27,11 +27,11 @@
-
+

-
+
PyWeek 36
@@ -40,11 +40,11 @@
-
+

-
+
Advent of Code 2023
-- cgit v1.2.3 From 78c9bd6f843b11c77b6548e087aeefb5e3ff6290 Mon Sep 17 00:00:00 2001 From: hedy Date: Wed, 24 Jan 2024 21:31:04 +0800 Subject: Events: Add one-time events, fix elements --- pydis_site/static/css/events/base.css | 18 ++++- .../static/images/events/gallery/devops_hour.png | Bin 0 -> 1305811 bytes pydis_site/static/images/events/gallery/trivia.png | Bin 0 -> 26573 bytes pydis_site/templates/events/current_event.html | 18 +++-- pydis_site/templates/events/index.html | 64 ++------------- pydis_site/templates/events/main_events.html | 90 +++++++++++++++++++++ pydis_site/templates/events/other_events.html | 61 ++++++++++++++ 7 files changed, 184 insertions(+), 67 deletions(-) create mode 100644 pydis_site/static/images/events/gallery/devops_hour.png create mode 100644 pydis_site/static/images/events/gallery/trivia.png create mode 100644 pydis_site/templates/events/main_events.html create mode 100644 pydis_site/templates/events/other_events.html (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 25b4f4e2..d67b5d77 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,6 +19,10 @@ pre { margin-bottom: 0 !important } +.event-gallery .tags { + margin-top: -.75rem; +} + .event-gallery .card { border-radius: 6px; margin-bottom: 1.5rem; @@ -58,9 +62,13 @@ pre { @media (min-width: 900px) { /* 3 columns */ - .event-gallery { + #main-events { /* Required. Must be only slightly taller than the tallest column */ - height: 70rem; + height: 65rem; + } + + #other-events { + height: 30rem; } .event-gallery .card { @@ -83,10 +91,14 @@ pre { @media (max-width: 900px) { /* 2 columns */ - .event-gallery { + #main-events { height: 90rem; } + #other-events { + height: 30rem; + } + .event-gallery .card { width: calc(50% - 1rem); } diff --git a/pydis_site/static/images/events/gallery/devops_hour.png b/pydis_site/static/images/events/gallery/devops_hour.png new file mode 100644 index 00000000..4e7bf215 Binary files /dev/null and b/pydis_site/static/images/events/gallery/devops_hour.png differ diff --git a/pydis_site/static/images/events/gallery/trivia.png b/pydis_site/static/images/events/gallery/trivia.png new file mode 100644 index 00000000..1d04b670 Binary files /dev/null and b/pydis_site/static/images/events/gallery/trivia.png differ diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html index 735f1eb4..b264a6ab 100644 --- a/pydis_site/templates/events/current_event.html +++ b/pydis_site/templates/events/current_event.html @@ -4,17 +4,25 @@ {# (n/a) #} {# Next event to promote #} -
-
+
+ Upcoming event +
-

Upcoming event

PyWeek 37

-

March 17-24

+

+ + March 17-24 + +

PyWeek logo

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.

- Learn more + + + Learn more + +
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index aeb7a218..b0522e39 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -96,63 +96,9 @@
- -

All events

-
-
-
-

Code Jams

-

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.

-
-
-
-
- PyWeek logo -
-
-

PyWeek

-

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.

-
-
-
-
- Logo for pixels -
-
-

Pixels

-

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

-
-
-
-
- Server icon for AoC -
-
-

Advent of code

-

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.

-
-
-
-
- Server icon for AoC -
-
-

Revival of Code

-

- 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. -

-
-
-
-
- Game Jam 2020 -
-
-

Game Jams

-

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.

-
-
-
+
+
+{% include "events/main_events.html" %} +
+{% include "events/other_events.html" %} {% endblock %} diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html new file mode 100644 index 00000000..b7b903a8 --- /dev/null +++ b/pydis_site/templates/events/main_events.html @@ -0,0 +1,90 @@ +{% load static %} + +
+

Annual events

+
+
+ diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html new file mode 100644 index 00000000..ae35bee9 --- /dev/null +++ b/pydis_site/templates/events/other_events.html @@ -0,0 +1,61 @@ +{% load static %} + +
+

Workshops & other events

+
+
+ -- cgit v1.2.3 From b5014488bac41d9e30753b1dc26b99aa11619fb8 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 25 Jan 2024 18:46:52 +0800 Subject: Events: Adjust date style & add more events --- pydis_site/static/css/events/base.css | 8 +- .../static/images/events/gallery/coredev_qna.png | Bin 0 -> 1856866 bytes .../images/events/gallery/pydis_owners_qna.png | Bin 0 -> 612046 bytes pydis_site/templates/events/main_events.html | 62 ++++++------- pydis_site/templates/events/other_events.html | 101 +++++++++++++++------ 5 files changed, 102 insertions(+), 69 deletions(-) create mode 100644 pydis_site/static/images/events/gallery/coredev_qna.png create mode 100644 pydis_site/static/images/events/gallery/pydis_owners_qna.png (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index d67b5d77..40dbf4ad 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,8 +19,8 @@ pre { margin-bottom: 0 !important } -.event-gallery .tags { - margin-top: -.75rem; +.event-gallery .date-icon { + margin-left: -.25rem; } .event-gallery .card { @@ -68,7 +68,7 @@ pre { } #other-events { - height: 30rem; + height: 75rem; } .event-gallery .card { @@ -96,7 +96,7 @@ pre { } #other-events { - height: 30rem; + height: 100rem; } .event-gallery .card { diff --git a/pydis_site/static/images/events/gallery/coredev_qna.png b/pydis_site/static/images/events/gallery/coredev_qna.png new file mode 100644 index 00000000..8a3d3f53 Binary files /dev/null and b/pydis_site/static/images/events/gallery/coredev_qna.png differ diff --git a/pydis_site/static/images/events/gallery/pydis_owners_qna.png b/pydis_site/static/images/events/gallery/pydis_owners_qna.png new file mode 100644 index 00000000..904b7dea Binary files /dev/null and b/pydis_site/static/images/events/gallery/pydis_owners_qna.png differ diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html index b7b903a8..d2666eb7 100644 --- a/pydis_site/templates/events/main_events.html +++ b/pydis_site/templates/events/main_events.html @@ -4,18 +4,18 @@

Annual events


+ +{# These events are sorted based on priority #}

PyWeek

-
- - - - March & September - +

+ + + March & September -

+

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.

@@ -42,14 +40,12 @@

Pixels

-
- - - - ??? - +

+ + + Not fixed -

+

A collaborative canvas where users paint pixel by pixel, by POSTing co-ordinates and a color code to an API.

@@ -59,14 +55,12 @@

Advent of code

-
- - - - December - +

+ + + December -

+

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.

@@ -76,14 +70,12 @@

Revival of Code

-
- - - - July to August - +

+ + + July to August -

+

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.

diff --git a/pydis_site/templates/events/other_events.html b/pydis_site/templates/events/other_events.html index ae35bee9..178cd876 100644 --- a/pydis_site/templates/events/other_events.html +++ b/pydis_site/templates/events/other_events.html @@ -4,24 +4,52 @@

Workshops & other events


+ +{# These events should be sorted in reverse-chronological order. Add new events to the top. #}
- DevOps Hour + Python Core-devs Q&A +
+
+

Python Core Developers Q&A

+

+ + + Oct. 21, 2020 + +

+

The first Python Core Developers Q&A! During the Q&A, several core developers answered questions sent in by you, the broader Python community. This Q&A was part of the yearly Python Core Dev Sprint, organized virtually in 2020 on Python Discord.

+
+
+
+
+ Game Jam 2020
-

[add-link] DevOps Hour with Joe Banks

-
- - - - Jul. 26, 2022 - +

Game Jam

+

+ + + April 2020 -

-

On 26 July 2022 one of Python Discord’s owners, Joe Banks, sat down and gave an hour long talk about DevOps in Python Discord and how you can get started with DevOps.

+

+

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.

-- cgit v1.2.3 From 1796a0cd2b06ad135db1570790e43467fcf88cb0 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 26 Jan 2024 08:23:45 +0800 Subject: Events: Maybe fix masonry grid on tablets --- pydis_site/static/css/events/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 40dbf4ad..6b2642bb 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -92,11 +92,11 @@ pre { @media (max-width: 900px) { /* 2 columns */ #main-events { - height: 90rem; + height: 100rem; } #other-events { - height: 100rem; + height: 110rem; } .event-gallery .card { -- cgit v1.2.3 From 1e0ac08d585ac8621cbcd61189bd10fc3ce86f7e Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 2 Feb 2024 19:47:49 +0800 Subject: Events: Re-organize templates and significantly improve layouts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aka, many minor changes I shouldn't've grouped together in a single commit. - Add main page events description - Use date icons every where - Fill up one-off events list - Use a media-like layout for one-off events instead - Use 2-column masonry for one-off events list - Update schedules for this year - Add a colored top border line to cards in the main gallery that do not have thumbnail banners - Add april fools to fill the gap in the second row so the grid looks better - Re-purpose 'all events' sidebar as 'ToC' with appropriate anchor links - Use circle-info icon everywhere for learn more buttons - Added python release streams to the one-off events That light blue cloud icon for devops hour looks dope IMO :P - And of course, thanks to the layout change for one-off events list I do not have to hurriedly create ad-hoc thumbnails for them 😔. phew - Which means our fancy hats workshop can use the beautiful magician hat emoji as the icon! - Renamed 'scheduled' and 'recent' events to be year-independent. This makes it consistent because we might end up updating the list mid-year. This means all dates will have the year specified. The pain of updating the gallery sections' height for both main and one-off events section continues to be a limitation. --- pydis_site/static/css/events/base.css | 73 +++++-- pydis_site/templates/events/current_event.html | 7 +- pydis_site/templates/events/index.html | 107 ++-------- pydis_site/templates/events/main_events.html | 19 +- pydis_site/templates/events/other_events.html | 233 +++++++++++++-------- .../events/pages/adventofcode/_index.html | 2 +- .../events/pages/revivalofcode/_index.html | 2 +- pydis_site/templates/events/scheduled_events.html | 118 +++++++++++ .../events/sidebar/adventofcode/useful-links.html | 2 +- .../templates/events/sidebar/events_list.html | 69 ------ .../templates/events/sidebar/main_sidebar.html | 66 ++++++ .../templates/events/sidebar/revivalofcode.html | 6 +- 12 files changed, 421 insertions(+), 283 deletions(-) create mode 100644 pydis_site/templates/events/scheduled_events.html delete mode 100644 pydis_site/templates/events/sidebar/events_list.html create mode 100644 pydis_site/templates/events/sidebar/main_sidebar.html (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 6b2642bb..55725f75 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,27 +19,40 @@ pre { margin-bottom: 0 !important } -.event-gallery .date-icon { +.event-gallery .date-icon, #main-section .date-icon { margin-left: -.25rem; } -.event-gallery .card { +.event-gallery .card, .event-gallery .box { border-radius: 6px; margin-bottom: 1.5rem; } +/* We are using bulma cards as boxes here to take advantage of the card's + * header image component */ .event-gallery .card img { border-top-left-radius: 6px; border-top-right-radius: 6px; } +/* Custom component: A colored line at the top of a card that can be styled + * with bulma's has-background-* classes.*/ +.card .colored-line { + /* A default color as grey */ + background-color: #C1C1C1; + height: .3rem; + display: block; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + @media (min-width: 700px) { - .scheduled-events .media-left { + #scheduled-events .media-left { margin-left: 2rem; margin-right: 2rem; } - .previous-events .media-left { + #previous-events .media-left { margin-left: 1rem; margin-right: 1rem; } @@ -60,28 +73,42 @@ pre { align-content: space-between; } + #other-events-section { + height: 62rem; + } + + #other-events-section .box { + width: calc(50% - 1rem); + } + + #other-events-section .box:nth-child(2n+1) { order: 1; } + #other-events-section .box:nth-child(2n) { order: 2; } + + #other-events-section::before { + content: ""; + flex-basis: 100%; + width: 0; + order: 2; + } + @media (min-width: 900px) { /* 3 columns */ - #main-events { + #main-events-section { /* Required. Must be only slightly taller than the tallest column */ - height: 65rem; - } - - #other-events { - height: 75rem; + height: 67rem; } - .event-gallery .card { + #main-events-section .card { width: calc(33% - 1rem); } /* Reorder vertically */ - .event-gallery .card:nth-child(3n+1) { order: 1; } - .event-gallery .card:nth-child(3n+2) { order: 2; } - .event-gallery .card:nth-child(3n) { order: 3; } + #main-events-section .card:nth-child(3n+1) { order: 1; } + #main-events-section .card:nth-child(3n+2) { order: 2; } + #main-events-section .card: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 { + #main-events-section::before, #main-events-section::after { content: ""; flex-basis: 100%; width: 0; @@ -91,23 +118,23 @@ pre { @media (max-width: 900px) { /* 2 columns */ - #main-events { - height: 100rem; + #main-events-section { + height: 80rem; } - #other-events { - height: 110rem; + #other-events-section { + height: 80rem; } - .event-gallery .card { + #main-events-section .card { width: calc(50% - 1rem); } - .event-gallery .card:nth-child(2n+1) { order: 1; } - .event-gallery .card:nth-child(2n) { order: 2; } + #main-events-section.card:nth-child(2n+1) { order: 1; } + #main-events-section.card:nth-child(2n) { order: 2; } /* 1 line break to force a new column, for the gap between the two columns. */ - .event-gallery::before { + #main-events-section::before { content: ""; flex-basis: 100%; width: 0; diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html index b264a6ab..df47f6f7 100644 --- a/pydis_site/templates/events/current_event.html +++ b/pydis_site/templates/events/current_event.html @@ -1,10 +1,7 @@ {% load static %} -{# Current or ongoing event #} -{# (n/a) #} - -{# Next event to promote #} -
+{# Current/next event to promote #} +
Upcoming event
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index b0522e39..2dcdb747 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -7,98 +7,23 @@ {% endblock %} {% block event_base_content %} -
-
-

Briefly describe events. Explain how to subscribe to updates from the #roles channel.

- {% include "events/current_event.html" %} - -
-

Scheduled events for 2024

-
-
-

- -

-
-
-
-
PyWeek 37
-

March 17-24

-

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Revival of Code
-

TBD

-

Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Code Jam
-

TBD

-

Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
PyWeek 38
-

September

-

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Advent of Code
-

December 1-25

-

Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.

-
- Learn more -
-
-
+
+
+

At Python Discord we run a few regular events, such as programming contests and workshops. We also run more ad-hoc events such as Python release streams. All members are welcome to participate in the events live, and for most events we release videos on our YouTube channel after the event in case you've missed it.

+

To subscribe to the announcements, head over to the bottom of the #roles channel and get the @Announcements role to receive notifications on the latest updates!

+ {% include "events/current_event.html" %} + {% include "events/scheduled_events.html" %} +
+
+ {% include "events/sidebar/main_sidebar.html" %}
-
- {% include "events/sidebar/events_list.html" %}
-
-
-
-{% include "events/main_events.html" %} -
-{% include "events/other_events.html" %} +
+ +
+ {% include "events/main_events.html" %} + +
+ {% include "events/other_events.html" %} {% endblock %} diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html index d2666eb7..a4675333 100644 --- a/pydis_site/templates/events/main_events.html +++ b/pydis_site/templates/events/main_events.html @@ -5,9 +5,10 @@

-{# These events are sorted based on priority #} -