From 10feb53314de82daf17cb7170372a3ce24233324 Mon Sep 17 00:00:00 2001 From: multipleof4 Date: Sun, 9 Nov 2025 06:56:40 -0800 Subject: [PATCH] Feat: Big card layout with links & icons --- index.html | 279 +++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 229 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index abc50b4..7c2c79d 100644 --- a/index.html +++ b/index.html @@ -68,6 +68,7 @@ padding:100vh 6vw 5rem; color:#102331 } + .section{ margin-bottom:2.6rem; padding:1.3rem 1.4rem 1.1rem; @@ -82,17 +83,72 @@ letter-spacing:.06em; text-transform:uppercase; color:#0c2334; - margin-bottom:.4rem + margin-bottom:.8rem } - .section p{ - font-size:.95rem; - line-height:1.6; - color:#1d3545 + + .tool-list{ + display:flex; + flex-direction:column; + gap:.85rem } - .highlight{ + + .tool-card{ + display:flex; + align-items:center; + gap:.9rem; + padding:.75rem .9rem; + border-radius:12px; + background:#0f2234; + color:#f5f7fb; + text-decoration:none; + box-shadow:0 4px 16px #00000033; + transition:transform .14s ease,box-shadow .14s ease,background .14s ease + } + .tool-card:hover, + .tool-card:focus-visible{ + background:#152c43; + transform:translateY(-2px); + box-shadow:0 7px 22px #00000040; + outline:none + } + + .tool-icon{ + flex:0 0 44px; + height:44px; + border-radius:50%; + background:radial-gradient(circle at 30% 20%,#ffffffee,transparent), + linear-gradient(145deg,#4fa65a,#2c6fb3); + display:flex; + align-items:center; + justify-content:center; + font-size:20px; + color:#0f2234; + box-shadow:0 2px 6px #00000055 + } + + .tool-content{ + display:flex; + flex-direction:column; + gap:.1rem; + min-width:0 + } + + .tool-name{ + font-size:.98rem; font-weight:600; - color:#0c5a2a + color:#e8f3ff; + text-decoration:underline; + text-underline-offset:2px; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis } + + .tool-label{ + font-size:.78rem; + opacity:.82 + } + .warn{ font-weight:700; color:#b00020 @@ -100,11 +156,21 @@ .muted{ opacity:.76 } + @media(max-width:640px){ main{padding:100vh 5vw 3.6rem} .section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem} .section h2{font-size:1.0rem} - .section p{font-size:.9rem} + .tool-card{ + padding:.7rem .8rem; + gap:.75rem + } + .tool-icon{ + flex-basis:40px; + height:40px + } + .tool-name{font-size:.94rem} + .tool-label{font-size:.74rem} } @@ -272,72 +338,173 @@

VPN

-

- Mullvad and - Proton VPN. -

+
+ +
☁️
+
+
Mullvad
+
Homepage
+
+ + +
☁️
+
+
Proton VPN
+
Homepage
+
+ +

Browser

-

- Firefox (hardened) and - Tor Browser. -

+
+ +
🌐
+
+
Firefox (Hardened)
+
Homepage
+
+ + +
🌐
+
+
Tor Browser
+
Homepage
+
+ +

Operating Systems

-

- Qubes OS, - Tails, - Fedora. -

+
+ +
💻
+
+
Qubes OS
+
Homepage
+
+ + +
💻
+
+
Tails
+
Homepage
+
+ + +
💻
+
+
Fedora
+
Homepage
+
+ +

Password Management + Auth

-

- KeePassXC (Windows desktop), - KeePassDX (mobile), - Firefox Password Manager, - Proton Pass, - Proton Auth. -

+
+ +
🔑
+
+
KeePassXC
+
Homepage
+
+ + +
🔑
+
+
KeePassDX
+
Homepage
+
+ + +
🔑
+
+
Firefox Password Manager
+
Homepage
+
+ + +
🔑
+
+
Proton Pass
+
Homepage
+
+ + +
🔑
+
+
Proton Auth
+
Homepage
+
+ +

Email

-

- Proton Mail. -

+
+ +
✉️
+
+
Proton Mail
+
Homepage
+
+ +

File Storage

-

- Proton Drive. -

+
+ +
📁
+
+
Proton Drive
+
Homepage
+
+ +

Cryptocurrency

-

- Monero first, - Bitcoin second. -

-

- Avoid Zcash: - lots of influential people, including Edward Snowden, +

+ +
🪙
+
+
Monero
+
Homepage
+
+ + +
🪙
+
+
Bitcoin
+
Homepage
+
+ +
+

+ Avoid Zcash: lots of influential people, including Edward Snowden, sold out to advertise Zcash; trust and incentives are misaligned.

Instant Messaging

-

- Signal. -

+
+ +
💬
+
+
Signal
+
Homepage
+
+ +
@@ -349,16 +516,28 @@

Calendar

-

- Proton Calendar. -

+
+ +
📅
+
+
Proton Calendar
+
Homepage
+
+ +

Hosting

-

- ovobox.org. -

+
+ +
🌐
+
+
ovobox.org
+
Homepage
+
+ +