Update theme styles, scripts, and front page template
This commit is contained in:
NixReaper
+199
-1
@@ -47,7 +47,19 @@
|
|||||||
|
|
||||||
/* Header / nav -------------------------------------------------------- */
|
/* Header / nav -------------------------------------------------------- */
|
||||||
.site-header {
|
.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 {
|
.site-header-inner {
|
||||||
@@ -62,6 +74,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-logo img {
|
.footer-logo img {
|
||||||
@@ -153,6 +166,182 @@
|
|||||||
flex-wrap: wrap;
|
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 cards ---------------------------------------------------------- */
|
||||||
.feature-teaser,
|
.feature-teaser,
|
||||||
.feature-section {
|
.feature-section {
|
||||||
@@ -465,4 +654,13 @@
|
|||||||
.nav-menu li:last-child {
|
.nav-menu li:last-child {
|
||||||
border-bottom: none;
|
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');
|
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;
|
defined('ABSPATH') || exit;
|
||||||
get_header();
|
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' => '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' => 'A real dark mode', 'desc' => 'Covers the entire admin, including native screens Aurora frames rather than rebuilds.'],
|
||||||
['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' => 'Activity Log', 'desc' => 'A filterable table with separate Admin and User tabs, plus IP tracking.'],
|
||||||
['icon' => '🧩', 'title' => 'Disable Gutenberg', 'desc' => 'One toggle switches every post type back to the classic editor, for anyone who prefers it.'],
|
['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">
|
<section class="hero">
|
||||||
<div class="container hero-inner">
|
<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">
|
<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'); ?>
|
<?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>
|
</p>
|
||||||
@@ -23,16 +68,75 @@ $highlight_features = [
|
|||||||
<?php esc_html_e('See all features', 'aurora-admin-theme'); ?>
|
<?php esc_html_e('See all features', 'aurora-admin-theme'); ?>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="feature-teaser">
|
<section class="showcase">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="feature-grid">
|
<p class="section-eyebrow"><?php esc_html_e('Highlights', 'aurora-admin-theme'); ?></p>
|
||||||
<?php foreach ($highlight_features as $feature) : ?>
|
<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 get_template_part('template-parts/content-feature-card', null, $feature); ?>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</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>
|
<p><?php esc_html_e("There's no license key, no locked features, and no upsell.", 'aurora-admin-theme'); ?></p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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
|
<?php
|
||||||
get_footer();
|
get_footer();
|
||||||
|
|||||||
Reference in New Issue
Block a user