Browse Source

bottstrap

uf0 3 years ago
parent
commit
995cdd1556
19 changed files with 716 additions and 0 deletions
  1. 1 0
      .gitignore
  2. 11 0
      README.md
  3. 5 0
      _variables.scss
  4. 249 0
      howto.html
  5. BIN
      imgs/.DS_Store
  6. BIN
      imgs/additional.png
  7. BIN
      imgs/correggi.png
  8. BIN
      imgs/cover.png
  9. BIN
      imgs/create.png
  10. BIN
      imgs/edit.png
  11. BIN
      imgs/final.png
  12. BIN
      imgs/metadata.png
  13. BIN
      imgs/nuovo.png
  14. BIN
      imgs/upload.png
  15. 124 0
      index.html
  16. 91 0
      logo.svg
  17. 11 0
      package.json
  18. 107 0
      style.scss
  19. 117 0
      yarn.lock

+ 1 - 0
.gitignore

@@ -28,3 +28,4 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
+dist

+ 11 - 0
README.md

@@ -1,2 +1,13 @@
 # open-pod-draft-site
 
+Install [Parceljs](https://parceljs.org/)
+
+`npm install -g parcel-bundler`
+
+Install dependencies
+
+`npm install`
+
+Run dev
+
+`npm run start`

+ 5 - 0
_variables.scss

@@ -0,0 +1,5 @@
+$theme-colors: (
+  "danger": #f24400,
+);
+
+$link-color: map-get($theme-colors, "danger");

+ 249 - 0
howto.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title></title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="./style.scss" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="container-fluid">
+        <div class="row row-border-red">
+          <div class="col-12 col-md-2 border-right-red py-3 px-4">
+            <div class="d-flex align-item-center h-100">
+              <a href="./index.html"
+                ><img src="./logo.svg" width="100%" height="auto" alt="OpenPod"
+              /></a>
+            </div>
+          </div>
+        </div>
+        <div class="row row-border-red row-central">
+          <div
+            class="col-12 col-md-2 border-right-red d-flex justify-content-center"
+          ></div>
+          <div class="col-12 col-md-8">
+            <h3 class="my-md-3 my-0 py-3 py-md-0">
+              Come caricare correttamente il tuo podcast su archive.org?
+            </h3>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-12 col-md-2 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">01.</h4>
+          </div>
+          <div class="col-12 col-md-8 pt-3">
+            <p>
+              Esportare la/le traccia/tracce in formato .mp3 dal tuo editor
+              audio preferito (es:
+              <a href="https://www.audacityteam.org/download/">Audacity</a>)
+              aggiungendo i seguenti tag iD3:
+            </p>
+            <ul>
+              <li><i>title</i> -> il titolo dell'episodio</li>
+              <li><i>creator</i> -> l'autore dell'episodio/podcast</li>
+              <li><i>album</i> -> il nome del podcast</li>
+              <li><i>track</i> -> il numero di puntata nome del file</li>
+            </ul>
+            <p>
+              Un consiglio su come nominare i files:
+              titolo_podcast-##-titolo_puntata.mp3 (es:
+              fuori_fase-01-diritto_alla_città.mp3)
+            </p>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-md-2 col-12 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">02.</h4>
+          </div>
+          <div class="col-md-8 col-12 pt-3">
+            <p>
+              Crea un account su
+              <a href="https://archive.org/account/signup">archive.org</a>, è
+              gratuito e non sfruttano commercialmente i tuoi dati
+              <img class="img-fluid" src="./imgs/create.png" />
+            </p>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-md-2 col-12 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">03.</h4>
+          </div>
+          <div class="col-md-8 col-12 pt-3">
+            <p>
+              Crea un nuovo
+              <a href="https://archive.org/create/"><i>item</i></a> e carica una
+              o più tracce audio
+              <img class="img-fluid" src="./imgs/upload.png" />
+              Una volta terminato l'upload ti verrà chiesto di inserire i
+              metadati che OpenPod interpretà nel sequente modo
+            </p>
+            <ul>
+              <li>Page title -> titolo del podcast</li>
+              <li>
+                Page url -> i link al tuo podcast (quello da dare in pasto ad
+                OpenpPod), possibilemente senza spazi e/o caratteri speciali
+                (accenti, simboli, etc). <b>NON</b> si può modificare in seguito
+              </li>
+              <li>Description -> una descrizione del podcast</li>
+              <li>
+                Subject tags -> delle parole chiave che identificano il
+                contenuto del podcast
+              </li>
+              <li>Creator -> l'autore del podcast</li>
+              <li>Collection -> community audio (default)</li>
+              <li>Language -> la lingua del podcast</li>
+              <li>License -> la licenza del podcast</li>
+            </ul>
+            <img class="img-fluid" src="./imgs/metadata.png" />
+            <p>
+              Successivamente clicca su <i>Add Additional Meta</i> e aggiungi le
+              seguenti <i>key:value</i>:
+            </p>
+            <ul>
+              <li>op_link -> il sito di riferimento del podcast (opzionale)</li>
+              <li>
+                op_category -> massimo 3 categorie (vedi elenco in fondo alla
+                pagina) separate da punto e virgola
+              </li>
+              <li>
+                op_explicit -> nel caso tu voglia esplicitare che il contenuto
+                del tuo podcast tratta contenuti sensibili inserire
+                <i>yes</i> contrariamente inserire <i>no</i>
+              </li>
+            </ul>
+            <img class="img-fluid" src="./imgs/additional.png" />
+            <p>
+              A questo punto carica l'immagine di copertina podcast: l'immagine
+              deve essere del formato .jpg o .png. La dimensione consigliata è
+              3000x3000 pixels, minimo 1300x1300 pixels. Per terminare cliccate
+              sul pulsante <i>Upload and create your item</i>
+            </p>
+            <img class="img-fluid" src="./imgs/final.png" />
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-12 col-md-2 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">04.</h4>
+          </div>
+          <div class="col-12 col-md-8 pt-3">
+            <p class="text-danger">
+              Tutti i passaggi e le informazioni richieste fino ad ora sono
+              obbligatorie, se ci sono delle mancanze il tuo feed RSS potrebbe
+              non risulatare valido per alcune piattaforme di distribuzione
+            </p>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-12 col-md-2 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">05.</h4>
+          </div>
+          <div class="col-12 col-md-8 pt-3">
+            <p>
+              Per modificare e aggiornare il tuo podcast clicca su edit nella
+              pagina dell'item:
+            </p>
+            <img class="img-fluid" src="./imgs/edit.png" />
+            <p>
+              se vuoi aggiungere un nuovo episodio al podcast:
+            </p>
+            <ul>
+              <li>cliccare su <i>edit</i> nella pagina dell'<i>item</i></li>
+              <li>cliccare su <i>change the files</i></li>
+              <li>cliccare su <i>add a file</i></li>
+              <li>
+                aggiungere uno o più file e cliccare su
+                <i>add files to existing item</i>
+              </li>
+            </ul>
+            <img class="img-fluid" src="./imgs/nuovo.png" />
+            <p>
+              se non viene riconusciuta l'immagine come copertina:
+            </p>
+            <ul>
+              <li>cliccare <i>edit</i> nella pagina dell'<i>item</i></li>
+              <li>
+                cliccare su <i>change the information</i> scorrere verso il
+                basso fino ad individuare il file dell'immagine
+              </li>
+              <li>in <i>format</i> selezionare <i>Item image</i>></li>
+              <li>cliccare su <i>submit</i> in fondo alla pagina</li>
+            </ul>
+            <img class="img-fluid" src="./imgs/cover.png" />
+            <p>
+              se vuoi cambiare le infomazioni precedentemente inserite:
+            </p>
+            <ul>
+              <li>cliccare su <i>edit</i> nella pagina dell'item</li>
+              <li>cliccare su <i>change the information</i></li>
+              <li>
+                fare le modifiche desiderate e cliccare su <i>submit</i> in
+                fondo alla pagina
+              </li>
+            </ul>
+            <img class="img-fluid" src="./imgs/correggi.png" />
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-12 col-md-2 border-right-red d-flex justify-content-center"
+          >
+            <h4 class="m-0 pt-3">06.</h4>
+          </div>
+          <div class="col-12 col-md-8 pt-3">
+            <p>
+              Elenco delle categorie. Devono essere solo ed esclusivamente
+              queste elencate. Devono essere mantenute anche le maiuscole.
+            </p>
+            <ul>
+              <li>Arts</li>
+              <li>Business</li>
+              <li>Comedy</li>
+              <li>Education</li>
+              <li>Fiction</li>
+              <li>Government</li>
+              <li>History</li>
+              <li>Health & Fitness</li>
+              <li>Kids & Family</li>
+              <li>Leisure</li>
+              <li>Music</li>
+              <li>News</li>
+              <li>Religion & Spirituality</li>
+              <li>Science</li>
+              <li>Society & Culture</li>
+              <li>Sports</li>
+              <li>Technology</li>
+              <li>True Crime</li>
+              <li>TV & Film</li>
+            </ul>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12 d-flex align-items-center">
+            <p class="my-2">
+              Una produzione dalla galassia
+              <a href="https://offtopiclab.org">Off Topica</a> / ospitati dal
+              <a href="https://unit.abbiamoundominio.org/">Collettivo Unit</a> /
+              codice sorgente su
+              <a href="https://git.lattuga.net/offtopic/open-pod"
+                >git.lattuga.net/offtopic/open-pod</a
+              >
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

BIN
imgs/.DS_Store


BIN
imgs/additional.png


BIN
imgs/correggi.png


BIN
imgs/cover.png


BIN
imgs/create.png


BIN
imgs/edit.png


BIN
imgs/final.png


BIN
imgs/metadata.png


BIN
imgs/nuovo.png


BIN
imgs/upload.png


+ 124 - 0
index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html class="homeBodyHtml">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title></title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="./style.scss" />
+  </head>
+  <body class="homeBodyHtml">
+    <div class="wrapper">
+      <div class="container-fluid d-flex flex-column h-100">
+        <div class="row row-border-red">
+          <div class="col-12 col-md-4 border-right-red py-3 px-4">
+            <div class="d-flex align-item-center h-100">
+              <img src="./logo.svg" width="100%" height="auto" alt="OpenPod" />
+            </div>
+          </div>
+        </div>
+        <div class="row row-border-red row-central">
+          <div
+            class="col-12 col-md-4 border-right-red d-flex align-items-center justify-content-center"
+          >
+            <span class="emoji">🤓</span>
+          </div>
+          <div class="col-12 col-md-8 h-100 overflow-auto">
+            <div id="desc" class="pt-md-3 pt-0">
+              <p class="m-0 pb-3 pb-md-0" lang="it">
+                <span class="text-danger">OpenPod</span> è il tentativo di
+                restituire al podcasting la dimensione libera e conviviale che
+                lo caratterizza sin dai suoi esordi. Siamo un gruppo di persone
+                che registrano, ascoltano, producono contenuti audio. Ci
+                piacerebbe condividere soluzioni per farlo con hosting gratuito,
+                banda illimitata e software libero, senza far ricorso ad
+                account, profilazione, abbonamenti, pubblicità e
+                monetizzazione.<br />
+                <span class="text-danger">Com'è possibile?</span> Combinando
+                l'hosting di archive.org, alcune buone pratiche per la
+                produzione dei vostri contenuti e un pizzico di codice.<br />
+                <span class="text-danger">Perché?</span> Per liberarci dalla
+                logica prestazione e commerciale che caratterizza il business
+                model dominante, anche nelle nuove forme di fruizione sonora ma
+                specialmente per generare comunità. Un progetto aperto e
+                abilitante, che punta a mettere a fattor comune saperi
+                comunitari.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-12 col-md-4 border-right-red d-flex align-items-center justify-content-center"
+          >
+            <span class="emoji">🤔</span>
+          </div>
+          <div class="col-12 col-md-8 d-flex align-items-center">
+            <h3 class="my-md-3 my-0 pb-3 pb-md-0 text-center">
+              <a href="./howto.html"
+                >Come caricare correttamente il tuo podcast su archive.org?</a
+              >
+            </h3>
+          </div>
+        </div>
+        <div class="row row-border-red">
+          <div
+            class="col-md-4 col-12 border-right-red d-flex align-items-center justify-content-center"
+          >
+            <span class="emoji">🥳</span>
+          </div>
+          <div class="col-md-8 col-12 py-3">
+            <form>
+              <div class="form-group m-0">
+                <label for="exampleInputEmail1">
+                  <span class="text-danger"
+                    >Genera il feed RSS del tuo podcast</span
+                  >
+                  pronto per la distribuzione su tutti i servizi e app di
+                  podcasting! Incolla qui sotto il link al tuo <i>item</i> su
+                  <a href="https://archive.org" target="_blank">archive.org</a>
+                </label>
+                <input
+                  class="form-control mb-3"
+                  id="exampleInputEmail1"
+                  placeholder="es: https://archive.org/details/il-mio-podcast"
+                />
+
+                <div class="input-group">
+                  <div class="input-group-prepend">
+                    <button
+                      class="btn btn-danger btn-rss text-uppercase"
+                      type="button"
+                    >
+                      copia rss
+                    </button>
+                  </div>
+                  <input
+                    type="text"
+                    class="form-control"
+                    disabled
+                    value="https://openpod.abbiamoundominio.org/podcast/il-mio-podcast"
+                  />
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12 d-flex align-items-center">
+            <p class="my-2">
+              Una produzione dalla galassia
+              <a href="https://offtopiclab.org">Off Topica</a> / ospitati dal
+              <a href="https://unit.abbiamoundominio.org/">Collettivo Unit</a> /
+              codice sorgente su
+              <a href="https://git.lattuga.net/offtopic/open-pod"
+                >git.lattuga.net/offtopic/open-pod</a
+              >
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

+ 91 - 0
logo.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 608.3 180.9" style="enable-background:new 0 0 608.3 180.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#CCCCCC;}
+	.st1{fill:#F24400;}
+	.st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
+	.st3{fill:#D0D0D0;}
+	.st4{fill:url(#SVGID_1_);}
+	.st5{fill:url(#SVGID_2_);}
+	.st6{fill:#732100;}
+	.st7{fill:url(#SVGID_3_);}
+	.st8{fill:url(#SVGID_4_);}
+	.st9{fill:#ADADAD;}
+	.st10{fill:url(#SVGID_5_);}
+	.st11{fill:url(#SVGID_6_);}
+	.st12{fill:#353535;}
+	.st13{fill:#FFFFFF;}
+	.st14{fill:none;}
+	.st15{fill:#212529;}
+	.st16{fill:url(#SVGID_7_);}
+	.st17{fill:url(#SVGID_8_);}
+	.st18{fill:url(#SVGID_9_);}
+	.st19{fill:url(#SVGID_10_);}
+</style>
+<g>
+	<path class="st14" d="M494.7,47.5c-3.5-2.1-7.6-3.2-12.2-3.2c-4.6,0-8.7,1.1-12.2,3.2c-3.5,2.1-6.3,5.1-8.3,8.8
+		c-2,3.8-3,8.1-3,12.9c0,4.9,1,9.1,3,12.8c2,3.7,4.8,6.6,8.3,8.7c3.5,2.1,7.6,3.2,12.2,3.2c4.6,0,8.6-1.1,12.2-3.2
+		c3.5-2.1,6.3-5,8.3-8.7c2-3.7,3-8,3-12.8c0-4.9-1-9.2-3-12.9C501,52.6,498.3,49.7,494.7,47.5z"/>
+	<path class="st14" d="M229.4,45.9c-3.1-2-6.8-3-11.3-3c-5,0-9.3,1.1-12.9,3.3c-3.6,2.2-6.3,5.2-8.1,9.1c-1.1,2.2-1.8,4.6-2.3,7.1
+		H239c-0.4-2.9-1.2-5.7-2.4-8.1C234.9,50.7,232.5,47.9,229.4,45.9z"/>
+	<path class="st14" d="M48.7,46.5c-3.5-2.1-7.6-3.2-12.2-3.2c-4.6,0-8.7,1.1-12.2,3.2c-3.5,2.1-6.3,5.1-8.3,8.8c-2,3.8-3,8.1-3,12.9
+		c0,4.9,1,9.1,3,12.8c2,3.7,4.8,6.6,8.3,8.7C27.9,92,32,93,36.5,93c4.6,0,8.6-1.1,12.2-3.2c3.5-2.1,6.3-5,8.3-8.7c2-3.7,3-8,3-12.8
+		c0-4.9-1-9.2-3-12.9C55,51.6,52.3,48.7,48.7,46.5z"/>
+	<path class="st14" d="M584,45.6c-3.5-2.2-7.5-3.2-12-3.2c-4.4,0-8.4,1.1-12,3.2c-3.6,2.2-6.4,5.1-8.5,8.8
+		c-2.1,3.7-3.1,7.9-3.1,12.7c0,4.7,1,8.9,3.1,12.7c2.1,3.8,4.9,6.8,8.5,8.9c3.6,2.2,7.6,3.2,12,3.2c4.5,0,8.5-1.1,12-3.2
+		c3.5-2.2,6.3-5.1,8.3-8.9c2-3.8,3-8,3-12.7c0-4.8-1-9-3-12.7C590.3,50.7,587.5,47.8,584,45.6z"/>
+	<path class="st1" d="M55.3,36.2c-5.5-3.1-11.7-4.7-18.8-4.7c-7.1,0-13.5,1.6-18.9,4.7c-5.5,3.1-9.8,7.5-12.9,13
+		C1.6,54.6,0,61,0,68.3c0,7.1,1.6,13.5,4.7,19c3.1,5.5,7.4,9.8,12.9,13c5.5,3.1,11.8,4.7,18.9,4.7c7.1,0,13.5-1.6,18.9-4.7
+		c5.5-3.1,9.8-7.5,12.8-13c3.1-5.5,4.6-11.8,4.6-19c0-7.2-1.6-13.6-4.7-19.1C65.1,43.6,60.8,39.3,55.3,36.2z M57,81.1
+		c-2,3.7-4.7,6.6-8.3,8.7C45.2,92,41.1,93,36.5,93c-4.6,0-8.7-1.1-12.2-3.2c-3.5-2.1-6.3-5-8.3-8.7c-2-3.7-3-8-3-12.8
+		c0-4.9,1-9.2,3-12.9c2-3.8,4.8-6.7,8.3-8.8c3.5-2.1,7.6-3.2,12.2-3.2c4.6,0,8.6,1.1,12.2,3.2c3.5,2.1,6.3,5.1,8.3,8.8
+		c2,3.8,3,8.1,3,12.9C60,73.1,59,77.4,57,81.1z"/>
+	<path class="st1" d="M148.1,59.3c-5.5-3.2-11.7-4.8-18.7-4.8c-6.9,0-13.1,1.6-18.5,4.8c-5.5,3.2-9.8,7.6-13,13.2
+		c-3.2,5.6-4.8,11.8-4.9,18.8v60.4c0,1.9,0.6,3.6,1.9,4.8c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8
+		v-35.7c3.1,3.7,6.8,6.6,11.2,8.8c4.4,2.2,9.2,3.2,14.4,3.2c6.4,0,12.2-1.6,17.3-4.8c5.1-3.2,9.2-7.6,12.1-13.1
+		c3-5.5,4.4-11.8,4.4-18.7c0-7-1.6-13.2-4.8-18.8C158,66.9,153.6,62.5,148.1,59.3z"/>
+	<path class="st1" d="M235.9,36c-4.9-3-10.9-4.6-17.7-4.6c-7,0-13.2,1.6-18.5,4.7c-5.4,3.1-9.6,7.5-12.6,13
+		c-3,5.5-4.6,11.9-4.6,19.1c0,7.1,1.6,13.5,4.8,19c3.2,5.5,7.7,9.8,13.4,13c5.7,3.1,12.2,4.7,19.5,4.7c4.1,0,8.3-0.7,12.8-2.2
+		c4.5-1.5,8.2-3.4,11.2-5.8c1.5-1.1,2.2-2.5,2.1-4.1c-0.1-1.6-0.9-3-2.4-4.4c-1.1-1-2.5-1.4-4-1.4c-1.5,0-3,0.6-4.3,1.5
+		c-1.8,1.3-4.1,2.5-7,3.5c-2.9,1-5.7,1.5-8.4,1.5c-5,0-9.5-1.1-13.4-3.3c-3.9-2.2-6.9-5.2-9.1-9c-1.5-2.5-2.4-5.3-2.9-8.3h50.3
+		c1.8,0,3.2-0.6,4.4-1.7c1.1-1.1,1.7-2.5,1.7-4.2c0-7-1.3-13.1-3.9-18.5C244.6,43.3,240.9,39.1,235.9,36z M194.9,62.3
+		c0.5-2.5,1.2-4.9,2.3-7.1c1.9-3.8,4.6-6.9,8.1-9.1c3.6-2.2,7.9-3.3,12.9-3.3c4.4,0,8.2,1,11.3,3c3.1,2,5.5,4.8,7.1,8.3
+		c1.2,2.5,2,5.2,2.4,8.1H194.9z"/>
+	<path class="st1" d="M320.7,35.2c-4.8-2.6-10.3-3.9-16.4-3.9c-5.8,0-11.1,1.3-15.8,3.8c-2.5,1.4-4.8,3.1-6.8,5v-1.4
+		c0-2-0.6-3.7-1.9-4.9c-1.2-1.2-2.9-1.9-4.9-1.9c-1.9,0-3.6,0.6-4.8,1.9c-1.3,1.2-1.9,2.9-1.9,4.9v59c0,1.9,0.6,3.6,1.9,4.8
+		c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8V60.4c0-3.3,0.9-6.2,2.6-8.7c1.8-2.5,4.1-4.5,7.2-6
+		c3-1.5,6.4-2.3,10.1-2.3c4.1,0,7.7,0.8,10.8,2.3c3.1,1.5,5.6,3.9,7.5,7.1c1.9,3.2,2.8,7.3,2.8,12.3v32.6c0,1.9,0.6,3.6,1.9,4.8
+		c1.3,1.3,2.9,1.9,4.8,1.9c1.9,0,3.6-0.6,4.8-1.9c1.3-1.3,1.9-2.9,1.9-4.8V65.2c0-7.3-1.4-13.5-4.2-18.5
+		C329.3,41.6,325.5,37.8,320.7,35.2z"/>
+	<path class="st15" d="M411.7,39.3c-5.5-3.2-11.7-4.8-18.7-4.8c-6.9,0-13.1,1.6-18.5,4.8c-5.5,3.2-9.8,7.6-13,13.2
+		s-4.8,11.8-4.9,18.8v60.4c0,1.9,0.6,3.6,1.9,4.8c1.3,1.3,2.9,1.9,4.8,1.9c2,0,3.7-0.6,4.9-1.9c1.2-1.3,1.9-2.9,1.9-4.8V95.9
+		c3.1,3.7,6.8,6.6,11.2,8.8c4.4,2.2,9.2,3.2,14.4,3.2c6.4,0,12.2-1.6,17.3-4.8c5.1-3.2,9.2-7.6,12.1-13.1c3-5.5,4.4-11.8,4.4-18.7
+		c0-7-1.6-13.2-4.8-18.8C421.5,46.9,417.2,42.5,411.7,39.3z"/>
+	<path class="st15" d="M501.4,37.2c-5.5-3.1-11.7-4.7-18.8-4.7c-7.1,0-13.5,1.6-18.9,4.7c-5.5,3.1-9.8,7.5-12.9,13
+		c-3.1,5.5-4.7,11.9-4.7,19.1c0,7.1,1.6,13.5,4.7,19c3.1,5.5,7.4,9.8,12.9,13c5.5,3.1,11.8,4.7,18.9,4.7s13.5-1.6,18.9-4.7
+		c5.5-3.1,9.8-7.5,12.8-13c3.1-5.5,4.6-11.8,4.6-19c0-7.2-1.6-13.6-4.7-19.1C511.1,44.6,506.8,40.3,501.4,37.2z M503,82.1
+		c-2,3.7-4.7,6.6-8.3,8.7c-3.5,2.1-7.6,3.2-12.2,3.2c-4.6,0-8.7-1.1-12.2-3.2c-3.5-2.1-6.3-5-8.3-8.7c-2-3.7-3-8-3-12.8
+		c0-4.9,1-9.2,3-12.9c2-3.8,4.8-6.7,8.3-8.8c3.5-2.1,7.6-3.2,12.2-3.2c4.6,0,8.6,1.1,12.2,3.2c3.5,2.1,6.3,5.1,8.3,8.8
+		c2,3.8,3,8.1,3,12.9C506,74.1,505,78.4,503,82.1z"/>
+	<path class="st15" d="M606.5,1.9c-1.2-1.2-2.9-1.9-4.9-1.9c-1.9,0-3.6,0.6-4.8,1.9c-1.3,1.2-1.9,2.9-1.9,4.9v35.7
+		c-3-3.7-6.7-6.6-11.1-8.8c-4.4-2.2-9.2-3.2-14.4-3.2c-6.4,0-12.2,1.6-17.3,4.8c-5.1,3.2-9.2,7.6-12.1,13.1
+		c-3,5.5-4.4,11.8-4.4,18.7c0,7,1.6,13.2,4.8,18.8c3.2,5.6,7.6,10,13.1,13.2c5.5,3.2,11.7,4.8,18.6,4.8s13.1-1.6,18.5-4.8
+		c5.5-3.2,9.8-7.6,13-13.2c3.2-5.6,4.8-11.8,4.8-18.8V6.8C608.3,4.7,607.7,3.1,606.5,1.9z M592.3,79.8c-2,3.8-4.8,6.8-8.3,8.9
+		c-3.5,2.2-7.5,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.6-2.2-6.4-5.1-8.5-8.9c-2.1-3.8-3.1-8-3.1-12.7c0-4.8,1-9,3.1-12.7
+		c2.1-3.7,4.9-6.6,8.5-8.8c3.6-2.2,7.6-3.2,12-3.2c4.5,0,8.5,1.1,12,3.2c3.5,2.2,6.3,5.1,8.3,8.8c2,3.7,3,7.9,3,12.7
+		C595.4,71.8,594.3,76,592.3,79.8z"/>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="93.3071" y1="164.854" x2="369.3071" y2="164.854">
+		<stop  offset="2.689063e-02" style="stop-color:#F24400"/>
+		<stop  offset="0.9755" style="stop-color:#212529"/>
+	</linearGradient>
+	<path class="st4" d="M93.3,174.4L93.3,174.4c0-3.4,2.7-6.2,6.2-6.5l262.6-19c3.9-0.3,7.2,2.7,7.2,6.5l0,0c0,3.4-2.7,6.2-6.2,6.5
+		l-262.6,19C96.6,181.1,93.3,178.1,93.3,174.4z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="99.5068" y1="142.1286" x2="363.4058" y2="142.1286">
+		<stop  offset="2.689063e-02" style="stop-color:#F24400"/>
+		<stop  offset="0.9755" style="stop-color:#212529"/>
+	</linearGradient>
+	<polygon class="st5" points="99.5,145.9 362.1,125.9 363.4,138.4 99.8,158.4 	"/>
+</g>
+</svg>

+ 11 - 0
package.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "bootstrap": "^4.5.0"
+  },
+  "devDependencies": {
+    "sass": "^1.26.9"
+  },
+  "scripts": {
+    "start": "parcel index.html howto.html"
+  }
+}

+ 107 - 0
style.scss

@@ -0,0 +1,107 @@
+@import "variables";
+@import "~bootstrap/scss/bootstrap";
+@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@515&family=Fira+Code:wght@515&display=swap");
+
+:root {
+  --openpod-red: #f24400;
+  --openpod-grey: #ccc;
+  --openpod-red-dark: #732100;
+  --border: 2px;
+}
+body,
+html {
+  font-family: "Fira Code", monospace;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Comfortaa", cursive;
+  font-variation-settings: "wght" 700;
+}
+
+.homeBodyHtml {
+  height: unset;
+  overflow: auto;
+}
+
+.wrapper {
+  height: 100%;
+  background: var(--openpod-grey);
+  // border: var(--border) solid var(--openpod-red);
+}
+
+.border-right-red {
+  border-right: none;
+}
+
+#desc {
+  height: 100%;
+}
+
+#desc p {
+  // color: transparent;
+  // background: linear-gradient(90deg, var(--openpod-red), black);
+  // -webkit-background-clip: text;
+  // background-clip: text;
+  text-align: left;
+}
+
+.row-central {
+  height: 100%;
+  flex: unset;
+  min-height: 0;
+}
+
+.row-border-red {
+  border-bottom: var(--border) solid var(--openpod-red);
+}
+
+.emoji {
+  font-size: 2rem;
+}
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 768px) {
+  .homeBodyHtml {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .emoji {
+    font-family: "Comfortaa", cursive;
+    font-size: 3rem;
+  }
+
+  .border-right-red {
+    border-right: var(--border) solid var(--openpod-red);
+  }
+
+  #desc {
+    column-count: 2;
+    column-fill: auto;
+    column-gap: 30px;
+  }
+
+  #desc p {
+    text-align: justify;
+    hyphens: auto;
+  }
+}
+
+@media (min-width: 992px) {
+}
+
+@media (min-width: 1200px) {
+}
+
+@media (min-width: 1400px) {
+  #desc {
+    column-count: 3;
+  }
+}

+ 117 - 0
yarn.lock

@@ -0,0 +1,117 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+bootstrap@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
+  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+"chokidar@>=2.0.0 <4.0.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+sass@^1.26.9:
+  version "1.26.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.9.tgz#73c10cbb88c12b22a9e0107725bfd62296f4978f"
+  integrity sha512-t8AkRVi+xvba4yZiLWkJdgJHBFCB3Dh4johniQkPy9ywkgFHNasXFEFP+RG/F6LhQ+aoE4aX+IorIWQjS0esVw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"