les 4 years ago
parent
commit
7e9df7e750
2 changed files with 80 additions and 59 deletions
  1. 79 59
      index.html
  2. 1 0
      static/css/style.css

+ 79 - 59
index.html

@@ -33,79 +33,99 @@
   </div>
   <a name="desc">&nbsp;</a>
   
-  <div class='container'>
 
     <p>
 
     <b>Cisti.org</b> nasce da un manipolo di hacker che ha deciso di rimboccarsi le macchine e riprendere il controllo degli strumenti che si utilizzano per comunicare e organizzarsi quotidianamente.
-A noi piace definirlo server radicale, ed è la nostra risposta alle megamacchine digitali.
+A noi piace definirlo server radicale ed è la nostra risposta alle megamacchine digitali.</p>
 <br/><br/>
 
 <b>Cisti.org</b> è una cassetta degli attrezzi, scoprili qui sotto:
 
-    <hr>
-    <button class='btn btn-link' data-toggle="collapse" data-target="#gancio">Gancio</button>
-    <button class='btn btn-link' data-toggle="collapse" data-target="#mastodon">Mastodon</button>
-    <button class='btn btn-link' data-toggle="collapse" data-target="#pad">Pad</button>
-    <button class='btn btn-link' data-toggle="collapse" data-target="#facciamo">Facciamo</button>
-    <button class='btn btn-link' data-toggle="collapse" data-target="#farma">Farma</button>
-    <!--<button class='btn btn-link' data-toggle="collapse" data-target="#cal">Cal</button>-->
+    <div class="row">
 
-    <div class="collapse" id="gancio" data-parent='.container'>
-    <p>
-      Gancio nasce da carta canta, una fanzine bimestrale cartacea che qui a Torino raccoglie gli eventi dei movimenti sociali.
-      Ci è sembrata una gran bella idea e abbiamo pensato che un posto che raccogliesse gli eventi locali fosse fondamentale.<br/>
-      Vi hanno cancellato l'evento su facebook? Avete organizzato due concerti hardcore nella stessa serata? Cosa faccio stasera? Gancio risponde a
-      queste e altre domande.<br/>
-      Gancio è un progetto interamente scritto da noi, è software libero ed è pensato per essere adottabile/adattabile facilmente da altre comunità,
-      che ci sembra sia un bisogno non solo torinese.<br/><br/>
-      <iframe style='height: 400px; border: 0px; width: 100%;' src="https://gancio.cisti.org/embed/list?title=Prossimi eventi&max=6"></iframe>
-      ⇒<a href='https://gancio.cisti.org' class='btn btn-link'>Visita gancio.cisti.org</a>
-    </p>
-    </div>
+      <div class="col-sm-12 col-md-6 mt-2">
+        <div class="card">
+          <a class="card-header btn btn-link w-100" href='https://pad.cisti.org'>
+            <strong>Pad</strong>
+          </a>
+          <div class="card-body">
+            <p class="card-text small text-small text-muted">
+              La lista della spesa, il comunicato di rivendicazione per le zecche indipendenti, gli accolli per quell* che non hanno partecipato alla riunione, quel report maledetto dell'assemblea per la banda autogestita di quartiere... Hai tanto da scrivere ma non vorresti farlo da solo? Il pad è uno strumento indispensabile per organizzare le attività collettive, scrivere documenti a più mani, condividere testi in cerca di correzioni e revisioni. Noi lo usiamo da anni, ce ne sono tanti di svariate forme e colori, ma il nostro è speciale! È cisti! Aprilo e usalo come ti pare!
+            </p>
+          </div>
+          <a href='https://pad.cisti.org' class='card-footer btn btn-link w-100'>⇒ Visita pad.cisti.org</a>
+        </div>
+      </div>
 
-    <div class='collapse' id='mastodon' data-parent='.container'>
-    <p>
-      Mastodon e' un social network. Sappiamo che per molti e molte è una brutta parola, anche per molti di noi che sui social network commerciali non ci sono
-      mai stati. I movimenti (e in generale le persone) hanno però bisogno di comunicare e fondare la nostra comunicazione su piattaforme orientate
-      esclusivamente al profitto, al controllo e alla collaborazione con le forze di polizia non è una scelta lungimirante.</p>
-    <p>
-      Nella ricerca di strumenti validi verso altre direzioni, abbiamo trovato mastodon.
-      Mastodon non ha azionisti, è della comunità, non è controllato da nessuno centralmente, è federato, non è facile da censurare,
-      non ti chiede i documenti nè la tua vera identità. Mastodon nasce circa tre anni fa con una prima forte spinta dalla comunità
-      LGBT alla ricerca di uno spazio digitale dove potersi esprimere serenamente.<br/>Ora i nodi che fanno parte della rete mastodon
-      sono tanti, più di 6mila con circa tre milioni di utenti. Spiegare mastodon in due righe non e' immediato ma potete trovare <a href='https://mastodon.cisti.org/about/more'>qua
-      alcune delle riflessioni</a> che ci hanno accompagnato in questo percorso. Potete anche guardare <a href='https://peertube.social/videos/watch/d7fabc85-f110-4699-beb0-7edf6d4082ba'>un breve video esplicativo</a>.<br/>
-      <br/>⇒<a href='https://mastodon.cisti.org' class='btn btn-link'>Visita mastodon.cisti.org</a>
-    </p>
-    </div>
+      <div class="col-sm-12 col-md-6 mt-2">
+        <div class="card h-100">
+          <a class="card-header btn btn-link w-100" href='https://cisti.org/docs/mumble/intro'>
+            <strong>Farma</strong>
+          </a>
+          <div class="card-body">
+            <p class="card-text small text-small text-muted">
+              Un attrezzo per chiacchierare a voce col tuo collettivo al tempo della pandemia globale (ma anche dopo).
+              Si basa su un software di nome mumble, se non lo hai mai usato prima abbiamo scritto una guida <a href='https://cisti.org/docs/mumble/intro'>qui</a>.
+            </p>
+          </div>
+          <a href='https://cisti.org/docs/mumble/intro' class='card-footer btn btn-link w-100'>⇒ Visita farma.cisti.org</a>
+        </div>        
+      </div>
 
-    <div class='collapse' id='pad' data-parent='.container'>
-    <p>
-    La lista della spesa, il comunicato di rivendicazione per le zecche indipendenti, gli accolli per quell* che non hanno partecipato alla riunione, quel report maledetto dell'assemblea per la banda autogestita di quartiere... Hai tanto da scrivere ma non vorresti farlo da solo? Il pad è uno strumento indispensabile per organizzare le attività collettive, scrivere documenti a più mani, condividere testi in cerca di correzioni e revisioni. Noi lo usiamo da anni, ce ne sono tanti di svariate forme e colori, ma il nostro è speciale! È cisti! Aprilo e usalo come ti pare!
-      <br/>⇒<a href='https://pad.cisti.org' class='btn btn-link'>Visita pad.cisti.org</a>
-    </p>
-    </div>
+      <div class="col-sm-12 col-md-6 mt-2">
+        <div class="card h-100">
+          <a class="card-header btn btn-link w-100" href='https://gancio.cisti.org'>
+            <strong>Gancio</strong>
+          </a>
+          <div class="card-body">
+            <p class="card-text small text-small text-muted">
+              Gancio nasce da carta canta, una fanzine bimestrale cartacea che qui a Torino raccoglie gli eventi dei movimenti sociali.
+              Ci è sembrata una gran bella idea e abbiamo pensato che un posto che raccogliesse gli eventi locali fosse fondamentale.<br/>
+              Vi hanno cancellato l'evento su facebook? Avete organizzato due concerti hardcore nella stessa serata? Cosa faccio stasera? Gancio risponde a
+              queste e altre domande.<br/>
+              Gancio è un progetto interamente scritto da noi, è software libero ed è pensato per essere adottabile/adattabile facilmente da altre comunità,
+              che ci sembra sia un bisogno non solo torinese.<br/>
+            </p>
+          </div>
+          <a href='https://gancio.cisti.org' class='card-footer btn btn-link w-100'>⇒ Visita gancio.cisti.org</a>
+        </div>
+      </div>
 
-    <div class='collapse' id='facciamo' data-parent='.container'>
-    <p>
-    La paranoia si sente nell'aria? Abbiamo scritto una panoramica concisa di autodifesa digitale. Rappresenta un'insieme di conoscenze e buone pratiche tratte da varie fonti ed esperienze.
-      <br/>⇒<a href='https://facciamo.cisti.org' class='btn btn-link'>Visita facciamo.cisti.org</a>
-    </p></div>
+      <div class="col-sm-12 col-md-6 mt-2">
+        <div class="card">
+          <a class="card-header btn btn-link w-100" href='https://mastodon.cisti.org'>
+            <strong>Mastodon</strong>
+          </a>
+          <div class="card-body">
+            <p class="card-text small text-small text-muted">
+              Mastodon e' un social network federato. Sappiamo che per molti e molte è una brutta parola, anche per molti di noi che sui social network commerciali non ci sono
+              mai stati. Le persone hanno però bisogno di comunicare e fondare la nostra comunicazione su piattaforme orientate
+              esclusivamente al profitto, al controllo e alla collaborazione con le forze di polizia non è una scelta lungimirante.
+              Nella ricerca di strumenti validi verso altre direzioni, abbiamo trovato Mastodon, non ha azionisti, non è controllato da nessuno centralmente, è federato, non è facile da censurare,
+              non ti chiede i documenti nè la tua vera identità.Potete trovare <a href='https://mastodon.cisti.org/about/more'>qua
+              alcune delle riflessioni</a> che ci hanno accompagnato in questo percorso. Potete anche guardare <a href='https://peertube.social/videos/watch/d7fabc85-f110-4699-beb0-7edf6d4082ba'>un breve video esplicativo</a>.<br/>
+            </p>
+          </div>
+          <a href='https://mastodon.cisti.org' class='card-footer btn btn-link w-100'>⇒ Visita mastodon.cisti.org</a>
+        </div>
+      </div>      
 
-    <div class='collapse' id='farma' data-parent='.container'>
-      <p>
-        Un attrezzo per chiacchierare a voce col tuo collettivo al tempo della pandemia globale (ma anche dopo).
-        Si basa su un software di nome mumble, se non lo hai mai usato prima abbiamo scritto una guida <a href='https://prove.fugadalcontrollo.org/appunti/mumble'>qui</a>.
-      <br/>⇒<a href='https://farma.cisti.org' class='btn btn-link'>Visita farma.cisti.org</a>
-    </p></div>
-  
-
-    <!--<div class='collapse' id='cal' data-parent='.container'>-->
-    <!--<p>-->
-      <!--Un calendario privato per organizzarsi in gruppo-->
-    <!--</p></div>-->
 
+      <div class="col-sm-12 col-md-6 mt-2">
+        <div class="card h-100">
+          <a class="card-header btn btn-link w-100" href='https://facciamo.cisti.org'>
+            <strong>Facciamo</strong>
+          </a>
+          <div class="card-body">
+            <p class="card-text small text-small text-muted">
+              La paranoia si sente nell'aria? Abbiamo scritto una panoramica concisa di autodifesa digitale. Rappresenta un'insieme di conoscenze e buone pratiche tratte da varie fonti ed esperienze.
+            </p>
+          </div>
+          <a href='https://facciamo.cisti.org' class='card-footer btn btn-link w-100'>⇒ Visita facciamo.cisti.org</a>
+        </div>        
+      </div>
+    </div>
     <hr>
     <a name='chisiamo'></a>
     <h4>Chi siamo</h4>

+ 1 - 0
static/css/style.css

@@ -1,6 +1,7 @@
 html {
   font-size: 13px;
   scroll-behavior: smooth;
+  scrollbar-width: thin;
 }
 
 body {