aboutsummaryrefslogtreecommitdiff
path: root/sheets/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'sheets/index.html')
-rw-r--r--sheets/index.html295
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>&#x1F5FA;</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&nbsp;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&nbsp;karteczkami opiera się na tym, że osoba, która
+ znajdzie się w&nbsp;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 &#x1F642;
+ </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 &#x1F642;
+ </p>
+ <p class="pl-only">
+ Każdy, przez kogo „przechodzi” karteczka, jest zachęcony do
+ wydrukowania i&nbsp;puszczenia w&nbsp;obieg jednej lub dwóch
+ dodatkowych (dla ułatwienia na szablonie kartki znajdują się dwie
+ mniejsze, do odcięcia).
+ W&nbsp;ten sposób karteczki mogą się (w&nbsp;teorii)
+ rozprzestrzeniać bardzo szybko &#x1F603;
+ </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 &#x1F603;
+ </p>
+ <p class="pl-only">
+ Karteczki zostały sporządzone w&nbsp;LaTeX'u, pliki źródłowe można
+ znaleźć
+ w&nbsp;<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&nbsp;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>