77 lines
1.8 KiB
CSS
77 lines
1.8 KiB
CSS
/*
|
|
Theme Name: Phosphor
|
|
Theme URI: https://github.com/Jeuners/phosphor
|
|
Author: Phosphor
|
|
Author URI: https://github.com/Jeuners/phosphor
|
|
Description: A CRT/terminal WordPress block theme — green-on-black, monospace, subtle scanlines. Minimal, fast, full-site-editing.
|
|
Version: 0.1.0
|
|
Requires at least: 6.4
|
|
Tested up to: 6.7
|
|
Requires PHP: 8.0
|
|
License: GPL-2.0-or-later
|
|
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
|
Text Domain: phosphor
|
|
Tags: full-site-editing, blog, one-column, custom-colors, editor-style, block-patterns, dark-mode, accessibility-ready
|
|
*/
|
|
|
|
/* Phosphor — supplemental front-end styles. Design tokens live in theme.json. */
|
|
|
|
:root {
|
|
--ph-bg: #000;
|
|
--ph-fg: #fff;
|
|
--ph-accent: #00ff00;
|
|
--ph-muted: #666;
|
|
--ph-line: #1a1a1a;
|
|
}
|
|
|
|
/* CRT scanline overlay — subtle, non-blocking */
|
|
body.phosphor-scanlines::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 255, 80, 0.03) 0 1px,
|
|
transparent 1px 3px
|
|
);
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
/* Links — CRT green with glow on hover */
|
|
a {
|
|
color: var(--ph-accent);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 0.2em;
|
|
transition: text-shadow 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
a:hover {
|
|
text-shadow: 0 0 8px rgba(0, 255, 80, 0.5);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--ph-accent);
|
|
color: #000;
|
|
}
|
|
|
|
/* Post title accent prompt */
|
|
.wp-block-post-title a::before {
|
|
content: "\25B8\00a0"; /* ▸ */
|
|
color: var(--ph-accent);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Blinking caret utility (for headings/heroes) */
|
|
.ph-caret::after {
|
|
content: "\2588"; /* █ */
|
|
color: var(--ph-accent);
|
|
margin-left: 0.1em;
|
|
animation: ph-blink 1.05s steps(1) infinite;
|
|
}
|
|
@keyframes ph-blink { 50% { opacity: 0; } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ph-caret::after { animation: none; }
|
|
}
|