Add Discord page (#174)

* Add Discord page
* Apply suggestions from code review

Co-authored-by: Mariatta <[email protected]>

content/_index.md

@@ -14,7 +14,7 @@ imagealt = "Website banner of PyLadiesCon 2024 Online. 6th-8th December | Multi-
     <div class="col-md-5 p-lg-3 mx-auto my-5">
       <h1 class="display-4 fw-normal pink">PyLadiesCon</h1>
       <h4 class="special-font pink">2024 Online</h4>
-      <p class="lead" style="font-weight: bolder;color: white;">
+      <p class="lead" style="font-weight: bold;color: white;">
         6th-8th December<br>
         Multi-language | Multi-timezone
       </p>

content/discord/_index.md

@@ -0,0 +1,189 @@
++++
+title = 'Discord'
+draft = false
+layout = 3
+description = "References to join the server and their structure"
+image = "/img/about-photo-2.png"
+imagealt = "discord logo with a dotted design."
++++
+
+{{< pageheadersmall
+  "Discord"
+  "References to join the server and their structure"
+  "/img/discord.png"
+  >}}
+
+
+{{< rawhtml >}}
+<div class="d-md-flex flex-md-equal w-80">
+  <div class="overflow-hidden">
+{{< /rawhtml >}}
+
+# The conference server
+
+This year we have decided to try a new platform that has been widely used in other online
+conferences, and has shown a good level of customization, interactions, and reach. We are talking
+about [Discord](https://discord.com).
+
+We are providing our server to host all the interactions of the people attending the second year of
+PyLadiesCon. We really **encourage you to join** and discover our talks, activities, open spaces,
+sprints, tutorials, resources, and more!
+
+[Register now](https://pretix.eu/pyladiescon/2024/) to PyLadiesCon to get access to our Discord server. 
+
+For Discord users, joining our server is just joining a new server! but if **you are new to
+Discord**, don't worry, we got you covered. As a first step, you need to [create an
+account](https://discord.com/register). You an also do this while joining the server for the first
+time.
+
+
+{{< rawhtml >}}
+<div class="w-100 mt-2 text-start p-5 text-center">
+  <a href="https://discord.gg/R6zf6ZHYMF">
+    <button type="button" class="btn btn-pink btn-block mb-2 text-center" style="display: inline" data-toggle="collapse">Join the Server</button>
+  </a>
+  <p style="font-size: 0.8rem;">
+  You need a <a href="https://pretix.eu/pyladiescon/2024">ticket for the conference</a> in order to have access.
+  </p>
+</div>
+{{< /rawhtml >}}
+
+## Registration step
+
+Once you enter the Discord server, you will not see many channels, because you need to register
+with your **conference ticket**.
+
+Check the `#registration` channel, and you will see the following message:
+
+{{< rawhtml >}}
+<img src="/img/discord_screenshots/register.png" class="img-fluid" />
+{{< /rawhtml >}}
+
+all the instructions can be found there, and they consist of:
+
+* Getting your conference ticket at hand. The email should have the subject `[PyLdiesCon 2024] Your
+  order: NNNNN` where the `N` are different letters. On that email you find a URL to get the details
+  of your ticket. From your ticket you need the **exact** way you wrote your name, and the `N`s code.
+
+* Click on the **Register here 👈** button, and you will get the following dialog:
+
+  {{< rawhtml >}}
+  <img src="/img/discord_screenshots/register_enterinfo.png" class="img-fluid" />
+  {{< /rawhtml >}}
+
+  and enter the information you gathered from your ticket.
+
+If everything worked well, you will see many more channels 🎉...but **if it didn't work** please use
+the forum called  `💬registration-help` (in the following image) and write down your problem, so we
+can help you out.
+
+  {{< rawhtml >}}
+  <img src="/img/discord_screenshots/registration_help.png" class="img-fluid" />
+  {{< /rawhtml >}}
+
+## Inside the server
+
+You are finally in the server, and there will be many channels, categories, and things to do.
+If you are new to discord, this might look overwhelming at the beginning, but you will get the
+idea very fast.
+
+We recommend you to visit the `📖rules` and `📋code-of-conduct` channels to be aware of the
+standards we expect from people participating in the conference.
+
+There will be some channels where you don't have permissions to send messages, because they are
+probably for the organizers to announce things during the event.
+
+Discord, like other chat platforms, has many channels for you to visit and write messages,
+but in addition you can create 'threads' on specific messages (like Slack).
+
+### Joining talks, keynotes and panels
+
+The Talks, Keynotes, and Panels will be transmitted via YouTube, so you will have two options:
+
+* Watch them directly on YouTube, or
+* Watch them within Discord.
+
+The interaction will be **only on Discord** so we encourage you to stay around and join the
+**media channels** in order to watch the videos, because the chat will be disabled on YouTube.
+
+As you might have seen in our schedule, we have a **Main Room** and one for **Activities and Open
+Spaces**, which will be equivalent to the `main-room` and `activities-room`.
+
+In the following image you can also find the channels `main-room-media` and `activities-media`
+which are **Audio channels**. You can distinguish them by the 🔈 icon on the left side.
+
+{{< rawhtml >}}
+<img src="/img/discord_screenshots/main_channels.png" class="img-fluid" />
+{{< /rawhtml >}}
+
+When you click this channel, **you will enter automatically** (a sound will get your attention) and
+once inside, you can enable/disable your microphone and video.
+
+Even though this is an audio channel, it can also be used to shared videos, so a volunteer will
+start an Activity within that channel with the YouTube streaming that you will be able to join,
+**and this will be the mechanism to watch the talks**.
+
+### The sprints and activities
+
+As long as there is no special announcement, all the sprints and activities will be hosted within
+discord on the Audio channels we described before. Instead of the normal activity on YouTube that
+you can join, people will share their webcams, and screens in order to provide the introduction
+to the topic (sprints) and to give a short presentation (activities).
+
+### Forums
+
+You will see a few channels that have the icon 💬 on the left side, and those are special channels
+where you can write down posts, so the discussion can be structured by topics instead of a open
+chat.
+
+There are a few forums for discussing news (`news-discussion`), you can use them in case you need
+help with something (`rooms-help`), share resources (`resources`), finding job offerings
+(`job-board`), etc.
+
+If you want to **create a new post** in those forums, you can use the blue button you can see on the
+following image, to do so.
+
+{{< rawhtml >}}
+<img src="/img/discord_screenshots/forums.png" class="img-fluid" />
+{{< /rawhtml >}}
+
+### Contacting organizers and volunteers
+
+While writing messages you can type `@` to mention certain roles, and we encourage you to mention
+`@Organizer`, `@Volunteer` or `@Code of Conduct` in case you believe a situation require their
+attention.
+
+(In case you want to mention a channel, you can use the `#` symbol when writing a message.)
+
+### Changing your nickname
+
+When you enter the server and register successfully, your nickname will be changed to the one
+you have written in your Ticket. We encourage you to use your real name so other people can
+recognize you. In case you want to only use your **firstname** and drop your family name, you can do
+that by `right-clicking` on your nickname, and select **Edit Server Profile**. This will change the
+information **only on this server** so you don't need to be concerned by your identities in other
+servers you have joined.
+
+{{< rawhtml >}}
+<img src="/img/discord_screenshots/change_profile.png" class="img-fluid" />
+{{< /rawhtml >}}
+
+Once editing your name, you can optionally fill your **Pronouns** so people know how to address you.
+
+{{< rawhtml >}}
+<img src="/img/discord_screenshots/change_profile_details.png" class="img-fluid" />
+{{< /rawhtml >}}
+
+
+## Something is not clear?
+
+In case you have more questions, feel free to write down your question in the `💬help` forum,
+so people can guide you.
+
+Enjoy the conference!
+
+
+{{< rawhtml >}}
+  </div>
+</div>
+{{< /rawhtml >}}

hugo.toml

@@ -32,13 +32,13 @@ weight = 23
 
 [[menus.main]]
 name = 'Assets'
-pageRef = '/assets'
+pageRef = '/about/assets'
 parent = 'About'
 weight = 24
 
 [[menus.main]]
 name = 'Mentored Sprint'
-pageRef = '/sprints'
+pageRef = '/about/sprints'
 parent = 'About'
 weight = 24
 
@@ -57,10 +57,15 @@ name = 'Sponsors'
 pageRef = '/sponsors'
 weight = 50
 
+[[menus.main]]
+name = '•Discord'
+pageRef = '/discord'
+weight = 60
+
 [[menus.main]]
 name = 'News'
 pageRef = '/news'
-weight = 60
+weight = 70
 
 
 [markup]

themes/pyladies/assets/css/main.css

@@ -6,6 +6,11 @@
   scroll-margin-top: 100px;
 }
 
+strong {
+    font-weight: bold;
+    background-color: #eed8d9;
+}
+
 p {
   font-size: 1rem;
   font-weight: 300;
@@ -77,6 +82,19 @@ h2 a {
   font-family: var(--title-font);
 }
 
+h1 {
+    font-size: 2.2rem;
+}
+
+h2 {
+    font-size: 1.8rem;
+}
+
+h3 {
+    font-size: 1.3rem;
+}
+
+
 .menu-font {
   font-family: sans-serif;
   font-family: var(--special-font);
@@ -204,7 +222,7 @@ h2 a {
 /* Arrow up right */
 .arrow-link {
   text-decoration: none;
-  font-weight: bolder;
+  font-weight: bold;
   color: black;
   margin-right: 30px;
 }
@@ -219,20 +237,20 @@ h2 a {
 
 .arrow-link:hover {
   color: var(--py-lady-pink) !important;
-  font-weight: bolder;
+  font-weight: bold;
   text-decoration: underline;
 }
 
 .arrow-link:hover:after {
   background: url('../img/pink-arrow-up-right.svg') no-repeat;
   text-decoration: none;
-  font-weight: bolder;
+  font-weight: bold;
 }
 
 /* Arrow right */
 .rarrow-link {
   text-decoration: underline;
-  font-weight: bolder;
+  font-weight: bold;
   color: black;
   margin-right: 30px;
 }
@@ -247,19 +265,19 @@ h2 a {
 
 .rarrow-link:hover {
   color: var(--py-lady-pink) !important;
-  font-weight: bolder;
+  font-weight: bold;
   text-decoration: underline;
 }
 
 .rarrow-link:hover:after {
   background: url('../img/pink-arrow-right.svg') no-repeat;
   text-decoration: none;
-  font-weight: bolder;
+  font-weight: bold;
 }
 
 .rarrow-link-white {
   text-decoration: underline;
-  font-weight: bolder;
+  font-weight: bold;
   color: white;
   margin-right: 30px;
 }
@@ -275,7 +293,7 @@ h2 a {
 .rarrow-link-white:hover {
   color: black;
   text-decoration: underline;
-  font-weight: bolder;
+  font-weight: bold;
 }
 
 /* Background color dropdown */
@@ -658,4 +676,4 @@ h2 a {
 .social-icon {
     width: 32px;
     margin: 4px;
-}
+}