From ee7f5a89e5caff068b0d3d6ae719fa70adbcc38e Mon Sep 17 00:00:00 2001 From: Eric Duhamel Date: Fri, 5 May 2023 12:58:02 -0700 Subject: [PATCH] push new minimal landing page --- content/_index.md | 144 ++------------ content/intro.md | 129 ++++++++++++ static/style.css | 464 ++++--------------------------------------- static/style.css.bak | 444 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 632 insertions(+), 549 deletions(-) create mode 100644 content/intro.md create mode 100644 static/style.css.bak 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%; +}