Skip to content

Styling.md

Latest commit

 

History

History
157 lines (119 loc) · 6.87 KB

Styling.md

File metadata and controls

157 lines (119 loc) · 6.87 KB
Raw

Styling

This page lists what can currently be styled and where in the code to find it. There is no in-app theme picker yet - styling is done via CSS custom properties. All values live in a single file: src/LinkDotNet.Blog.Web/wwwroot/css/basic.css.

Colors & Fonts

The top of basic.css defines all custom properties used throughout the site:

:root, html[data-bs-theme='light'] {
    /* Fonts */
    --default-font: 'Calibri';
    --code-font: 'Lucida Console', 'Courier New';

    /* Color definitions */
    --wild-sand: #f4f4f4;
    --silver: #dadada;
    --waterloo: rgba(140, 140, 162, 0.25);

    /* Usages */
    --background: var(--wild-sand);
    --tag-background: var(--waterloo);
    --background-gradient-start: var(--wild-sand);
    --background-gradient-end: var(--silver);
}
  • --default-font is the font used for the whole page body.
  • --code-font is the font used inside fenced code blocks.
  • The color variables follow a "definition" + "usage" pattern: --wild-sand, --silver and --waterloo are the raw colors, while --background, --tag-background and --background-gradient-* are what the rest of the CSS actually reads. To change a color, either edit the raw color or repoint the usage variable to a different color.
  • The block also overrides a couple of Bootstrap variables (--bs-body-font-weight, --bs-nav-link-font-weight) since the blog is built on top of Bootstrap.

To customize colors or fonts, edit the values in this file directly (there is currently no appsettings.json option for this - see the maintainer note on issue #529 about a possible future theme configuration).

Light / Dark Mode

The same variables are re-declared under html[data-bs-theme='dark'] with a darker palette (--jaguar, --shark, --trout). Which block applies is controlled by the data-bs-theme attribute on the <html> element, toggled client-side by ThemeToggler.razor in src/LinkDotNet.Blog.Web/Features/Home/Components/. The chosen theme is persisted in the browser's local storage - it is not an appsettings.json setting.

Icons

The icon font is defined in src/LinkDotNet.Blog.Web/wwwroot/css/icons.css via @font-face and used throughout basic.css as font-family: 'icons'. The font files (icons.woff, icons.woff2) live next to a Blog.json project file in src/LinkDotNet.Blog.Web/wwwroot/css/fonts/.

The icons are created and downloaded from icomoon.io. Upload Blog.json as a project there to add or remove icons. The icomoon-exported CSS normally prefixes its classes; that prefix has been stripped from icons.css in this repo.

Brand Image vs. Blog Name

The navigation bar shows either an image or the blog's name, controlled by the BlogBrandUrl and BlogName properties (see the full reference in Configuration.md):

  • If BlogBrandUrl is set, that image is rendered in the navbar.
  • If BlogBrandUrl is not set (or null), the BlogName text is rendered instead.

This is implemented in NavMenu.razor at src/LinkDotNet.Blog.Web/Features/Home/Components/:

@if (!string.IsNullOrEmpty(Configuration.Value.BlogBrandUrl))
{
    <a class="nav-brand ms-5" href="/">
        <img style="max-height: 70px; width: 70px; height: 70px;"
             src="@Configuration.Value.BlogBrandUrl.ToAbsoluteUrl(NavigationManager.BaseUri)"
             alt="brand" />
    </a>
}
else
{
    <a class="nav-brand barcode ms-5" href="/">@Configuration.Value.BlogName</a>
}

Without BlogBrandUrl, the navbar falls back to the text-based BlogName:

Navbar showing BlogName text

With BlogBrandUrl set to an image URL, the navbar shows that image instead:

Navbar showing BlogBrandUrl image

Introduction Background Image

The intro card at the top of the home page (profile picture + description) can have an optional background image, controlled by Introduction:BackgroundUrl (see Configuration.md). This is implemented in IntroductionCard.razor at src/LinkDotNet.Blog.Web/Features/Home/Components/:

  • If BackgroundUrl is set, it's rendered behind the card with a dark overlay (linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))) for contrast, plus the introduction-background CSS class (background-size: cover in basic.css).
  • If BackgroundUrl is not set (or null), no background image or gradient is rendered - the card just shows the page's default background.

With Introduction:BackgroundUrl set:

Introduction card with a background image

Without Introduction:BackgroundUrl set:

Introduction card with no background image

Favicon & Site Icons

The browser tab icon, touch icons and manifest are static files in src/LinkDotNet.Blog.Web/wwwroot/ - there is no appsettings.json option for these, so replace the files directly to rebrand them:

  • favicon.ico - default tab icon (served by browser convention, not explicitly linked).
  • favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png - linked in the <head> of App.razor (lines 10-12).
  • android-chrome-192x192.png, android-chrome-256x256.png, site.webmanifest - used by Android/PWA install prompts (site.webmanifest is linked in App.razor line 13 and references the two PNGs itself).
  • safari-pinned-tab.svg - Safari pinned-tab mask icon, linked in App.razor line 14.
  • mstile-150x150.png, browserconfig.xml - legacy Windows tile icon/config, not explicitly linked (picked up by convention).

Keep the same filenames and dimensions when replacing these so the existing <link> tags in App.razor keep working without changes.

Code Block Highlighting

Fenced code blocks in blog posts are syntax-highlighted with highlight.js, loaded from a CDN in App.razor:

  • Theme CSS (line 29): https://cdnjs.cloudflare.com/ajax/libs/highlight.js/<version>/styles/github-dark-dimmed.min.css
  • Script (line 50): https://cdnjs.cloudflare.com/ajax/libs/highlight.js/<version>/highlight.min.js

The current theme is github-dark-dimmed, not the plain "GitHub" theme. To use a different palette, swap the href of the CSS <link> tag for another highlight.js theme name (e.g. github.min.css, github-dark.min.css, monokai.min.css), keeping the same version number as the script tag. There is no appsettings.json option for this - it's a direct edit to App.razor.