Update post-quantum-cryptography.html
· 1 year ago
9579f8b6e99bd5f61ef6357fcc2004affbd6ceff
Parent:
bbfe1f288
1 file changed +155 −244
- post-quantum-cryptography.html +155 −244
Diff
--- a/post-quantum-cryptography.html +++ b/post-quantum-cryptography.html @@ -12,282 +12,197 @@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <style> - /* Cyberpunk Theme for PQC Cheatsheet */ - @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap'); + /* Cyberpunk Theme for PQC Cheatsheet - Readability Focus */ + @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap'); :root { - --font-display: 'Orbitron', sans-serif; /* Cyberpunk Display Font */ - --font-heading: 'Rajdhani', sans-serif; /* Techy Heading Font */ - --font-body: 'Rajdhani', sans-serif; /* Techy Body Font */ - --font-mono: 'Share Tech Mono', monospace; /* Monospaced for code/terms */ + --font-display: 'Orbitron', sans-serif; /* Main H1 Title */ + --font-heading: 'Inter', sans-serif; /* Cleaner Headings */ + --font-body: 'Inter', sans-serif; /* Highly Readable Body */ + --font-mono: 'Roboto Mono', monospace; /* Clear Monospaced for terms/code */ - /* Cyberpunk Color Palette - Not too dark base */ - --cyber-bg-primary: #1A1E2C; /* Deep Indigo/Near Black */ - --cyber-bg-secondary: #24293A; /* Darker Slate Blue */ - --cyber-surface: #2E3448; /* Card Background */ + /* Revised Cyberpunk Palette - Better Contrast & Readability */ + --page-bg: #1E222B; /* Dark Slate Blue - Not pure black */ + --card-bg: #2A2F3C; /* Slightly Lighter Card Surface */ + --surface-highlight-bg: #353B48; /* For things like collapse content bg */ - --cyber-text-primary: #E5E9F0; /* Light Grey/Off-White */ - --cyber-text-secondary: #A3ABB2; /* Muted Grey */ - --cyber-text-heading: #FFFFFF; /* Pure White for main headings */ + --text-primary: #E0E0E0; /* Light Grey - Primary Text */ + --text-secondary: #B0B0B0; /* Medium Grey - Secondary Text */ + --text-heading-main: #FFFFFF; /* White for Hero H1 */ + --text-heading-section: #F5F5F5; /* Bright for Section H2 */ - --cyber-accent-primary: #00FFFF; /* Neon Cyan */ - --cyber-accent-secondary: #FF00FF; /* Neon Magenta */ - --cyber-accent-warning: #F7DC6F; /* Neon Yellow */ - --cyber-accent-critical: #FF4136; /* Neon Red */ - - --cyber-border-color: #4C566A; /* Muted Blue-Grey Border */ - --cyber-border-glow: rgba(0, 255, 255, 0.5); /* Cyan Glow */ - - /* Section Specific Accents (using main neons, differentiated by icon/subtle hints) */ - /* We'll use the primary/secondary accents more strategically than a unique color per section */ - --section-1-accent: var(--cyber-accent-primary); - --section-2-accent: #39FF14; /* Neon Lime Green */ - --section-3-accent: var(--cyber-accent-secondary); - --section-4-accent: #7DF9FF; /* Lighter Cyan */ - --section-5-accent: var(--cyber-accent-warning); - --section-6-accent: #00BFFF; /* Deep Sky Blue */ - --section-7-accent: #DA70D6; /* Orchid */ - --section-8-accent: var(--cyber-accent-secondary); - --section-9-accent: var(--cyber-accent-primary); - --section-10-accent: #F7DC6F; /* Neon Yellow again */ + --accent-neon-cyan: #00E5FF; /* Primary Neon Accent */ + --accent-neon-magenta: #FF00AA; /* Secondary Neon Accent */ + --accent-neon-lime: #76FF03; /* Accent for specific elements */ + --accent-warning: #FFD600; /* Yellow for Warnings */ + + --border-color-subtle: #404858; /* Subtle borders */ + --border-color-accent: var(--accent-neon-cyan); /* Accent border */ } body { font-family: var(--font-body); - background-color: var(--cyber-bg-primary); - color: var(--cyber-text-primary); + background-color: var(--page-bg); + color: var(--text-primary); line-height: 1.7; - padding-top: 1rem; /* Add some top padding */ - /* Optional: Subtle grid background */ - background-image: - linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); - background-size: 30px 30px; + font-size: 16px; /* Standard base size */ } .hero-header { - background: var(--cyber-bg-secondary); - color: var(--cyber-text-heading); - padding: 3rem 1.5rem 3rem; + background: var(--page-bg); /* Match page background or a slight variant */ + color: var(--text-heading-main); + padding: 3.5rem 1.5rem; text-align: center; margin-bottom: 3rem; - border-bottom: 3px solid var(--cyber-accent-primary); - box-shadow: 0 0 25px rgba(0, 255, 255, 0.1); - position: relative; - overflow: hidden; - } - .hero-header::before { /* Glitchy line effect */ - content: ''; - position: absolute; - left: 0; - top: 50%; - width: 100%; - height: 2px; - background: var(--cyber-accent-primary); - opacity: 0.3; - animation: glitch-line 5s infinite steps(10); - } - @keyframes glitch-line { - 0%, 100% { transform: translateY(-50%) translateX(0); } - 10% { transform: translateY(-50%) translateX(-5px); } - 20% { transform: translateY(-50%) translateX(5px); } - 30% { transform: translateY(-50%) translateX(-3px); opacity: 0.1;} - 40% { transform: translateY(-50%) translateX(3px); opacity: 0.4;} - 50% { transform: translateY(-50%) translateX(0); opacity: 0.2;} + border-bottom: 3px solid var(--accent-neon-cyan); + box-shadow: 0 5px 20px rgba(0, 229, 255, 0.1); /* Softer glow */ } - .hero-header h1 { font-family: var(--font-display); - font-size: 3.5rem; /* Adjusted for Orbitron */ - margin-bottom: 1rem; - color: var(--cyber-text-heading); - text-shadow: 0 0 10px var(--cyber-accent-primary), 0 0 20px var(--cyber-accent-primary), 0 0 5px #fff; - letter-spacing: 1px; + font-size: 3.2rem; /* Slightly reduced for Orbitron */ + margin-bottom: 0.75rem; + color: var(--text-heading-main); + text-shadow: 0 0 8px var(--accent-neon-cyan); /* More subtle text shadow */ } .hero-header h1 .bi { font-size: 0.9em; vertical-align: -0.05em; margin-right: 0.5rem; - filter: drop-shadow(0 0 5px var(--cyber-accent-primary)); + text-shadow: 0 0 5px var(--accent-neon-cyan); } .hero-header .lead { font-family: var(--font-heading); - font-weight: 600; - font-size: 1.25rem; - max-width: 800px; + font-weight: 500; /* Adjusted weight for Inter */ + font-size: 1.2rem; + max-width: 750px; margin: 0 auto 1rem auto; - color: var(--cyber-text-secondary); - opacity: 0.9; + color: var(--text-secondary); } .main-section { - background-color: transparent; /* Sections blend with body */ - padding: 1rem 0; /* Let cards define padding */ + background-color: transparent; /* Let cards define background */ + padding: 1.5rem 0; margin-bottom: 3rem; - border-top: none; /* Remove old border */ - border-radius: 0; - box-shadow: none; + border-top: none; } .main-section-header { margin-bottom: 1.5rem; padding-bottom: 0.75rem; - border-bottom: 2px solid var(--cyber-border-color); + border-bottom: 2px solid var(--border-color-subtle); position: relative; } - .main-section-header::after { /* Neon accent line under header */ + .main-section-header::after { /* Accent line, using section-specific color var */ content: ''; position: absolute; left: 0; - bottom: -3px; /* Position just below the border */ - width: 100px; /* Width of the accent line */ - height: 3px; - /* background-color assigned by specific section themes */ + bottom: -2px; /* Position on top of the border */ + width: 80px; + height: 2px; + background-color: var(--section-accent-color, var(--accent-neon-cyan)); /* Fallback to cyan */ } .main-section-header h2 { font-family: var(--font-heading); font-weight: 700; - font-size: 2.2rem; - /* Color assigned by specific section themes */ + font-size: 2rem; + color: var(--text-heading-section); text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 0.5px; } - .main-section-header h2 .bi { - margin-right: 0.8rem; + margin-right: 0.75rem; vertical-align: -0.1em; - filter: drop-shadow(0 0 3px var(--cyber-accent-secondary)); + color: var(--section-accent-color, var(--accent-neon-cyan)); /* Use section accent for icon */ } .main-section-header .btn { font-family: var(--font-mono); - font-weight: normal; + font-weight: 500; text-transform: uppercase; - border-radius: 2px; /* Sharper edges */ - padding: 0.5rem 1rem; - font-size: 0.85rem; + border-radius: 3px; + padding: 0.4rem 0.8rem; + font-size: 0.8rem; transition: all 0.2s ease; - box-shadow: 0 0 5px rgba(0,0,0,0.3); + box-shadow: none; /* Cleaner buttons */ } .main-section-header .btn-expand-all { background-color: transparent; - border: 1px solid var(--cyber-accent-primary); - color: var(--cyber-accent-primary); + border: 1px solid var(--accent-neon-lime); + color: var(--accent-neon-lime); } .main-section-header .btn-expand-all:hover { - background-color: var(--cyber-accent-primary); - color: var(--cyber-bg-primary); - box-shadow: 0 0 15px var(--cyber-accent-primary); + background-color: var(--accent-neon-lime); + color: var(--page-bg); + box-shadow: 0 0 10px rgba(118, 255, 3, 0.5); } .main-section-header .btn-collapse-all { background-color: transparent; - border: 1px solid var(--cyber-accent-secondary); - color: var(--cyber-accent-secondary); + border: 1px solid var(--accent-neon-magenta); + color: var(--accent-neon-magenta); } .main-section-header .btn-collapse-all:hover { - background-color: var(--cyber-accent-secondary); - color: var(--cyber-bg-primary); - box-shadow: 0 0 15px var(--cyber-accent-secondary); + background-color: var(--accent-neon-magenta); + color: var(--page-bg); + box-shadow: 0 0 10px rgba(255, 0, 170, 0.5); } - /* Section specific themes */ - .introduction-theme .main-section-header h2 { color: var(--section-1-accent); } - .introduction-theme .main-section-header::after { background-color: var(--section-1-accent); } - .introduction-theme .info-card .card-header { border-top: 2px solid var(--section-1-accent); } - .introduction-theme .info-card .card-header h5 .bi { color: var(--section-1-accent); } - - .foundations-theme .main-section-header h2 { color: var(--section-2-accent); } - .foundations-theme .main-section-header::after { background-color: var(--section-2-accent); } - .foundations-theme .info-card .card-header { border-top: 2px solid var(--section-2-accent); } - .foundations-theme .info-card .card-header h5 .bi { color: var(--section-2-accent); } - - .algorithms-theme .main-section-header h2 { color: var(--section-3-accent); } - .algorithms-theme .main-section-header::after { background-color: var(--section-3-accent); } - .algorithms-theme .info-card .card-header { border-top: 2px solid var(--section-3-accent); } - .algorithms-theme .info-card .card-header h5 .bi { color: var(--section-3-accent); } - - .hardware-theme .main-section-header h2 { color: var(--section-4-accent); } - .hardware-theme .main-section-header::after { background-color: var(--section-4-accent); } - .hardware-theme .info-card .card-header { border-top: 2px solid var(--section-4-accent); } - .hardware-theme .info-card .card-header h5 .bi { color: var(--section-4-accent); } - - .exploits-theme .main-section-header h2 { color: var(--section-5-accent); } - .exploits-theme .main-section-header::after { background-color: var(--section-5-accent); } - .exploits-theme .info-card .card-header { border-top: 2px solid var(--section-5-accent); } - .exploits-theme .info-card .card-header h5 .bi { color: var(--section-5-accent); } - - .migration-theme .main-section-header h2 { color: var(--section-6-accent); } - .migration-theme .main-section-header::after { background-color: var(--section-6-accent); } - .migration-theme .info-card .card-header { border-top: 2px solid var(--section-6-accent); } - .migration-theme .info-card .card-header h5 .bi { color: var(--section-6-accent); } - - .geopolitics-theme .main-section-header h2 { color: var(--section-7-accent); } - .geopolitics-theme .main-section-header::after { background-color: var(--section-7-accent); } - .geopolitics-theme .info-card .card-header { border-top: 2px solid var(--section-7-accent); } - .geopolitics-theme .info-card .card-header h5 .bi { color: var(--section-7-accent); } - - .applications-theme .main-section-header h2 { color: var(--section-8-accent); } - .applications-theme .main-section-header::after { background-color: var(--section-8-accent); } - .applications-theme .info-card .card-header { border-top: 2px solid var(--section-8-accent); } - .applications-theme .info-card .card-header h5 .bi { color: var(--section-8-accent); } - - .bitcoin-pqc-theme .main-section-header h2 { color: var(--section-9-accent); } - .bitcoin-pqc-theme .main-section-header::after { background-color: var(--section-9-accent); } - .bitcoin-pqc-theme .info-card .card-header { border-top: 2px solid var(--section-9-accent); } - .bitcoin-pqc-theme .info-card .card-header h5 .bi { color: var(--section-9-accent); } - - .future-theme .main-section-header h2 { color: var(--section-10-accent); } - .future-theme .main-section-header::after { background-color: var(--section-10-accent); } - .future-theme .info-card .card-header { border-top: 2px solid var(--section-10-accent); } - .future-theme .info-card .card-header h5 .bi { color: var(--section-10-accent); } + /* Section specific themes - Simplified to only color the header line and icon */ + .introduction-theme { --section-accent-color: var(--accent-neon-cyan); } + .foundations-theme { --section-accent-color: var(--accent-neon-lime); } + .algorithms-theme { --section-accent-color: var(--accent-neon-magenta); } + .hardware-theme { --section-accent-color: #7DF9FF; } /* Lighter Cyan */ + .exploits-theme { --section-accent-color: var(--accent-warning); } + .migration-theme { --section-accent-color: #00BFFF; } /* Deep Sky Blue */ + .geopolitics-theme { --section-accent-color: #DA70D6; } /* Orchid */ + .applications-theme { --section-accent-color: var(--accent-neon-magenta); } + .bitcoin-pqc-theme { --section-accent-color: var(--accent-neon-cyan); } + .future-theme { --section-accent-color: var(--accent-warning); } .info-card { - background-color: var(--cyber-surface); - border: 1px solid var(--cyber-border-color); - border-radius: 4px; /* Sharper edges */ - box-shadow: 0 0 10px rgba(0,0,0,0.2), inset 0 0 3px rgba(0, 255, 255, 0.05); /* Inset glow attempt */ + background-color: var(--card-bg); + border: 1px solid var(--border-color-subtle); + border-radius: 4px; + box-shadow: 0 3px 8px rgba(0,0,0,0.15); height: 100%; display: flex; flex-direction: column; - transition: all 0.3s ease; + transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } .info-card:hover { - border-color: var(--cyber-accent-primary); - box-shadow: 0 0 15px var(--cyber-border-glow), 0 0 5px var(--cyber-border-glow); - transform: translateY(-3px); + border-color: var(--accent-neon-cyan); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 229, 255, 0.1); } .info-card .card-header { - background-color: transparent; /* Header transparent against card bg */ - color: var(--cyber-text-heading); + background-color: transparent; /* No solid bg for card header */ + color: var(--text-primary); padding: 0.8rem 1rem; - border-bottom: 1px dashed var(--cyber-border-color); /* Dashed line */ + border-bottom: 1px solid var(--border-color-subtle); border-top-left-radius: 3px; border-top-right-radius: 3px; } .info-card .card-header h5 { - font-family: var(--font-mono); + font-family: var(--font-heading); + font-weight: 600; /* Bolder for Inter */ font-size: 1.1rem; - font-weight: normal; /* Mono fonts often look better normal weight */ - text-transform: uppercase; margin-bottom: 0; - /* Color comes from section theme via .bi rule */ + color: var(--section-accent-color, var(--accent-neon-cyan)); /* Use section accent for card title */ } .info-card .card-header h5 .bi { - margin-right: 0.6rem; + margin-right: 0.5rem; vertical-align: -0.1em; - /* Color set by specific section theme */ - text-shadow: 0 0 5px currentColor; /* Neon glow for icon */ + /* Color inherited from h5 */ } .info-card .card-body { @@ -298,31 +213,29 @@ } .info-card p.summary { - font-size: 0.9rem; - color: var(--cyber-text-secondary); + font-size: 0.95rem; /* Slightly larger for readability */ + color: var(--text-secondary); margin-bottom: 1rem; flex-grow: 1; } .details-toggle { background-color: transparent; - border: 1px solid var(--cyber-accent-secondary); - color: var(--cyber-accent-secondary); + border: 1px solid var(--accent-neon-cyan); + color: var(--accent-neon-cyan); font-family: var(--font-mono); text-transform: uppercase; padding: 0.4rem 0.8rem; font-size: 0.8rem; margin-top: auto; - border-radius: 2px; + border-radius: 3px; transition: all 0.2s ease; } - .details-toggle:hover { - background-color: var(--cyber-accent-secondary); - color: var(--cyber-bg-primary); - box-shadow: 0 0 10px var(--cyber-accent-secondary); + background-color: var(--accent-neon-cyan); + color: var(--page-bg); + box-shadow: 0 0 8px var(--accent-neon-cyan); } - .details-toggle .bi { transition: transform 0.25s ease-in-out; } @@ -332,47 +245,49 @@ .collapse-content { padding: 1rem; - background-color: rgba(36, 41, 58, 0.5); /* Semi-transparent darker background */ - border-top: 1px solid var(--cyber-border-color); + background-color: var(--surface-highlight-bg); + border-top: 1px solid var(--border-color-subtle); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; - font-size: 0.9rem; + font-size: 0.95rem; /* Increase for readability */ } .collapse-content h6 { font-family: var(--font-heading); font-weight: 600; - color: var(--cyber-accent-primary); - margin-top: 1rem; - margin-bottom: 0.5rem; + color: var(--accent-neon-lime); + margin-top: 1.2rem; + margin-bottom: 0.6rem; font-size: 1rem; text-transform: uppercase; + letter-spacing: 0.5px; } .collapse-content ul, .collapse-content ol { - padding-left: 1.2rem; + padding-left: 1.5rem; /* More indent for lists */ } .collapse-content ul li::marker { - color: var(--cyber-accent-primary); /* Neon bullet points */ + color: var(--accent-neon-cyan); } .collapse-content li { - margin-bottom: 0.5rem; - color: var(--cyber-text-secondary); + margin-bottom: 0.6rem; /* More spacing between list items */ + color: var(--text-secondary); } .collapse-content li strong { - color: var(--cyber-text-primary); + color: var(--text-primary); + font-weight: 600; /* Stronger emphasis */ } - .term { - background-color: rgba(0, 255, 255, 0.1); /* Faint cyan bg */ + background-color: rgba(0, 229, 255, 0.05); padding: 0.2em 0.4em; - border-radius: 2px; + border-radius: 3px; font-family: var(--font-mono); - color: var(--cyber-accent-primary); + font-weight: 500; + color: var(--accent-neon-cyan); cursor: help; - border: 1px dashed rgba(0, 255, 255, 0.3); + border: 1px solid rgba(0, 229, 255, 0.2); } .styled-list { @@ -380,96 +295,92 @@ padding-left: 0; } .styled-list li { - padding-left: 2em; + padding-left: 1.8em; /* Adjusted padding */ position: relative; - margin-bottom: 0.5em; + margin-bottom: 0.6em; } .styled-list li::before { - content: "»"; /* Using a text character for cyberpunk feel */ - font-family: var(--font-mono); - color: var(--cyber-accent-primary); + content: "\F62D"; /* bi-caret-right-fill */ + font-family: "bootstrap-icons"; + color: var(--accent-neon-cyan); position: absolute; left: 0; - top: -2px; /* Adjust alignment */ - font-size: 1.2em; - text-shadow: 0 0 5px var(--cyber-accent-primary); + top: 2px; + font-size: 1em; } - /* Callout Box Styles */ + /* Callout Box Styles - Simplified */ .callout { padding: 1rem 1.25rem; margin: 1.5rem 0; - border: 1px solid; /* Border color set by type */ + border: 1px solid; border-left-width: 4px; border-radius: 3px; - position: relative; - background-color: rgba(46, 52, 72, 0.7); /* Semi-transparent surface */ - box-shadow: inset 0 0 10px rgba(0,0,0,0.3); + background-color: var(--surface-highlight-bg); } .callout h5 { font-family: var(--font-heading); - font-weight: 700; + font-weight: 600; margin-top: 0; margin-bottom: 0.75rem; display: flex; align-items: center; - font-size: 1.05rem; + font-size: 1rem; text-transform: uppercase; - letter-spacing: 0.5px; } .callout h5 .bi { - font-size: 1.3em; + font-size: 1.2em; margin-right: 0.6em; - text-shadow: 0 0 5px currentColor; } .callout-security-alert { - border-color: var(--cyber-accent-critical); - color: #FFCCCB; /* Light red text */ + border-color: var(--accent-warning); /* Use yellow for warning */ + color: #FAFAD2; /* LightGoldenrodYellow text for dark bg */ } - .callout-security-alert h5 { color: var(--cyber-accent-critical); } + .callout-security-alert h5 { color: var(--accent-warning); } .callout-deep-dive { - border-color: var(--cyber-accent-primary); - color: #D1F2EB; /* Light cyan text */ + border-color: var(--accent-neon-lime); + color: #E0F8E0; /* Lighter lime text */ } - .callout-deep-dive h5 { color: var(--cyber-accent-primary); } + .callout-deep-dive h5 { color: var(--accent-neon-lime); } .callout-future-watch { - border-color: var(--cyber-accent-secondary); - color: #FADADD; /* Light magenta text */ + border-color: var(--accent-neon-magenta); + color: #FFE0F0; /* Lighter magenta text */ } - .callout-future-watch h5 { color: var(--cyber-accent-secondary); } + .callout-future-watch h5 { color: var(--accent-neon-magenta); } .callout-key-definition { - border-color: var(--cyber-accent-warning); - color: #FEF9E7; /* Light yellow text */ + border-color: var(--text-secondary); /* Muted border for definitions */ + color: var(--text-secondary); } - .callout-key-definition h5 { color: var(--cyber-accent-warning); } + .callout-key-definition h5 { color: var(--text-primary); } footer { - background-color: var(--cyber-bg-secondary); - color: var(--cyber-text-secondary); + background-color: var(--card-bg); /* Slightly lighter footer */ + color: var(--text-secondary); padding: 2.5rem 1.5rem; text-align: center; margin-top: 3rem; - border-top: 2px solid var(--cyber-accent-primary); - box-shadow: 0 -5px 15px rgba(0, 255, 255, 0.05); + border-top: 2px solid var(--accent-neon-cyan); + box-shadow: 0 -3px 10px rgba(0, 229, 255, 0.05); } footer p { margin-bottom: 0.25rem; font-family: var(--font-mono); + font-size: 0.9rem; } footer a { - color: var(--cyber-accent-primary); + color: var(--accent-neon-cyan); text-decoration: none; - font-weight: normal; + font-weight: 500; transition: color 0.2s ease, text-shadow 0.2s ease; } footer a:hover { - color: var(--cyber-text-heading); - text-shadow: 0 0 8px var(--cyber-accent-primary); - text-decoration: underline; + color: #5effff; /* Brighter cyan on hover */ + text-shadow: 0 0 5px var(--accent-neon-cyan); + text-decoration: none; } </style>