colette/src/styl/_components/_footerbar.styl

A CSS and JS starter kit for 20 Minutes web projects

// Footer
//
// Styles for basic footer.
//
// Markup: footerbar.twig
//
// Styleguide: Components.Footer

$footer-color ?= $color-theme-default
$footer-color-foreground ?= lighten(desaturate($color-theme-default, 30%), 65%)

$footer-color-dark ?= $color-theme-default-dark
$footer-color-foreground-dark ?= lighten(desaturate($footer-color-dark, 30%), 65%)

/:root
/[data-theme=light]
/[data-theme] [data-theme=light]
    --footer-color $footer-color
    --footer-color-foreground $footer-color-foreground

/[data-theme=dark]
/[data-theme] [data-theme=dark]
    --footer-color $footer-color-dark
    --footer-color-foreground $footer-color-foreground-dark

.footerbar
    _p(.25 2)
    {clearfix}
    {fontSecondary}
    clear both
    width 100%
    min-height _rem(30px)
    border-top 3px solid var(--footer-color-foreground)
    background-color var(--footer-color)
    color var(--color-highlight-foreground)

    &-copyright
        color var(--footer-color-foreground)

    a:hover
        text-decoration underline