mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

update link names and add icon next to text to indicate leaving the page
All checks were successful
Static / build (push) Successful in -2s
Details

Browse source
This commit is contained in:
brooke 2024-10-29 16:41:33 -04:00
parent aa97301e24
commit 75f823953e
2 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
public/index.html
View file

@ -57,20 +57,25 @@
<div class="bullet-text">
<ul class="links">
<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>
<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">Web.Myco.Systems</a>
<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">Git.Myco.Systems</a>
<a href="https://git.myco.systems/explore/repos" target="_blank">Source<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>
</ul>
</ul>
</div>
<details class="modal">

32
public/style.css
View file

@ -32,7 +32,7 @@ body,
font: 12px/12px "Iosevka Web", monospace;
}
.braille > * {
.braille>* {
white-space: pre;
}
@ -145,10 +145,10 @@ body,
display: none;
}
#tab-links:checked ~ #linksTab,
#tab-contact:checked ~ #contactTab,
#tab-about:checked ~ #aboutTab,
#tab-dash:checked ~ #dashTab {
#tab-links:checked~#linksTab,
#tab-contact:checked~#contactTab,
#tab-about:checked~#aboutTab,
#tab-dash:checked~#dashTab {
display: block;
}
@ -180,6 +180,7 @@ body,
position: absolute;
right: 0;
}
ul {
list-style-type: none;
}
@ -200,9 +201,11 @@ ul li::before {
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;
@ -212,11 +215,13 @@ ul li::before {
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;
@ -225,13 +230,16 @@ ul li::before {
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;
@ -243,6 +251,7 @@ ul li::before {
width: 100vw;
z-index: 3;
}
.modal__body {
border: 4px solid #f3bbae92;
background: rgba(36, 25, 23, 1);
@ -282,7 +291,20 @@ ul li::before {
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;
}