bottstrap

This commit is contained in:
uf0 2020-07-28 11:26:18 +02:00
parent e17831b869
commit 995cdd1556
19 changed files with 716 additions and 0 deletions

1
.gitignore vendored
View file

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

View file

@ -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
_variables.scss Normal file
View file

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

249
howto.html Normal file
View file

@ -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 vendored Normal file

Binary file not shown.

BIN
imgs/additional.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 854 KiB

BIN
imgs/correggi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 954 KiB

BIN
imgs/cover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 813 KiB

BIN
imgs/create.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 KiB

BIN
imgs/edit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
imgs/final.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 860 KiB

BIN
imgs/metadata.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 827 KiB

BIN
imgs/nuovo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 KiB

BIN
imgs/upload.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

124
index.html Normal file
View file

@ -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
logo.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 6.9 KiB

11
package.json Normal file
View file

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

107
style.scss Normal file
View file

@ -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
yarn.lock Normal file
View file

@ -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"