tool

index.html

@@ -26,17 +26,17 @@
                 <h2 class="tab" id="colophon">⤷ colophon</h2>
                 <div class="tab-info" id="colophon-show" style="display:none;">
                     <p><strong>Attempting diffraction</strong> (2022) is carefully being developed, designed, and hosted by Camilo Garcia with the help of wonderful people. Thank you all for your support, care and advice. Special thanks to Avital Barkai, Maria Paris, Manetta Berends, Michael Murtaugh, Natasha Soobramanien, Aymeric Mansoux, Femke Snelting, and Kimmy Spreeuwenberg. </p> 
-                    <p>This website is were all the experiments inhabit. It was made to give all of them a home and to explore with SVG's. It will grow slowly but steadly. Sorry, It can be lagy as well, it is autonomously hosted and mainted in a <a style="text-decoration: underline 1pt solid blue;"href="http://garden.attempt.press">temporary garden</a>.</p>
+                    <p>This website is were all the experiments inhabit. It was made to give all of them a home and to explore with SVG's. It will grow slowly but steadly. Sorry, It can be laggy as well, it is autonomously hosted and mainted in a <a style="text-decoration: underline 1pt solid blue;"href="http://garden.attempt.press">temporary garden</a>.</p>
                 </div>
             </div>
             <div class="header-tab"> 
                 <h2 class="tab" id="legend">⤷ legend</h2>
                 <div id="legend-show" style="display:none;">
-                    <a href="http://glossary.attempt.press" target=”_blank”></a><div class="tab" id="permeable-tab"><p class="permeable symbol">P</p><h3>Permeable Glossary ⤴︎</h3></div></a>
-                    <a href="http://glossary.attempt.press/rumination" target=”_blank”></a><div class="tab" id="rumination-tab"><p class="rumination symbol">R</p><h3>Rumination Sessions ⤴︎</h3></div></a>
-                    <a href="http://tool.attempt.press" target=”_blank”></a><div class="tab" id="tool-tab"><p class="tool symbol">L</p><h3>Living Glossary Environment tool ⤴︎</h3></div></a>
-                    <a href="http://dear.attempt.press" target=”_blank”></a><div class="tab" id="dear-tab"><p class="dear symbol">D</p><h3>Dear Reader ⤴︎</h3></div></a>
-                    <a href="http://glossary.attempt.press" target=”_blank”></a><div class="tab" id="questions-tab"><p class="questions symbol">Q</p><h3>Questions of Publishing ⤴︎</h3></div></a>
+                    <a href="http://glossary.attempt.press" target=”_blank”><div class="tab" id="permeable-tab"><p class="permeable symbol">P</p><h3>Permeable Glossary ⤴︎</h3></div></a>
+                    <a href="http://glossary.attempt.press/rumination" target=”_blank”><div class="tab" id="rumination-tab"><p class="rumination symbol">R</p><h3>Rumination Sessions ⤴︎</h3></div></a>
+                    <a href="http://tool.attempt.press" target=”_blank”><div class="tab" id="tool-tab"><p class="tool symbol">L</p><h3>Living Glossary Environment tool ⤴︎</h3></div></a>
+                    <a href="http://dear.attempt.press" target=”_blank”><div class="tab" id="dear-tab"><p class="dear symbol">D</p><h3>Dear Reader ⤴︎</h3></div></a>
+                    <a href="http://glossary.attempt.press" target=”_blank”><div class="tab" id="questions-tab"><p class="questions symbol">Q</p><h3>Questions of Publishing ⤴︎</h3></div></a>
                     <a href="http://diffraction.attempt.press/brief" target=”_blank”><div class="tab" id="brief-tab"><p class="brief symbol">B</p><h3>Brief GLossary of Glossaries ⤴︎</h3></div></a>
                 </div>
             </div>

style.css

@@ -3,6 +3,10 @@
     src: url(/fonts/Symbolic-Regular.ttf);
 }
 
+@font-face {
+    font-family: mono;
+    src: url(/fonts/diatype-semi-mono-regular.woff);
+}
 
 :root{
     --background: #252525;
@@ -25,7 +29,7 @@
 }
 
 body{
-    font-family: monospace;
+    font-family: mono;
     margin: 0;
     overflow: hidden;
     background-color: var(--background);
@@ -219,7 +223,7 @@ ellipse{
 
 .marquee {
     position: absolute;
-    bottom: 300px;
+    bottom: 10%;
     color: white;
 }