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"> <div class="bullet-text">
<ul class="links"> <ul class="links">
<li> <li>
<a href="https://myco.systems" target="_blank">Myco.Systems</a> <a href="https://coop.myco.systems" target="_blank">Blog<svg class="text-icon" viewBox="0 0 512 512">
</li> <path
<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" />
<li> </svg></a>
<a href="https://coop.myco.systems" target="_blank">Coop.Myco.Systems</a>
</li> </li>
<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>
<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> </li>
</ul> </ul>
</ul>
</div> </div>
<details class="modal"> <details class="modal">

22
public/style.css
View file

@ -180,6 +180,7 @@ body,
position: absolute; position: absolute;
right: 0; right: 0;
} }
ul { ul {
list-style-type: none; list-style-type: none;
} }
@ -200,9 +201,11 @@ ul li::before {
position: fixed; position: fixed;
z-index: 11; z-index: 11;
} }
.modal[open] .modal__toggle:focus { .modal[open] .modal__toggle:focus {
outline: 0px solid rgba(0, 0, 255, 0); outline: 0px solid rgba(0, 0, 255, 0);
} }
.modal__toggle::before { .modal__toggle::before {
content: "Donate"; content: "Donate";
cursor: pointer; cursor: pointer;
@ -212,11 +215,13 @@ ul li::before {
color: #fff; color: #fff;
border: 4px solid #f3bbae92; border: 4px solid #f3bbae92;
} }
.modal[open] .modal__toggle::before { .modal[open] .modal__toggle::before {
content: "✖"; content: "✖";
color: #fff !important; color: #fff !important;
font-size: 25px; font-size: 25px;
} }
.modal__toggle { .modal__toggle {
position: relative; position: relative;
list-style: none; list-style: none;
@ -225,13 +230,16 @@ ul li::before {
text-align: left; text-align: left;
z-index: 4; z-index: 4;
} }
.modal__toggle::-webkit-details-marker { .modal__toggle::-webkit-details-marker {
display: none; display: none;
} }
.modal__toggle:hover { .modal__toggle:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.modal__background { .modal__background {
background-color: rgba(0, 0, 0, 0.65); background-color: rgba(0, 0, 0, 0.65);
display: flex; display: flex;
@ -243,6 +251,7 @@ ul li::before {
width: 100vw; width: 100vw;
z-index: 3; z-index: 3;
} }
.modal__body { .modal__body {
border: 4px solid #f3bbae92; border: 4px solid #f3bbae92;
background: rgba(36, 25, 23, 1); background: rgba(36, 25, 23, 1);
@ -282,7 +291,20 @@ ul li::before {
padding-left: 0; padding-left: 0;
} }
.links a {
text-decoration-skip: spaces;
}
.dashboard { .dashboard {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.icon, .text-icon {
fill: #f3bbae;
width: 12px;
}
.text-icon {
padding-left: 0.5rem;
}