alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4.1.6 UX polish: homepage, navbar, tools consistency

Browse Source 
Homepage:
- Minimal floating icons with gold hover effect
- Larger Stegasoo title (display-5)
- v4.1 badge repositioned to bottom-left of logo
- Tighter 8px gap between logo and title

Navbar:
- Container-fluid for fixed left positioning
- Reduced left padding, proper logo/badge spacing
- Channel fingerprint in gold, shield icon brighter

Tools page:
- Consistent font styling (0.62rem, weight 500, 1px spacing)
- Wider buttons (64px) with more gap
- Bolder text on hover (weight 600)

Typography consistency across nav, homepage, and tools.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-07 21:35:42 -05:00
parent b9d0fac535
commit 6338d6aab4
3 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontends/web/static/style.css
View File

@@ -180,6 +180,10 @@ body {
z-index: 1030; /* Above page content for dropdowns */
}
.navbar > .container {
padding-left: 0;
}
/* Ensure navbar dropdown appears above all page content */
.navbar .dropdown-menu {
z-index: 1031;
@@ -219,9 +223,9 @@ body {
left: 50%;
transform: translateX(-50%) translateY(-4px);
font-size: 0.7rem;
font-weight: 700;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 1px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
@@ -1881,7 +1885,7 @@ footer {
.tools-ribbon-group {
display: flex;
align-items: center;
gap: 0.25rem;
gap: 0.5rem;
}
.tools-ribbon-divider {
@@ -1898,8 +1902,8 @@ footer {
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 48px;
width: 64px;
height: 52px;
padding: 0.25rem;
border: 1px solid transparent;
border-radius: 0.375rem;
@@ -1915,15 +1919,17 @@ footer {
}
.tool-icon-btn span {
font-size: 0.6rem;
font-size: 0.62rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
letter-spacing: 1px;
}
.tool-icon-btn:hover {
background: rgba(255, 230, 150, 0.1);
border-color: rgba(255, 230, 150, 0.3);
color: var(--header-gold);
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}

4
frontends/web/templates/base.html
View File

@@ -11,8 +11,8 @@
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="/">
<div class="container-fluid">
<a class="navbar-brand" href="/" style="padding-left: 6px; margin-right: 8px;">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="28">
</a>
{% if channel_configured %}

25
frontends/web/templates/index.html
View File

@@ -13,19 +13,16 @@
transition: all 0.15s ease;
}
.home-icon i {
font-size: 3.5rem;
font-size: 2.5rem;
color: #fff;
margin-bottom: 0.5rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.3),
1px -1px 0 rgba(0, 0, 0, 0.3),
-1px 1px 0 rgba(0, 0, 0, 0.3),
1px 1px 0 rgba(0, 0, 0, 0.3);
filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.9));
-webkit-text-stroke: 1px #8b6914;
transition: all 0.15s ease;
}
.home-icon span {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
@@ -34,27 +31,27 @@
transition: all 0.15s ease;
}
.home-icon:hover i {
color: #ffe699;
transform: translateY(-4px);
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
color: #fee862;
transform: translateY(-3px);
filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.8));
}
.home-icon:hover span {
opacity: 1;
transform: translateY(0);
color: #ffe699;
color: #fee862;
}
</style>
<div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 70vh;">
<!-- Hero -->
<div class="d-flex align-items-center gap-3 mb-4">
<div class="d-flex align-items-center mb-4" style="gap: 8px;">
<div class="position-relative">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="80">
<span class="badge bg-success position-absolute" style="bottom: -5px; right: -10px; font-size: 0.6rem;">v4.1</span>
<span class="badge bg-success position-absolute" style="bottom: 1px; left: -6px; font-size: 0.6rem;">v4.1</span>
</div>
<div>
<h1 class="h3 fw-bold title-gold mb-0">Stegasoo</h1>
<h1 class="display-5 fw-bold title-gold mb-0">Stegasoo</h1>
<p class="text-muted mb-0 small">Hide encrypted data in plain sight.</p>
</div>
</div>