Restyle to Tokyo Night, matching waffles.yttrx.com's palette
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
@@ -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
|
|
||||||
+135
-31
@@ -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 */
|
/* Global styles */
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: var(--bs-font-sans-serif);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation enhancements */
|
/* Navigation */
|
||||||
|
.navbar-tn {
|
||||||
|
background-color: var(--tn-surface-hi);
|
||||||
|
border-bottom: 1px solid var(--tn-border);
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
color: var(--tn-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav .nav-link {
|
.navbar-nav .nav-link {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
color: var(--tn-fg-dark);
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav .nav-link:hover {
|
.navbar-nav .nav-link:hover {
|
||||||
color: #fff !important;
|
color: var(--tn-cyan) !important;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Card enhancements */
|
/* Card enhancements */
|
||||||
.card {
|
.card {
|
||||||
border: none;
|
border: 1px solid var(--tn-border);
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.card:hover {
|
||||||
transform: translateY(-2px);
|
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 styling */
|
||||||
.jumbotron {
|
.jumbotron-tn {
|
||||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
background: linear-gradient(135deg, var(--tn-surface) 0%, var(--tn-bg-dark) 100%);
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid var(--tn-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button enhancements */
|
/* Button enhancements */
|
||||||
@@ -48,29 +116,50 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(45deg, #007bff, #0056b3);
|
background: linear-gradient(45deg, var(--tn-blue), var(--tn-blue-bright));
|
||||||
border: none;
|
border: none;
|
||||||
|
color: var(--tn-bg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.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);
|
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 {
|
.btn-outline-primary:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form enhancements */
|
/* Form enhancements */
|
||||||
.form-control {
|
.form-control {
|
||||||
|
background-color: var(--tn-surface);
|
||||||
|
color: var(--tn-fg);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid #e9ecef;
|
border: 2px solid var(--tn-border);
|
||||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control:focus {
|
.form-control:focus {
|
||||||
border-color: #007bff;
|
background-color: var(--tn-surface);
|
||||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
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 */
|
/* Alert enhancements */
|
||||||
@@ -80,19 +169,30 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-success {
|
.alert-success {
|
||||||
background: linear-gradient(45deg, #d4edda, #c3e6cb);
|
background: var(--tn-green);
|
||||||
color: #155724;
|
color: var(--tn-bg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-danger {
|
.alert-danger {
|
||||||
background: linear-gradient(45deg, #f8d7da, #f5c6cb);
|
background: var(--tn-red);
|
||||||
color: #721c24;
|
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 styling */
|
||||||
footer {
|
.footer-tn {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
border-top: 1px solid #e9ecef;
|
background-color: var(--tn-bg-dark);
|
||||||
|
border-top: 1px solid var(--tn-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code block styling */
|
/* Code block styling */
|
||||||
@@ -102,12 +202,12 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
pre code {
|
||||||
color: #495057;
|
color: var(--tn-fg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.jumbotron {
|
.jumbotron-tn {
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -138,14 +238,14 @@ main {
|
|||||||
|
|
||||||
/* Custom utility classes */
|
/* Custom utility classes */
|
||||||
.text-gradient {
|
.text-gradient {
|
||||||
background: linear-gradient(45deg, #007bff, #6610f2);
|
background: linear-gradient(45deg, var(--tn-blue), var(--tn-purple));
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-custom {
|
.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 */
|
/* Loading animation for forms */
|
||||||
@@ -163,7 +263,7 @@ main {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
margin-top: -8px;
|
margin-top: -8px;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid var(--tn-bg-dark);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border-top-color: transparent;
|
border-top-color: transparent;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
@@ -177,14 +277,18 @@ main {
|
|||||||
|
|
||||||
/* Finger command specific styles */
|
/* Finger command specific styles */
|
||||||
.finger-output pre {
|
.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;
|
font-size: 0.85rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow-y: auto;
|
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 {
|
.finger-output pre::-webkit-scrollbar {
|
||||||
@@ -192,14 +296,14 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.finger-output pre::-webkit-scrollbar-track {
|
.finger-output pre::-webkit-scrollbar-track {
|
||||||
background: #2d3748;
|
background: var(--tn-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
.finger-output pre::-webkit-scrollbar-thumb {
|
.finger-output pre::-webkit-scrollbar-thumb {
|
||||||
background: #4a5568;
|
background: var(--tn-border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.finger-output pre::-webkit-scrollbar-thumb:hover {
|
.finger-output pre::-webkit-scrollbar-thumb:hover {
|
||||||
background: #718096;
|
background: var(--tn-comment);
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-3
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
<nav class="navbar navbar-expand-lg navbar-dark navbar-tn">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand" href="{{ url_for('index') }}">Finger Web</a>
|
<a class="navbar-brand" href="{{ url_for('index') }}">Finger Web</a>
|
||||||
|
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- 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">
|
<div class="container">
|
||||||
<p>© 2025 Finger Web App. Built with love ❤️</p>
|
<p>© 2025 Finger Web App. Built with love ❤️</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,13 +3,13 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8 mx-auto">
|
<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>
|
<h1 class="display-4">Welcome to Finger Web!</h1>
|
||||||
<p class="lead">A simple web interface to the unix finger command.</p>
|
<p class="lead">A simple web interface to the unix finger command.</p>
|
||||||
<hr class="my-4">
|
<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>
|
<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">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user