Downloaded theme
This commit is contained in:
35
themes/minimal-black/assets/css/base.css
Normal file
35
themes/minimal-black/assets/css/base.css
Normal file
@@ -0,0 +1,35 @@
|
||||
/* ==========================================================================
|
||||
BASE STYLES
|
||||
Tailwind imports, CSS variables, theme colors, and base styles
|
||||
========================================================================== */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Theme Variables */
|
||||
:root {
|
||||
/* LIGHT THEME */
|
||||
--color-bg: #f9fafb;
|
||||
--color-surface: #ffffff;
|
||||
--color-text: #111827;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-border: #e5e7eb;
|
||||
--color-accent: #a855f7;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
/* DARK THEME */
|
||||
--color-bg: #000000; /* TRUE BLACK */
|
||||
--color-surface: #0a0a0a;
|
||||
--color-text: #f9fafb;
|
||||
--color-text-muted: #9ca3af;
|
||||
--color-border: #27272a;
|
||||
--color-accent: #c084fc;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
271
themes/minimal-black/assets/css/components/cards.css
Normal file
271
themes/minimal-black/assets/css/components/cards.css
Normal file
@@ -0,0 +1,271 @@
|
||||
/* ==========================================================================
|
||||
CARD COMPONENTS
|
||||
Home cards, project cards, post cards, CTA cards, badges
|
||||
========================================================================== */
|
||||
|
||||
.card-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.card-home--project {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.18s ease-out,
|
||||
box-shadow 0.18s ease-out,
|
||||
border-color 0.18s ease-out,
|
||||
background-color 0.18s ease-out;
|
||||
}
|
||||
|
||||
.card-home--project::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background: radial-gradient(
|
||||
circle at 120% 50%,
|
||||
color-mix(in srgb, var(--color-accent) 70%, transparent),
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transition:
|
||||
opacity 0.22s ease-out,
|
||||
transform 0.22s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-home--project:hover {
|
||||
transform: translateY(-4px) translateX(3px);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
|
||||
box-shadow:
|
||||
0 18px 40px rgba(0, 0, 0, 0.7),
|
||||
16px 0 38px rgba(124, 58, 237, 0.45); /* purple-ish accent on right */
|
||||
background-color: color-mix(in srgb, var(--color-surface) 99%, transparent);
|
||||
}
|
||||
|
||||
.card-home--project:hover::after {
|
||||
opacity: 0.22;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.card-home-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-home--post {
|
||||
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
}
|
||||
|
||||
.card-home-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.card-home-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.05rem 0.35rem;
|
||||
border-radius: 999px;
|
||||
background-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
|
||||
color: var(--color-accent);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-home-footer {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-home-footer--buttons {
|
||||
padding-top: 0.4rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
}
|
||||
|
||||
.card-tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.card-tag-pill {
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.card-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
color 0.15s ease-out,
|
||||
border-color 0.15s ease-out,
|
||||
background-color 0.15s ease-out,
|
||||
transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
.card-cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.15s ease-out,
|
||||
background-color 0.15s ease-out,
|
||||
border-color 0.15s ease-out,
|
||||
transform 0.15s ease-out,
|
||||
box-shadow 0.15s ease-out;
|
||||
}
|
||||
|
||||
.card-cta-btn:hover {
|
||||
color: var(--color-accent);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.card-cta-repo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 94%, transparent);
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.15s ease-out,
|
||||
border-color 0.15s ease-out,
|
||||
background-color 0.15s ease-out,
|
||||
transform 0.15s ease-out,
|
||||
box-shadow 0.15s ease-out;
|
||||
}
|
||||
|
||||
.card-cta-repo:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.card-cta:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card-home--post {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
border-left-width: 2px;
|
||||
border-left-color: color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
transition:
|
||||
transform 0.18s ease-out,
|
||||
box-shadow 0.18s ease-out,
|
||||
border-color 0.18s ease-out,
|
||||
background-color 0.18s ease-out;
|
||||
}
|
||||
|
||||
.card-home--post::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -20%;
|
||||
bottom: -20%;
|
||||
width: 10px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-accent) 70%, transparent),
|
||||
transparent
|
||||
);
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
transition:
|
||||
opacity 0.22s ease-out,
|
||||
transform 0.22s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-home--post:hover {
|
||||
transform: translateY(-3px);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 98%, transparent);
|
||||
border-left-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
|
||||
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.card-home--post:hover::before {
|
||||
opacity: 0.55;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.card-home-icon--post {
|
||||
background-color: color-mix(in srgb, var(--color-bg) 94%, transparent);
|
||||
}
|
||||
|
||||
.card-badge--soft {
|
||||
background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
|
||||
color: color-mix(in srgb, var(--color-accent) 85%, white);
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.card-pad {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
134
themes/minimal-black/assets/css/components/dock.css
Normal file
134
themes/minimal-black/assets/css/components/dock.css
Normal file
@@ -0,0 +1,134 @@
|
||||
/* ==========================================================================
|
||||
DOCK COMPONENT
|
||||
Floating action dock with toggle and panel
|
||||
========================================================================== */
|
||||
|
||||
@layer components {
|
||||
.dock {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.6rem;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.dock-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
/* border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); */
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.dock-panel {
|
||||
@apply p-1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(6px);
|
||||
overflow: hidden;
|
||||
transition: max-width 0.18s ease-out, opacity 0.18s ease-out,
|
||||
transform 0.18s ease-out;
|
||||
}
|
||||
|
||||
.dock--open .dock-panel {
|
||||
max-width: 10rem;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.dock-divider {
|
||||
width: 1px;
|
||||
height: 1.4rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-border) 80%, transparent),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.dock-action {
|
||||
@apply flex items-center justify-center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 75%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
|
||||
color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.16s ease-out;
|
||||
}
|
||||
|
||||
.dock-action:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
/* box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); */
|
||||
}
|
||||
|
||||
.dock-toggle {
|
||||
@apply flex items-center justify-center;
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
|
||||
transform 0.16s ease-out, box-shadow 0.16s ease-out;
|
||||
}
|
||||
|
||||
.dock-toggle:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dock-toggle-dots {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.8rem;
|
||||
height: 0.16rem;
|
||||
border-radius: 999px;
|
||||
background-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.dock-toggle-dots::before,
|
||||
.dock-toggle-dots::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-y: 0;
|
||||
width: 0.16rem;
|
||||
border-radius: 999px;
|
||||
background-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.dock-toggle-dots::before {
|
||||
left: -0.18rem;
|
||||
}
|
||||
|
||||
.dock-toggle-dots::after {
|
||||
right: -0.18rem;
|
||||
}
|
||||
|
||||
.dock--open .dock-toggle-dots,
|
||||
.dock--open .dock-toggle-dots::before,
|
||||
.dock--open .dock-toggle-dots::after {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-primary-sm {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
203
themes/minimal-black/assets/css/components/navigation.css
Normal file
203
themes/minimal-black/assets/css/components/navigation.css
Normal file
@@ -0,0 +1,203 @@
|
||||
/* ==========================================================================
|
||||
LAYOUT & NAVIGATION
|
||||
Page layouts, headers, footers, navigation links
|
||||
========================================================================== */
|
||||
|
||||
.layout-page {
|
||||
@apply mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:py-12;
|
||||
}
|
||||
|
||||
.layout-page-tight {
|
||||
@apply mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:py-10;
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
@apply space-y-10;
|
||||
}
|
||||
|
||||
.section-stack--home > * + * {
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.section-stack > div + div.posts-section {
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
.heading-page {
|
||||
@apply text-3xl font-semibold tracking-tight sm:text-4xl;
|
||||
}
|
||||
|
||||
.heading-section {
|
||||
@apply text-sm font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@apply text-[0.65rem] uppercase tracking-[0.22em];
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
@apply border border-border bg-surface rounded-xl shadow-sm;
|
||||
}
|
||||
|
||||
.card-pad {
|
||||
@apply p-4 sm:p-5;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply transition-transform transition-shadow duration-150 ease-out;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
@apply shadow-lg;
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center rounded-full bg-accent px-4 py-2 text-xs font-medium text-white shadow-sm transition-transform duration-150 ease-out;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center text-xs font-medium text-muted;
|
||||
}
|
||||
|
||||
.nav-shell {
|
||||
@apply rounded-full border border-border shadow-md backdrop-blur p-3;
|
||||
background-color: color-mix(in srgb, var(--color-surface) 82%, transparent);
|
||||
}
|
||||
|
||||
.nav-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-accent) 80%, transparent),
|
||||
transparent
|
||||
);
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
@apply flex items-center justify-between px-4 py-2 sm:px-5 sm:py-2.5;
|
||||
}
|
||||
|
||||
/* Brand logo badge (fallback) */
|
||||
.logo-badge {
|
||||
@apply flex h-8 w-8 items-center justify-center rounded-full bg-accent text-[0.65rem] font-semibold text-white;
|
||||
}
|
||||
|
||||
/* Nav links */
|
||||
.nav-link {
|
||||
@apply text-[0.78rem] font-medium text-muted;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
@apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-bg text-muted shadow-sm text-[0.7rem];
|
||||
transition: background-color 0.15s ease-out, color 0.15s ease-out,
|
||||
transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
@apply text-accent;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .theme-toggle {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
/* Fancy underline link */
|
||||
.link-underline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.link-underline::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.15rem;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--color-accent);
|
||||
transition: width 0.16s ease-out;
|
||||
}
|
||||
|
||||
.link-underline:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Footer shell */
|
||||
.footer-shell {
|
||||
@apply rounded-2xl border border-border shadow-md backdrop-blur;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
|
||||
}
|
||||
|
||||
.footer-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-accent) 80%, transparent),
|
||||
transparent
|
||||
);
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
@apply flex flex-col gap-3 px-4 py-3 text-[0.72rem] sm:flex-row sm:items-center sm:justify-between sm:px-5;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
@apply flex flex-wrap items-center gap-3;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
@apply inline-flex items-center gap-1 text-[0.75rem] font-medium text-muted transition-all duration-150 ease-out;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.footer-small {
|
||||
@apply text-[0.72rem] text-muted leading-relaxed;
|
||||
}
|
||||
|
||||
.footer-float:hover {
|
||||
color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.footer-float:hover i {
|
||||
filter: drop-shadow(
|
||||
0 0 2px color-mix(in srgb, var(--color-accent) 60%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
289
themes/minimal-black/assets/css/components/search.css
Normal file
289
themes/minimal-black/assets/css/components/search.css
Normal file
@@ -0,0 +1,289 @@
|
||||
/* ==========================================================================
|
||||
SEARCH OVERLAY
|
||||
Search modal, search results, empty states
|
||||
========================================================================== */
|
||||
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s ease-out;
|
||||
}
|
||||
|
||||
.search-overlay--open {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.search-overlay-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
circle at top,
|
||||
rgba(0, 0, 0, 0.4),
|
||||
transparent 55%
|
||||
),
|
||||
rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 100%;
|
||||
max-width: 36rem;
|
||||
margin-inline: 1.5rem;
|
||||
|
||||
border-radius: 1.1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
|
||||
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.85);
|
||||
padding: 0.8rem 0.9rem 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.search-overlay--open .search-panel {
|
||||
animation: search-panel-in 0.18s ease-out;
|
||||
}
|
||||
|
||||
.search-overlay-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
circle at top,
|
||||
rgba(0, 0, 0, 0.4),
|
||||
transparent 55%
|
||||
),
|
||||
rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.search-overlay .search-overlay--open .search-overlay-backdrop {
|
||||
animation: search-backdrop-in 0.18s ease-out;
|
||||
}
|
||||
|
||||
.search-overlay--closing .search-panel {
|
||||
animation: search-panel-out 0.18s ease-in forwards;
|
||||
}
|
||||
|
||||
.search-overlay--closing .search-overlay-backdrop {
|
||||
animation: search-backdrop-out 0.18s ease-in forwards;
|
||||
}
|
||||
|
||||
.search-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 0.82rem;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-close {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
|
||||
color 0.16s ease-out, transform 0.16s ease-out;
|
||||
}
|
||||
|
||||
.search-close:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.search-panel-body {
|
||||
border-radius: 0.9rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
padding: 0.5rem 0.4rem 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
max-height: 18rem;
|
||||
padding: 0.25rem 0.15rem 0.4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1.2rem 0.5rem 1.4rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.search-empty-icon {
|
||||
width: 2.3rem;
|
||||
height: 2.3rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-empty-title {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.search-empty-subtitle {
|
||||
font-size: 0.76rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-footer-hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
border-top: 1px solid
|
||||
color-mix(in srgb, var(--color-border) 75%, transparent);
|
||||
padding: 0.4rem 0.5rem 0.1rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.search-hint-key {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-hint-key span:first-child,
|
||||
.search-hint-key span:nth-child(2) {
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.search-hint-key.search-hint-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: block;
|
||||
padding: 0.42rem 0.55rem;
|
||||
border-radius: 0.6rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.12s ease-out, transform 0.12s ease-out;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.search-result-meta {
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.search-footer-hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
border-top: 1px solid
|
||||
color-mix(in srgb, var(--color-border) 75%, transparent);
|
||||
padding: 0.4rem 0.5rem 0.1rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.search-hint-key {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-hint-key span:first-child,
|
||||
.search-hint-key span:nth-child(2) {
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.search-hint-key.search-hint-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: block;
|
||||
padding: 0.42rem 0.55rem;
|
||||
border-radius: 0.6rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.12s ease-out, transform 0.12s ease-out;
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.search-result-meta {
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
111
themes/minimal-black/assets/css/components/tech-marquee.css
Normal file
111
themes/minimal-black/assets/css/components/tech-marquee.css
Normal file
@@ -0,0 +1,111 @@
|
||||
/* ==========================================================================
|
||||
TECH MARQUEE
|
||||
Technology carousel/strip component
|
||||
========================================================================== */
|
||||
|
||||
.tech-carousel {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.3rem 0.1rem 0.1rem;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
.tech-carousel::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.tech-carousel::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.tech-pill {
|
||||
scroll-snap-align: start;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-available {
|
||||
@apply inline-flex items-center gap-1.5;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* --- Tech marquee --- */
|
||||
.tech-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tech-strip {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
|
||||
.tech-strip-track {
|
||||
@apply py-2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
animation-name: tech-marquee;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.tech-strip-track {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.tech-strip--wide .tech-strip-track--primary {
|
||||
animation-duration: 40s;
|
||||
}
|
||||
|
||||
.tech-strip--wide .tech-strip-track--secondary {
|
||||
animation-duration: 40s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.tech-strip--compact .tech-strip-track--primary {
|
||||
animation-duration: 40s;
|
||||
}
|
||||
|
||||
.tech-strip--compact .tech-strip-track--secondary {
|
||||
animation-duration: 48s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.tech-strip--compact .tech-strip-track {
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
/* pause both rows on hover */
|
||||
.tech-strip:hover .tech-strip-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.tech-strip-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
opacity: 0.88;
|
||||
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
.tech-strip-item:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
1372
themes/minimal-black/assets/css/content/markdown.css
Normal file
1372
themes/minimal-black/assets/css/content/markdown.css
Normal file
File diff suppressed because it is too large
Load Diff
211
themes/minimal-black/assets/css/content/toc.css
Normal file
211
themes/minimal-black/assets/css/content/toc.css
Normal file
@@ -0,0 +1,211 @@
|
||||
/* ==========================================================================
|
||||
TABLE OF CONTENTS
|
||||
TOC sidebar, active link tracking, responsive behavior
|
||||
========================================================================== */
|
||||
|
||||
.article-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.article-layout {
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.article-toc {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.article-main {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-main {
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.article-toc {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc-wrapper {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
background: color-mix(in srgb, var(--color-surface) 50%, transparent);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.85rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.2s ease-out;
|
||||
max-height: calc(100vh - 24rem);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toc-wrapper:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.toc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 650;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc-title i {
|
||||
color: var(--color-accent);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.toc-toggle {
|
||||
display: flex;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 0.4rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-out;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toc-toggle:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.toc-toggle i {
|
||||
font-size: 0.7rem;
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.toc-wrapper.collapsed .toc-toggle i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.toc-wrapper.collapsed .toc-nav {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.toc-wrapper {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-nav {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
transition: all 0.3s ease-out;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for TOC */
|
||||
.toc-nav::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.toc-nav::-webkit-scrollbar-track {
|
||||
background: color-mix(in srgb, var(--color-bg) 30%, transparent);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toc-nav::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toc-nav::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.toc-nav > ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc-nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc-nav ul ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: 0.25rem;
|
||||
border-left: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
}
|
||||
|
||||
.toc-nav li {
|
||||
margin: 0.35rem 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toc-nav li:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.toc-nav a {
|
||||
display: block;
|
||||
padding: 0.35rem 0.5rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: 0.35rem;
|
||||
transition: all 0.15s ease-out;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.toc-nav a:hover {
|
||||
color: var(--color-text);
|
||||
background: color-mix(in srgb, var(--color-surface) 40%, transparent);
|
||||
border-left-color: var(--color-accent);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.toc-nav a.active {
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
|
||||
border-left-color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Mobile: TOC appears at top */
|
||||
@media (max-width: 1023px) {
|
||||
.article-toc {
|
||||
order: -1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
28
themes/minimal-black/assets/css/main.css
Normal file
28
themes/minimal-black/assets/css/main.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/* ==========================================================================
|
||||
MINIMAL BLACK THEME - MAIN STYLESHEET
|
||||
A minimal, dark-mode first Hugo theme
|
||||
========================================================================== */
|
||||
|
||||
/* Base Styles & Tailwind */
|
||||
@import "base.css";
|
||||
|
||||
/* Utility Classes */
|
||||
@import "utilities.css";
|
||||
|
||||
/* Components */
|
||||
@import "components/dock.css";
|
||||
@import "components/cards.css";
|
||||
@import "components/navigation.css";
|
||||
@import "components/search.css";
|
||||
@import "components/tech-marquee.css";
|
||||
|
||||
/* Content */
|
||||
@import "content/markdown.css";
|
||||
@import "content/toc.css";
|
||||
|
||||
/* Pages */
|
||||
@import "pages/about.css";
|
||||
@import "pages/about-alternative.css";
|
||||
|
||||
/* Responsive Styles */
|
||||
@import "responsive.css";
|
||||
363
themes/minimal-black/assets/css/pages/about-alternative.css
Normal file
363
themes/minimal-black/assets/css/pages/about-alternative.css
Normal file
@@ -0,0 +1,363 @@
|
||||
/* ==========================================================================
|
||||
ABOUT ALTERNATIVE PAGE STYLES
|
||||
Alternative about page with sidebar profile card
|
||||
========================================================================== */
|
||||
|
||||
.page-int, .about-alt-page {
|
||||
max-width: 1200px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.about-alt-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.about-alt-layout {
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Profile Card - Left Sidebar */
|
||||
.about-alt-sidebar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-alt-profile-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--color-surface) 70%, transparent),
|
||||
color-mix(in srgb, var(--color-surface) 50%, transparent)
|
||||
);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.about-alt-avatar,
|
||||
.about-alt-avatar-placeholder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 1.5rem;
|
||||
overflow: hidden;
|
||||
border: 4px solid var(--color-accent);
|
||||
box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.about-alt-avatar:hover,
|
||||
.about-alt-avatar-placeholder:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.about-alt-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about-alt-avatar-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--color-accent) 30%, transparent),
|
||||
color-mix(in srgb, var(--color-accent) 15%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.about-alt-avatar-placeholder i {
|
||||
font-size: 3rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.about-alt-name {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.about-alt-role {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-alt-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-meta i {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.about-alt-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem 0;
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
}
|
||||
|
||||
.about-alt-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-alt-stat-value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.about-alt-stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Social Icons */
|
||||
.about-alt-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-social-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--color-bg) 50%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.about-alt-social-icon:hover {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.about-alt-social-icon i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.about-alt-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.about-alt-section {
|
||||
background: color-mix(in srgb, var(--color-surface) 40%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
border-radius: 1.25rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.about-alt-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.about-alt-section-title i {
|
||||
color: var(--color-accent);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Experience Cards Grid */
|
||||
.about-alt-experience-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-experience-card {
|
||||
background: color-mix(in srgb, var(--color-bg) 40%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
border-left: 4px solid var(--color-accent);
|
||||
border-radius: 0.85rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-alt-experience-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
color-mix(in srgb, var(--color-accent) 10%, transparent),
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.about-alt-experience-card:hover {
|
||||
border-left-width: 6px;
|
||||
transform: translateX(6px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.about-alt-experience-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.about-alt-experience-card p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-alt-experience-card p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about-alt-experience-card strong {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text);
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.about-alt-experience-card em {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: normal;
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Skills Badge Cloud */
|
||||
.about-alt-skills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-alt-skill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: color-mix(in srgb, var(--color-bg) 50%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
transition: all 0.2s ease-out;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.about-alt-skill i {
|
||||
font-size: 1.1em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.about-alt-skill:hover {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.about-alt-skill:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1023px) {
|
||||
.about-alt-profile-card {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.about-alt-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.about-alt-profile-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-avatar,
|
||||
.about-alt-avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.about-alt-name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-stats {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-alt-stat-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-alt-section-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.about-alt-experience-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* TABLE OF CONTENTS */
|
||||
/* ==================== */
|
||||
|
||||
380
themes/minimal-black/assets/css/pages/about.css
Normal file
380
themes/minimal-black/assets/css/pages/about.css
Normal file
@@ -0,0 +1,380 @@
|
||||
/* ==========================================================================
|
||||
ABOUT PAGE STYLES
|
||||
Standard about page with timeline
|
||||
========================================================================== */
|
||||
|
||||
.about-page {
|
||||
max-width: 900px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
text-align: center;
|
||||
padding: 3rem 0 4rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-accent),
|
||||
transparent
|
||||
);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.about-hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.about-avatar,
|
||||
.about-avatar-placeholder {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--color-accent);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 8px color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.about-avatar:hover,
|
||||
.about-avatar-placeholder:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 12px color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.about-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about-avatar-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--color-accent) 20%, transparent),
|
||||
color-mix(in srgb, var(--color-accent) 10%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.about-avatar-placeholder i {
|
||||
font-size: 4rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.about-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 600px;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.about-content .card {
|
||||
background: color-mix(in srgb, var(--color-surface) 60%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.about-content .markdown-body h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 2.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
|
||||
}
|
||||
|
||||
.about-content .markdown-body h3::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 1.5rem;
|
||||
background: var(--color-accent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding: 2rem 0 1rem 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--color-accent) 10%,
|
||||
var(--color-accent) 90%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-marker::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--color-bg);
|
||||
box-shadow:
|
||||
0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent),
|
||||
0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.timeline-item:hover .timeline-marker::before {
|
||||
transform: scale(1.3);
|
||||
box-shadow:
|
||||
0 0 0 6px color-mix(in srgb, var(--color-accent) 30%, transparent),
|
||||
0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: color-mix(in srgb, var(--color-surface) 30%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
border-radius: 0.85rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--color-accent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.timeline-item:hover .timeline-content {
|
||||
background: color-mix(in srgb, var(--color-surface) 50%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.timeline-item:hover .timeline-content::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.timeline-content > p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.timeline-content > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-content strong {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text);
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.timeline-content em {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: normal;
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.timeline-content a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Remove hr from timeline */
|
||||
.timeline hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-social {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
background: color-mix(in srgb, var(--color-surface) 40%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.about-social-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 650;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.about-social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.about-social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease-out;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.about-social-link:hover {
|
||||
transform: translateY(-2px);
|
||||
background: color-mix(in srgb, var(--color-surface) 80%, transparent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.about-social-link i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Responsive about page */
|
||||
@media (max-width: 640px) {
|
||||
.about-hero {
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.about-avatar,
|
||||
.about-avatar-placeholder {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.about-avatar-placeholder i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.about-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-social {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
|
||||
.about-social-links {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.about-social-link {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Timeline responsive */
|
||||
.timeline::before {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: -5px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.timeline-marker::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.timeline-content strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.timeline-content em {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
277
themes/minimal-black/assets/css/responsive.css
Normal file
277
themes/minimal-black/assets/css/responsive.css
Normal file
@@ -0,0 +1,277 @@
|
||||
/* ==========================================================================
|
||||
RESPONSIVE STYLES
|
||||
Global responsive breakpoints and mobile optimizations
|
||||
========================================================================== */
|
||||
|
||||
/* Mobile - Small screens (up to 640px) */
|
||||
@media (max-width: 640px) {
|
||||
.card-pad {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.layout-page {
|
||||
padding-inline: 1rem;
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-page-tight {
|
||||
padding-inline: 1rem;
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
/* Markdown body */
|
||||
.markdown-body {
|
||||
font-size: 0.9rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Headings - scale down for mobile */
|
||||
.markdown-body h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.35rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.15rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Heading anchors - adjust for smaller screens */
|
||||
.markdown-body .md-heading-anchor::before {
|
||||
left: -1rem;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.markdown-body blockquote,
|
||||
.markdown-body .md-blockquote {
|
||||
margin: 1.25rem 0;
|
||||
padding: 1rem;
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote::before,
|
||||
.markdown-body .md-blockquote::before {
|
||||
font-size: 2rem;
|
||||
left: 0.5rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.markdown-body .md-alert {
|
||||
padding: 0.85rem 1rem 0.85rem 2.5rem;
|
||||
}
|
||||
|
||||
.markdown-body .md-alert::before {
|
||||
left: 0.75rem;
|
||||
top: 0.95rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown-body pre {
|
||||
margin: 1rem -1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
font-size: 0.8rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mb-codeblock {
|
||||
margin: 1.25rem -1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-codeblock-content pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mb-codeblock-content pre code {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.markdown-body :not(pre) > code {
|
||||
font-size: 0.85em;
|
||||
padding: 0.1rem 0.35rem;
|
||||
}
|
||||
|
||||
/* Tables - full bleed on mobile */
|
||||
.markdown-body table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.markdown-body th,
|
||||
.markdown-body td {
|
||||
padding: 0.5rem 0.65rem;
|
||||
}
|
||||
|
||||
.markdown-body .table-wrap {
|
||||
margin: 1.25rem -1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.markdown-body img,
|
||||
.markdown-body .md-image {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
.markdown-body .md-image a {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown-body .md-image a::after {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.markdown-body .md-image figcaption {
|
||||
font-size: 0.82rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Page heading */
|
||||
.heading-page {
|
||||
font-size: 1.75rem !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Article header */
|
||||
.article-main header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* TOC on mobile */
|
||||
.toc-wrapper {
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.toc-nav {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet - Medium screens (641px to 1023px) */
|
||||
@media (min-width: 641px) and (max-width: 1023px) {
|
||||
.article-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-main {
|
||||
max-width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.layout-page {
|
||||
padding-inline: 1.5rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger screens - Adjust max-widths */
|
||||
@media (min-width: 1536px) {
|
||||
.article-layout {
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ultra-wide screens */
|
||||
@media (min-width: 1920px) {
|
||||
.markdown-body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device improvements */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* Increase tap targets for touch */
|
||||
.toc-nav a {
|
||||
padding: 0.5rem 0.65rem;
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.toc-toggle {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.mb-action-btn {
|
||||
padding: 0.5rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Remove hover effects on touch devices */
|
||||
.markdown-body li:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape mobile */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.toc-wrapper {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layout-page {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
.prose {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: var(--color-accent);
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.prose strong {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
95
themes/minimal-black/assets/css/utilities.css
Normal file
95
themes/minimal-black/assets/css/utilities.css
Normal file
@@ -0,0 +1,95 @@
|
||||
/* ==========================================================================
|
||||
UTILITY CLASSES
|
||||
Color utilities, animations, helper classes
|
||||
========================================================================== */
|
||||
|
||||
.bg-bg {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
.bg-surface {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.text-text {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.text-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.border-border {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.border-accent {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.bg-accent {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.underline-accent {
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Simple fade-up animation */
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.45s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes search-panel-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -48%) scale(0.97);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-backdrop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-panel-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -48%) scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-backdrop-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer components { }
|
||||
/* Layout helpers */
|
||||
Reference in New Issue
Block a user