mirror of
https://github.com/juherr/kill-the-news.git
synced 2026-06-20 22:03:48 +00:00
build: add Wrangler text rule for CSS imports
Add [[rules]] type = "Text" globs = ["**/*.css"] to wrangler-example.toml so Wrangler bundles .css files as raw text strings importable in TypeScript. Add src/types/css.d.ts to provide the module declaration for `import css from "*.css"`. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
File diff suppressed because it is too large
Load Diff
@@ -1,7 +0,0 @@
|
|||||||
// This file is kept for backwards compatibility
|
|
||||||
// It re-exports the new modular design system
|
|
||||||
|
|
||||||
import { designSystem } from "./index";
|
|
||||||
import { interactiveScripts, authHelpers } from "../scripts/index";
|
|
||||||
|
|
||||||
export { designSystem, interactiveScripts, authHelpers };
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
// Main style exports file
|
|
||||||
// Combines all style components and re-exports them for easy imports
|
|
||||||
|
|
||||||
import { variables, lightModeTheme, fontImport } from "./variables";
|
|
||||||
import { layoutStyles } from "./layout";
|
|
||||||
import { componentStyles } from "./components";
|
|
||||||
import { utilityStyles } from "./utilities";
|
|
||||||
|
|
||||||
// Combine all style components into a single CSS string
|
|
||||||
export const designSystem = `
|
|
||||||
${variables}
|
|
||||||
${lightModeTheme}
|
|
||||||
${fontImport}
|
|
||||||
${layoutStyles}
|
|
||||||
${componentStyles}
|
|
||||||
${utilityStyles}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Re-export everything for modular usage if needed
|
|
||||||
export {
|
|
||||||
variables,
|
|
||||||
lightModeTheme,
|
|
||||||
fontImport,
|
|
||||||
layoutStyles,
|
|
||||||
componentStyles,
|
|
||||||
utilityStyles,
|
|
||||||
};
|
|
||||||
@@ -1,180 +0,0 @@
|
|||||||
// Layout styles for the application
|
|
||||||
// Contains styles for containers, headers, page structure
|
|
||||||
|
|
||||||
export const layoutStyles = `
|
|
||||||
/* Base Page Layout */
|
|
||||||
.page {
|
|
||||||
font-family: var(--font-family);
|
|
||||||
line-height: 1.5;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: background-color var(--transition-normal);
|
|
||||||
overflow-x: hidden;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
|
|
||||||
/* Liquid-glass-ish background (subtle, non-distracting) */
|
|
||||||
background-image:
|
|
||||||
radial-gradient(1200px circle at 20% 10%, rgba(10, 132, 255, 0.18), transparent 55%),
|
|
||||||
radial-gradient(900px circle at 80% 20%, rgba(94, 92, 230, 0.14), transparent 60%),
|
|
||||||
radial-gradient(700px circle at 50% 100%, rgba(48, 209, 88, 0.10), transparent 60%),
|
|
||||||
linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%);
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main Container */
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 980px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: var(--spacing-xl);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wider layout for data-dense pages (tables) */
|
|
||||||
.container-wide {
|
|
||||||
max-width: 1440px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header Styles */
|
|
||||||
.header {
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: var(--font-size-xxl);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
margin-bottom: var(--spacing-xs);
|
|
||||||
line-height: 1.2;
|
|
||||||
background: var(--gradient-title);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-top: 0;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Authentication Screen Layout */
|
|
||||||
.auth-container {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
padding: var(--spacing-xl);
|
|
||||||
background-color: var(--color-card);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
box-shadow: var(--shadow-xl);
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
transition: all var(--transition-normal);
|
|
||||||
backdrop-filter: blur(var(--blur-md));
|
|
||||||
-webkit-backdrop-filter: blur(var(--blur-md));
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-logo {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-title {
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-error {
|
|
||||||
color: var(--color-danger);
|
|
||||||
background-color: rgba(255, 59, 48, 0.1);
|
|
||||||
padding: var(--spacing-md);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
text-align: center;
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
backdrop-filter: blur(var(--blur-sm));
|
|
||||||
-webkit-backdrop-filter: blur(var(--blur-sm));
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form {
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-button {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.container {
|
|
||||||
padding: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: var(--spacing-md) 0;
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-with-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-title {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1, .header-title h1 {
|
|
||||||
font-size: var(--font-size-xxl);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
margin-bottom: var(--spacing-xs);
|
|
||||||
line-height: 1.2;
|
|
||||||
color: var(--color-text-primary); /* Fallback color */
|
|
||||||
background: var(--gradient-title);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p, .header-title p {
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-top: 0;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-title {
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
// Utility styles for the application
|
|
||||||
// Contains styles for utility classes like copyable text, animations, etc.
|
|
||||||
|
|
||||||
export const utilityStyles = `
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.muted {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.fade-in {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
scroll-behavior: auto !important;
|
|
||||||
transition-duration: 0.01ms !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Copyable content styling */
|
|
||||||
.copyable {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: var(--spacing-xs);
|
|
||||||
padding: var(--spacing-sm) var(--spacing-md);
|
|
||||||
background-color: rgba(60, 60, 67, 0.1);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
transition: background-color var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When inside a grid, ensure proper fit */
|
|
||||||
.email-metadata-grid .copyable {
|
|
||||||
margin-bottom: 0; /* Remove bottom margin inside grid */
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyable-label {
|
|
||||||
font-weight: var(--font-weight-semibold);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-right: var(--spacing-sm);
|
|
||||||
user-select: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyable-content {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: var(--spacing-xs) var(--spacing-sm);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
transition: background-color var(--transition-fast);
|
|
||||||
width: fit-content;
|
|
||||||
overflow: hidden; /* Prevent overflow in small containers */
|
|
||||||
flex: 1; /* Take remaining space */
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyable-content:hover {
|
|
||||||
background-color: rgba(60, 60, 67, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyable-value {
|
|
||||||
word-break: break-all;
|
|
||||||
margin-right: var(--spacing-xs);
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-icon-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Simplified icon states and transitions */
|
|
||||||
.copy-icon-original {
|
|
||||||
opacity: 0.6;
|
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Only apply hover effect when not in copied state */
|
|
||||||
.copyable-content:hover:not(.copied) .copy-icon-original {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-icon-success {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-50%, -50%) scale(0.8);
|
|
||||||
color: var(--color-success);
|
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When copied, hide original and show success icon with a smooth transition */
|
|
||||||
.copyable-content.copied .copy-icon-original {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-50%, -50%) scale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyable-content.copied .copy-icon-success {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -50%) scale(1);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
// Design system variables for the application
|
|
||||||
// Contains CSS variables for typography, colors, spacing, radius, animations, etc.
|
|
||||||
|
|
||||||
export const variables = `
|
|
||||||
:root {
|
|
||||||
/* Typography - Prefer system UI fonts (Apple HIG-ish) */
|
|
||||||
--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
|
|
||||||
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
||||||
color-scheme: light dark;
|
|
||||||
--font-size-xs: 12px;
|
|
||||||
--font-size-sm: 14px;
|
|
||||||
--font-size-md: 16px;
|
|
||||||
--font-size-lg: 20px;
|
|
||||||
--font-size-xl: 24px;
|
|
||||||
--font-size-xxl: 32px;
|
|
||||||
--font-weight-regular: 400;
|
|
||||||
--font-weight-medium: 500;
|
|
||||||
--font-weight-semibold: 600;
|
|
||||||
--font-weight-bold: 700;
|
|
||||||
|
|
||||||
/* Colors - Dark Mode (Default) */
|
|
||||||
--color-primary: #0a84ff;
|
|
||||||
--color-primary-dark: #409cff;
|
|
||||||
--color-secondary: #5e5ce6;
|
|
||||||
--color-success: #30d158;
|
|
||||||
--color-warning: #ff9f0a;
|
|
||||||
--color-danger: #ff453a;
|
|
||||||
--color-danger-dark: #ff6961;
|
|
||||||
--color-background: rgba(28, 28, 30, 0.95); /* Semi-transparent for glass effect */
|
|
||||||
--color-card: rgba(44, 44, 46, 0.8); /* Semi-transparent for glass effect */
|
|
||||||
--color-border: rgba(255, 255, 255, 0.08);
|
|
||||||
--color-text-primary: #ffffff;
|
|
||||||
--color-text-secondary: #ebebf5;
|
|
||||||
--color-text-tertiary: #8e8e93;
|
|
||||||
--color-text-on-primary: #ffffff;
|
|
||||||
--color-logout: rgba(255, 159, 10, 0.8); /* Orange-tinted for logout */
|
|
||||||
|
|
||||||
/* Gradients */
|
|
||||||
--gradient-title: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
|
||||||
|
|
||||||
/* Shadows for dark mode */
|
|
||||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
||||||
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
--spacing-xs: 4px;
|
|
||||||
--spacing-sm: 8px;
|
|
||||||
--spacing-md: 16px;
|
|
||||||
--spacing-lg: 24px;
|
|
||||||
--spacing-xl: 32px;
|
|
||||||
--spacing-xxl: 48px;
|
|
||||||
|
|
||||||
/* Radius */
|
|
||||||
--radius-sm: 8px;
|
|
||||||
--radius-md: 12px;
|
|
||||||
--radius-lg: 16px;
|
|
||||||
--radius-pill: 9999px;
|
|
||||||
|
|
||||||
/* Animation - Subtle */
|
|
||||||
--transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
--transition-normal: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
--transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
|
|
||||||
/* Blur for glass effect */
|
|
||||||
--blur-sm: 8px;
|
|
||||||
--blur-md: 12px;
|
|
||||||
--blur-lg: 20px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Light mode variables
|
|
||||||
export const lightModeTheme = `
|
|
||||||
/* Light Mode Support - Based on device preference */
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
--color-primary: #0070f3;
|
|
||||||
--color-primary-dark: #0051a8;
|
|
||||||
--color-secondary: #5e5ce6;
|
|
||||||
--color-success: #34c759;
|
|
||||||
--color-warning: #ff9500;
|
|
||||||
--color-danger: #ff3b30;
|
|
||||||
--color-danger-dark: #d70015;
|
|
||||||
--color-background: rgba(245, 245, 247, 0.9); /* Semi-transparent for glass effect */
|
|
||||||
--color-card: rgba(255, 255, 255, 0.8); /* Semi-transparent for glass effect */
|
|
||||||
--color-border: rgba(0, 0, 0, 0.06);
|
|
||||||
--color-text-primary: #000000;
|
|
||||||
--color-text-secondary: #666666;
|
|
||||||
--color-text-tertiary: #999999;
|
|
||||||
--color-text-on-primary: #ffffff;
|
|
||||||
--color-logout: rgba(255, 149, 0, 0.8); /* Orange-tinted for logout */
|
|
||||||
|
|
||||||
/* Reset shadows for light mode */
|
|
||||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
||||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
||||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06);
|
|
||||||
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.08);
|
|
||||||
|
|
||||||
/* Update gradient for light mode */
|
|
||||||
--gradient-title: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Inter font import
|
|
||||||
export const fontImport = `
|
|
||||||
/* No external font imports. */
|
|
||||||
`;
|
|
||||||
Vendored
+4
@@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.css" {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
@@ -13,6 +13,11 @@ kv_namespaces = [
|
|||||||
# { binding = "ATTACHMENT_BUCKET", bucket_name = "REPLACE_WITH_YOUR_BUCKET_NAME", preview_bucket_name = "REPLACE_WITH_YOUR_PREVIEW_BUCKET_NAME" }
|
# { binding = "ATTACHMENT_BUCKET", bucket_name = "REPLACE_WITH_YOUR_BUCKET_NAME", preview_bucket_name = "REPLACE_WITH_YOUR_PREVIEW_BUCKET_NAME" }
|
||||||
# ]
|
# ]
|
||||||
|
|
||||||
|
# Import CSS files as text strings (inlined in HTML <style> tags)
|
||||||
|
[[rules]]
|
||||||
|
type = "Text"
|
||||||
|
globs = ["**/*.css"]
|
||||||
|
|
||||||
# Workers Observability (keeps config in sync with dashboard toggle)
|
# Workers Observability (keeps config in sync with dashboard toggle)
|
||||||
[observability.logs]
|
[observability.logs]
|
||||||
enabled = true
|
enabled = true
|
||||||
|
|||||||
Reference in New Issue
Block a user