From 3130e73464799a1742b2a3aee7823d93abda3295 Mon Sep 17 00:00:00 2001
From: brooke <brooke@myco.systems>
Date: Sun, 3 Nov 2024 09:14:49 -0500
Subject: [PATCH] rework initial
---
public/index.html | 156 +++++++------------
public/style.css | 371 ++++++++++++++++++++--------------------------
2 files changed, 216 insertions(+), 311 deletions(-)
diff --git a/public/index.html b/public/index.html
index 481c3eb..f638566 100755
--- a/public/index.html
+++ b/public/index.html
@@ -30,114 +30,70 @@
<body>
<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="tabbed">
+ <input type="radio" id="tab1" name="css-tabs" checked>
+ <input type="radio" id="tab2" name="css-tabs">
+ <input type="radio" id="tab3" name="css-tabs">
- <div class="tabs">
- <label for="tab-links" class="tab">Home</label>
- <label for="tab-contact" class="tab">Contact</label>
- <label for="tab-dash" class="tab">Dashboard</label>
- <a target="_blank" href="https://uptime.myco.systems/" class="tab-link">Uptime <svg class="tab-icon"
- viewBox="0 0 512 512">
- <path
- d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
- </svg></a>
- </div>
- <div id="linksTab" class="tab-content">
- <p>Hi! It's good to see you \( ' o ' )/</p><br>
- <p>We're a tech collective that's
- trying to make open source hosted services more viable in a broad
- variety of cases.<br /><br />We build deployments for companies,
- non-profits, and individuals to expand the reach of open source
- services.<br /><br />If you're interested in getting our help or just
- want to chat, send us a message through our contact email on the next
- tab.</p>
- <p>ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧</p>
- <div class="bullet-text">
- <ul class="links">
- <li>
- <a href="https://coop.myco.systems" target="_blank">Blog<svg class="text-icon" viewBox="0 0 512 512">
- <path
- d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
- </svg></a>
- </li>
- <li>
- <a href="https://web.myco.systems" target="_blank">Contract us!<svg class="text-icon" viewBox="0 0 512 512">
- <path
- d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
- </svg></a>
- </li>
- <li>
- <a href="https://git.myco.systems/explore/repos" target="_blank">Source<svg class="text-icon"
+ <ul class="tabs">
+ <li class="tab"><label for="tab1">Home</label></li>
+ <li class="tab"><label for="tab2">Contact</label></li>
+ <li class="tab"><label for="tab3">Dashboard</label></li>
+ <li class="tab"><label><a style="text-decoration: none;" target="_blank" href="https://uptime.myco.systems/">Uptime<svg class="tab-icon"
viewBox="0 0 512 512">
<path
- d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
- </svg></a>
- </li>
- </ul>
+ d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z">
+ </path>
+ </svg></a></label></li>
+ </ul>
+
+ <div class="tab-content">
+ <p>Hi! It's good to see you \( ' o ' )/<br><br>
+ We're a tech collective that's trying to make open source hosted services more viable in a broad variety of
+ cases.<br><br>
+ We build deployments for companies, non-profits, and individuals to expand the reach of open source
+ services.<br><br>
+ If you're interested in getting our help or just want to chat, send us a message through our contact email
+ on the next tab.<br><br>
+ ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧</p>
</div>
- <details class="modal">
- <summary class="modal__toggle"></summary>
- <div class="modal__background">
- <div class="modal__body" tabindex="-1" role="dialog" aria-labelledby="modal__label" aria-live="assertive"
- aria-modal="true">
- <p id="modal__label" class="modal__text">
- Donations go to making sure we can keep all of our free services
- running ♡⸜(ˆᗜˆ˵ )⸝♡
- <br /><br />
- <b>The following cryptocurrencies are supported:</b>
- <br /><br />
- <b class="crypto-name">Monero (XMR):</b><span
- class="crypto-address">49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi</span>
- <br />
- <b class="crypto-name">Litecoin (LTC):</b><span
- class="crypto-address">LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV</span>
- <br />
- <b class="crypto-name">Bitcoin (BTC):</b><span
- class="crypto-address">bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0</span>
- </p>
- </div>
+ <div class="tab-content">
+ <p>Send us a cool message and we'll get back to you d-(´▽｀)-b</p><br>
+ <p class="code">contact @ myco (dot) systems</p>
+ <p style="font-size: 10px;">Encryption is not required, but we highly recommend it.</p>
+ <span class="code">-----BEGIN PGP PUBLIC KEY
+ BLOCK-----<br />mDMEZcQaFBYJKwYBBAHaRw8BAQdAKjok4wl0tBlYyTj6qw4nu6AqTdU+OGorGE5d8N7bLXW0Ik15Y29TeXN0ZW1zIDxjb250YWN0QG15Y28uc3lzdGVtcz6IkwQTFgoAOxYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsDBQsJCAcCAiICBhUKCQgLAgQWAgMBAh4HAheAAAoJEJ1ZZp3r0s3I38QA/3yK6QODeRsfoGimd1OX3BA/Y1OxKTl2GS7OiyTcRotyAQC905hPTwaAYFbru1W1S8p+zDrWjGJ7jXMevOZlsF9GD7g4BGXEGhQSCisGAQQBl1UBBQEBB0B2d2SSG7eCIrTKA9xO45414eS3THHwX63dkaqbexwHJwMBCAeIeAQYFgoAIBYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsMAAoJEJ1ZZp3r0s3INzMA/AoCN+h/eG+7ByTsZUAGY6gKsSfQgy86PjijfrusC/3TAQDMNrMjzq2sIZhUZSaK8Q5pzgSFPloqk4QG1FRi4x0zAA===Pg50<br />-----END
+ PGP PUBLIC KEY BLOCK-----</span>
+ </div>
+
+ <div class="tab-content">
+ <p>Check out some of our free services and projects (⌐⊙_⊙)</p>
+ <div class="dashboard bullet-text">
+ <ul class="links">
+ <p>Free Services</p>
+ <ul class="custom-bullet">
+ <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 class="custom-bullet">
+ <p>Projects</p>
+ <ul>
+ <li>
+ <a href="https://squattheplanet.com" target="_blank">Squat The Planet</a>
+ </li>
+ </ul>
+ </ul>
</div>
- </details>
- </div>
- <div id="contactTab" class="tab-content">
- <p>Send us a cool message and we'll get back to you<br>d-(´▽｀)-b</p><br>
- <p class="code">contact @ myco (dot) systems</p>
- <p style="font-size: 12px;">Encryption is not required, but we highly recommend it.</p>
- <span class="code">-----BEGIN PGP PUBLIC KEY
- BLOCK-----<br />mDMEZcQaFBYJKwYBBAHaRw8BAQdAKjok4wl0tBlYyTj6qw4nu6AqTdU+OGorGE5d8N7bLXW0Ik15Y29TeXN0ZW1zIDxjb250YWN0QG15Y28uc3lzdGVtcz6IkwQTFgoAOxYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsDBQsJCAcCAiICBhUKCQgLAgQWAgMBAh4HAheAAAoJEJ1ZZp3r0s3I38QA/3yK6QODeRsfoGimd1OX3BA/Y1OxKTl2GS7OiyTcRotyAQC905hPTwaAYFbru1W1S8p+zDrWjGJ7jXMevOZlsF9GD7g4BGXEGhQSCisGAQQBl1UBBQEBB0B2d2SSG7eCIrTKA9xO45414eS3THHwX63dkaqbexwHJwMBCAeIeAQYFgoAIBYhBCw75FUiGzj0ZvOJhZ1ZZp3r0s3IBQJlxBoUAhsMAAoJEJ1ZZp3r0s3INzMA/AoCN+h/eG+7ByTsZUAGY6gKsSfQgy86PjijfrusC/3TAQDMNrMjzq2sIZhUZSaK8Q5pzgSFPloqk4QG1FRi4x0zAA===Pg50<br />-----END
- PGP PUBLIC KEY BLOCK-----</span>
- </div>
-
- <div id="dashTab" class="tab-content">
- <p>Check out some of our free services and projects (⌐⊙_⊙)</p>
- <div class="dashboard bullet-text">
- <ul class="links">
- <p>Free Services</p>
- <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>
- <p>Projects</p>
- <ul>
- <li>
- <a href="https://squattheplanet.com" target="_blank">Squat The Planet</a>
- </li>
- </ul>
- </ul>
</div>
</div>
- </div>
- <script src="./simplex.js"></script>
- <script src="./script.js"></script>
+ <script src="./simplex.js"></script>
+ <script src="./script.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index d39b862..b98192b 100755
--- a/public/style.css
+++ b/public/style.css
@@ -1,22 +1,35 @@
-:root {
- --size: calc(100vmin / 1.618033988749895);
-}
-
-html,
-body {
- width: 100%;
- height: 100vh;
- overflow: hidden;
-}
-
-body {
- margin: 0;
- background: #241917;
+a {
color: #f3bbae;
- font-family: Monaco, monospace !important;
+ transition: all 0.3s;
+}
+
+p {
+ margin: 0;
+ font-size: var(--primary-text-size);
+}
+
+a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+::-webkit-scrollbar {
+ height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #f3bbae;
+}
+
+::-webkit-scrollbar-track {
+ background: #241917;
+}
+
+.alt-bullet {
+ padding-left: 1rem !important;
}
-body,
.braille {
display: flex;
align-items: center;
@@ -32,29 +45,27 @@ body,
font: 12px/12px "Iosevka Web", monospace;
}
-.braille>* {
- white-space: pre;
-}
-
.braille .hidden {
position: fixed;
bottom: 100%;
right: 100%;
}
-.globe-txt {
- display: flex;
- position: fixed;
- right: 0;
+.braille>* {
+ white-space: pre;
}
-@media only screen and (max-width: 625px) {
- .globe-txt {
- position: fixed;
- right: 50%;
- top: 50%;
- transform: translate(50%, -50%);
- }
+.bullet-text {
+ font-size: var(--primary-text-size);
+ text-align: left;
+ z-index: 2;
+ position: relative;
+}
+
+.bullet::before {
+ content: "-";
+ display: inline-block;
+ width: 1em;
}
.center-text {
@@ -66,48 +77,98 @@ body,
text-align: left;
z-index: 10;
background-color: #241917;
- max-width: 35rem;
+ max-width: 30rem;
top: 30%;
left: 15%;
}
-@media only screen and (max-width: 625px) {
- .center-text {
- left: 15px;
- right: 15px;
- margin-left: 0;
- margin-top: 0;
- max-width: 100vw;
- }
+.code {
+ word-wrap: break-word;
+ display: block;
+ font-size: var(--primary-text-size);
+ background-color: #241917;
+ color: #fff !important;
+ border: 4px solid #f3bbae92;
+ padding: 5px;
}
-.tabs {
+.dashboard {
display: flex;
- overflow-x: auto;
- white-space: nowrap;
- padding-bottom: 2px;
+ flex-direction: row;
}
-::-webkit-scrollbar {
- height: 3px;
+.globe-txt {
+ display: flex;
+ position: fixed;
+ right: 0;
}
-::-webkit-scrollbar-track {
+ul {
+ list-style-type: none;
+}
+
+ul.custom-bullet {
+ list-style-type: none;
+}
+
+ul.custom-bullet li {
+ position: relative;
+}
+
+ul.custom-bullet li::before {
+ content: "-";
+ position: absolute;
+ left: -15px;
+}
+
+.links {
+ padding-left: 0;
+}
+
+.links a {
+ text-decoration-skip: spaces;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
background: #241917;
+ color: #f3bbae;
+ font-family: Monaco, monospace !important;
}
-::-webkit-scrollbar-thumb {
- background: #f3bbae;
+:root {
+ --size: calc(100vmin / 1.618033988749895);
+ --primary-text-size: 12px;
+}
+
+.tab-content {
+ display: none;
+ padding: 1rem;
+}
+
+.tab-content a[href]:hover {
+ color: #ffffff;
+}
+
+.tab-icon {
+ width: var(--primary-text-size);
+ color: #f3bbae;
+ fill: #f3bbae;
+ padding-left: 0.25rem;
}
-.tab,
.tab-link {
cursor: pointer;
- padding: 4px 15px;
border-width: 0 4px 4px 0;
border-style: solid;
border-color: #f3bbae92;
- font-size: 12px;
+ font-size: var(--primary-text-size);
}
.tab-link {
@@ -122,57 +183,54 @@ body,
width: 12px;
}
-.tab-content {
- word-wrap: break-word;
- display: none;
- padding: 20px 20px;
- padding-top: 0px;
+.tab:hover label {
+ background-color: #f3bbae92;
+ color: #241917;
+ font-weight: 700;
}
-.code {
- word-wrap: break-word;
- display: block;
- font-size: 12px !important;
- background-color: #241917;
- color: #fff !important;
- border: 4px solid #f3bbae92;
- padding: 5px;
+.tab>label {
+ display: flex;
+ margin: 0;
+ padding: 0.35rem 0.75rem;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: all 0.3s;
}
-#linksTab,
-#contactTab,
-#dashTab {
+.tabbed {
+ overflow-x: hidden;
+}
+
+.tabbed [type="radio"] {
display: none;
}
-#tab-links:checked~#linksTab,
-#tab-contact:checked~#contactTab,
-#tab-about:checked~#aboutTab,
-#tab-dash:checked~#dashTab {
+.tabbed [type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4) {
display: block;
}
-.bullet-text {
- font-size: 14px;
- text-align: left;
- z-index: 2;
- position: relative;
+.tabbed [type="radio"]:nth-of-type(5):checked~.tabs .tab:nth-of-type(5) label {
+ background-color: #f3bbae92;
+ color: #241917;
+ font-weight: 700;
}
-.tab-content p {
- color: #f3bbae;
- font-size: 14px;
- margin: 0 !important;
+.tabs {
+ display: flex;
+ align-items: stretch;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
-.tab-content a {
- color: #f3bbae;
- transition: color 0.1s ease;
- font-size: 14px;
+.text-icon {
+ fill: #f3bbae;
+ width: 12px;
}
-.tab-content a[href]:hover {
- color: #ffffff;
+.text-icon {
+ padding-left: 0.5rem;
}
.visible {
@@ -181,130 +239,21 @@ body,
right: 0;
}
-ul {
- list-style-type: none;
+@media only screen and (max-width: 625px) {
+ .globe-txt {
+ position: fixed;
+ right: 50%;
+ top: 50%;
+ transform: translate(50%, -50%);
+ }
}
-ul li::before {
- content: "-";
- display: inline-block;
- width: 1em;
+@media only screen and (max-width: 625px) {
+ .center-text {
+ left: 15px;
+ right: 15px;
+ margin-left: 0;
+ margin-top: 0;
+ max-width: 100vw;
+ }
}
-
-.alt-bullet {
- padding-left: 1rem !important;
-}
-
-.modal[open] .modal__toggle {
- left: calc(50vw + 200px);
- top: calc(15vh - 5px);
- position: fixed;
- z-index: 11;
-}
-
-.modal[open] .modal__toggle:focus {
- outline: 0px solid rgba(0, 0, 255, 0);
-}
-
-.modal__toggle::before {
- content: "Donate";
- cursor: pointer;
- padding-left: 10px;
- padding-right: 10px;
- background-color: #241917;
- color: #fff;
- border: 4px solid #f3bbae92;
-}
-
-.modal[open] .modal__toggle::before {
- content: "✖";
- color: #fff !important;
- font-size: 25px;
-}
-
-.modal__toggle {
- position: relative;
- list-style: none;
- font-size: 14px;
- font-family: Monaco, monospace;
- text-align: left;
- z-index: 4;
-}
-
-.modal__toggle::-webkit-details-marker {
- display: none;
-}
-
-.modal__toggle:hover {
- cursor: pointer;
- opacity: 0.8;
-}
-
-.modal__background {
- background-color: rgba(0, 0, 0, 0.65);
- display: flex;
- height: 100vh;
- justify-content: center;
- left: 0;
- position: fixed;
- top: 0;
- width: 100vw;
- z-index: 3;
-}
-
-.modal__body {
- border: 4px solid #f3bbae92;
- background: rgba(36, 25, 23, 1);
- color: #f3bbae;
- font-size: 1.6rem;
- font-weight: 600;
- padding: 20px 20px;
- position: fixed;
- text-align: left;
- top: 15vh;
- left: 50%;
- transform: translateX(-50%);
- width: 80%;
- max-width: 400px;
- z-index: 10;
- word-wrap: break-word;
- font-family: Monaco, monospace;
-}
-
-.modal__text {
- line-height: 1.6;
- margin: 0;
- font-size: 12px;
-}
-
-.crypto-address {
- word-wrap: break-word;
- display: block;
- font-size: 12px !important;
- background-color: #241917;
- color: #fff;
- border: 4px solid #f3bbae92;
- padding: 5px;
-}
-
-.links {
- padding-left: 0;
-}
-
-.links a {
- text-decoration-skip: spaces;
-}
-
-.dashboard {
- display: flex;
- flex-direction: row;
-}
-
-.icon, .text-icon {
- fill: #f3bbae;
- width: 12px;
-}
-
-.text-icon {
- padding-left: 0.5rem;
-}
\ No newline at end of file