Starlight CSS & Styling
Check the Starlight Documentation for CSS and general Styling configurations.
Use the Color Theme Editor to generate colors
Manavees Garden Styling
Theme Colors
- Navigate to the following file
/src/styles/custom.css
- Add the following generated colors
/* Dark mode colors. */
:root {
--sl-color-accent-low: #132731;
--sl-color-accent: #1c7397;
--sl-color-accent-high: #b5cdda;
--sl-color-white: #ffffff;
--sl-color-gray-1: #d8f3ff;
--sl-color-gray-2: #aad1e2;
--sl-color-gray-3: #5baed0;
--sl-color-gray-4: #00617e;
--sl-color-gray-5: #003e52;
--sl-color-gray-6: #002b3a;
--sl-color-black: #001c26;
}
/* Light mode colors. */
:root[data-theme='light'] {
--sl-color-accent-low: #c8dae4;
--sl-color-accent: #005674;
--sl-color-accent-high: #153746;
--sl-color-white: #001c26;
--sl-color-gray-1: #002b3a;
--sl-color-gray-2: #003e52;
--sl-color-gray-3: #00607c;
--sl-color-gray-4: #4297b8;
--sl-color-gray-5: #a2c9da;
--sl-color-gray-6: #d8f3ff;
--sl-color-gray-7: #ecf9ff;
--sl-color-black: #ffffff;
}
iframe custom height and border-radius
using iframe has an issue and sets the height to auto
.
Added the folowing to /src/styles/custom.css
.sl-markdown-content :is(iframe):not(:where(.not-content *)) { display: block; max-width: 100%; height: 352px; border-radius: 12px}
This sets the height for all the iframe embeds to 352px. It looks good since my Spotify lists and Youtube embeds look nice. I also added the border-radius to have a round border that I really like.
Make all images with round borders
Added the following code to /src/styles/custom.css
to make all the elements with round corners.
.sl-markdown-content :is(img, picture, video, canvas, svg):not(:where(.not-content *)) { display: block; max-width: 100%; height: auto; border-radius: 12px;}
Change aside Border
Added the following cote to /src/styles/custom.css
. This makes the border of the aside rounded
}.starlight-aside { border-radius: 12px;}
Change PDF Embed iframe height
NOT WORKING!
}.sl-markdown-content .sl-obs-embed-pdf { border: none; height: 300px; width: 100%}
Adjusting the video height
}/* adjusting the height of the video */.sl-markdown-content :is(video):not(:where(.not-content *)) { display: block; max-width: 100%; height: 352px; border-radius: 12px;}
Adjusting Youtube video height and border radius
lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; border-radius: 12px; height: 352px;}