Archive

CSS12 writings

7 writings

  1. HTML Table Overflow Issues
    A simple CSS technique to keep HTML tables within their containers by controlling table layout and text wrapping.

    CSSJavaScriptUIUX4 min

  1. Optimize Shiki's HTML Output With styleToClass Transformer
    Use Shiki's styleToClass transformer to move inline styles into reusable CSS classes and reduce highlighted HTML size.

    PerformanceCSSCatppuccinShiki4 min

  2. Multi-Theme Blog Design in Hexo: Theme Switching With CSS Variables and the :Where Selector
    How to manage multiple blog themes with CSS variables and the :where selector, including Shiki syntax highlighting theme switching and a FOUC fix.

    BlogHexoCSSWebRicingCatppuccinJavaScriptShikiTheme7 min

  3. Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-Top
    Fix the common problem where fixed top navbars hide jump targets using scroll-margin-top rule

    BlogCSSWebUIUX2 min

  4. Hexo Site Performance Optimization Notes
    Last September I wrote up my Hexo blog performance work. Recently I tackled the remaining issues with another round of optimizations, recorded here as a follow-up.

    BlogHexoPerformanceImageHTMLCSSFontCDN7 min

  5. VSCode Status Bar Ricing
    Customize the VS Code status bar with custom CSS, fonts, item ordering, Vim mode colors, and replacement problem icons.

    CSSVSCodeRicingCatppuccinVim4 min

  1. Shiki Code Highlighting Test
    How Shiki renders inline code, code blocks, and transformer markers in my Hexo blog, for checking styles and layout edge cases.

    CSSShikiMarkdown4 min

  1. Spotify Ricing(Spicetify)
    🤖 Transform your Spotify client with custom themes and extensions using Spicetify. This guide walks you through installing Spicetify CLI and Marketplace on Windows, Linux, and MacOS, helping you personalize your music streaming experience with beautiful themes and powerful add-ons. Elevate your desktop aesthetics with minimal effort!

    CSSRicingCatppuccinSpotifySpicetify12 min

  1. VSCode Ricing
    Customize VS Code with Custom CSS and Animations, including themes, fonts, status bar styling, borders, and command palette layout.

    CSSFontVSCodeRicingCatppuccin2 min

  1. Lab: Flavoured Markdown & HTML Element Preview
    Test Flavoured Markdown Content & HTML Elements with style

    BlogCSSMarkdown1 min

  2. Lab: Custom Components Preview
    Preview the custom Markdown components used by this blog theme, with usage notes and source examples.

    BlogCSSMarkdown10 min

  3. Lab: Markdown Preview
    Test various Markdown features including color schemes, math, task lists, callouts, and code blocks.

    BlogCSSMarkdown2 min