les 4 years ago
parent
commit
9fee30c81a
4 changed files with 140 additions and 341 deletions
  1. 64 199
      index.html
  2. 0 59
      info.html
  3. 0 70
      pad.html
  4. 76 13
      static/css/style.css

+ 64 - 199
index.html

@@ -1,79 +1,71 @@
 <!DOCTYPE html>
 <html lang="it">
   <head>
-	<link rel="stylesheet" href="bootstrap.css">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-	<link rel="stylesheet" href="static/css/style.css">
+	  <link rel="stylesheet" href="static/css/bootstrap.min.css">
+	  <!-- <link rel="stylesheet" href="bootstrap.css"> -->
+	  <link rel="stylesheet" href="static/css/style.css">
+	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <meta charset="utf-8">
     <title>Cisti</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="radical local server" />
-    <meta name="keywords" content="anarchism, server, torino, hacklab, underscore" />
+    <meta name="description" content="cisti.org, uno spazio digitale liberato, un server scapestrato e autogestito anticapitalista, antifascista, antirazzista, antisessista" />
+    <meta name="keywords" content="anarchism, server, torino, hacklab, underscore, cisti, cisti.org" />
     <meta name="author" content="underscore" />
-    <!-- <script src="script.js"></script> -->
 </head>
 <body>
+
+
   <div class="jumbotron">
-      <h1 class="display-3">cisti</h1>
-      <h1 class="display-3 org">.org</h1>
+      <h1 class="display-1">cisti</h1>
+      <h1 class="display-1 org">.org</h1>
       <p class='lead'>uno spazio digitale liberato<br/>un server scapestrato e autogestito<br/>
 		anticapitalista, antifascista, antirazzista, antisessista</p>
 		<i class="fa fa-chevron-down" id='chevron'></i>
   </div>
+
+
+  
   <div class='container'>
-    <!-- <div class="list-group">
-      <a href="https://mastodon.cisti.org" class="list-group-item w-100 list-group-item-action flex-column align-items-start">
-        <div class="d-flex justify-content-between">
-          <h5 class="mb-1">Mastodon</h5>
-        </div>
-        <p class="mb-1">Un social autogestito, decentralizzato, indipendente e <b>federato</b>.</p>
-      </a>
-      <a href="https://gancio.cisti.org" class="w-100 list-group-item list-group-item-action flex-column align-items-start">
-        <div class="d-flex justify-content-between">
-          <h5 class="mb-1">Gancio</h5>
-        </div>
-        <p class="mb-1">Un'agenda condivisa per comunità locali.</p>
-      </a>
-      <a href="https://pad.cisti.org" class="w-100 list-group-item list-group-item-action flex-column align-items-start">
-        <div class="d-flex justify-content-between">
-          <h5 class="mb-1">Pad</h5>
-        </div>
-        <p class="mb-1">Per scrivere documenti collaborativi.</p>
-      </a>
-	</div> -->
-    <div class="card-deck">
-		<a href="https://mastodon.cisti.org" class="card list-group-item-action">
-			<h4 class="card-header"><img src='https://www.non-compete.com/wp-content/uploads/2018/03/mastodon_icon-300x298.png' width='40px'/>Mastodon</h4>
-			<div class="card-body">
-				<p class="card-text">Un social autogestito, decentralizzato, indipendente e <b>federato</b>.</p>
-			</div>
-		</a>
-		<a href="https://gancio.cisti.org" class="card list-group-item-action">
-			<h4 class="card-header"><img src='static/images/gancio.ico'/> Gancio</h4>
-			<div class="card-body">
-				<p class="card-text">L'agenda dei movimenti sociali di Torino e dintorni.</p>
-			</div>
-		</a>
-		<a href="https://pad.cisti.org" class="card w-100 list-group-item list-group-item-action flex-column align-items-start">
-			<div class="d-flex justify-content-between">
-			<h5 class="mb-1">Pad</h5>
-			</div>
-			<p class="mb-1">Per scrivere documenti collaborativi.</p>
-		</a>
-		  </div>	
-  </div><br/>
-  <div class='mt-4 container font-weight-light' >
-	<h4>Cos'è?</h4>
-	<p>Cisti è un contenitore di strumenti radicali per scrivere, comunicare e condividere.
-		E' uno spazio digitale autogestito con tanto sudore dall'<a href='https://autistici.org/underscore'>hacklab underscore</a> di Torino.
-		Non ci muove il profitto, ma il bisogno di riprendere il controllo degli strumenti comunicativi che utilizziamo quotidianamente.<br/>
-		L'abbiamo chiamato così perche' crediamo sia importante prendersi cura innanzitutto delle comunità affini sul territorio.
-	</p>
-	<br/>
-	<h4>Pad ⇒ https://pad.cisti.org</h4>
-	<p>Il pad e' uno strumento che noi usiamo spesso e crediamo possa essere utile a molte persone. Permette di scrivere testi in maniera collaborativa.</p>
-	<br/>
-	<h4><img src='static/images/gancio.ico'/> Gancio ⇒ https://gancio.cisti.org</h4>
+
+    <p>
+      Cisti.org nasce dalla volontà di riprendere il controllo degli strumenti che utilizziamo per comunicare e organizzarci quotidianamente.
+      Ad ora ospitiamo tre servizi:
+
+    </p>
+
+    <div class="row">
+      <div class='col-lg-4 mb-2'>
+        <a href="https://mastodon.cisti.org" class="card list-group-item-action">
+          <h4 class="card-header">Mastodon</h4>
+          <div class="card-body">
+            <p class="card-text">Un social autogestito, decentralizzato, indipendente e <b>federato</b>.</p>
+          </div>
+        </a>
+      </div>
+      <div class='col-lg-4 mb-2'>
+        <a href="https://gancio.cisti.org" class="card list-group-item-action">
+          <h4 class="card-header"> Gancio</h4>
+          <div class="card-body">
+            <p class="card-text">L'agenda dei movimenti sociali di Torino e dintorni.</p>
+          </div>
+        </a>
+      </div>
+      <div class="col-lg-4 mb-2">
+        <a href="https://pad.cisti.org" class="card list-group-item-action">
+          <h4 class="card-header">Pad</h4>
+          <div class="card-body">
+            <p class="card-text">Per scrivere documenti collaborativi.</p>
+          </div>
+        </a>
+      </div>
+		</div><br/>
+
+	<h4>⇒ <a href='https://pad.cisti.org' target='_blank'><strong>pad</strong>.cisti.org</a></h4>
+	<p>Il pad e' uno strumento che noi usiamo spesso e crediamo possa essere utile a molte persone.
+    Permette di scrivere testi in maniera collaborativa.</p>
+  <br/>
+  
+	<h4>⇒ <a href='https://gancio.cisti.org' target='_blank'><strong>gancio</strong>.cisti.org</a></h4>
 	<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/>
@@ -83,7 +75,7 @@
 		che ci sembra sia un bisogno non solo torinese (ad ora l'hanno adottato i fiorentini su <a href="https://lapunta.org">lapunta.org</a>).
 	</p>
 	<br/>
-	<h4><img src='https://www.non-compete.com/wp-content/uploads/2018/03/mastodon_icon-300x298.png' width='35px'/> Mastodon ⇒ https://mastodon.cisti.org</h4>
+	<h4>⇒ <a href='https://mastodon.cisti.org' target='_blank'><strong>mastodon</strong>.cisti.org</a></h4>
 	<p>
 		Mastodon e' un social network. Sappiamo che per molti è 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
@@ -93,143 +85,16 @@
 		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 due milioni di utenti. Spiegare mastodon in due righe non e' immediato ma potete trovare qua
-		alcune delle riflessioni che ci hanno accompagnato in questo percorso.<br/>Potete anche guardare un breve video esplicativo qua video.
+		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.<br/>Potete anche guardare <a href='https://peertube.social/videos/watch/d7fabc85-f110-4699-beb0-7edf6d4082ba'>un breve video esplicativo</a>.
 	</p>
 	<br/>
-	<h4>Chi siamo</h4>
-	<p></p>
-	<!-- piccolo glossario per fuorisede:
-	cisti
-	
-	Lo puoi utilizzare come vuoi, tipo "fai cisti che ti fai male" oppure "fai cisti al palo mentre fai retro" anche se in realtà il termine viene utilizzato piu che altro in contesti "drogheggianti"...tipo "fate cisti se arriva qualcuno..." infatti la frase per intero è "CISTI MADAMA (la polizia, i carabinieri....) CI HA VISTI!" da https://www.bruttastoria.it/dictionary/cisti.html
-	
-	Famoso anche il servizio di radio blackout "cisti viaggiare informati" per segnalare posti di blocco, controllori e in generale presenze sgradite sul territorio
-	gancio
-	
-	Se vieni a Torino e dici: "ehi, ci diamo un gancio alle 8?" nessuno si presenterà con i guantoni per fare a mazzate. ... è un'espressione tipica del torinese, darsi un gancio vuol dire beccarsi alle ore X in un posto Y
-	
-	A: dov'e' il gancio per andare al corteo domani?
-	B: non so ma domani non posso venire, ho gia' un gancio per caricare la distro. liberamente adattato da https://forum.wordreference.com/threads/avere-un-gancio.2356288/	   -->
-  <!-- </p> -->
+  <h4>Chi siamo</h4>
+  <p>Cisti.org è uno dei progetti dell'<a href='https://autistici.org/underscore'>underscore hacklab di torino</a>, un laboratorio di sperimentazione e critica tecnologica lontano dalle logiche del profitto. 
+    Ci occupiamo non solo di tecnica ma anche di politica in quanto crediamo che la tecnologia non sia neutra, che Internet possa diventare anche un strumento di oppressione, che l'informazione e il software debbano essere liberi e che le conoscenze non siano merce. Per noi l'hacking è studio e condivisione, sperimentazione e uso consapevole ma anche non convenzionale degli strumenti.
+    <br/>Tutti i lunedì dalle 13 alle 15 puoi ascoltare i nostri deliri su <a href='https://radioblackout.org/shows/stakka-stakka/'>stakkastakka</a>, una trasmissione che curiamo sulle libere frequenze di <a href='https://www.radioblackout.org'>Radio Blackout</a>.
+    
+    Ci vediamo tendenzialmente il mercoledì sera dalle 21 in poi al <a href='https://gabrio.noblogs.org'>C.S.O.A. Gabrio</a> (primo piano, prima stanza a sinistra) in Via Millio 42 a Torino, ma se vuoi passare a trovarci scrivi una mail per sicurezza a underscore chiocciola autistici.org.
+  </p>
   </body>
-</html>
-
-<!-- <!DOCTYPE HTML>
-<html>
-	<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>cisti &mdash; stai cisti</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="radical, server, independent, organise" />
-	<meta name="keywords" content="anarchism, server, Torino, hacklab, underscore" />
-	<meta name="author" content="stocazzo" />
-	<link rel="stylesheet" href="static/fonts/Inconsolata.otf" >
-	<link rel="stylesheet" href="static/css/animate.css">
-	<link rel="stylesheet" href="static/css/fa.css">
-	<link rel="stylesheet" href="static/css/flexslider.css">
-	<link rel="stylesheet" href="static/css/bootstrap.css">
-	<link rel="stylesheet" href="static/css/style.css">
-	<script src="static/js/modernizr-2.6.2.min.js"></script>
-	<script src="static/js/jquery.min.js"></script>
-	<script src="static/js/jquery.easing.1.3.js"></script>
-	<script src="static/js/bootstrap.min.js"></script>
-	<script src="static/js/jquery.waypoints.min.js"></script>
-	<script src="static/js/jquery.flexslider-min.js"></script>
-	<script src="static/js/main.js"></script>
-
-	</head>
-	<body>
-	<div class="cisti-loader"></div>
-	
-	<div id="page">
-	<header id="cisti-header" class="cisti-cover js-fullheight" role="banner">
-		<div class="overlay"></div>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-auto text-center ">
-					<div class="display-tc js-fullheight">
-						<div class="display-tc js-fullheight animate-box" data-animate-effect="fadeIn">
-							<img src="static/images/logo.png" style="width: 55%; height: auto;"></br><br/><br/>
-
-														<h2>                                      </br>
-															<blockquote>lo puoi utilizzare come vuoi, tipo "fai cisti che ti fai male" oppure "fai cisti al palo mentre fai retro" anche se in realtà il termine viene utilizzato piu che altro in contesti "drogheggianti"...tipo "fate cisti se arriva qualcuno..." infatti la frase per intero è "CISTI MADAMA (la polizia, i carabinieri....) CI HA VISTI!" </blockquote>
-
-															<p>Sono uno spazio digitale liberato. Mi potete trovare a Torino e dintorni. Non mi interessa sapere chi sei o dove vai. </p>
-                            </h2>
-                            <ul>
-                              <li>Uno spazio digitale liberato.</li>
-                              <li>Un server scapestrato e autogestito.</li>
-                              <li>Anticapitalista, antifascista, antirazzista, antisessista.</li>
-                            </ul>
-							<p>
-                                <a class="btn btn-primary btn-lg btn-learn"
-                                    href="#cisti-features"></i> Cos'e' Cisti ?</a> 
-                                <a href="info.html" class="btn btn-primary btn-lg btn-learn"> Informati </a> 
-                                <a href="contatti.html" class="btn btn-primary btn-lg btn-learn"> Contatti </a>
-                            </p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</header>
-
-	<div id="cisti-features">
-		<div class="container">
-			<div class="services-padding">
-				<div class="row">
-					<div class="col-md-4 animate-box">
-						<div class="feature-left">
-							<span class="icon">
-								<img class='logo' src='../static/images/gancio_logo.png' style='width: 40px'/>
-							</span>
-							<div class="feature-copy">
-								<h3>Gancio</h3>
-								<p>Un gestore di eventi per comunità radicali.</p>
-                                <p><a class="btn btn-primary btn-lg btn-learn" target='_blank' href="https://gancio.cisti.org">Vai su Gancio </a></p>
-							</div>
-						</div>
-
-					</div>
-					<div class="col-md-4 animate-box">
-						<div class="feature-left">
-							<span class="icon">
-									<i class='fab fa-mastodon'></i>
-							</span>
-							<div class="feature-copy">
-								<h3>Mastodon</h3>
-								<p>Social Indipendente, federato, radicale, antifascista, antisessista e antirazzista.</p>
-    							<p><a class="btn btn-lg btn-learn" href="https://mastodon.cisti.org" target="_blank"> Vai su Mastodon </a></p>
-							</div>
-						</div>
-					</div>
-                    <div class="col-md-4 animate-box">
-						<div class="feature-left">
-							<span class="icon">
-								<img class='logo' src="../static/images/pad.png" alt="">
-							</span>
-							<div class="feature-copy">
-								<h3>Pad</h3>
-								<p>Scrivi Collabora e Condividi testi con chi vuoi</p>
-								<p><a class="btn btn-primary btn-lg btn-learn"
-                                    href="https://pad.cisti.org">Vai sul pad</a></p>
-							</div>
-						</div>
-					</div>
-
-				</div>
-
-			</div>
-		</div>
-	</div>
-	</div>
-
-	<div class="gototop js-top">
-		<a href="#" class="js-gotop"><i class="icon-arrow-up22"></i></a>
-	</div>
-	
-	</body>
-</html>
- -->
+</html>

+ 0 - 59
info.html

@@ -1,59 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-	<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>cisti &mdash; info cisti</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="radical, server, independent, organise" />
-	<meta name="keywords" content="anarchism, server, Torino, hacklab, underscore" />
-	<meta name="author" content="stocazzo" />
-	<link rel="stylesheet" href="static/fonts/Inconsolata.otf:400,700" >
-    <link rel="stylesheet" href="static/css/animate.css">
-	<link rel="stylesheet" href="static/css/icomoon.css">
-	<link rel="stylesheet" href="static/css/flexslider.css">
-	<link rel="stylesheet" href="static/css/bootstrap.css">
-	<link rel="stylesheet" href="static/css/style.css">
-	<script src="static/js/modernizr-2.6.2.min.js"></script>
-	<script src="static/js/jquery.min.js"></script>
-	<script src="static/js/jquery.easing.1.3.js"></script>
-	<script src="static/js/bootstrap.min.js"></script>
-	<script src="static/js/jquery.waypoints.min.js"></script>
-	<script src="static/js/jquery.flexslider-min.js"></script>
-	<script src="static/js/main.js"></script>
-
-	</head>
-	<body>
-		
-	<div class="cisti-loader"></div>
-	
-	<div id="page">
-	<header id="cisti-header" class="cisti-cover js-fullheight" role="banner">
-		<div class="overlay"></div>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8 col-md-offset-2 text-center">
-					<div class="display-t js-fullheight">
-						<div class="display-tc js-fullheight animate-box" data-animate-effect="fadeIn">
-							<img src="static/images/logo.svg" style="width: 55%; height: auto;"></br>
-                            <h3> INFO @ CISTI<h3>
-                                    <h2> informazioni riguardo cisti ed i servizi offerti <h2>
-							<p class="text">
-                        
-                            </p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</header>
-
-
-	<div class="gototop js-top">
-		<a href="#" class="js-gotop"><i class="icon-arrow-up22"></i></a>
-	</div>
-	
-
-	</body>
-</html>
-

+ 0 - 70
pad.html

@@ -1,70 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-    <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>cisti &mdash; info cisti</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="radical, server, independent, organise" />
-    <meta name="keywords" content="anarchism, server, Torino, hacklab, underscore" />
-    <meta name="author" content="stocazzo" />
-    <link rel="stylesheet" href="static/fonts/Inconsolata.otf:400,700" >
-    <link rel="stylesheet" href="static/css/animate.css">
-    <link rel="stylesheet" href="static/css/icomoon.css">
-    <link rel="stylesheet" href="static/css/flexslider.css">
-    <link rel="stylesheet" href="static/css/bootstrap.css">
-    <link rel="stylesheet" href="static/css/style.css">
-    <script src="static/js/modernizr-2.6.2.min.js"></script>
-    <script src="static/js/jquery.min.js"></script>
-    <script src="static/js/jquery.easing.1.3.js"></script>
-    <script src="static/js/bootstrap.min.js"></script>
-    <script src="static/js/jquery.waypoints.min.js"></script>
-    <script src="static/js/jquery.flexslider-min.js"></script>
-    <script src="static/js/main.js"></script>
-
-    </head>
-    <body>
-        
-    <div class="cisti-loader"></div>
-    
-    <div id="page">
-    <header id="cisti-header" class="cisti-cover js-fullheight" role="banner">
-        <div class="overlay"></div>
-        <div class="container">
-            <div class="row">
-                <div class="col-md-8 col-md-offset-2 text-center">
-                    <div class="display-t js-fullheight">
-                        <div class="display-tc js-fullheight animate-box" data-animate-effect="fadeIn">
-                            <img src="static/images/logo.svg" style="width: 55%; height: auto;"></br>
-                            <h3> PAD @ CISTI<h3>
-                                    <h2> informazioni riguardo cisti ed i servizi offerti <h2>
-                            <p class="text">
-                        
-                            </p>
-
-                    <div class="feature-copy">
-                            
-                            <a class="btn btn-primary btn-lg btn-learn" href="https://pad.cisti.org/pad">Vai su Pad </a></p>
-                        </div>
-                    </div>
-                    </div>
-
-                </div>
-
-
-
-            </div>
-        </div>
-    </header>
-
-
-    <div class="gototop js-top">
-        <a href="#" class="js-gotop"><i class="icon-arrow-up22"></i></a>
-    </div>
-    
-
-    </body>
-</html>
-
-
-

+ 76 - 13
static/css/style.css

@@ -1,46 +1,56 @@
+html {
+  font-size: 13px;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin-bottom: 60px;
-  font-size: 1.3rem;
   height: 100%;
+  font-size: 1rem;
 }
 
+h4 a,
 p a {
-  color: orange;
+  text-decoration: underline;
+  color: orangered;
   font-weight: 500;
-  transition: color .2s;
+  transition: color .4s;
 }
 
+h4 a:hover,
 p a:hover {
-  text-decoration: none;
-  color: yellow;
+  /* color: yellow; */
+  color: blue;
 }
 
-.display-3 {
+.display-1 {
   font-weight: 800;
   letter-spacing: 1px;
-  font-size: 18rem;
+  font-size: 15rem;
   width: 100%;
   text-align: right;
   line-height: 0.6;
+  color: white;
 }
 
 .jumbotron {
+  background-color: #303030;
   box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
-  padding-right: 150px;
+  padding-right: 10vw;
   height: 100vh;
+  border-radius: 0px;
 }
 
 .org {
-  font-size: 12rem;
+  font-size: 9rem;
   color: grey;
 }
 
 .lead {
-  color: #aaa;
-  border-radius: 10px;
+  color: #fff;
+  border-radius: 5px;
   padding: 10px;
-  font-size: 30px;
+  font-size: 1.3rem;
   width: 100%;
   text-align: right;
   margin-top: 50px;
@@ -52,4 +62,57 @@ p a:hover {
   position: absolute;
   bottom: 10px;
   margin: 0 auto;
-}
+  color: white;
+}
+
+/* // Extra small devices (portrait phones, less than 576px) */
+/* // No media query since this is the default in Bootstrap */
+@media (max-width: 576px) {
+  .display-1 { font-size: 10rem; }
+  .org { font-size: 8rem; }
+}
+
+/* // Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) { 
+  html { font-size: 14px; }
+}
+
+/* // Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {  
+  html { font-size: 18px; }
+}
+
+/* // Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  html { font-size: 20px; }
+}
+
+/* // Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) { 
+  html { font-size: 22px; }
+}
+/* 
+
+@media (max-width: 1200px) {
+  html {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 900px) {
+  html {
+    font-size: 16px;
+  } */
+/* 
+  .display-1 {
+    font-size: 8rem;
+  }
+
+  .org {
+    font-size: 6rem;
+  }
+
+  #chevron {
+    font-size: 4rem;
+  } */
+}