remove text based componets, add blog, minor theming changes
This commit is contained in:
196
app/assets/css/blog-prose.css
Normal file
196
app/assets/css/blog-prose.css
Normal file
@@ -0,0 +1,196 @@
|
||||
/* Nuxt Content Blog Prose Styling
|
||||
|
||||
This file provides styles for blog content rendered via Nuxt Content.
|
||||
It includes general typography styles as well as specific styles
|
||||
for Shiki code blocks.
|
||||
|
||||
*/
|
||||
|
||||
.blog-prose {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.8;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
.blog-prose :is(h1, h2, h3, h4) {
|
||||
color: #000080;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.blog-prose h1 {
|
||||
font-size: 2.25rem;
|
||||
margin: 2rem 0 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 3px solid #000080;
|
||||
}
|
||||
|
||||
.blog-prose h2 {
|
||||
font-size: 1.875rem;
|
||||
margin: 2rem 0 0.875rem;
|
||||
padding-bottom: 0.375rem;
|
||||
border-bottom: 2px solid #808080;
|
||||
}
|
||||
|
||||
.blog-prose h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.75rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.blog-prose h4 {
|
||||
font-size: 1.25rem;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
/* Paragraphs + lists */
|
||||
.blog-prose p {
|
||||
margin: 0 0 1.25rem;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.blog-prose :is(ul, ol) {
|
||||
margin: 0 0 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.blog-prose li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.blog-prose a {
|
||||
color: #0000ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blog-prose a:hover {
|
||||
color: #0066ff;
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.blog-prose a:visited {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
/* Strong / emphasis */
|
||||
.blog-prose strong {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.blog-prose em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.blog-prose hr {
|
||||
border: none;
|
||||
border-top: 2px solid #808080;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.blog-prose img {
|
||||
border: 2px solid #808080;
|
||||
border-radius: 4px;
|
||||
margin: 1.5rem 0;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Blockquote */
|
||||
.blog-prose blockquote {
|
||||
border-left: 4px solid #000080;
|
||||
background: #f0f0f0;
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
border-radius: 0 4px 4px 0;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.blog-prose blockquote p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.blog-prose blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.blog-prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5rem 0;
|
||||
border: 2px solid #808080;
|
||||
}
|
||||
|
||||
.blog-prose th {
|
||||
background: #000080;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border: 1px solid #808080;
|
||||
}
|
||||
|
||||
.blog-prose td {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #808080;
|
||||
}
|
||||
|
||||
.blog-prose tr:nth-child(even) {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* inline code: code that is NOT within a pre tag */
|
||||
.blog-prose :not(pre) > code {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d0d0d0;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
'Liberation Mono', 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Shiki code blocks
|
||||
========================================================= */
|
||||
.blog-prose pre.shiki,
|
||||
.blog-prose pre.shiki * {
|
||||
background-image: none !important;
|
||||
filter: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* The Shiki container */
|
||||
.blog-prose pre.shiki {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
'Liberation Mono', 'Courier New', monospace;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Shiki usually includes a <code> inside the <pre> */
|
||||
.blog-prose pre.shiki code {
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.blog-prose pre.shiki .line {
|
||||
display: block;
|
||||
min-height: 1.4em;
|
||||
}
|
||||
@@ -2,124 +2,148 @@
|
||||
|
||||
/* Fallout Terminal Theme */
|
||||
@layer base {
|
||||
:root {
|
||||
--terminal-green: #00ff41;
|
||||
--terminal-green-dim: #00cc33;
|
||||
--terminal-green-dark: #008822;
|
||||
--terminal-bg: #0a0e0a;
|
||||
--terminal-error: #ff0000;
|
||||
}
|
||||
:root {
|
||||
--terminal-green: #00ff41;
|
||||
--terminal-green-dim: #00cc33;
|
||||
--terminal-green-dark: #008822;
|
||||
--terminal-bg: #0a0e0a;
|
||||
--terminal-error: #ff0000;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Windows content styling */
|
||||
.window-content {
|
||||
color: #000000 !important;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
/* Windows content styling */
|
||||
.window-content {
|
||||
color: #000000 !important;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.window-content *,
|
||||
.window-content p,
|
||||
.window-content span,
|
||||
.window-content div,
|
||||
.window-content pre {
|
||||
color: #000000 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.window-content h1,
|
||||
.window-content h2,
|
||||
.window-content p,
|
||||
.window-content span,
|
||||
.window-content div,
|
||||
.window-content pre {
|
||||
color: #000000 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.window-content pre {
|
||||
background: #f0f0f0;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.window-content pre {
|
||||
background: #f0f0f0;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* CRT Screen Effects */
|
||||
@layer utilities {
|
||||
@keyframes flicker {
|
||||
0% { opacity: 1; }
|
||||
2% { opacity: 0.98; }
|
||||
4% { opacity: 1; }
|
||||
8% { opacity: 0.97; }
|
||||
10% { opacity: 1; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
2% {
|
||||
opacity: 0.98;
|
||||
}
|
||||
4% {
|
||||
opacity: 1;
|
||||
}
|
||||
8% {
|
||||
opacity: 0.97;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); }
|
||||
50% { text-shadow: 0 0 15px rgba(0, 255, 65, 0.7); }
|
||||
}
|
||||
@keyframes glow {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 15px rgba(0, 255, 65, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
50.1%, 100% { opacity: 0; }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
50.1%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-flicker {
|
||||
animation: flicker 4s infinite;
|
||||
}
|
||||
.animate-flicker {
|
||||
animation: flicker 4s infinite;
|
||||
}
|
||||
|
||||
.animate-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
.animate-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
.animate-blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
.text-terminal {
|
||||
color: var(--terminal-green);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
.text-terminal {
|
||||
color: var(--terminal-green);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
|
||||
.text-terminal-dim {
|
||||
color: var(--terminal-green-dim);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
.text-terminal-dim {
|
||||
color: var(--terminal-green-dim);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
|
||||
.text-terminal-error {
|
||||
color: var(--terminal-error);
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.text-terminal-error {
|
||||
color: var(--terminal-error);
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bg-terminal {
|
||||
background-color: var(--terminal-bg);
|
||||
}
|
||||
.bg-terminal {
|
||||
background-color: var(--terminal-bg);
|
||||
}
|
||||
|
||||
.crt-scanline::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
transparent 50%,
|
||||
rgba(0, 255, 65, 0.05) 50%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
.crt-scanline::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
transparent 50%,
|
||||
rgba(0, 255, 65, 0.05) 50%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.crt-vignette::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
}
|
||||
.crt-vignette::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user