pmb/finger-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle to Tokyo Night, matching waffles.yttrx.com's palette

Browse Source 
Overrides Bootstrap 5.3's native dark color-mode tokens with the exact
Tokyo Night hex values waffles.yttrx.com's Compost/Tailwind theme uses
(same primary blue, neutral backgrounds, etc.), so the two sites share
one visual identity, plus repoints the stale GitHub source link to Gitea.
This commit is contained in:
waffle2k
2026-07-23 22:09:22 -07:00
parent c8786a2a0b
commit 8c7ba4dbd9
4 changed files with 142 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/docker-build-push.yml
-50
View File
@@ -1,50 +0,0 @@
name: Build and Push Docker Image
on:
push:
branches: [ main ]
workflow_dispatch:
env:
REGISTRY: ghcr.io
IMAGE_NAME: finger-web
jobs:
build-and-push:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log in to Container Registry
uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Extract metadata
id: meta
uses: docker/metadata-action@v5
with:
images: ${{ env.REGISTRY }}/${{ github.repository_owner }}/${{ env.IMAGE_NAME }}
tags: |
type=ref,event=branch
type=raw,value=latest,enable={{is_default_branch}}
- name: Build and push Docker image
uses: docker/build-push-action@v5
with:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max
static/css/style.css
+137 -33
View File
@@ -1,43 +1,111 @@
/* Custom styles for Finger Web Flask App */
/* Custom styles for Finger Web Flask App
*
* Palette: Tokyo Night (https://github.com/folke/tokyonight.nvim), matching
* the same anchor colors waffles.yttrx.com's Compost/Tailwind theme uses, so
* both sites share one visual identity. Applied on top of Bootstrap 5.3's
* native [data-bs-theme=dark] mode (set on <html> in base.html) by
* overriding its root-level color tokens rather than fighting individual
* utility classes.
*/
:root {
--tn-bg: #1a1b26;
--tn-bg-dark: #16161e;
--tn-surface: #24283b;
--tn-surface-hi: #292e42;
--tn-border: #3b4261;
--tn-fg: #c0caf5;
--tn-fg-dark: #a9b1d6;
--tn-comment: #565f89;
--tn-blue: #7aa2f7;
--tn-blue-bright: #5d86ef;
--tn-cyan: #7dcfff;
--tn-purple: #bb9af7;
--tn-green: #9ece6a;
--tn-red: #f7768e;
--tn-yellow: #e0af68;
/* Bootstrap root tokens (color-mode independent, used by .bg-primary,
.btn-primary, .text-primary, .border-primary, etc. app-wide). */
--bs-primary: var(--tn-blue);
--bs-primary-rgb: 122, 162, 247;
--bs-danger: var(--tn-red);
--bs-danger-rgb: 247, 118, 142;
--bs-success: var(--tn-green);
--bs-success-rgb: 158, 206, 106;
--bs-warning: var(--tn-yellow);
--bs-warning-rgb: 224, 175, 104;
--bs-info: var(--tn-cyan);
--bs-info-rgb: 125, 207, 255;
--bs-font-sans-serif: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Bootstrap's dark color-mode tokens — override the defaults with the exact
Tokyo Night shades instead of Bootstrap's generic dark grays. */
[data-bs-theme="dark"] {
--bs-body-bg: var(--tn-bg);
--bs-body-color: var(--tn-fg);
--bs-emphasis-color: #ffffff;
--bs-secondary-color: var(--tn-comment);
--bs-secondary-bg: var(--tn-surface);
--bs-tertiary-bg: var(--tn-surface-hi);
--bs-border-color: var(--tn-border);
--bs-link-color: var(--tn-blue);
--bs-link-hover-color: var(--tn-cyan);
--bs-link-color-rgb: 122, 162, 247;
--bs-link-hover-color-rgb: 125, 207, 255;
}
/* Global styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: var(--bs-font-sans-serif);
line-height: 1.6;
}
/* Navigation enhancements */
/* Navigation */
.navbar-tn {
background-color: var(--tn-surface-hi);
border-bottom: 1px solid var(--tn-border);
}
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
color: var(--tn-blue) !important;
}
.navbar-nav .nav-link {
font-weight: 500;
color: var(--tn-fg-dark);
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
color: #fff !important;
color: var(--tn-cyan) !important;
text-decoration: underline;
}
/* Card enhancements */
.card {
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border: 1px solid var(--tn-border);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.card-header {
background-color: var(--tn-surface-hi);
border-bottom: 1px solid var(--tn-border);
}
/* Jumbotron styling */
.jumbotron {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #dee2e6;
.jumbotron-tn {
background: linear-gradient(135deg, var(--tn-surface) 0%, var(--tn-bg-dark) 100%);
border: 1px solid var(--tn-border);
}
/* Button enhancements */
@@ -48,29 +116,50 @@ body {
}
.btn-primary {
background: linear-gradient(45deg, #007bff, #0056b3);
background: linear-gradient(45deg, var(--tn-blue), var(--tn-blue-bright));
border: none;
color: var(--tn-bg-dark);
}
.btn-primary:hover {
background: linear-gradient(45deg, #0056b3, #004085);
background: linear-gradient(45deg, var(--tn-blue-bright), var(--tn-blue));
color: var(--tn-bg-dark);
transform: translateY(-1px);
}
.btn-outline-secondary {
color: var(--tn-fg-dark);
border-color: var(--tn-border);
}
.btn-outline-secondary:hover {
background-color: var(--tn-surface-hi);
border-color: var(--tn-comment);
color: var(--tn-fg);
}
.btn-outline-primary:hover {
transform: translateY(-1px);
}
/* Form enhancements */
.form-control {
background-color: var(--tn-surface);
color: var(--tn-fg);
border-radius: 6px;
border: 2px solid #e9ecef;
border: 2px solid var(--tn-border);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
background-color: var(--tn-surface);
color: var(--tn-fg);
border-color: var(--tn-blue);
box-shadow: 0 0 0 0.2rem rgba(122, 162, 247, 0.25);
}
.form-control::placeholder {
color: var(--tn-comment);
}
/* Alert enhancements */
@@ -80,19 +169,30 @@ body {
}
.alert-success {
background: linear-gradient(45deg, #d4edda, #c3e6cb);
color: #155724;
background: var(--tn-green);
color: var(--tn-bg-dark);
}
.alert-danger {
background: linear-gradient(45deg, #f8d7da, #f5c6cb);
color: #721c24;
background: var(--tn-red);
color: var(--tn-bg-dark);
}
.alert-info {
background: var(--tn-surface-hi);
color: var(--tn-fg);
border: 1px solid var(--tn-cyan);
}
.alert-link {
color: var(--tn-cyan);
}
/* Footer styling */
footer {
.footer-tn {
margin-top: auto;
border-top: 1px solid #e9ecef;
background-color: var(--tn-bg-dark);
border-top: 1px solid var(--tn-border);
}
/* Code block styling */
@@ -102,19 +202,19 @@ pre {
}
pre code {
color: #495057;
color: var(--tn-fg-dark);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.jumbotron {
.jumbotron-tn {
padding: 2rem 1rem;
}
.display-4 {
font-size: 2rem;
}
.card-body {
padding: 1rem;
}
@@ -138,14 +238,14 @@ main {
/* Custom utility classes */
.text-gradient {
background: linear-gradient(45deg, #007bff, #6610f2);
background: linear-gradient(45deg, var(--tn-blue), var(--tn-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-custom {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* Loading animation for forms */
@@ -163,7 +263,7 @@ main {
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid #ffffff;
border: 2px solid var(--tn-bg-dark);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
@@ -177,14 +277,18 @@ main {
/* Finger command specific styles */
.finger-output pre {
font-family: 'Courier New', Consolas, monospace;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.85rem;
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 500px;
overflow-y: auto;
color: white;
background-color: var(--tn-surface);
color: var(--tn-fg);
padding: 1rem;
border-radius: 6px;
border: 1px solid var(--tn-border);
}
.finger-output pre::-webkit-scrollbar {
@@ -192,14 +296,14 @@ main {
}
.finger-output pre::-webkit-scrollbar-track {
background: #2d3748;
background: var(--tn-surface);
}
.finger-output pre::-webkit-scrollbar-thumb {
background: #4a5568;
background: var(--tn-border);
border-radius: 4px;
}
.finger-output pre::-webkit-scrollbar-thumb:hover {
background: #718096;
background: var(--tn-comment);
}
templates/base.html
+3 -3
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,7 +16,7 @@
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<nav class="navbar navbar-expand-lg navbar-dark navbar-tn">
<div class="container">
<a class="navbar-brand" href="{{ url_for('index') }}">Finger Web</a>
@@ -60,7 +60,7 @@
</main>
<!-- Footer -->
<footer class="bg-light text-center text-muted py-3 mt-5">
<footer class="footer-tn text-center text-muted py-3 mt-5">
<div class="container">
<p>&copy; 2025 Finger Web App. Built with love ❤️</p>
</div>
templates/index.html
+2 -2
View File
@@ -3,13 +3,13 @@
{% block content %}
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="jumbotron bg-light p-5 rounded">
<div class="jumbotron jumbotron-tn p-5 rounded">
<h1 class="display-4">Welcome to Finger Web!</h1>
<p class="lead">A simple web interface to the unix finger command.</p>
<hr class="my-4">
<p><a href="https://en.wikipedia.org/wiki/Finger_(protocol)">Finger</a> is a utility from 1971 written to discover user information on remote unix systems. While its use has fallen off, you can sometimes still find active finger servers where users provide information about themselves.</p><p>See <a href="/finger/[email protected]">[email protected]</a> as an example :)</p>
<hr class="my-4">
<p>This site was written by <a href="https://yttrx.com/@waffles">waffles</a> (<a href="https://github.com/waffle2k/finger-web/">source code</a>) but inspired by <a href="https://benbrown.com">Ben Brown's</a> <a href="https://happynetbox.com/">happy net box</a> project.</p>
<p>This site was written by <a href="https://yttrx.com/@waffles">waffles</a> (<a href="https://gitea.blairhaus.net/pmb/finger-web">source code</a>) but inspired by <a href="https://benbrown.com">Ben Brown's</a> <a href="https://happynetbox.com/">happy net box</a> project.</p>
</div>
</div>
</div>