Skip to main content

Anubis2 Demo Site

Advanced Style

/posts/advancedstyle/ Hugo Authors

There are examples of how to use custom global-wise style or page-wise style.

The custom .css .scss .sass file should be placed in assets/ folder. (instead of static/)
This page is affected by assets/css/custom1.scss and assets/css/custom2.css and advanced-style/style.css

advanced-style/style.css affects only the current page.

<style>
  @import 'style.css';
</style>

assets/css/custom1.scss and assets/css/custom2.scss will have global effect.

// assets/css/custom2.css
.anubis-custom-style {
    background-color: pink;
    color: black;
    padding: 1em;
    border-radius: 0.3em;
    border: 1px solid black;
}

// assets/css/foundation/_vars.scss
$font-stack: Helvetica, sans-serif;
$primary-color: rgb(255, 255, 168);
$background-color: rgb(85, 85, 85);

// assets/css/custom1.scss
@import 'foundation/vars';

junyi {
    display: block;
    font: 100% $font-stack;
    color: $primary-color;
    background-color: $background-color;
    margin-top: 1em;
}

Read next