HTML:
<div class="screen">

	<header class="masthead">
		<div class="masthead-left">
			<span class="masthead-logo">WEBTEXT</span>
			<span class="masthead-tagline">Frontend Digest</span>
			<span class="masthead-cursor">■</span>
		</div>
		<div class="masthead-right">
			<span class="masthead-page">P100</span>
			<span>TUE 19 MAY 2026</span>
			<span>Frontend News</span>
		</div>
	</header>

	<div class="ticker-wrapper">
		<div class="ticker-label">Latest</div>
		<div class="ticker-track">
			<span class="ticker-text">Computing Discounted Prices in CSS &nbsp;&bull;&nbsp; CodePen 2.0 Beta Progress &nbsp;&bull;&nbsp; Control Animation Speed with CSS &nbsp;&bull;&nbsp; Puzzle Pieces in CSS &nbsp;&bull;&nbsp; The Great CSS Expansion &nbsp;&bull;&nbsp; border-shape: The Future of the Non-Rectangular Web &nbsp;&bull;&nbsp; Customisable Select Elements &nbsp;&bull;&nbsp; contrast-color() with Design Tokens &nbsp;&bull;&nbsp; Styling The Gap with CSS &nbsp;&bull;&nbsp; CSS-Only Floating Focus &nbsp;&bull;&nbsp; Fun Shadow Coding Challenge &nbsp;&bull;&nbsp; Drawing Connections with CSS Anchor Positioning &nbsp;&bull;&nbsp; Computing Discounted Prices in CSS &nbsp;&bull;&nbsp; CodePen 2.0 Beta Progress &nbsp;&bull;&nbsp; Control Animation Speed with CSS &nbsp;&bull;&nbsp;</span>
		</div>
	</div>

	<main class="feed-grid">

		<div class="feed-item">
			<h3><a href="https://css-tricks.com/computing-and-displaying-discounted-prices-in-css/">Computing and Displaying Discounted Prices in CSS</a></h3>
			<h4 class="feed-source"><a href="https://css-tricks.com/">CSS Tricks</a></h4>
			<span class="pub-date" datetime="2026-05-14">May 14, 2026</span>
			<p>CSS math isn't just about how things look! It can also be used to work out useful numeric information. For instance, you could calculate and show the percentage of tasks completed in a to-do list with CSS, helping users keep track of their progress. No need for script or server computation. No latency. No use of additional browser resources.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://blog.codepen.io/2026/05/12/425-debug-logs/">#425: Debug Logs</a></h3>
			<h4 class="feed-source"><a href="https://blog.codepen.io/radio/">CodePen Radio</a></h4>
			<span class="pub-date" datetime="2026-05-12">May 12, 2026</span>
			<p>As we're getting close to rounding out the Beta period of the 2.0 editor, we're trying to close out any bugs we find or users report quickly. They could be browser-support related, network conditions related, account capability related, or just bugs in how the 2.0 editor and technology behind it works.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://css-tip.com/speed-control/">Control the Speed of Infinite Animations</a></h3>
			<h4 class="feed-source"><a href="https://css-tip.com/">CSS Tip</a></h4>
			<span class="pub-date" datetime="2026-05-06">May 6, 2026</span>
			<p>Here is a simple code that lets you adjust the speed of your infinite animation on hover (or with other interactions). It relies on <code>animation-composition: add</code> that allows you to run the same animation twice with an additive effect.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://frontendmasters.com/blog/creating-puzzle-peices-in-css/">Let's Get Puzzled</a></h3>
			<h4 class="feed-source"><a href="https://frontendmasters.com/blog/">Frontend Masters Blog</a></h4>
			<span class="pub-date" datetime="2026-04-06">April 6, 2026</span>
			<p>There are plenty of situations where a regular rectangular card feels a little too regular. A puzzle-piece shape instantly changes the tone: it can make a gallery feel more playful, turn a loading state into a reveal, give a hero section a tactile feel, or let you break an image into interactive fragments.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://blog.gitbutler.com/the-great-css-expansion">The Great CSS Expansion</a></h3>
			<h4 class="feed-source"><a href="https://blog.gitbutler.com/">Butler's Log</a></h4>
			<span class="pub-date" datetime="2026-03-19">March 19, 2026</span>
			<p>CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://una.im/border-shape">border-shape: the future of the non-rectangular web</a></h3>
			<h4 class="feed-source"><a href="https://una.im/blog">Una Kravets Blog</a></h4>
			<span class="pub-date" datetime="2026-02-19">February 19, 2026</span>
			<p>Creating non-standard shapes on the web, like a speech bubble or a heart, have typically required you to cut off your actual borders with clip-path. More recently, corner-shape landed in Chrome, which gives us more options for styling how a corner looks, but is still quite limited.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://nerdy.dev/nice-select">A Nice Custom Select</a></h3>
			<h4 class="feed-source"><a href="https://nerdy.dev">nerdy.dev</a></h4>
			<span class="pub-date" datetime="2026-02-03">February 3, 2026</span>
			<p>This post pushes customisable <code>&lt;select&gt;</code> to an extreme. Styling the previously un-styleable: custom arrows, colours, option lists, and focus rings — all without JavaScript. I think it turned out nice.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://daverupert.com/2026/01/contrast-color-with-custom-design-tokens/">Using your design system colors with contrast-color()</a></h3>
			<h4 class="feed-source"><a href="https://daverupert.com/archive/">Dave Rupert Archives</a></h4>
			<span class="pub-date" datetime="2026-01-09">January 9, 2026</span>
			<p>One predictable pain point with <code>contrast-color()</code> is that it only returns black and white named colors. From a design systems perspective, that's not ideal because you want your colors — your harmonious brand and the colors your team spent thousands of hours deciding on.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://www.alwaystwisted.com/articles/styling-the-gap-with-css">Styling The gap with CSS</a></h3>
			<h4 class="feed-source"><a href="https://www.alwaystwisted.com/">Always Twisted</a></h4>
			<span class="pub-date" datetime="2025-10-22">October 22, 2025</span>
			<p>Back in 2017, while working at Monotype on their Design System, I was tasked with coding a new design for a set of logos. This design featured either a vertical line separator at larger viewports or a horizontal one at smaller screens, with logos stacking as needed.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://polypane.app/blog/css-only-floating-focus-with-anchor-positioning/">CSS-only floating focus with anchor positioning</a></h3>
			<h4 class="feed-source"><a href="https://polypane.app/blog">Polypane Blog</a></h4>
			<span class="pub-date" datetime="2025-09-15">September 15, 2025</span>
			<p>The Track focus debug tool in Polypane shows a floating outline that follows the keyboard focus around the page. This makes it easier to keep track of where the focus is and lets you determine if the focus order makes sense.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://bell.bz/fun-shadow-coding-challenge/">Fun shadow coding challenge</a></h3>
			<h4 class="feed-source"><a href="https://bell.bz">bell.bz</a></h4>
			<span class="pub-date" datetime="2026-01-30">January 30, 2026</span>
			<p>Timehop just reminded me of this prototype I made 8 years ago. Scroll it and you'll see that the central light source (orange line) affects the shadow of each element dynamically as you scroll — no canvas, no WebGL.</p>
		</div>

		<div class="feed-item">
			<h3><a href="https://rolandfranke.nl/frontend-stories/drawing-connections-with-css-anchor-positioning/">Drawing Connections with CSS Anchor Positioning</a></h3>
			<h4 class="feed-source"><a href="https://rolandfranke.nl/frontend-stories/">Frontend Stories</a></h4>
			<span class="pub-date" datetime="2026-01-26">January 26, 2026</span>
			<p>Every now and then, CSS gets a new feature that makes you pause and think: wait… we can do <em>that</em> now? That was exactly my reaction after watching a short by Kevin Powell on CSS Anchor Positioning.</p>
		</div>

	</main>

	<footer class="fastext-bar">
		<button class="fastext-button fastext-button-red">CSS</button>
		<button class="fastext-button fastext-button-green">Layout</button>
		<button class="fastext-button fastext-button-yellow">JavaScript</button>
		<button class="fastext-button fastext-button-cyan">Tools</button>
	</footer>

</div>

CSS:
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

:root {
	--screen-bg: #00091a;
	--card-background: #000d22;
	--grid-gap: 2px;
	--card-space: 0.65rem;
	--cyan: #00cccc;
	--green: #00c000;
	--red: #dd2222;
	--yellow: #dddd00;
	--magenta: #cc00cc;
	--blue: #3333dd;
	--headline-color: #ffff55;
	--date-color: #00ffff;
	--excerpt-color: #d0dce8;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #000;
	font-family: "VT323", monospace;
	color: #fff;
	min-height: 100vh;
}

.screen {
	background: var(--screen-bg);
	min-height: 100vh;
	position: relative;
}

.screen::after {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		180deg,
		transparent 0,
		transparent 3px,
		rgba(0, 0, 0, 0.14) 3px,
		rgba(0, 0, 0, 0.14) 4px
	);
	pointer-events: none;
	z-index: 998;
}

.masthead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.55rem 1.25rem;
	background: var(--cyan);
	color: #000;
}

.masthead-left {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.masthead-logo {
	font-size: 2.4rem;
	letter-spacing: 0.12em;
}

.masthead-tagline {
	font-size: 1.1rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.7;
}

.masthead-cursor {
	font-size: 1.8rem;
	animation: blink 1s step-end infinite;
}

.masthead-right {
	text-align: right;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.masthead-page {
	display: block;
	font-size: 1.4rem;
}

.ticker-wrapper {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: #000;
	border-top: 1px solid #0a2040;
	border-bottom: 1px solid #0a2040;
}

.ticker-label {
	background: var(--red);
	color: #fff;
	font-size: 1.1rem;
	padding: 0.2rem 0.85rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.ticker-track {
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.ticker-text {
	display: block;
	white-space: nowrap;
	font-size: 1.1rem;
	color: var(--yellow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.2rem 0;
	animation: ticker-roll 50s linear infinite;
}

@keyframes ticker-roll {
	from {
		transform: translateX(100vw);
	}

	to {
		transform: translateX(-100%);
	}
}

.feed-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--grid-gap);
	padding: var(--grid-gap);
	background: #050a14;
	counter-reset: tpage 100;
}

.feed-item {
	display: grid;
	grid-template-areas:
		"source"
		"headline"
		"date"
		"excerpt";
	grid-template-rows: auto auto auto auto;
	align-content: start;
	row-gap: calc(var(--card-space) * 0.35);
	background: var(--card-background);
	counter-increment: tpage;
	animation: card-in 0.4s ease both;
}

.feed-item:nth-child(1) {
	animation-delay: 0.04s;
}

.feed-item:nth-child(2) {
	animation-delay: 0.08s;
}

.feed-item:nth-child(3) {
	animation-delay: 0.12s;
}

.feed-item:nth-child(4) {
	animation-delay: 0.16s;
}

.feed-item:nth-child(5) {
	animation-delay: 0.2s;
}

.feed-item:nth-child(6) {
	animation-delay: 0.24s;
}

.feed-item:nth-child(7) {
	animation-delay: 0.28s;
}

.feed-item:nth-child(8) {
	animation-delay: 0.32s;
}

.feed-item:nth-child(9) {
	animation-delay: 0.36s;
}

.feed-item:nth-child(10) {
	animation-delay: 0.4s;
}

.feed-item:nth-child(11) {
	animation-delay: 0.44s;
}

.feed-item:nth-child(12) {
	animation-delay: 0.48s;
}

@keyframes card-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.feed-item:first-child {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"source   source"
		"headline excerpt"
		"date     excerpt";
}

.feed-item:first-child h3 {
	font-size: 2.2rem;
	padding: 0 var(--card-space) 0;
	line-height: 1.1;
}

.feed-item:first-child .pub-date {
	padding: 0 var(--card-space);
	font-size: 1.1rem;
}

.feed-item:first-child p {
	padding: 0 var(--card-space) var(--card-space) calc(var(--card-space) * 1.5);
	font-size: 1.2rem;
	line-height: 1.5;
	border-left: 1px solid #0e2040;
	align-self: stretch;
}

.feed-source {
	grid-area: source;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 2.2rem;
	padding: 0 0.8rem;
	background: var(--source-color, var(--cyan));
	color: var(--source-text, #000);
	font-size: 1.1rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}

.feed-source::before {
	content: "P" counter(tpage);
	opacity: 0.85;
}

.feed-source a {
	color: inherit;
	text-decoration: none;
}

.feed-item h3 {
	grid-area: headline;
	padding: 0 var(--card-space) 0;
	font-size: 1.3rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.feed-item h3 a {
	color: var(--headline-color);
	text-decoration: none;
}

.feed-item h3 a:hover {
	text-decoration: underline;
}

.pub-date {
	grid-area: date;
	display: block;
	padding: 0 var(--card-space);
	font-size: 1rem;
	color: var(--date-color);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.feed-item p {
	grid-area: excerpt;
	padding: 0 var(--card-space) var(--card-space);
	font-size: 1.1rem;
	line-height: 1.45;
	color: var(--excerpt-color);
}

.feed-item p code {
	background: rgba(255, 255, 255, 0.07);
	padding: 0.08em 0.3em;
	font-family: inherit;
	color: var(--date-color);
}

.feed-item:nth-child(6n + 1) {
	--source-color: var(--cyan);
	--source-text: #000;
}

.feed-item:nth-child(6n + 2) {
	--source-color: var(--green);
	--source-text: #000;
}

.feed-item:nth-child(6n + 3) {
	--source-color: var(--red);
	--source-text: #fff;
}

.feed-item:nth-child(6n + 4) {
	--source-color: var(--yellow);
	--source-text: #000;
}

.feed-item:nth-child(6n + 5) {
	--source-color: var(--magenta);
	--source-text: #fff;
}

.feed-item:nth-child(6n + 6) {
	--source-color: var(--blue);
	--source-text: #fff;
}

.fastext-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
	padding: var(--grid-gap);
	background: #050a14;
}

.fastext-button {
	padding: 0.4rem 0;
	font-family: "VT323", monospace;
	font-size: 1.1rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-align: center;
	border: none;
	cursor: pointer;
}

.fastext-button-red {
	background: var(--red);
	color: #fff;
}

.fastext-button-green {
	background: var(--green);
	color: #000;
}

.fastext-button-yellow {
	background: var(--yellow);
	color: #000;
}

.fastext-button-cyan {
	background: var(--cyan);
	color: #000;
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

@media (max-width: 640px) {
	.feed-grid {
		grid-template-columns: 1fr;
	}

	.feed-item:first-child {
		grid-template-columns: 1fr;
		grid-template-areas:
			"source"
			"headline"
			"date"
			"excerpt";
	}

	.feed-item:first-child h3 {
		font-size: 1.6rem;
		padding: 0.6rem 0.85rem 0.3rem;
	}

	.feed-item:first-child .pub-date {
		padding: 0 0.85rem 0.4rem;
	}

	.feed-item:first-child p {
		padding: 0 0.85rem 0.75rem;
		font-size: 1.1rem;
		border-left: none;
	}
}
