diff --git a/content/_index.md b/content/_index.md
index e9905f9..23a1662 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,129 +1,29 @@
-+++
-title = "Libre Gaming Community"
-+++
-
+LibreGaming
+===========
-# LibreGaming community - Introduction
+Who We Are
+----------
-We are a community dedicated to playing and developing [libre games], that is videogames and board games with free/libre software and algorithms, and free/libre artistic assets (models, musics). We believe [software] and [culture] should be free as part of a global struggle for freedom and equality online and offline. We aim to become a meta-community that can bring closer smaller communities. We don't want to become a big central organization, but rather a network of organic initiatives scattered throughout cyberspace.
+LibreGaming is an organization of software freedom and gaming
+enthusiasts who meet on the web to discuss and play computer games that
+are **free/libre** and **open source software**. We focus on multiplayer games
+that can be played over the Internet like
+[*Xonotic*](https://xonotic.org/), [*The Battle for
+Wesnoth*](http://www.wesnoth.org/),
+[*Hedgewars*](https://www.hedgewars.org/),
+[*OpenTTD*](https://www.openttd.org/), and more.
-For example, we'd like to bring players alongside game developers and designers, as well as contributors to [libre games launchers] like [Athenaeum] and [GameHub]. We believe this approach can enrich and empower the entire libre gaming ecosystem.
+What To Do
+----------
-We are just getting started. Feel free to contribute new ideas and feedback by [contacting us]. Check out [the preliminary notes] to our first meeting, as well as the [first], [second] and [third] meeting's minutes.
+To join us for conversation and matchmaking, see our [contact
+information](chat-with-us.html).
-[libre games]: @/play-libre-games.md
-[software]: https://www.gnu.org/philosophy/shouldbefree.html
-[culture]: https://artlibre.org/faq_eng/
-[libre games launchers]: @/game-launcher-concept.md
-[Athenaeum]: https://gitlab.com/librebob/athenaeum
-[GameHub]: https://github.com/tkashkin/GameHub
-[contacting us]: @/chat-with-us.md
-[the preliminary notes]: https://hribhrib.at:5443/upload/5035aee454f8553c88bd1f7623218485341099ed/dZSQFC3lP1lMmTQFyfLKQFBBDIC4tOrQ41Js4nzn/firstthoughts.txt
-[first]: @/2021-08-07.md
-[second]: @/2022-01-30.md
-[third]: @/2022-04-24.md
+If you are new to libre gaming or are looking for game to play, visit
+[LibreGameWiki](https://libregamewiki.org/). If you find something you
+like, tell us about it!
-## We are
+We have written a small primer on [why you should be a libre
+gamer](https://ericxdu.gitlab.io/kingdoms/libregaming/libre-games-primer.html).
-- a loose collective rather than a formal organization
- - feel free to invite new people and share permissions with people you know
- - don’t ask permission to improve things, just go ahead and see where it goes, then let it be known so that others can review what you did
-- supportive of [accessibility]: everyone should be able to play games, no matter their physical or hardware/network capabilities
-- encouraging existing libre games communities to join us and help improve the overall ecosystem
-
-## We are not
-
-- morally-superior purists: we want to develop a libre ecosystem, but will not judge or insult people who take part in other ecosystems
-- a community where nazis and harassers are welcome
-- a space to discuss non-free games and ecosystem, see Gaming Space or Linux Gaming (**TODO:** links) instead
-
-[accessibility]: https://en.wikipedia.org/wiki/Accessibility
-
-# Communication
-
-- **Domain name:** following a [public poll], we went with `libregaming.org`, see also [previous name poll]
-- **Privacy:** While we defend privacy online, our chatrooms are public spaces and may be logged accordingly
-- **Moderation:** We defend free speech, which means we believe no government can tell you how to think/feel, but [doesn't mean you can engage in abusive behavior]; nazis, harassers, and other abusers are not welcome in our community
-- **Color scheme:** We use **Orange** (#FF8F23) and **Blue** (#4FBAD5)
-
-If you would like to take part in the community, please see [contacting us].
-
-[public poll]: https://webapp.oulu.fi/framadate/adminstuds.php?poll=Vmv6hF1oJ9ain1SIusvq7qk8
-[previous name poll]: https://poll.disroot.org/LZwvudXCHyBvDY2d
-[doesn't mean you can engage in abusive behavior]: https://xkcd.com/1357/
-
-# Services
-
-For now, we do not provide any services as LibreGaming collectives. Below you will find a list of services we would be interested to maintain.
-
-## Internal use
-
-- A URL shortener
-- an audio/video conferencing server? (video requires a lot of resources)
-
-## Public use
-
-- A website with information about libre games (maybe cooperate with [LibreGameWiki]), and links to various related communities, as well as tutorials to selfhost your own libre game servers
-- A matchmaking service/bot to find people to play with
-- A chat bridging service (eg. [matterbridge]) for existing communities, to open oneself to new protocols/ecosystems
-- Tooling/scripts to make it easier to selfhost libre game servers
-- Subdomains on libregaming.org for new projects to get started; only for libregaming projects, because we don't want external projects to technically depend on libregaming.org?
-
-[LibreGameWiki]: https://libregamewiki.org/Main_Page
-[matterbridge]: https://github.com/42wim/matterbridge
-
-# Resources
-
-- [Our logos] (SVG)
-- [Our first attempt at a website] (ZIP), based on [play-libre-games.md]
-- [LibreGaming space screenshot on matrix] (PNG)
-
-[Our logos]: https://freedombox.emorrp1.name/_matrix/media/r0/download/freedombox.emorrp1.name/IwuxGwOfjbdjcaSLFgjqXGqa
-[Our first attempt at a website]: https://matrix-client.matrix.org/_matrix/media/r0/download/matrix.org/hmdmKGDlmwrCKuWnJLxGPRgJ
-[play-libre-games.md]: @/play-libre-games.md
-[LibreGaming space screenshot on matrix]: https://freedombox.emorrp1.name/_matrix/media/r0/download/matrix.org/TqNyUvWqIgJqxIfCzaYbQGyq
-
-# External resources
-
-- Organizing a meeting
- - [planning a timezone-aware event] (alternative to framadate, **TODO:** can we selfhost it?)
- - [sharing a specific time across timezones] (**TODO:** can we selfhost it?)
- - [taking notes together] (use "Freely" permissions to avoid everyone having to register)
- - [People involved with LibreGaming.Org](https://md.roflcopter.fr/oFeu6XXoRNqGeEZvYhhjOQ?both)
- - [Overview of topics/“directions” being worked on](https://md.roflcopter.fr/O1KGHXZ3SPC20fMqzBT3XQ?both)
- - audio conferencing: [Mumble] server on hribhrib.at (**TODO:** can we setup [mumble-web] client and [mumble-web-proxy] WebRTC server?)
-- Other related collectives
- - [FreeGameDev.net] has a modern IRC server (with a public Jabber/XMPP gateway and a matchmaking bot) and a forum for libre gamedev
- - [LibreGameWiki] a wiki with detailed information about libre games
-
-[planning a timezone-aware event]: https://www.when2meet.com/
-[sharing a specific time across timezones]: https://time.is/compare
-[taking notes together]: https://md.roflcopter.fr/
-[Mumble]: https://mumble.org/
-[mumble-web]: https://github.com/Johni0702/mumble-web
-[mumble-web-proxy]: https://github.com/johni0702/mumble-web-proxy
-[FreeGameDev.net]: https://freegamedev.net
-
-**TODO:** below are leftovers from the previous pad, what are they for? do they work?
-
-- https://remixicon.com/ finding Apache-2.0 svg avatars (94% scale for rooms)
-- https://storm.debian.net/ Sandstorm ad-hoc hosting
-
------
-
-# Below hasn't been updated yet
-
-**TODO:** maybe move to the meeting minutes this last part?
-
-* Bridging: XMPP, irc (limited rooms?), discord?
-* pro-actively bridge to IRC but be clear that it's a degraded user experience and try to limit the sheer number of rooms to match user expectations
-* The bifrost matrix bridge to XMPP is not great, perhaps can host a public XMPP gateway to matrix instead?
- * matrix-bifrost is the only xmpp-matrix bridge in both ways
- * it's also not good on xmpp->matrix side, at least when using the official matrix.org gateway
-* [Discussion (long) about Discord]
-* object to Discord on principle of non-libre, centralised, compromising ideals, so shouldn't pro-actively bridge channels from here to there
-* aware that some libre games have their official communities on Discord, and sadly they may not see anything wrong with that, e.g. strong network effects
-* popularity isn't everything, it's ok to be a small cohesive community, but advertising libre stuff on non-libre platforms is ok for outreach
-* not everyone agrees with the statements above :p
-
-[Discussion (long) about Discord]: https://matrix.to/#/!qLhNfILESSCaasbRWB:freedombox.emorrp1.name/$pES_yrnhm4kjonxfnrPmqV2dv3CmAyWBH2eadKgZ4wM?via=freedombox.emorrp1.name&via=matrix.org&via=nordgedanken.dev
+We also have a detailed page [introducing our organization](intro.html).
diff --git a/content/intro.md b/content/intro.md
new file mode 100644
index 0000000..e9905f9
--- /dev/null
+++ b/content/intro.md
@@ -0,0 +1,129 @@
++++
+title = "Libre Gaming Community"
++++
+
+
+# LibreGaming community - Introduction
+
+We are a community dedicated to playing and developing [libre games], that is videogames and board games with free/libre software and algorithms, and free/libre artistic assets (models, musics). We believe [software] and [culture] should be free as part of a global struggle for freedom and equality online and offline. We aim to become a meta-community that can bring closer smaller communities. We don't want to become a big central organization, but rather a network of organic initiatives scattered throughout cyberspace.
+
+For example, we'd like to bring players alongside game developers and designers, as well as contributors to [libre games launchers] like [Athenaeum] and [GameHub]. We believe this approach can enrich and empower the entire libre gaming ecosystem.
+
+We are just getting started. Feel free to contribute new ideas and feedback by [contacting us]. Check out [the preliminary notes] to our first meeting, as well as the [first], [second] and [third] meeting's minutes.
+
+[libre games]: @/play-libre-games.md
+[software]: https://www.gnu.org/philosophy/shouldbefree.html
+[culture]: https://artlibre.org/faq_eng/
+[libre games launchers]: @/game-launcher-concept.md
+[Athenaeum]: https://gitlab.com/librebob/athenaeum
+[GameHub]: https://github.com/tkashkin/GameHub
+[contacting us]: @/chat-with-us.md
+[the preliminary notes]: https://hribhrib.at:5443/upload/5035aee454f8553c88bd1f7623218485341099ed/dZSQFC3lP1lMmTQFyfLKQFBBDIC4tOrQ41Js4nzn/firstthoughts.txt
+[first]: @/2021-08-07.md
+[second]: @/2022-01-30.md
+[third]: @/2022-04-24.md
+
+## We are
+
+- a loose collective rather than a formal organization
+ - feel free to invite new people and share permissions with people you know
+ - don’t ask permission to improve things, just go ahead and see where it goes, then let it be known so that others can review what you did
+- supportive of [accessibility]: everyone should be able to play games, no matter their physical or hardware/network capabilities
+- encouraging existing libre games communities to join us and help improve the overall ecosystem
+
+## We are not
+
+- morally-superior purists: we want to develop a libre ecosystem, but will not judge or insult people who take part in other ecosystems
+- a community where nazis and harassers are welcome
+- a space to discuss non-free games and ecosystem, see Gaming Space or Linux Gaming (**TODO:** links) instead
+
+[accessibility]: https://en.wikipedia.org/wiki/Accessibility
+
+# Communication
+
+- **Domain name:** following a [public poll], we went with `libregaming.org`, see also [previous name poll]
+- **Privacy:** While we defend privacy online, our chatrooms are public spaces and may be logged accordingly
+- **Moderation:** We defend free speech, which means we believe no government can tell you how to think/feel, but [doesn't mean you can engage in abusive behavior]; nazis, harassers, and other abusers are not welcome in our community
+- **Color scheme:** We use **Orange** (#FF8F23) and **Blue** (#4FBAD5)
+
+If you would like to take part in the community, please see [contacting us].
+
+[public poll]: https://webapp.oulu.fi/framadate/adminstuds.php?poll=Vmv6hF1oJ9ain1SIusvq7qk8
+[previous name poll]: https://poll.disroot.org/LZwvudXCHyBvDY2d
+[doesn't mean you can engage in abusive behavior]: https://xkcd.com/1357/
+
+# Services
+
+For now, we do not provide any services as LibreGaming collectives. Below you will find a list of services we would be interested to maintain.
+
+## Internal use
+
+- A URL shortener
+- an audio/video conferencing server? (video requires a lot of resources)
+
+## Public use
+
+- A website with information about libre games (maybe cooperate with [LibreGameWiki]), and links to various related communities, as well as tutorials to selfhost your own libre game servers
+- A matchmaking service/bot to find people to play with
+- A chat bridging service (eg. [matterbridge]) for existing communities, to open oneself to new protocols/ecosystems
+- Tooling/scripts to make it easier to selfhost libre game servers
+- Subdomains on libregaming.org for new projects to get started; only for libregaming projects, because we don't want external projects to technically depend on libregaming.org?
+
+[LibreGameWiki]: https://libregamewiki.org/Main_Page
+[matterbridge]: https://github.com/42wim/matterbridge
+
+# Resources
+
+- [Our logos] (SVG)
+- [Our first attempt at a website] (ZIP), based on [play-libre-games.md]
+- [LibreGaming space screenshot on matrix] (PNG)
+
+[Our logos]: https://freedombox.emorrp1.name/_matrix/media/r0/download/freedombox.emorrp1.name/IwuxGwOfjbdjcaSLFgjqXGqa
+[Our first attempt at a website]: https://matrix-client.matrix.org/_matrix/media/r0/download/matrix.org/hmdmKGDlmwrCKuWnJLxGPRgJ
+[play-libre-games.md]: @/play-libre-games.md
+[LibreGaming space screenshot on matrix]: https://freedombox.emorrp1.name/_matrix/media/r0/download/matrix.org/TqNyUvWqIgJqxIfCzaYbQGyq
+
+# External resources
+
+- Organizing a meeting
+ - [planning a timezone-aware event] (alternative to framadate, **TODO:** can we selfhost it?)
+ - [sharing a specific time across timezones] (**TODO:** can we selfhost it?)
+ - [taking notes together] (use "Freely" permissions to avoid everyone having to register)
+ - [People involved with LibreGaming.Org](https://md.roflcopter.fr/oFeu6XXoRNqGeEZvYhhjOQ?both)
+ - [Overview of topics/“directions” being worked on](https://md.roflcopter.fr/O1KGHXZ3SPC20fMqzBT3XQ?both)
+ - audio conferencing: [Mumble] server on hribhrib.at (**TODO:** can we setup [mumble-web] client and [mumble-web-proxy] WebRTC server?)
+- Other related collectives
+ - [FreeGameDev.net] has a modern IRC server (with a public Jabber/XMPP gateway and a matchmaking bot) and a forum for libre gamedev
+ - [LibreGameWiki] a wiki with detailed information about libre games
+
+[planning a timezone-aware event]: https://www.when2meet.com/
+[sharing a specific time across timezones]: https://time.is/compare
+[taking notes together]: https://md.roflcopter.fr/
+[Mumble]: https://mumble.org/
+[mumble-web]: https://github.com/Johni0702/mumble-web
+[mumble-web-proxy]: https://github.com/johni0702/mumble-web-proxy
+[FreeGameDev.net]: https://freegamedev.net
+
+**TODO:** below are leftovers from the previous pad, what are they for? do they work?
+
+- https://remixicon.com/ finding Apache-2.0 svg avatars (94% scale for rooms)
+- https://storm.debian.net/ Sandstorm ad-hoc hosting
+
+-----
+
+# Below hasn't been updated yet
+
+**TODO:** maybe move to the meeting minutes this last part?
+
+* Bridging: XMPP, irc (limited rooms?), discord?
+* pro-actively bridge to IRC but be clear that it's a degraded user experience and try to limit the sheer number of rooms to match user expectations
+* The bifrost matrix bridge to XMPP is not great, perhaps can host a public XMPP gateway to matrix instead?
+ * matrix-bifrost is the only xmpp-matrix bridge in both ways
+ * it's also not good on xmpp->matrix side, at least when using the official matrix.org gateway
+* [Discussion (long) about Discord]
+* object to Discord on principle of non-libre, centralised, compromising ideals, so shouldn't pro-actively bridge channels from here to there
+* aware that some libre games have their official communities on Discord, and sadly they may not see anything wrong with that, e.g. strong network effects
+* popularity isn't everything, it's ok to be a small cohesive community, but advertising libre stuff on non-libre platforms is ok for outreach
+* not everyone agrees with the statements above :p
+
+[Discussion (long) about Discord]: https://matrix.to/#/!qLhNfILESSCaasbRWB:freedombox.emorrp1.name/$pES_yrnhm4kjonxfnrPmqV2dv3CmAyWBH2eadKgZ4wM?via=freedombox.emorrp1.name&via=matrix.org&via=nordgedanken.dev
diff --git a/static/style.css b/static/style.css
index e416030..8aecee4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,444 +1,54 @@
-/* SPDX-License-Identifier: GPL-3.0-or-later */
-/*!**************************************************************************************************!*\
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/responsive-nav/responsive-nav.css ***!
- \**************************************************************************************************/
-/*! responsive-nav.js 1.0.39 by @viljamis */
+/* CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
-.nav-collapse ul {
- margin: 0;
- padding: 0;
- width: 100%;
- display: block;
- list-style: none;
-}
+ To the extent possible under law, the person who associated CC0
+ with this work has waived all copyright and related or neighboring
+ rights to this work.
-.nav-collapse li {
- width: 100%;
- display: block;
-}
+
+*/
-.js .nav-collapse {
- clip: rect(0 0 0 0);
- max-height: 0;
- position: absolute;
- display: block;
- overflow: hidden;
- zoom: 1;
-}
+/* Brand colors
+ LibreGaming Orange: #FF8F23 (for emphasis?)
+ LibreGaming Blue: #4FBAD5 (for links?)
+*/
-.nav-collapse.opened {
- max-height: 9999px;
-}
-
-.nav-toggle {
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-
-@media screen and (min-width: 40em) {
- .js .nav-collapse {
- position: relative;
- }
- .js .nav-collapse.closed {
- max-height: none;
- }
- .nav-toggle {
- display: none;
- }
-}
-
-/*!*******************************************************************************************************************************************!*\
- !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/styles.scss ***!
- \*******************************************************************************************************************************************/
-* {
- box-sizing: border-box;
-}
-
-html, body {
- margin: 0;
- padding: 0;
-}
-
-html body {
- background-color: #1c1b22;
-}
-
-body {
- font-size: 1.25rem;
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- line-height: 1.4;
- color: #dee2e6;
-}
-
-h1, h2, h3, h4, h5, h6 {
- font-family: inherit;
-}
-
-h2 {
- font-size: 2rem;
-}
-
-p {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-a {
- text-decoration: none;
+.text-orange {
color: #ff8f23;
- text-decoration: underline;
-}
-a:hover {
- color: #daf2ee;
-}
-a:visited {
- color: #ff820a;
-}
-a:active {
- color: #fff;
}
-.text-lightblue {
- color: #b6e2ee;
-}
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
- margin-bottom: 5px;
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- font-weight: 900;
- line-height: 1.4em;
- color: #dee2e6;
-}
-
-h1, .h1 {
- font-size: calc(1.4375rem + 2.25vw);
-}
-@media (min-width: 1200px) {
- h1, .h1 {
- font-size: 3.125rem;
- }
-}
-
-h2, .h2 {
- font-size: calc(1.375rem + 1.5vw);
-}
-@media (min-width: 1200px) {
- h2, .h2 {
- font-size: 2.5rem;
- }
-}
-
-h3, .h3 {
- font-size: calc(1.34375rem + 1.125vw);
-}
-@media (min-width: 1200px) {
- h3, .h3 {
- font-size: 2.1875rem;
- }
-}
-
-h4, .h4 {
- font-size: calc(1.3125rem + 0.75vw);
-}
-@media (min-width: 1200px) {
- h4, .h4 {
- font-size: 1.875rem;
- }
-}
-
-h5, .h5 {
- font-size: calc(1.28125rem + 0.375vw);
-}
-@media (min-width: 1200px) {
- h5, .h5 {
- font-size: 1.5625rem;
- }
-}
-
-h6, .h6 {
- font-size: 1.25rem;
-}
-
-.lead {
- font-size: calc(1.28125rem + 0.375vw);
- font-weight: 300;
-}
-@media (min-width: 1200px) {
- .lead {
- font-size: 1.5625rem;
- }
-}
-
-.container {
- max-width: 1200px;
- margin-left: auto;
- margin-right: auto;
-}
-@media (max-width: 78.75em) {
- .container {
- margin-left: 15px;
- margin-right: 15px;
- }
-}
-
-.full-width-container {
- max-width: 100%;
- margin-left: 15px;
- margin-right: 15px;
-}
-
-.header {
- width: 100%;
- height: 56px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
- background: #212529;
- color: #FFF;
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 0 16px;
-}
-.header .brand {
- margin-left: auto;
- padding-left: 1em;
- padding-right: 1em;
- text-decoration: none;
-}
-.header .brand > h1 {
- color: #4fbad5 !important;
- display: inline-flex;
- align-items: center;
- font-size: calc(1.2875rem + 0.45vw);
- margin: 0;
-}
-@media (min-width: 1200px) {
- .header .brand > h1 {
- font-size: 1.625rem;
- }
-}
-.header .brand .brand-img {
- margin-right: 0.5rem;
-}
-.header .brand .second {
- color: #ff8f23 !important;
-}
-.header .lang-select {
- display: inline-flex;
- vertical-align: middle;
- margin-left: auto;
-}
-
-.header__menu-toggle {
- background: none;
- border: none;
- width: 24px;
- height: 24px;
- padding: 0;
- margin: 0 24px 0 0;
- color: #FFF;
-}
-
-.side-nav__content {
- padding-top: 32px;
- flex: 1;
- list-style: none;
- padding: 0;
- margin: 0;
- overflow-x: hidden;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.side-nav__content li {
- min-height: 48px;
- line-height: 48px;
-}
-
-.side-nav__content li a:hover {
- background: #343a40;
-}
-
-.nav-collapse a {
- color: #dee2e6;
- text-decoration: none;
- width: 100%;
- background: rgba(0, 0, 0, 0.7);
- border-bottom: 1px solid #212529;
- padding: 0.7em 1em;
- float: left;
-}
-
-.hero {
- border-radius: 12px;
- background: linear-gradient(to right, #159957, #155799);
- min-height: 300px;
- width: 100%;
- color: white;
- justify-content: center;
- flex-direction: column;
- flex-grow: 1;
- padding: 1.25rem;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
-}
-.hero > h1 {
- margin: 0;
-}
-.hero .message {
- display: -webkit-flex;
- display: flex;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-align-items: center;
- align-items: center;
- letter-spacing: 5px;
-}
-
-.posts ul li {
- list-style: none;
- margin-bottom: calc(1.525rem + 3.3vw);
-}
-@media (min-width: 1200px) {
- .posts ul li {
- margin-bottom: 4rem;
- }
-}
-.posts ul li a {
- display: -webkit-flex;
- display: flex;
- text-decoration: none;
-}
-.posts ul {
- border-top: 1px solid #495057;
- padding-left: 0;
- padding-right: 0;
- padding-top: calc(1.625rem + 4.5vw);
-}
-@media (min-width: 1200px) {
- .posts ul {
- padding-top: 5rem;
- }
-}
-.posts .left {
- line-height: 1em;
- display: -webkit-flex;
- display: flex;
- flex-direction: column;
-}
-.posts .date {
+.text-blue {
color: #4fbad5;
- margin-bottom: 0.3125rem;
- margin-right: 1em;
- text-transform: uppercase;
- font-size: calc(1.275rem + 0.3vw);
-}
-@media (min-width: 1200px) {
- .posts .date {
- font-size: 1.5rem;
- }
-}
-.posts .year {
- color: #fff;
-}
-.posts .title {
- font-size: calc(1.325rem + 0.9vw);
-}
-@media (min-width: 1200px) {
- .posts .title {
- font-size: 2rem;
- }
-}
-.posts .right {
- line-height: 1.15em;
-}
-.lg-title span {
- background-color: #f8f9fa;
- padding-top: 0.2rem;
- padding-bottom: 0.2rem;
- padding-left: 1rem;
- padding-right: 1rem;
- border-radius: 22px;
- color: #343a40 !important;
- border: 3px #6c757d solid;
- display: inline-flex;
-}
-.lg-title .icon {
- margin: 0;
- padding-top: 0 !important;
- padding-bottom: 0 !important;
-}
-.lg-title .icon:before {
- position: relative;
- top: 0;
- left: 0;
- bottom: 0;
- content: "";
- margin-top: -3px;
- margin-bottom: -3px;
- width: 64px;
- margin-right: calc(1.2625rem + 0.15vw);
- margin-left: -30px;
- border-radius: 100%;
-}
-@media (min-width: 1200px) {
- .lg-title .icon:before {
- margin-right: 1.375rem;
- }
}
-#description {
- width: 100%;
- display: -webkit-flex;
- display: flex;
- flex-direction: row;
- padding: 2em;
- column-gap: 20px;
- border-width: 0.5em 0 0;
- border-style: solid;
- align-items: center;
- justify-content: center;
- border-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;
- background-color: #29008a !important;
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
-}
-#description .tile {
- border-left: 7px solid #adb5bd;
- width: 20em;
- padding-left: 1.4em;
- padding-right: 1.4em;
- padding-bottom: 2em;
- background-color: rgba(0, 0, 0, 0.9);
-}
-#description .tile .content {
- margin: 0 auto;
- max-width: 280px;
-}
-#description .tile .content p {
- margin: 0 auto;
+html { /* center HTML and reduce width */
+ background-color: black;
+ margin: auto;
+ max-width: 60em;
}
-#footer {
- display: -webkit-flex;
- display: flex;
- justify-content: end;
- margin-top: 3em;
- padding: 2em 1em;
+body { /* establish document colors and font */
+ background-color: #1c1b22; /* dark grey background */
+ border-radius: 1em;
+ color: #dee2e6; /* off white text */
+ font-family: Roboto, Arial, sans-serif;
+ padding: 1em;
}
-#footer ul li {
- list-style: none;
- display: inline-block;
- margin-right: 0.3em;
+
+strong {
+ color: #ff8f23;
}
+/* fit images to document */
+
img {
- height: auto;
- max-width: 100%;
+ height: auto;
+ max-width: 100%;
}
+
+/* branded styling for links */
+
+a {color: #4fbad5;}
+a:link {text-decoration: none;}
+a:visited {text-decoration: none;}
+a:hover {text-decoration: underline;}
+a:active {text-decoration: underline;}
diff --git a/static/style.css.bak b/static/style.css.bak
new file mode 100644
index 0000000..e416030
--- /dev/null
+++ b/static/style.css.bak
@@ -0,0 +1,444 @@
+/* SPDX-License-Identifier: GPL-3.0-or-later */
+/*!**************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/responsive-nav/responsive-nav.css ***!
+ \**************************************************************************************************/
+/*! responsive-nav.js 1.0.39 by @viljamis */
+
+.nav-collapse ul {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ display: block;
+ list-style: none;
+}
+
+.nav-collapse li {
+ width: 100%;
+ display: block;
+}
+
+.js .nav-collapse {
+ clip: rect(0 0 0 0);
+ max-height: 0;
+ position: absolute;
+ display: block;
+ overflow: hidden;
+ zoom: 1;
+}
+
+.nav-collapse.opened {
+ max-height: 9999px;
+}
+
+.nav-toggle {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+@media screen and (min-width: 40em) {
+ .js .nav-collapse {
+ position: relative;
+ }
+ .js .nav-collapse.closed {
+ max-height: none;
+ }
+ .nav-toggle {
+ display: none;
+ }
+}
+
+/*!*******************************************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/styles.scss ***!
+ \*******************************************************************************************************************************************/
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+html body {
+ background-color: #1c1b22;
+}
+
+body {
+ font-size: 1.25rem;
+ font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ line-height: 1.4;
+ color: #dee2e6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: inherit;
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+a {
+ text-decoration: none;
+ color: #ff8f23;
+ text-decoration: underline;
+}
+a:hover {
+ color: #daf2ee;
+}
+a:visited {
+ color: #ff820a;
+}
+a:active {
+ color: #fff;
+}
+
+.text-lightblue {
+ color: #b6e2ee;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ margin-bottom: 5px;
+ font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-weight: 900;
+ line-height: 1.4em;
+ color: #dee2e6;
+}
+
+h1, .h1 {
+ font-size: calc(1.4375rem + 2.25vw);
+}
+@media (min-width: 1200px) {
+ h1, .h1 {
+ font-size: 3.125rem;
+ }
+}
+
+h2, .h2 {
+ font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+ h2, .h2 {
+ font-size: 2.5rem;
+ }
+}
+
+h3, .h3 {
+ font-size: calc(1.34375rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+ h3, .h3 {
+ font-size: 2.1875rem;
+ }
+}
+
+h4, .h4 {
+ font-size: calc(1.3125rem + 0.75vw);
+}
+@media (min-width: 1200px) {
+ h4, .h4 {
+ font-size: 1.875rem;
+ }
+}
+
+h5, .h5 {
+ font-size: calc(1.28125rem + 0.375vw);
+}
+@media (min-width: 1200px) {
+ h5, .h5 {
+ font-size: 1.5625rem;
+ }
+}
+
+h6, .h6 {
+ font-size: 1.25rem;
+}
+
+.lead {
+ font-size: calc(1.28125rem + 0.375vw);
+ font-weight: 300;
+}
+@media (min-width: 1200px) {
+ .lead {
+ font-size: 1.5625rem;
+ }
+}
+
+.container {
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+}
+@media (max-width: 78.75em) {
+ .container {
+ margin-left: 15px;
+ margin-right: 15px;
+ }
+}
+
+.full-width-container {
+ max-width: 100%;
+ margin-left: 15px;
+ margin-right: 15px;
+}
+
+.header {
+ width: 100%;
+ height: 56px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+ background: #212529;
+ color: #FFF;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 16px;
+}
+.header .brand {
+ margin-left: auto;
+ padding-left: 1em;
+ padding-right: 1em;
+ text-decoration: none;
+}
+.header .brand > h1 {
+ color: #4fbad5 !important;
+ display: inline-flex;
+ align-items: center;
+ font-size: calc(1.2875rem + 0.45vw);
+ margin: 0;
+}
+@media (min-width: 1200px) {
+ .header .brand > h1 {
+ font-size: 1.625rem;
+ }
+}
+.header .brand .brand-img {
+ margin-right: 0.5rem;
+}
+.header .brand .second {
+ color: #ff8f23 !important;
+}
+.header .lang-select {
+ display: inline-flex;
+ vertical-align: middle;
+ margin-left: auto;
+}
+
+.header__menu-toggle {
+ background: none;
+ border: none;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ margin: 0 24px 0 0;
+ color: #FFF;
+}
+
+.side-nav__content {
+ padding-top: 32px;
+ flex: 1;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.side-nav__content li {
+ min-height: 48px;
+ line-height: 48px;
+}
+
+.side-nav__content li a:hover {
+ background: #343a40;
+}
+
+.nav-collapse a {
+ color: #dee2e6;
+ text-decoration: none;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ border-bottom: 1px solid #212529;
+ padding: 0.7em 1em;
+ float: left;
+}
+
+.hero {
+ border-radius: 12px;
+ background: linear-gradient(to right, #159957, #155799);
+ min-height: 300px;
+ width: 100%;
+ color: white;
+ justify-content: center;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 1.25rem;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ align-items: center;
+}
+.hero > h1 {
+ margin: 0;
+}
+.hero .message {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ align-items: center;
+ letter-spacing: 5px;
+}
+
+.posts ul li {
+ list-style: none;
+ margin-bottom: calc(1.525rem + 3.3vw);
+}
+@media (min-width: 1200px) {
+ .posts ul li {
+ margin-bottom: 4rem;
+ }
+}
+.posts ul li a {
+ display: -webkit-flex;
+ display: flex;
+ text-decoration: none;
+}
+.posts ul {
+ border-top: 1px solid #495057;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: calc(1.625rem + 4.5vw);
+}
+@media (min-width: 1200px) {
+ .posts ul {
+ padding-top: 5rem;
+ }
+}
+.posts .left {
+ line-height: 1em;
+ display: -webkit-flex;
+ display: flex;
+ flex-direction: column;
+}
+.posts .date {
+ color: #4fbad5;
+ margin-bottom: 0.3125rem;
+ margin-right: 1em;
+ text-transform: uppercase;
+ font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+ .posts .date {
+ font-size: 1.5rem;
+ }
+}
+.posts .year {
+ color: #fff;
+}
+.posts .title {
+ font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+ .posts .title {
+ font-size: 2rem;
+ }
+}
+.posts .right {
+ line-height: 1.15em;
+}
+.lg-title span {
+ background-color: #f8f9fa;
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border-radius: 22px;
+ color: #343a40 !important;
+ border: 3px #6c757d solid;
+ display: inline-flex;
+}
+.lg-title .icon {
+ margin: 0;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+}
+.lg-title .icon:before {
+ position: relative;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ content: "";
+ margin-top: -3px;
+ margin-bottom: -3px;
+ width: 64px;
+ margin-right: calc(1.2625rem + 0.15vw);
+ margin-left: -30px;
+ border-radius: 100%;
+}
+@media (min-width: 1200px) {
+ .lg-title .icon:before {
+ margin-right: 1.375rem;
+ }
+}
+
+#description {
+ width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ flex-direction: row;
+ padding: 2em;
+ column-gap: 20px;
+ border-width: 0.5em 0 0;
+ border-style: solid;
+ align-items: center;
+ justify-content: center;
+ border-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;
+ background-color: #29008a !important;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
+}
+#description .tile {
+ border-left: 7px solid #adb5bd;
+ width: 20em;
+ padding-left: 1.4em;
+ padding-right: 1.4em;
+ padding-bottom: 2em;
+ background-color: rgba(0, 0, 0, 0.9);
+}
+#description .tile .content {
+ margin: 0 auto;
+ max-width: 280px;
+}
+#description .tile .content p {
+ margin: 0 auto;
+}
+
+#footer {
+ display: -webkit-flex;
+ display: flex;
+ justify-content: end;
+ margin-top: 3em;
+ padding: 2em 1em;
+}
+#footer ul li {
+ list-style: none;
+ display: inline-block;
+ margin-right: 0.3em;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}