update

public/index.html

@@ -17,7 +17,8 @@
   <meta property="og:url" content="https://myco.systems/">
   <meta property="og:type" content="website">
   <meta property="og:title" content="The Mycelial Network">
-  <meta property="og:description" content="Myco.systems is a tech cooperative that utilizes open-source technology to enable individuals from diverse backgrounds to develop sustainable solutions.">
+  <meta property="og:description"
+    content="Myco.systems is a tech cooperative that utilizes open-source technology to enable individuals from diverse backgrounds to develop sustainable solutions.">
   <meta property="og:image" content="https://myco.systems/icons/backgrounds/concrete-shrooms.png">
 
   <!-- Twitter Meta Tags -->
@@ -25,7 +26,8 @@
   <meta property="twitter:domain" content="myco.systems">
   <meta property="twitter:url" content="https://myco.systems/">
   <meta name="twitter:title" content="The Mycelial Network">
-  <meta name="twitter:description" content="Myco.systems is a tech cooperative that utilizes open-source technology to enable individuals from diverse backgrounds to develop sustainable solutions.">
+  <meta name="twitter:description"
+    content="Myco.systems is a tech cooperative that utilizes open-source technology to enable individuals from diverse backgrounds to develop sustainable solutions.">
   <meta name="twitter:image" content="https://myco.systems/icons/backgrounds/concrete-shrooms.png">
 
 </head>
@@ -34,10 +36,12 @@
   <div class="center-text">
     <input type="radio" id="tab-links" name="tab" checked style="display: none;">
     <input type="radio" id="tab-contact" name="tab" style="display: none;">
+    <input type="radio" id="tab-dash" name="tab" style="display: none;">
 
     <div class="tabs">
       <label for="tab-links" class="tab">Links & Donate</label>
       <label for="tab-contact" class="tab">Contact</label>
+      <label for="tab-dash" class="tab">Dashboard</label>
     </div>
 
     <div id="linksTab" class="tab-content">
@@ -47,10 +51,10 @@
           <li><a href="https://myco.systems" target="_blank">Myco.Systems</a></li>
           <ul>
             <li><a href="https://coop.myco.systems" target="_blank">Coop.Myco.Systems</a></li>
-            <ul>
+            <!-- <ul>
               <li><a href="https://squattheplanet.com/" target="_blank">SquatThePlanet.com</a></li>
               <li><a href="https://wiki.hemera.network/" target="_blank">Wiki.Hemera.Network</a></li>
-            </ul>
+            </ul> -->
             <li><a href="https://web.myco.systems" target="_blank">Web.Myco.Systems</a></li>
             <li><a href="https://git.myco.systems/explore/repos" target="_blank">Git.Myco.Systems</a></li>
           </ul>
@@ -83,7 +87,7 @@
 
     <div id="contactTab" class="tab-content">
       <a>Send us a cool message and we'll get back to you d-(´▽｀)-b</a>
-      <ul class="alt-bullet">
+      <ul>
         <li><a class="contact-name">contact (at) myco (dot) systems:</a><span class="pgp-address">-----BEGIN PGP PUBLIC
             KEY
             BLOCK-----<br>mDMEZcQaFBYJKwYBBAHaRw8BAQdAKjok4wl0tBlYyTj6qw4nu6AqTdU+OGorGE5d8N7bLXW0Ik15Y29TeXN0ZW1zIDxjb250YWN0QG15Y28uc3lzdGVtcz6IkwQTFgoAOxYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsDBQsJCAcCAiICBhUKCQgLAgQWAgMBAh4HAheAAAoJEJ1ZZp3r0s3I38QA/3yK6QODeRsfoGimd1OX3BA/Y1OxKTl2GS7OiyTcRotyAQC905hPTwaAYFbru1W1S8p+zDrWjGJ7jXMevOZlsF9GD7g4BGXEGhQSCisGAQQBl1UBBQEBB0B2d2SSG7eCIrTKA9xO45414eS3THHwX63dkaqbexwHJwMBCAeIeAQYFgoAIBYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsMAAoJEJ1ZZp3r0s3INzMA/AoCN+h/eG+7ByTsZUAGY6gKsSfQgy86PjijfrusC/3TAQDMNrMjzq2sIZhUZSaK8Q5pzgSFPloqk4QG1FRi4x0zAA===Pg50<br>-----END
@@ -92,6 +96,26 @@
       </ul>
     </div>
 
+    <div id="dashTab" class="tab-content">
+      <a>Check out some of our free services and projects (⌐⊙_⊙)</a>
+      <div class="dashboard bullet-text">
+        <ul class="links">
+          <li><a>Free Services</a></li>
+          <ul>
+            <li><a href="https://paste.myco.systems" target="_blank">PrivateBin</a></li>
+            <li><a href="https://collab.myco.systems" target="_blank">HedgeDoc</a></li>
+          </ul>
+        </ul>
+        <ul>
+          <li><a>Projects</a></li>
+          <ul>
+            <li><a href="https://squattheplanet.com" target="_blank">Squat The Planet</a></li>
+            <li><a href="https://wiki.hemera.network" target="_blank">Hemera Network</a></li>
+          </ul>
+        </ul>
+      </div>
+    </div>
+
   </div>
   <script src='./simplex.js'></script>
   <script src="./script.js"></script>

public/style.css

@@ -20,7 +20,7 @@ body,
 .braille {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   flex-flow: row;
 }
 
@@ -51,19 +51,14 @@ body,
   text-align: left;
   z-index: 10;
   background-color: #241917;
-  max-width: 25rem;
+  width: 35rem;
-  top: 50%;
+  top: 30%;
-  left: 50%;
-  transform: none;
-  margin-left: -15vw;
-  margin-top: -12vh;
 }
 
 @media only screen and (max-width: 625px) {
   .center-text {
     left: 15px;
     right: 15px;
-    top: 40%;
     margin-left: 0;
     margin-top: 0;
     max-width: 100vw;
@@ -96,8 +91,7 @@ body,
   font-size: 12px !important;
   background-color: #241917;
   color: #fff;
-  border-radius: 2px;
+  border: 4px solid #f3bbae92;
-  border: 2px solid #f3bbae;
   padding: 5px;
 }
 
@@ -106,13 +100,13 @@ body,
   color: #241917;
 }
 
-#linksTab, #contactTab, #aboutTab {
+#linksTab, #contactTab, #dashTab {
   display: none;
 }
 
 #tab-links:checked ~ #linksTab,
 #tab-contact:checked ~ #contactTab,
-#tab-about:checked ~ #aboutTab {
+#tab-dash:checked ~ #dashTab {
   display: block;
 }
 
@@ -136,13 +130,14 @@ body,
 
 .visible {
   z-index: 0;
+  position: absolute;
+  right: 0;
 }
-
+ul {
-ul.alt-bullet {
   list-style-type: none;
 }
 
-ul.alt-bullet li::before {
+ul li::before {
   content: "-";
   display: inline-block;
   width: 1em;
@@ -168,8 +163,7 @@ ul.alt-bullet li::before {
   padding-right: 10px;
   background-color: #241917;
   color: #fff;
-  border-radius: 2px;
+  border: 4px solid #f3bbae92;
-  border: 2px solid #f3bbae;
 }
 .modal[open] .modal__toggle::before {
   content: '✖';
@@ -203,7 +197,7 @@ ul.alt-bullet li::before {
   z-index: 3;
 }
 .modal__body {
-  border: 2px solid #f3bbae92;
+  border: 4px solid #f3bbae92;
   background: rgba(36, 25, 23, 1);
   color: #f3bbae;
   font-size: 1.6rem;
@@ -233,11 +227,15 @@ ul.alt-bullet li::before {
   font-size: 12px !important;
   background-color: #241917;
   color: #fff;
-  border-radius: 2px;
+  border: 4px solid #f3bbae92;
-  border: 2px solid #f3bbae;
   padding: 5px;
 }
 
 .links {
   padding-left: 0.85rem;
+}
+
+.dashboard {
+  display: flex;
+  flex-direction: row;
 }