Scaffold Aurora Admin marketing theme (Home, Features, Blog)
This commit is contained in:
NixReaper
@@ -0,0 +1,468 @@
|
||||
/* Layout ------------------------------------------------------------- */
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.site-wrap {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Buttons ------------------------------------------------------------ */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--aurora-radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--aurora-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border-color: var(--aurora-border);
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--aurora-bg-subtle);
|
||||
}
|
||||
|
||||
/* Header / nav -------------------------------------------------------- */
|
||||
.site-header {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.site-logo img,
|
||||
.site-logo .custom-logo {
|
||||
display: block;
|
||||
height: 48px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-logo img {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: var(--aurora-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: var(--aurora-accent);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: var(--aurora-radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle-bar {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
margin: 0 auto;
|
||||
background: var(--aurora-text);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Hero ----------------------------------------------------------------- */
|
||||
.hero {
|
||||
padding: 96px 0 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 44px;
|
||||
line-height: 1.15;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 19px;
|
||||
color: var(--aurora-text-muted);
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Feature cards ---------------------------------------------------------- */
|
||||
.feature-teaser,
|
||||
.feature-section {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.feature-section h2 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
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: 28px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin: 0;
|
||||
color: var(--aurora-text-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Free band -------------------------------------------------------------- */
|
||||
.free-band {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.free-band-inner {
|
||||
text-align: 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;
|
||||
}
|
||||
|
||||
.free-band-inner h2 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.free-band-inner p {
|
||||
margin: 0;
|
||||
color: var(--aurora-text-muted);
|
||||
}
|
||||
|
||||
/* Screenshots -------------------------------------------------------------- */
|
||||
.screenshots {
|
||||
padding: 48px 0 80px;
|
||||
}
|
||||
|
||||
.screenshots h2 {
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.screenshot-grid img {
|
||||
border-radius: var(--aurora-radius-lg);
|
||||
border: 1px solid var(--aurora-card-border);
|
||||
box-shadow: var(--aurora-card-shadow);
|
||||
}
|
||||
|
||||
/* CTA band ------------------------------------------------------------------ */
|
||||
.cta-band {
|
||||
padding: 64px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-band-inner h2 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.cta-band-inner p {
|
||||
margin: 0 0 24px;
|
||||
color: var(--aurora-text-muted);
|
||||
}
|
||||
|
||||
/* Page header (Features/other static pages) ---------------------------------- */
|
||||
.page-header {
|
||||
padding: 64px 0 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--aurora-text-muted);
|
||||
}
|
||||
|
||||
/* Privacy / FAQ ---------------------------------------------------------------- */
|
||||
.privacy-section p {
|
||||
color: var(--aurora-text-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--aurora-card-bg);
|
||||
border: 1px solid var(--aurora-card-border);
|
||||
border-radius: var(--aurora-radius-md);
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
margin-top: 12px;
|
||||
color: var(--aurora-text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Blog --------------------------------------------------------------------------- */
|
||||
.blog-header {
|
||||
padding: 64px 0 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-header p {
|
||||
color: var(--aurora-text-muted);
|
||||
}
|
||||
|
||||
.post-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
padding: 24px 0 48px;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: var(--aurora-card-bg);
|
||||
border: 1px solid var(--aurora-card-border);
|
||||
border-radius: var(--aurora-radius-xl);
|
||||
box-shadow: var(--aurora-card-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-card-thumb img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.post-card-body h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-card-body h3 a {
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.post-card-date {
|
||||
color: var(--aurora-text-muted);
|
||||
font-size: 13px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.post-card-excerpt {
|
||||
color: var(--aurora-text-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.post-card-link {
|
||||
color: var(--aurora-accent);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.single-post,
|
||||
.single-page {
|
||||
padding: 48px 0;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.single-post-header h1,
|
||||
.single-page h1 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.single-post-thumb {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.single-post-thumb img {
|
||||
border-radius: var(--aurora-radius-lg);
|
||||
}
|
||||
|
||||
.single-post-content,
|
||||
.single-page-content {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.single-post-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 760px;
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
.single-post-nav a {
|
||||
color: var(--aurora-accent);
|
||||
}
|
||||
|
||||
.not-found {
|
||||
padding: 96px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Footer ------------------------------------------------------------------------- */
|
||||
.site-footer {
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid var(--aurora-border);
|
||||
}
|
||||
|
||||
.site-footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
color: var(--aurora-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: var(--aurora-text-muted);
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive ----------------------------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--aurora-card-bg);
|
||||
border-bottom: 1px solid var(--aurora-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--aurora-border);
|
||||
}
|
||||
|
||||
.nav-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* Design tokens ported by hand from the Aurora Admin plugin's own theme
|
||||
* system (app/src/pages/settings/themePresets.js buildPalette(), fixed to
|
||||
* hue 235 = indigo — the plugin's own default accent before any preset is
|
||||
* picked) and its rounded-card treatment (app/src/shell/shell-frame.css).
|
||||
* These two projects are separate repos with no shared code, so if the
|
||||
* plugin's palette formula ever changes, these values need recomputing by
|
||||
* hand for hue 235 to stay in sync.
|
||||
*/
|
||||
:root {
|
||||
--aurora-app-bg: linear-gradient(135deg, hsl(235 78% 48%) 0%, hsl(270 78% 45%) 55%, hsl(235 32% 9%) 100%);
|
||||
--aurora-app-bg-solid: hsl(235 45% 16%);
|
||||
--aurora-bg: hsl(235 40% 20%);
|
||||
--aurora-card-bg: hsl(235 36% 24%);
|
||||
--aurora-card-bg-deep: hsl(235 38% 14%);
|
||||
--aurora-bg-subtle: hsl(235 32% 28%);
|
||||
--aurora-text: hsl(235 20% 97%);
|
||||
--aurora-text-muted: hsl(235 14% 74%);
|
||||
--aurora-border: hsl(235 28% 30%);
|
||||
--aurora-card-border: hsl(235 26% 33%);
|
||||
--aurora-frame-bg: hsl(235 34% 22%);
|
||||
--aurora-frame-border: hsl(235 26% 33%);
|
||||
--aurora-accent: hsl(235 85% 62%);
|
||||
--aurora-accent-soft: hsl(235 85% 62% / 0.16);
|
||||
|
||||
--aurora-radius-sm: 10px;
|
||||
--aurora-radius-md: 14px;
|
||||
--aurora-radius-lg: 20px;
|
||||
--aurora-radius-xl: 28px;
|
||||
|
||||
--aurora-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Same system-font fallback the plugin itself uses when no Google Font is
|
||||
chosen — keeps the "no external requests by default" story true on the
|
||||
marketing site too, with zero <link>/enqueue for a webfont. */
|
||||
--aurora-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--aurora-app-bg-solid);
|
||||
background-image: var(--aurora-app-bg);
|
||||
background-attachment: fixed;
|
||||
color: var(--aurora-text);
|
||||
font-family: var(--aurora-font-family);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
@@ -0,0 +1,11 @@
|
||||
(function () {
|
||||
var toggle = document.querySelector('.nav-toggle');
|
||||
var nav = document.getElementById('site-nav-menu');
|
||||
if (!toggle || !nav) return;
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
var isOpen = nav.classList.toggle('is-open');
|
||||
toggle.classList.toggle('is-open', isOpen);
|
||||
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user