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

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

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

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

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