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

Stylesheet mild refactor.

Browse Source
This commit is contained in:
Aaron D. Lee
2025-12-27 18:02:12 -05:00
parent dfb8fb4f6e
commit 2abb458c57
6 changed files with 415 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
templates/base.html
View File

@@ -7,152 +7,7 @@
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--gradient-start: #667eea;
--gradient-end: #764ba2;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.navbar {
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px);
}
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-header {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-bottom: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border: none;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.hero-icon {
font-size: 4rem;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
}
.form-control, .form-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
}
.form-control:focus, .form-select:focus {
background: rgba(255, 255, 255, 0.1);
border-color: var(--gradient-start);
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
color: #fff;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Fix dropdown options for dark theme */
.form-select option {
background: #1a1a2e;
color: #fff;
}
.phrase-display {
font-family: 'Courier New', monospace;
font-size: 1rem;
background: rgba(0, 0, 0, 0.3);
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border-left: 4px solid var(--gradient-start);
display: inline-block;
line-height: 1.6;
word-spacing: 0.3rem;
}
.story-word {
color: #ff6b6b;
font-weight: bold;
text-transform: uppercase;
}
.story-card {
background: rgba(0, 0, 0, 0.2);
border-left: 3px solid var(--gradient-start);
padding: 1rem;
margin-bottom: 0.75rem;
border-radius: 0.5rem;
font-size: 0.95rem;
line-height: 1.6;
}
.story-card .day-label {
font-weight: bold;
color: var(--gradient-start);
margin-bottom: 0.5rem;
}
.pin-display {
font-family: 'Courier New', monospace;
font-size: 3rem;
font-weight: bold;
letter-spacing: 0.75rem;
background: linear-gradient(135deg, #fef08a, #fcd34d, #fb923c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
line-height: 1;
}
.pin-container {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 1.5rem 2rem;
display: inline-block;
}
.alert-message {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1.5rem;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
}
footer {
background: rgba(0, 0, 0, 0.2);
}
</style>
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">