CSS

The CSS used in the MiloDocs theme is powered by TailwindCSS.

Before You Start

Before making any changes, let’s deploy locally and activate style monitoring.

  1. Run pnpm start to deploy locally.
  2. Navigate into /themes/milo.
  3. Run pnpm watch-tw. This enables monitoring for CSS changes.

Modify Templates

You can change the TailwindCSS classes assigned within the Hugo templates by doing the following:

  1. Navigate into /themes/milo/layouts.
  2. Choose which kind of template you wish to update.
    • _default: high-level content type templates (baseof, home, list, section, single, glossary, tutorial)
    • partials: flexible components used in any default template (tiles, next/prev, etc)
    • shortcodes: markdown-file compatible components used inline with your documentation copy
  3. Make changes.
  4. Verify changes were successful.
  5. Save.

Modify Global Theme Extensions

You can modify the default extensions the Milo Docs theme has set for TailwindCSS. This is useful when you’d like to change the branded fonts or change Tailwind’s default font sizes.

Updating Fonts?

If you are updating the fonts, make sure that you:

  1. Install your font files at /static/fonts.
  2. Add them to your CSS at /themes/milo/assets/css/src/input.css.
  1. Navigate into /themes/milo/.
  2. Open the tailwind.config.js file.
  3. Update the theme.extends entries.

Modify Stylesheets

Hugo can reference CSS from multiple locations (e.g., static and assets). The MiloDocs theme keeps all CSS in the assets folder since we want to process the files in a variety of ways — such as concatenating many modular CSS files together into a bundled output that we can minify for production deployments.

fonts.css

The fonts.css file is where you can add/replace the font references to adhere to your brand aesthetic.

/* Rubik Variable Font */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900; /* Range of weights available in the variable font */
  font-display: swap;
}

/* Rubik Italic Variable Font */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900; /* Range of weights available in the variable font */
  font-display: swap;
}

colors.css

The colors.css file is where you can replace the color references to adhere to your brand aesthetic.

:root {
    --primary-gradient-color: #ffffff; 
    --secondary-gradient-color: rgb(138, 193, 149, 0.500); 
    
    /* HPE Brand Colors */

    --color-brand:#8ac195; /*primary color*/
    --color-brand-1:rgba(131, 122, 117, 0.667); /*secondary color*/
    --color-brand-2:#acc18a; /*tertiary color*/
    --color-brand-3:#86a6cf; /*note color*/
    --color-brand-4:#ADD9F4; /*tip color */
    --color-brand-5:#dbd985; /*security color */
    --color-brand-6:#d4ac84; /*warning color */
    --color-brand-7:#F3B3A6; /*danger color */
}

.dark {
    --primary-gradient-color: rgb(138, 193, 149, 0.300); /* Change this to your dark mode color */
    --secondary-gradient-color: #202020; /* Change this to your dark mode color */
}

main.css

The main.css file is generated from the src/input.css file. All of the core styles that are brand agnostic live in these files.

Do not directly update the main.css file; instead, edit the src/input.css file while pnpm watch-tw is active.