email

Author: moneuron

assets/gallery.css

@@ -98,3 +98,59 @@ a:focus {
         grid-template-columns: repeat(2, 1fr);
     }
 }
+
+.email-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: flex-start;
+  font-family: system-ui, sans-serif;
+}
+
+.status-group {
+  min-width: 200px;
+}
+
+.status-badge {
+  display: inline-block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  padding: 0.2rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-badge.active {
+  background: #e6f7e6;
+  color: #0a6e0a;
+}
+
+.status-badge.inactive {
+  background: #f1f1f1;
+  color: #6b6b6b;
+}
+
+.email-list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.email-list li {
+  padding: 0.25rem 0;
+  border-bottom: 1px dashed #ddd;
+}
+
+.email-list li:last-child {
+  border-bottom: none;
+}
+
+.footnote {
+  width: 100%;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: #555;
+  font-style: italic;
+}

assets/script.js

@@ -75,16 +75,25 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // --- Helper: Create email blockquote ---
   function createEmailBlockquote({ active, inactive }) {
-    const blockquote = document.createElement('p');
+    const blockquote = document.createElement('div');
     blockquote.id = 'email-blockquote';
-    blockquote.classList.add('hidden-view'); // use CSS class instead of inline style
+    blockquote.classList.add('hidden-view');
 
-    blockquote.innerHTML = `
-      <blockquote><p>Feel free to reach out via the active addresses.</p></blockquote>
-      <p><span class="paper-item"><strong>Active emails:</strong> ${active.join(', ')}</p>
-      <p><span class="paper-item"><strong>Inactive emails:</strong> ${inactive.join(', ')}</p>
-      <p><span class="paper-item"><small>Feel free to reach out via the active addresses.</small></p>
-    `;
+    blockquote.innerHTML = `<div class="email-status">
+  <div class="status-group">
+    <span class="status-badge active">Active</span>
+    <ul class="email-list">
+      ${active.map(email => `<li>${email}</li>`).join('')}
+    </ul>
+  </div>
+  <div class="status-group">
+    <span class="status-badge inactive">Inactive</span>
+    <ul class="email-list">
+      ${inactive.map(email => `<li>${email}</li>`).join('')}
+    </ul>
+  </div>
+  <p class="footnote">Feel free to reach out via the active addresses.</p>
+</div>`;
     return blockquote;
   }