diff options
| author | Wojtek Kosior <koszko@koszko.org> | 2022-12-10 13:08:42 +0100 |
|---|---|---|
| committer | Wojtek Kosior <koszko@koszko.org> | 2022-12-10 13:08:42 +0100 |
| commit | 20ec27c878cb4dc571ffb789adb62320c56b4e24 (patch) | |
| tree | 07ee2dc9c48b78d5c67e550b075a3019a3ef900d /sheets/index.html | |
| parent | f8e1787c1a705902851b2f3aa87bceaa83f45147 (diff) | |
| download | sheets-websites-20ec27c878cb4dc571ffb789adb62320c56b4e24.tar.gz sheets-websites-20ec27c878cb4dc571ffb789adb62320c56b4e24.zip | |
add updated websites files and facilitate deployment under Guix
Diffstat (limited to 'sheets/index.html')
| -rw-r--r-- | sheets/index.html | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/sheets/index.html b/sheets/index.html new file mode 100644 index 0000000..51101a0 --- /dev/null +++ b/sheets/index.html @@ -0,0 +1,295 @@ +<!DOCTYPE html> +<!-- + SPDX-License-Identifier: CC0-1.0 + + Copyright (C) 2022 Wojtek Kosior + + Available under the terms of Creative Commons Zero v1.0 Universal. + --> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta http-equiv="Content-Security-Policy" content="script-src 'none'"> + <title>🗺</title> + <link rel="stylesheet" href="/static/normalize.css"> + <style> + input { + display: none; + } + + * { + color: #777; + } + + html { + min-height: 100vh; + font-family: sans-serif; + } + + body { + height: 100%; + background-color: #eee; + } + + .header * { + color: #555; + } + + #main { + background-color: white; + } + + .content { + max-width: 850px; + padding: 0px 20px 20px 20px; + margin: 0 auto; + } + + .dummy-div { + height: 1px; + } + + .content>.header, .content>.center { + margin-left: 0px; + } + + .content>* { + margin-left: 20px; + } + + .sheet-img { + box-shadow: 10px 10px 8px #888888; + border: 1px solid #eee; + -webkit-backface-visibility: hidden; + background: white; + margin-bottom: 40px; + max-width: 40vw; + height: auto; + } + + @media screen and (max-width: 320px) { + .sheet-img { + max-width: 37vw; + } + } + .sheet-front { + position: relative; + left: -0px; + transform: rotate(-8deg); + } + + .sheet-back { + position: relative; + left: -20px; + top: 20px; + transform: rotate(15deg); + } + + footer { + border-top: 1px solid #888; + height: 100%; + } + + footer p { + max-width: 850px; + margin-left: auto; + margin-right: auto; + } + + h1 { + text-align: center; + } + + h2 { + padding-top: 10px; + border-top: 1px solid #ccc; + } + + .center { + text-align: center; + } + + aside { + display: inline-block; + padding: 10px; + border-radius: 4px; + background-color: #acf; + text-color: #555; + } + + .lang-switch { + position: fixed; + right: 13px; + top: 70px; + text-align: center; + letter-spacing: -1px; + z-index: 1; + } + + .lang-code { + background: radial-gradient(#ffff 45%, #fff6 60%, #fff0 70%); + } + + label.lang-label { + display: block; + background: #555; + height: 50px; + width: 23px; + padding: 2px; + border: solid 2px #888; + border-radius: 17px; + margin: 2px 0; + } + + .lang-switch-slide { + height: 100%; + width: 100%; + position:relative; + } + + .lang-switch-circle { + background: #66C; + width: 17px; + height: 17px; + border: solid 3px #888; + border-radius: 13px; + transition: top 0.15s ease-out; + } + + #lang:not(:checked)~* .lang-switch-circle { + position: absolute; + top: 0; + } + #lang:checked~* .lang-switch-circle { + position: absolute; + top: 27px; + } + + #lang:not(:checked)~* .bold-pl { + font-weight: bold; + } + #lang:checked~* .bold-en { + font-weight: bold; + } + + #lang:not(:checked)~* .en-only { + display: none; + } + #lang:checked~* .pl-only { + display: none; + } + </style> + </head> + <body> + <input id="lang" type="checkbox"> + <div class="lang-switch"> + <div class="lang-code bold-pl"> + PL + </div> + <label for="lang" class="lang-label"> + <div class="lang-switch-slide"> + <div class="lang-switch-circle"> + </div> + </div> + </label> + <div class="lang-code bold-en"> + EN + </div> + </div> + <div id="main"> + <div class="content"> + <div class="dummy-div"></div> + <div class="header"> + <h1 class="pl-only">Kartki zmieniania świata</h1> + <h1 class="en-only">World changing sheets</h1> + </div> + <div class="center"> + <img src="/sheet_front.png" class="sheet-img sheet-front pl-only"></img> + <img src="/en/sheet_front.png" class="sheet-img sheet-front en-only"></img> + <img src="/sheet_back.png" class="sheet-img sheet-back pl-only"></img> + <img src="/en/sheet_back.png" class="sheet-img sheet-back en-only"></img> + </div> + <div> + <p class="pl-only"> + Właśnie trafiłeś/aś na stronę karteczek zmieniania świata. + To wydrukowane z dostępnego <a href="/sheets.pdf">tutaj</a> + pliku pdf karteczki, na których można wpisywać pomysły na zmienianie + świata. + </p> + <p class="en-only"> + You've reached the website of world changing sheets. + These are sheets printed from <a href="/en/sheets.pdf">this</a> pdf + file, they are meant for writing ideas for changing the world. + </p> + <p class="pl-only"> + Pomysł z karteczkami opiera się na tym, że osoba, która + znajdzie się w posiadaniu kartki, dopisuje do niej jakieś swoje + wezwanie do zmieniania świata, np. „Segregujmy śmieci!”. + Następnie, ta osoba (opcjonalnie) stawia znaczek przy jednym lub + kilku wcześniej wpisanych wezwaniach, które decyduje się zacząć + realizować na co dzień. + Na koniec kartka jest przekazywana kolejnej osobie 🙂 + </p> + <p class="en-only"> + The sheets idea is as follows: whoever comes into possession of + a sheet, adds one call for changing the world to it. + Then that person (optionally) chooses one or more calls to start + realizing on daily basis and adds a tally mark next to each of them. + At the end, the sheet gets passed to another person 🙂 + </p> + <p class="pl-only"> + Każdy, przez kogo „przechodzi” karteczka, jest zachęcony do + wydrukowania i puszczenia w obieg jednej lub dwóch + dodatkowych (dla ułatwienia na szablonie kartki znajdują się dwie + mniejsze, do odcięcia). + W ten sposób karteczki mogą się (w teorii) + rozprzestrzeniać bardzo szybko 😃 + </p> + <p class="en-only"> + Everyone through whom a sheet "passes" is encouraged to print and + give away one or more additional sheets (for convenience on the + print template there are two smaller sheets that can be cut off). + This way sheets can (in theory) spread very quickly 😃 + </p> + <p class="pl-only"> + Karteczki zostały sporządzone w LaTeX'u, pliki źródłowe można + znaleźć + w <a href="https://git.koszko.org/change-world-sheets/">tym repozytorium gitowym</a>. + </p> + <p class="en-only"> + Sheets have been created in LaTeX, source files can be found in <a href="https://git.koszko.org/change-world-sheets/">this git repository</a>. + </p> + </div> + </div> + </div> + <footer> + <p class="legal-license pl-only" style="white-space: normal; text-align: center;"> + Ta strona wykorzystuje stylowanie + <a href="https://github.com/necolas/normalize.css">Normalize CSS</a> + dostępne na + <a href="/static/normalize-mit-license.txt">licencji w stylu X11</a>. + </p> + <p class="legal-license en-only" style="white-space: normal; text-align: center;"> + This site utilizes + <a href="https://github.com/necolas/normalize.css">Normalize CSS</a> + styling available under + <a href="/static/normalize-mit-license.txt">an X11-style license</a>. + </p> + <p class="legal-license pl-only" style="white-space: normal; text-align: center;"> + Reszta jest autorstwa <a href="https://koszko.org/koszko.html">Wojtka</a>, + dostępna + <a href="https://git.koszko.org/koszko-org-website/">tutaj</a> + na warunkach + <a href="/static/cc0-1.0.txt">CC0</a>. + </p> + <p class="legal-license en-only" style="white-space: normal; text-align: center;"> + The rest is made by <a href="https://koszko.org/koszko.html">Wojtek</a>, + available + <a href="https://git.koszko.org/sheets-websites/">here</a> + under the terms of + <a href="/static/cc0-1.0.txt">CC0</a>. + </p> + </footer> + </body> +</html> |