Skip to content

Instantly share code, notes, and snippets.

@racecarparts

racecarparts/pure-css-neo-brutalist-kitchen-sink-demo.html

Last active July 25, 2025 23:13
Show Gist options
  • Save racecarparts/f25407bd576409227b362dc7aea65eb8 to your computer and use it in GitHub Desktop.
Save racecarparts/f25407bd576409227b362dc7aea65eb8 to your computer and use it in GitHub Desktop.
Download ZIP
pure-css neo butalist theme
Raw
pure-css-neo-brutalist-kitchen-sink-demo.html
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>DadJokeToday.com</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css" />
<link href="assets/css/main.css" rel="stylesheet" />
</head>
</body>
<div class="header">
<h1>Neo-Brutalist Pure CSS</h1>
<p>A showcase of Pure CSS components with neo-brutalist styling</p>
</div>
<div class="neo-nav">
<a href="#grids">Grids</a>
<a href="#buttons">Buttons</a>
<a href="#forms">Forms</a>
<a href="#tables">Tables</a>
<a href="#menus">Menus</a>
<a href="#custom">Custom</a>
</div>
<section id="color-palette">
<h2>Color Palette</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-5">
<div class="color-box" style="background-color: var(--primary);">
Primary<br>--primary
</div>
</div>
<div class="pure-u-1 pure-u-md-1-5">
<div class="color-box" style="background-color: var(--secondary);">
Secondary<br>--secondary
</div>
</div>
<div class="pure-u-1 pure-u-md-1-5">
<div class="color-box" style="background-color: var(--dark);">
Dark<br>--dark
</div>
</div>
<div class="pure-u-1 pure-u-md-1-5">
<div class="color-box" style="background-color: var(--light); color: var(--dark);">
Light<br>--light
</div>
</div>
<div class="pure-u-1 pure-u-md-1-5">
<div class="color-box" style="background-color: var(--accent); color: var(--dark);">
Accent<br>--accent
</div>
</div>
</div>
</section>
<section id="grids">
<h2>1. Grids</h2>
<div class="neo-container">
<h3>Pure CSS Grid System</h3>
<p>Pure CSS provides a responsive grid system that's easy to use.</p>
<div class="example-block">
<h4>Basic Grid (responsive)</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card">Column 1</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--accent); color: var(--dark);">
Column 2
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--secondary);">
Column 3
</div>
</div>
</div>
</div>
<div class="example-block">
<h4>Different Column Sizes</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4">
<div class="neo-card">1/4</div>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<div class="neo-card" style="background-color: var(--primary);">1/2</div>
</div>
<div class="pure-u-1 pure-u-md-1-4">
<div class="neo-card">1/4</div>
</div>
</div>
</div>
</div>
</section>
<section id="buttons">
<h2>2. Buttons</h2>
<div class="neo-container">
<h3>Pure CSS Buttons</h3>
<p>Pure CSS offers various button styles that we've adapted for neo-brutalism.</p>
<div class="example-block">
<h4>Default Pure Buttons</h4>
<button class="pure-button">Default Button</button>
<button class="pure-button pure-button-primary">Primary Button</button>
<button class="pure-button" disabled>Disabled Button</button>
</div>
<div class="example-block">
<h4>Neo-Brutalist Buttons</h4>
<button class="neo-button">Neo Button</button>
<button class="neo-button" style="background-color: var(--secondary);">Secondary</button>
<button class="neo-button" style="background-color: var(--accent); color: var(--dark);">Accent</button>
<button class="neo-button" style="background-color: var(--dark);">Dark</button>
</div>
<div class="example-block">
<h4>Button Sizes</h4>
<button class="neo-button" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">Small</button>
<button class="neo-button">Default</button>
<button class="neo-button" style="font-size: 1.2rem; padding: 1rem 2rem;">Large</button>
</div>
</div>
</section>
<section id="forms">
<h2>3. Forms</h2>
<div class="neo-container">
<h3>Pure CSS Forms</h3>
<p>Pure CSS provides clean form styling which we've enhanced with neo-brutalist aesthetics.</p>
<div class="example-block">
<h4>Basic Form</h4>
<form class="pure-form">
<fieldset>
<legend>Simple Form</legend>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<label>
<input type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button neo-button">Sign in</button>
</fieldset>
</form>
</div>
<div class="example-block">
<h4>Stacked Form</h4>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Contact Form</legend>
<label for="stacked-name">Name</label>
<input type="text" id="stacked-name" placeholder="Your name">
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email" placeholder="Your email">
<label for="stacked-message">Message</label>
<textarea id="stacked-message" rows="5" style="width: 100%; max-width: 400px;"></textarea>
<button type="submit" class="neo-button">Send Message</button>
</fieldset>
</form>
</div>
<div class="example-block">
<h4>Grouped Inputs</h4>
<form class="pure-form">
<fieldset>
<legend>Search</legend>
<input type="text" placeholder="Search term">
<button type="submit" class="pure-button neo-button">Search</button>
</fieldset>
</form>
</div>
</div>
</section>
<section id="tables">
<h2>4. Tables</h2>
<div class="neo-container">
<h3>Pure CSS Tables</h3>
<p>Pure CSS tables with neo-brutalist styling.</p>
<div class="example-block">
<h4>Basic Table</h4>
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Position</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jane Smith</td>
<td>UX Designer</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td>Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>3</td>
<td>Robert Johnson</td>
<td>Product Manager</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<div class="example-block">
<h4>Striped Table</h4>
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Neo Laptop</td>
<td>$999</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>Brutalist Monitor</td>
<td>$499</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>Pure Keyboard</td>
<td>$129</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>CSS Mouse</td>
<td>$59</td>
<td>36</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="menus">
<h2>5. Menus</h2>
<div class="neo-container">
<h3>Pure CSS Menus</h3>
<p>Pure CSS menus with neo-brutalist styling.</p>
<div class="example-block">
<h4>Vertical Menu</h4>
<div class="pure-menu pure-menu-vertical" style="max-width: 300px;">
<a href="#" class="pure-menu-heading">Neo Menu</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Portfolio</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="example-block">
<h4>Horizontal Menu</h4>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Portfolio</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="custom">
<h2>6. Custom Neo-Brutalist Components</h2>
<div class="neo-container">
<h3>Additional Neo-Brutalist Elements</h3>
<p>Custom components designed in the neo-brutalist style.</p>
<div class="example-block">
<h4>Cards with Icons</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card">
<h3>Feature One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
<button class="neo-button">Learn More</button>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--accent); color: var(--dark);">
<h3>Feature Two</h3>
<p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
<button class="neo-button" style="background-color: var(--dark);">Explore</button>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--primary);">
<h3>Feature Three</h3>
<p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<button class="neo-button" style="background-color: var(--accent); color: var(--dark);">Get Started</button>
</div>
</div>
</div>
</div>
<div class="example-block">
<h4>Pricing Tables</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card">
<h3>Basic</h3>
<p style="font-size: 2rem; font-weight: bold;">$19</p>
<p>Per month</p>
<ul>
<li>Feature One</li>
<li>Feature Two</li>
<li>Feature Three</li>
</ul>
<button class="neo-button">Choose Basic</button>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--secondary);">
<h3>Standard</h3>
<p style="font-size: 2rem; font-weight: bold;">$39</p>
<p>Per month</p>
<ul>
<li>Feature One</li>
<li>Feature Two</li>
<li>Feature Three</li>
<li>Feature Four</li>
</ul>
<button class="neo-button" style="background-color: var(--primary);">Choose Standard</button>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="neo-card" style="background-color: var(--accent); color: var(--dark);">
<h3>Premium</h3>
<p style="font-size: 2rem; font-weight: bold;">$59</p>
<p>Per month</p>
<ul>
<li>Feature One</li>
<li>Feature Two</li>
<li>Feature Three</li>
<li>Feature Four</li>
<li>Feature Five</li>
</ul>
<button class="neo-button" style="background-color: var(--dark);">Choose Premium</button>
</div>
</div>
</div>
</div>
<div class="example-block">
<h4>Progress Bar</h4>
<div class="neo-bar-graph">
<div class="neo-bar-container">
<div class="neo-bar-label">
<span>Overall progress</span>
<span>50%</span>
</div>
<div class="neo-bar-track">
<div class="neo-bar neo-bar-primary" style="--width: 50%"></div>
</div>
</div>
</div>
</div>
<!-- Add modal section -->
<div class="example-block">
<h4>Modal</h4>
<button class="neo-button" data-modal-target="neo-modal-example">
Open Modal
</button>
<!-- Modal component -->
<div id="neo-modal-example" class="neo-modal">
<div class="neo-modal-backdrop"></div>
<div class="neo-modal-container">
<div class="neo-modal-header">
<h3>Neo-Brutalist Modal</h3>
<button class="neo-modal-close">×</button>
</div>
<div class="neo-modal-content">
<p>This is a neo-brutalist styled modal dialog. You can close it by clicking the × button, clicking outside the modal, or pressing the ESC key.</p>
<p>Modals are great for alerts, confirmations, or any content that needs focused attention.</p>
</div>
<div class="neo-modal-footer">
<button class="neo-button neo-button-small" data-modal-close="neo-modal-example">Close</button>
<button class="neo-button neo-button-small" style="background-color: var(--success);">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; 2025 Your Name. All rights reserved.</p>
</footer>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>
Raw
pure-css-neo-brutalist-main.js
// Modal functionality
document.addEventListener('DOMContentLoaded', function() {
// Open modals when trigger buttons are clicked
document.querySelectorAll('[data-modal-target]').forEach(function(button) {
button.addEventListener('click', function() {
const modalId = this.getAttribute('data-modal-target');
document.getElementById(modalId).classList.add('active');
});
});
// Close modals when close button, backdrop, or close-tagged elements are clicked
document.querySelectorAll('.neo-modal-close, [data-modal-close]').forEach(function(element) {
element.addEventListener('click', function() {
const modal = this.closest('.neo-modal') || document.getElementById(this.getAttribute('data-modal-close'));
if (modal) {
modal.classList.remove('active');
}
});
});
// Close modals when clicking on backdrop
document.querySelectorAll('.neo-modal-backdrop').forEach(function(backdrop) {
backdrop.addEventListener('click', function() {
this.closest('.neo-modal').classList.remove('active');
});
});
// Close modals with ESC key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
document.querySelectorAll('.neo-modal.active').forEach(function(modal) {
modal.classList.remove('active');
});
}
});
});
Raw
pure-css-neo-brutalist.css
/* Extends pure-css.github.io into a neo-brutalist styling */
:root {
--font-family: "IBM Plex Mono", monospace;
--primary: #ff2e63;
--secondary: #05b7b4;
--tertiary: #7b4dff;
--success: #00c851;
--warning: #ff7730;
--accent: #fcda05;
/* another pallette */
/* --primary: #fb7da8;
--secondary: #552cb7;
--tertiary: #058cd7;
--accent: #ffc567;
--success: #00995e;
--warning: #fd5a46; */
--text-dark: #000000;
--text-light: #ffffff;
--dark: #252a34;
--light: #eaeaea;
--radius: 12px;
--dark-shadow: 5px 5px 0 var(--dark);
--light-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}
body {
font-family: var(--font-family);
background-color: var(--light);
padding: 1rem;
max-width: 1024px;
margin: 0 auto;
}
section {
margin: 3rem 0;
}
h1,
h2,
h3 {
color: var(--dark);
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
h2 {
border-bottom: 3px solid var(--dark);
padding-bottom: 0.5rem;
margin-top: 2rem;
}
code {
background-color: #f0f0f0;
padding: 0.2rem 0.4rem;
border-radius: var(--radius);
font-family: monospace;
}
/* Neo-brutalist styling */
.neo-container {
padding: 2rem;
background-color: white;
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 8px 8px 0 var(--dark);
margin-bottom: 2rem;
}
.joke-text {
font-size: 1.2rem;
}
/* BUTTONS */
.neo-button {
background-color: var(--primary);
color: var(--text-light);
border: 3px solid var(--dark);
border-radius: var(--radius);
padding: 0.8rem 1rem;
font-weight: bold;
text-transform: uppercase;
box-shadow: 5px 5px 0 var(--dark);
transition: transform 0.1s, box-shadow 0.1s;
cursor: pointer;
display: inline-block; /* Ensure <a> behaves like a button */
text-align: center; /* Center text and icons */
text-decoration: none; /* Remove underline from links */
}
.neo-button:visited {
color: var(--text-dark); /* Ensure visited links don't change color */
}
.neo-button-small {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.neo-button-secondary {
background-color: var(--secondary);
color: var(--text-light);
}
.neo-button-tertiary {
background-color: var(--tertiary);
color: var(--text-light);
}
.neo-button-success {
background-color: var(--success);
color: var(--text-light);
}
.neo-button-warning {
background-color: var(--warning);
color: var(--text-light);
}
.neo-button-light {
background-color: var(--light);
color: var(--dark);
}
.neo-button-full {
width: 100%;
}
/* Slightly sink the button on hover */
.neo-button:hover,
.pure-button:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 var(--dark);
}
/* Fully collapse the button into the shadow when clicked */
.neo-button:active,
.pure-button:active {
transform: translate(5px, 5px);
/* Move fully into shadow */
box-shadow: 0px 0px 0 var(--dark);
/* Remove shadow */
}
/* DISABLED BUTTON */
.neo-button[disabled],
.neo-button.disabled {
background-color: #cccccc;
color: #888888;
border-color: #999999;
box-shadow: 3px 3px 0 #999999;
cursor: not-allowed;
opacity: 0.7;
transform: none;
transition: none;
}
.neo-button[disabled]:hover,
.neo-button.disabled:hover,
.neo-button[disabled]:active,
.neo-button.disabled:active {
transform: none;
box-shadow: 3px 3px 0 #999999;
cursor: not-allowed;
}
/* Disabled colored buttons */
.neo-button-secondary[disabled],
.neo-button-secondary.disabled,
.neo-button-tertiary[disabled],
.neo-button-tertiary.disabled,
.neo-button-success[disabled],
.neo-button-success.disabled,
.neo-button-warning[disabled],
.neo-button-warning.disabled {
background-color: #cccccc;
color: #888888;
border-color: #999999;
box-shadow: 3px 3px 0 #999999;
}
/* Optional: For HTMX loading states */
.neo-button.htmx-request {
background-color: #cccccc;
color: #888888;
border-color: #999999;
box-shadow: 3px 3px 0 #999999;
cursor: wait;
opacity: 0.8;
pointer-events: none;
}
/* CARDS */
.neo-card {
background-color: white;
padding: 1.5rem;
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 8px 8px 0 var(--dark);
margin-bottom: 2rem;
}
.neo-card-primary {
background-color: var(--primary);
}
.neo-card-secondary {
background-color: var(--secondary);}
.neo-card-tertiary {
background-color: var(--tertiary);
}
.neo-card-success {
background-color: var(--success);
}
.neo-card-warning {
background-color: var(--warning);
}
.neo-nav {
background-color: var(--accent);
border: 3px solid var(--dark);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 2rem;
box-shadow: 5px 5px 0 var(--dark);
}
.neo-nav a {
color: var(--dark);
font-weight: bold;
text-decoration: none;
margin-right: 1.5rem;
border-bottom: 3px solid transparent;
}
.neo-nav a:hover {
border-bottom: 3px solid var(--dark);
}
/* Style Pure CSS elements */
.pure-button {
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 5px 5px 0 var(--dark);
transition: transform 0.1s, box-shadow 0.1s;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
border: 3px solid var(--dark);
border-radius: var(--radius);
padding: 0.6rem;
margin-bottom: 1rem;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}
.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus {
border-color: var(--primary);
outline: none;
}
/* TABLES */
.pure-table {
border: 3px solid var(--dark);
border-radius: var(--radius);
overflow: hidden;
/* box-shadow: 8px 8px 0 var(--dark); */
box-shadow: var(--light-shadow);
border-collapse: separate;
border-spacing: 0;
}
.pure-table th {
background-color: var(--accent);
color: var(--dark);
font-weight: bold;
text-transform: uppercase;
}
.pure-table td,
.pure-table th {
border-left: none;
padding: 0.8rem;
position: relative;
/* For more precise control */
}
/* MENU */
.pure-menu {
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 5px 5px 0 var(--dark);
overflow: hidden;
}
.pure-menu-heading {
background-color: var(--accent);
color: var(--dark);
font-weight: bold;
text-transform: uppercase;
padding: 0.8rem;
border-bottom: 3px solid var(--dark);
}
.pure-menu-link {
color: var(--dark);
font-weight: bold;
border-bottom: 1px solid #eee;
}
.pure-menu-link:hover {
background-color: var(--secondary);
color: white;
}
.pure-g>div {
box-sizing: border-box;
padding: 0.5rem;
}
.color-box {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 5px 5px 0 var(--dark);
}
pre {
background-color: var(--dark);
color: white;
padding: 1rem;
border-radius: var(--radius);
overflow-x: auto;
}
.example-block {
margin-top: 1rem;
margin-bottom: 2rem;
}
/* Page specific styling */
.header {
text-align: center;
padding: 0.8rem;
margin-bottom: 1.5rem;
background-color: white;
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 8px 8px 0 var(--dark);
}
.header h1 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 3rem); /* Instead of 3vmax */
color: var(--text-light);
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.header h4 {
color: var(--text-light);
font-size: clamp(0.8rem, 1.3vw, 1.2rem); /* Instead of 1vmax */
}
.header small {
color: var(--text-light);
margin-top: 0.75rem; /* Add spacing above the small element */
display: block; /* Ensure it behaves like a block element for margin to apply */
}
.header {
background-color: var(--secondary);
}
.header p {
margin: 0.5rem 0 0;
font-size: 1.2rem;
}
footer {
text-align: center;
padding: 2rem;
margin-top: 4rem;
background-color: var(--dark);
color: white;
border-radius: var(--radius);
}
.spacer {
height: 2rem;
}
/* Neo-brutalist horizontal bar graph */
.neo-bar-graph {
width: 100%;
margin: 2rem 0;
}
.neo-bar-container {
margin-bottom: 1.5rem;
position: relative;
}
.neo-bar-label {
font-weight: bold;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
}
.neo-bar-track {
width: 100%;
height: 2rem;
background-color: var(--light);
border: 3px solid var(--dark);
border-radius: var(--radius);
/* box-shadow: 5px 5px 0 var(--dark); */
box-shadow: var(--light-shadow);
overflow: hidden;
position: relative;
}
.neo-bar {
height: 100%;
transition: width 1s ease-in-out; /* Add ease-in-out for smoother animation */
position: relative;
width: 0; /* Start with width 0 */
animation: neo-bar-grow 1s ease-in-out forwards;
}
.neo-bar::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 5px;
background-color: rgba(0, 0, 0, 0.2);
}
@keyframes neo-bar-grow {
from {
width: 0;
}
to {
width: var(--width, 0%);
}
}
.neo-bar-primary {
background-color: var(--primary);
}
.neo-bar-secondary {
background-color: var(--secondary);
}
.neo-bar-tertiary {
background-color: var(--tertiary);
}
.neo-bar-success {
background-color: var(--success);
}
.neo-bar-warning {
background-color: var(--warning);
}
.neo-bar-accent {
background-color: var(--accent);
color: var(--dark);
}
.neo-bar-value {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: var(--text-light);
z-index: 1;
}
.neo-bar-accent .neo-bar-value {
color: var(--dark);
}
.neo-info-text {
/* no break */
white-space: nowrap;
overflow: hidden;
}
/* MODAL */
.neo-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.neo-modal.active {
opacity: 1;
visibility: visible;
}
.neo-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.neo-modal-container {
background-color: white;
border: 3px solid var(--dark);
border-radius: var(--radius);
box-shadow: 8px 8px 0 var(--dark);
width: 90%;
max-width: 500px;
max-height: 80vh;
display: flex;
flex-direction: column;
position: relative;
z-index: 1001;
transform: translateY(20px);
transition: transform 0.3s;
}
.neo-modal.active .neo-modal-container {
transform: translateY(0);
}
.neo-modal-header {
padding: 1rem;
border-bottom: 3px solid var(--dark);
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--accent);
color: var(--dark);
border-top-left-radius: calc(var(--radius) - 3px);
border-top-right-radius: calc(var(--radius) - 3px);
}
.neo-modal-header h3 {
margin: 0;
color: var(--dark);
}
.neo-modal-close {
background: none;
border: none;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
color: var(--dark);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--dark);
border-radius: var(--radius);
background-color: white;
}
.neo-modal-close:hover {
background-color: var(--primary);
color: white;
}
.neo-modal-content {
padding: 1rem;
overflow-y: auto;
}
.neo-modal-footer {
padding: 1rem;
border-top: 3px solid var(--dark);
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* Add keyboard accessibility - optional JavaScript to add */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment