ryan/hindki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
684ff53ec8
hindki/src/styles/custom.css
ryan 684ff53ec8 Push first commit to gitea
2025-09-24 08:18:38 -07:00

393 lines
8.4 KiB
CSS
Raw Blame History

/* =================================================================
FONT DECLARATIONS
================================================================= */
/* MinionPro (Serif font) */
@font-face {
font-family: "MinionPro";
src: url("/fonts/MinionPro_Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MinionPro";
src: url("/fonts/MinionPro_It.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "MinionPro";
src: url("/fonts/MinionPro_Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MinionPro";
src: url("/fonts/MinionPro_BoldIt.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* MyriadPro (Sans-serif font) */
@font-face {
font-family: "MyriadPro";
src: url("/fonts/MyriadPro_Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MyriadPro";
src: url("/fonts/MyriadPro_It.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "MyriadPro";
src: url("/fonts/MyriadPro_Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MyriadPro";
src: url("/fonts/MyriadPro_BoldIt.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* Devanagari fonts with auto-detection via unicode-range */
@font-face {
font-family: "DevanagariAuto";
src: url("/fonts/Martel-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range:
U+0900-097F, U+200C-200D; /* Devanagari block + zero-width joiners */
}
@font-face {
font-family: "DevanagariAuto";
src: url("/fonts/Martel-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+200C-200D;
}
@font-face {
font-family: "DevanagariAuto";
src: url("/fonts/Martel-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+200C-200D;
}
@font-face {
font-family: "DevanagariAuto";
src: url("/fonts/Martel-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+200C-200D;
}
@font-face {
font-family: "DevanagariAuto";
src: url("/fonts/Martel-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+200C-200D;
}
/* =================================================================
CSS CUSTOM PROPERTIES (VARIABLES)
================================================================= */
:root {
/* Font stacks */
--font-sans: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
--font-serif: "DevanagariAuto", "MinionPro", Georgia, serif;
--font-devanagari: "DevanagariAuto", "Noto Sans Devanagari", sans-serif;
/* Starlight overrides */
--sl-font-system: var(--font-sans);
--sl-font: var(--font-sans);
/* Light theme - warm paper-like background */
--sl-color-bg: #fefcf8; /* Warm off-white, like aged paper */
--sl-color-bg-nav: #faf8f4; /* Slightly darker for navigation */
--sl-color-bg-sidebar: #f8f6f2; /* Even softer for sidebar */
--sl-color-bg-inline-code: #f4f2ee; /* Subtle for inline code */
/* Custom accent color */
--sl-color-accent: #336699;
--sl-color-accent-low: #336699;
--sl-color-accent-high: #336699;
/* Gender badge colors */
/* Cyan for masculine */
--sl-badge-note-bg: #3399cc;
--sl-badge-note-border: #3388bb;
/* Magenta for feminine */
--sl-badge-tip-bg: #cc3366;
--sl-badge-tip-border: #bb3355;
}
/* Dark theme overrides */
[data-theme="dark"] {
--sl-color-bg: #1a1814; /* Dark warm background */
--sl-color-bg-nav: #1e1c18;
--sl-color-bg-sidebar: #16140f;
--sl-color-bg-inline-code: #2a2620;
--sl-color-accent: #5ba3c4; /* Warmer blue-teal for dark theme */
--sl-color-accent-low: #5ba3c4;
--sl-color-accent-high: #6bb4d5;
--sl-color-text-invert: #1a1814;
}
/* =================================================================
BASE STYLES
================================================================= */
body {
font-family: var(--font-sans);
background-color: var(--sl-color-bg);
}
/* Content areas use serif font */
p,
.sl-markdown-content p,
blockquote,
.content,
.prose,
.sl-markdown-content {
font-family: var(--font-serif);
font-size: 1.25rem; /* 18px, up from default 16px */
}
/* UI elements remain sans-serif */
.sl-nav,
.sidebar-content,
.sl-page-title,
.card,
.starlight-card,
button,
.sl-search-box,
nav,
header,
footer {
font-family: var(--font-sans);
}
/* Headings */
h1,
.sl-markdown-content h1,
h2,
.sl-markdown-content h2,
h3,
.sl-markdown-content h3,
h4,
.sl-markdown-content h4 {
font-family: var(--font-sans);
font-weight: 700;
}
h5,
.sl-markdown-content h5,
h6,
.sl-markdown-content h6 {
font-family: var(--font-sans);
font-weight: 400;
}
.gender-badge {
margin-left: 0.5rem;
vertical-align: middle;
font-family: var(--font-sans);
}
.word-entry {
margin-bottom: 2em;
}
.icon-inline {
display: inline-block;
vertical-align: text-top;
position: relative;
top: -0.1em;
}
.sl-markdown-content a,
.tagline a {
text-decoration: none;
color: var(--sl-color-accent);
}
.sl-markdown-content a:hover,
.tagline a:hover {
text-decoration: underline;
}
.tagline {
max-width: max-content;
}
mark {
background-color: rgba(255, 255, 0, 0.2);
}
/* Override the exact Starlight rule that's causing issues */
.sl-markdown-content
[yaml-editor]
:not(a, strong, em, del, span, input, code, br)
+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
margin-top: 0 !important;
}
/* Also target if the YAMLEditor itself is within sl-markdown-content */
.sl-markdown-content
:not(a, strong, em, del, span, input, code, br)
+ [yaml-editor]:not(
a,
strong,
em,
del,
span,
input,
code,
br,
:where(.not-content *)
) {
margin-top: 0 !important;
}
/* =================================================================
LANGUAGE-SPECIFIC STYLES
================================================================= */
/* Devanagari text optimization */
[lang="hi"],
[lang="sa"],
.devanagari {
font-family: var(--font-devanagari) !important;
font-feature-settings:
"kern" 1,
"liga" 1;
text-rendering: optimizeLegibility;
}
/* =================================================================
UTILITY CLASSES
================================================================= */
/* Font family utilities */
.serif {
font-family: var(--font-serif);
}
.sans {
font-family: var(--font-sans);
}
.devanagari-font {
font-family: var(--font-devanagari);
}
/* Font weight utilities */
.font-light {
font-weight: 300;
}
.font-regular {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
/* Combined font family + weight utilities */
.serif-regular {
font-family: var(--font-serif);
font-weight: 400;
}
.serif-bold {
font-family: var(--font-serif);
font-weight: 700;
}
.sans-regular {
font-family: var(--font-sans);
font-weight: 400;
}
.sans-bold {
font-family: var(--font-sans);
font-weight: 700;
}
/* Devanagari-specific weight utilities */
.hindi-light {
font-family: var(--font-devanagari);
font-weight: 300;
}
.hindi-regular {
font-family: var(--font-devanagari);
font-weight: 400;
}
.hindi-semibold {
font-family: var(--font-devanagari);
font-weight: 600;
}
.hindi-bold {
font-family: var(--font-devanagari);
font-weight: 700;
}
.hindi-black {
font-family: var(--font-devanagari);
font-weight: 900;
}
/* Legacy aliases */
.minion-regular {
font-family: var(--font-serif);
font-weight: 400;
}
.minion-bold {
font-family: var(--font-serif);
font-weight: 700;
}
.myriad-regular {
font-family: var(--font-sans);
font-weight: 400;
}
.myriad-bold {
font-family: var(--font-sans);
font-weight: 700;
}
/* =================================================================
THEME ENHANCEMENTS
================================================================= */
.sl-markdown-content,
main {
background-color: var(--sl-color-bg);
}
Reference in New Issue View Git Blame Copy Permalink