commit 3115375eec1ae18721b7f9b10ac90300e13c93da
parent eadf032cdfedd4efa3091f45dcbd076999cd44f2
Author: cowmonk <rekketstone@proton.me>
Date: Wed, 11 Jun 2025 19:55:14 -0700
better contacts and links
Diffstat:
5 files changed, 79 insertions(+), 36 deletions(-)
diff --git a/credits.html b/credits.html
@@ -29,17 +29,19 @@
<h3>cowmonk</h3>
<p><em>Linux enthusiast, C enjoyer, and lifelong suckless shill.</em></p>
- <h4>Contact & Links:</h4>
- <dl class="contact-details">
- <dt>Discord</dt>
- <dd>@cowmonk</dd>
+ <details class="contacts">
+ <summary>Contact & Links</summary>
+ <dl class="contact-details">
+ <dt>Discord</dt>
+ <dd>@cowmonk</dd>
- <dt>XMPP</dt>
- <dd>cowmonk@based.pt</dd>
+ <dt>XMPP</dt>
+ <dd>cowmonk@based.pt</dd>
- <dt>GitHub</dt>
- <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
- </dl>
+ <dt>GitHub</dt>
+ <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
+ </dl>
+ </details>
</aside>
<main class="main-content">
diff --git a/index.html b/index.html
@@ -29,17 +29,19 @@
<h3>cowmonk</h3>
<p><em>Linux enthusiast, C enjoyer, and lifelong suckless shill.</em></p>
- <h4>Contact & Links:</h4>
- <dl class="contact-details">
- <dt>Discord</dt>
- <dd>@cowmonk</dd>
+ <details class="contacts">
+ <summary>Contact & Links</summary>
+ <dl class="contact-details">
+ <dt>Discord</dt>
+ <dd>@cowmonk</dd>
- <dt>XMPP</dt>
- <dd>cowmonk@based.pt</dd>
+ <dt>XMPP</dt>
+ <dd>cowmonk@based.pt</dd>
- <dt>GitHub</dt>
- <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
- </dl>
+ <dt>GitHub</dt>
+ <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
+ </dl>
+ </details>
</aside>
<main class="main-content">
diff --git a/interests.html b/interests.html
@@ -29,17 +29,19 @@
<h3>cowmonk</h3>
<p><em>Linux enthusiast, C enjoyer, and lifelong suckless shill.</em></p>
- <h4>Contact & Links:</h4>
- <dl class="contact-details">
- <dt>Discord</dt>
- <dd>@cowmonk</dd>
+ <details class="contacts">
+ <summary>Contact & Links</summary>
+ <dl class="contact-details">
+ <dt>Discord</dt>
+ <dd>@cowmonk</dd>
- <dt>XMPP</dt>
- <dd>cowmonk@based.pt</dd>
+ <dt>XMPP</dt>
+ <dd>cowmonk@based.pt</dd>
- <dt>GitHub</dt>
- <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
- </dl>
+ <dt>GitHub</dt>
+ <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
+ </dl>
+ </details>
</aside>
<main class="main-content">
diff --git a/main.css b/main.css
@@ -90,6 +90,41 @@ body > header p { opacity: 0.8;
line-height: 1.3; }
.profile-info p em { color: #ccc; }
.profile-info a { }
+.profile-info details.contacts summary { font-size: 1em;
+ color: #bbb;
+ font-weight: bold;
+ padding: 0.6em 0.2em 0.6em 0;
+ cursor: pointer;
+ list-style: none;
+ transition: color 0.2s ease, border-color 0.2s ease;
+ border-bottom: 1px solid #333;
+ display: block; }
+
+.profile-info details.contacts summary::-webkit-details-marker,
+.profile-info details.contacts summary::marker { display: none }
+.profile-info details.contacts summary:focus { outline: none; }
+.profile-info details.contacts summary:focus-visible { box-shadow: 0 0 0 2px #111, 0 0 0 4px yellow;
+ border-bottom-color: transparent; }
+
+.profile-info details.contacts summary::before { content: "[+] ";
+ color: #888;
+ font-weight: normal;
+ display: inline;
+ margin-left: 0.2em;
+ transition: color 0.2s ease; }
+.profile-info details.contacts summary:hover,
+.profile-info details.contacts summary:hover::before { color: #fff; }
+.profile-info details.contacts[open] > summary { color: yellow;
+ border-bottom-color: yellow; }
+.profile-info details.contacts[open] > summary:focus-visible { border-bottom-color: transparent; }
+.profile-info details.contacts[open] > summary::before { content: "[-] ";
+ color: yellow; }
+.profile-info details.contacts[open] .contact-details { margin: 0;
+ padding: 0.75em 0.5em 0.5em calc(0.2em + 3ch + 0.2em);
+ font-size: 0.9em;
+ background-color: #161616;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px; }
.contact-details { margin: 0;
padding: 0;
diff --git a/projects.html b/projects.html
@@ -29,17 +29,19 @@
<h3>cowmonk</h3>
<p><em>Linux enthusiast, C enjoyer, and lifelong suckless shill.</em></p>
- <h4>Contact & Links:</h4>
- <dl class="contact-details">
- <dt>Discord</dt>
- <dd>@cowmonk</dd>
+ <details class="contacts">
+ <summary>Contact & Links</summary>
+ <dl class="contact-details">
+ <dt>Discord</dt>
+ <dd>@cowmonk</dd>
- <dt>XMPP</dt>
- <dd>cowmonk@based.pt</dd>
+ <dt>XMPP</dt>
+ <dd>cowmonk@based.pt</dd>
- <dt>GitHub</dt>
- <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
- </dl>
+ <dt>GitHub</dt>
+ <dd><a href="https://github.com/cowmonk" target="_blank" rel="noopener noreferrer">github.com/cowmonk</a></dd>
+ </dl>
+ </details>
</aside>
<main class="main-content">
