Update theme styles, scripts, and front page template
This commit is contained in:
NixReaper
+199
-1
@@ -47,7 +47,19 @@
|
||||
|
||||
/* Header / nav -------------------------------------------------------- */
|
||||
.site-header {
|
||||
padding: 20px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
padding: 16px 0;
|
||||
/* Stronger tint + blur than a typical "just barely visible" sticky nav —
|
||||
borrowed from uiXpress's header treatment (90% opacity, 24px blur),
|
||||
but tinted with Aurora's own card color rather than a neutral black, so
|
||||
it still reads as part of the vivid gradient brand, not a generic dark
|
||||
SaaS chrome bar. */
|
||||
background: color-mix(in srgb, var(--aurora-card-bg-deep) 92%, transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--aurora-border);
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
@@ -62,6 +74,7 @@
|
||||
display: block;
|
||||
height: 48px;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
|
||||
.footer-logo img {
|
||||
@@ -153,6 +166,182 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--aurora-accent);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.hero-trust {
|
||||
margin: 20px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--aurora-text-muted);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
margin-top: 56px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--aurora-text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Section eyebrows (shared by showcase + capabilities) ------------------- */
|
||||
.section-eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--aurora-accent);
|
||||
margin: 0 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.showcase h2,
|
||||
.capabilities h2 {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
text-align: center;
|
||||
color: var(--aurora-text-muted);
|
||||
max-width: 560px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
/* Showcase tabs ------------------------------------------------------------ */
|
||||
.showcase {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.showcase-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin: 40px 0 40px;
|
||||
}
|
||||
|
||||
.showcase-tab {
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--aurora-radius-md);
|
||||
border: 1px solid var(--aurora-border);
|
||||
background: transparent;
|
||||
color: var(--aurora-text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.showcase-tab.is-active {
|
||||
background: var(--aurora-accent);
|
||||
border-color: var(--aurora-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.showcase-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.showcase-panel.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.showcase-panel-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
background: var(--aurora-card-bg);
|
||||
border: 1px solid var(--aurora-card-border);
|
||||
border-radius: var(--aurora-radius-xl);
|
||||
box-shadow: var(--aurora-card-shadow);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.showcase-copy h3 {
|
||||
font-size: 24px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.showcase-copy p {
|
||||
color: var(--aurora-text-muted);
|
||||
line-height: 1.6;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.showcase-bullets {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.showcase-bullets li {
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
color: var(--aurora-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.showcase-bullets li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--aurora-accent);
|
||||
}
|
||||
|
||||
.showcase-image img {
|
||||
border-radius: var(--aurora-radius-lg);
|
||||
border: 1px solid var(--aurora-card-border);
|
||||
}
|
||||
|
||||
/* Capabilities grid --------------------------------------------------------- */
|
||||
.capabilities {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.capabilities-more {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
color: var(--aurora-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Feature cards ---------------------------------------------------------- */
|
||||
.feature-teaser,
|
||||
.feature-section {
|
||||
@@ -465,4 +654,13 @@
|
||||
.nav-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.showcase-panel-inner {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,3 +9,25 @@
|
||||
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var tabs = document.querySelectorAll('.showcase-tab');
|
||||
if (!tabs.length) return;
|
||||
|
||||
tabs.forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
var targetId = tab.getAttribute('data-tab-target');
|
||||
|
||||
tabs.forEach(function (t) {
|
||||
t.classList.remove('is-active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
tab.classList.add('is-active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
|
||||
document.querySelectorAll('.showcase-panel').forEach(function (panel) {
|
||||
panel.classList.toggle('is-active', panel.id === 'tab-' + targetId);
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
+112
-19
@@ -2,16 +2,61 @@
|
||||
defined('ABSPATH') || exit;
|
||||
get_header();
|
||||
|
||||
$highlight_features = [
|
||||
$showcase_tabs = [
|
||||
[
|
||||
'id' => 'dashboard',
|
||||
'label' => 'Dashboard',
|
||||
'heading' => 'A dashboard that actually tells you something.',
|
||||
'desc' => "Replaces the default WordPress dashboard with real analytics cards, activity summaries, and quick actions — the same data WordPress already has, just laid out like a modern admin.",
|
||||
'bullets' => [
|
||||
'Page views, users, and media analytics as real cards, not widgets bolted onto a 2005 layout.',
|
||||
'Recent content, scheduled posts, and comments surfaced up front.',
|
||||
'Server health and quick actions without digging through menus.',
|
||||
],
|
||||
'image' => 'screenshot-1.png',
|
||||
'alt' => 'The Aurora dashboard',
|
||||
],
|
||||
[
|
||||
'id' => 'role-editor',
|
||||
'label' => 'Role Editor',
|
||||
'heading' => "Know what every capability actually does.",
|
||||
'desc' => 'A visual editor for every WordPress role, with plain-English tooltips explaining what each capability actually controls — no more guessing what "edit_others_posts" means.',
|
||||
'bullets' => [
|
||||
'Every built-in and custom role, editable from one screen.',
|
||||
'Plain-English descriptions for every capability, not raw slugs.',
|
||||
'Changes apply immediately — no page builder, no bloat.',
|
||||
],
|
||||
'image' => 'screenshot-2.png',
|
||||
'alt' => 'Role Editor with capability tooltips',
|
||||
],
|
||||
[
|
||||
'id' => 'dark-mode',
|
||||
'label' => 'Dark Mode',
|
||||
'heading' => 'A dark mode that covers the whole admin.',
|
||||
'desc' => "Not just a few screens — the entire admin, including native WordPress screens Aurora frames rather than rebuilds, plus a real Media Library with folders.",
|
||||
'bullets' => [
|
||||
'10 color presets plus 2 flat neutrals, applied consistently everywhere.',
|
||||
'Rounded, framed cards with theme-tinted scrollbars.',
|
||||
'Media Library folders with drag-and-drop organizing.',
|
||||
],
|
||||
'image' => 'screenshot-3.png',
|
||||
'alt' => 'Media Library with folders, dark mode across the admin',
|
||||
],
|
||||
];
|
||||
|
||||
$capability_cards = [
|
||||
['icon' => '🖥️', 'title' => 'Real replacement screens', 'desc' => 'Posts, Pages, Media, Users, Comments, Plugins, Nav Menus, Widgets, Themes, Settings, Tools, Export, and Import — rebuilt, not reskinned.'],
|
||||
['icon' => '🌓', 'title' => 'A real dark mode', 'desc' => 'Covers the entire admin, including native screens Aurora frames rather than rebuilds. 10 color presets plus 2 flat neutrals.'],
|
||||
['icon' => '🧰', 'title' => 'Power tools', 'desc' => 'Role Editor, Activity Log with Admin/User tabs, Menu Creator with drag-and-drop, Media Folders, White Label, Login Redirect, and more.'],
|
||||
['icon' => '🧩', 'title' => 'Disable Gutenberg', 'desc' => 'One toggle switches every post type back to the classic editor, for anyone who prefers it.'],
|
||||
['icon' => '🌓', 'title' => 'A real dark mode', 'desc' => 'Covers the entire admin, including native screens Aurora frames rather than rebuilds.'],
|
||||
['icon' => '📜', 'title' => 'Activity Log', 'desc' => 'A filterable table with separate Admin and User tabs, plus IP tracking.'],
|
||||
['icon' => '📋', 'title' => 'Menu Creator', 'desc' => 'Build and reorder your own wp-admin sidebar menu, drag-and-drop included.'],
|
||||
['icon' => '🧩', 'title' => 'Modules', 'desc' => "A one-click marketplace for Aurora's standalone companion plugins."],
|
||||
['icon' => '✏️', 'title' => 'Disable Gutenberg', 'desc' => 'One toggle switches every post type back to the classic editor.'],
|
||||
];
|
||||
?>
|
||||
<section class="hero">
|
||||
<div class="container hero-inner">
|
||||
<h1><?php esc_html_e('A modern, fast redesign of the WordPress admin', 'aurora-admin-theme'); ?></h1>
|
||||
<p class="hero-eyebrow"><?php esc_html_e('Aurora Admin for WordPress', 'aurora-admin-theme'); ?></p>
|
||||
<h1><?php esc_html_e('A better place to run WordPress.', 'aurora-admin-theme'); ?></h1>
|
||||
<p class="hero-sub">
|
||||
<?php esc_html_e('Real replacement screens for Posts, Pages, Media, Users, and more, plus a full dark mode — all free, no upsell.', 'aurora-admin-theme'); ?>
|
||||
</p>
|
||||
@@ -23,16 +68,75 @@ $highlight_features = [
|
||||
<?php esc_html_e('See all features', 'aurora-admin-theme'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<p class="hero-trust"><?php esc_html_e('Free forever. No license key. No performance-gutting bloat.', 'aurora-admin-theme'); ?></p>
|
||||
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-value">100%</span>
|
||||
<span class="stat-label"><?php esc_html_e('Free', 'aurora-admin-theme'); ?></span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">15+</span>
|
||||
<span class="stat-label"><?php esc_html_e('Admin screens rebuilt', 'aurora-admin-theme'); ?></span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">12</span>
|
||||
<span class="stat-label"><?php esc_html_e('Color themes', 'aurora-admin-theme'); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="feature-teaser">
|
||||
<section class="showcase">
|
||||
<div class="container">
|
||||
<div class="feature-grid">
|
||||
<?php foreach ($highlight_features as $feature) : ?>
|
||||
<p class="section-eyebrow"><?php esc_html_e('Highlights', 'aurora-admin-theme'); ?></p>
|
||||
<h2><?php esc_html_e('The admin, rebuilt where it counts.', 'aurora-admin-theme'); ?></h2>
|
||||
<div class="showcase-tabs" role="tablist">
|
||||
<?php foreach ($showcase_tabs as $i => $tab) : ?>
|
||||
<button
|
||||
type="button"
|
||||
class="showcase-tab<?php echo $i === 0 ? ' is-active' : ''; ?>"
|
||||
role="tab"
|
||||
data-tab-target="<?php echo esc_attr($tab['id']); ?>"
|
||||
aria-selected="<?php echo $i === 0 ? 'true' : 'false'; ?>"
|
||||
><?php echo esc_html($tab['label']); ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php foreach ($showcase_tabs as $i => $tab) : ?>
|
||||
<div class="showcase-panel<?php echo $i === 0 ? ' is-active' : ''; ?>" id="tab-<?php echo esc_attr($tab['id']); ?>" role="tabpanel">
|
||||
<div class="showcase-panel-inner">
|
||||
<div class="showcase-copy">
|
||||
<h3><?php echo esc_html($tab['heading']); ?></h3>
|
||||
<p><?php echo esc_html($tab['desc']); ?></p>
|
||||
<ul class="showcase-bullets">
|
||||
<?php foreach ($tab['bullets'] as $bullet) : ?>
|
||||
<li><?php echo esc_html($bullet); ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="showcase-image">
|
||||
<img src="<?php echo esc_url(AURORA_THEME_URI . '/assets/images/' . $tab['image']); ?>" alt="<?php echo esc_attr($tab['alt']); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="capabilities">
|
||||
<div class="container">
|
||||
<p class="section-eyebrow"><?php esc_html_e('Capabilities', 'aurora-admin-theme'); ?></p>
|
||||
<h2><?php esc_html_e('Everything you need in one admin.', 'aurora-admin-theme'); ?></h2>
|
||||
<p class="section-sub"><?php esc_html_e("Focused, real replacements — without changing how WordPress works underneath.", 'aurora-admin-theme'); ?></p>
|
||||
<div class="feature-grid capability-grid">
|
||||
<?php foreach ($capability_cards as $feature) : ?>
|
||||
<?php get_template_part('template-parts/content-feature-card', null, $feature); ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="capabilities-more">
|
||||
<a class="link-arrow" href="<?php echo esc_url(home_url('/features/')); ?>"><?php esc_html_e('Browse all features', 'aurora-admin-theme'); ?> →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -42,16 +146,5 @@ $highlight_features = [
|
||||
<p><?php esc_html_e("There's no license key, no locked features, and no upsell.", 'aurora-admin-theme'); ?></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="screenshots">
|
||||
<div class="container">
|
||||
<h2><?php esc_html_e('See it in action', 'aurora-admin-theme'); ?></h2>
|
||||
<div class="screenshot-grid">
|
||||
<img src="<?php echo esc_url(AURORA_THEME_URI . '/assets/images/screenshot-1.png'); ?>" alt="<?php esc_attr_e('The Aurora dashboard', 'aurora-admin-theme'); ?>">
|
||||
<img src="<?php echo esc_url(AURORA_THEME_URI . '/assets/images/screenshot-2.png'); ?>" alt="<?php esc_attr_e('Role Editor with capability tooltips', 'aurora-admin-theme'); ?>">
|
||||
<img src="<?php echo esc_url(AURORA_THEME_URI . '/assets/images/screenshot-3.png'); ?>" alt="<?php esc_attr_e('Media Library with folders, dark mode across the admin', 'aurora-admin-theme'); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
get_footer();
|
||||
|
||||
Reference in New Issue
Block a user