{{- $fonts    := site.Params.fonts }}
{{- $fontSlice := (slice) }}
{{- range $fonts }}
{{- $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }}
{{- end }}
{{- $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
{{- $sansSerifFont := (index (where site.Params.fonts ".type" "sans_serif") 0).name }}
{{- $fontAwesomeVersion := site.Params.font_awesome_version }}
{{- $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}
@charset "utf-8"

// Flux color palette
$flux-darkest-blue: #3570e3
$flux-dark-blue: #2a7de3
$flux-lighter-blue: #1b8de2
$flux-light-blue: #0096e1
$flux-black: #1a1a1a

// Other colors
$slack-green: #74cdb0
$twitter-blue: #1da1f2
$linkedin-blue: #0e76a8

@import url("{{ $fontsUrl }}")
@import url("{{ $fontAwesomeUrl }}")

$primary: $flux-dark-blue
$secondary: $flux-light-blue
$dark: $flux-black

$link: $primary
$family-sans-serif: "{{ $sansSerifFont }}", sans-serif
$code: $primary
$code-background: $grey-lighter
$navbar-height: 4.5rem
$navbar-item-img-max-height: $navbar-height * 0.6
$navbar-dropdown-border-top: none
$navbar-dropdown-radius: none
$section-padding: 4.5rem 1.5rem

$navbar-item-hover-color: $primary !important
$navbar-item-hover-background-color: $dark !important
$navbar-dropdown-item-hover-background-color: $light !important

$colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
$colors: mergeColorMaps(("slack-green": ($slack-green, $white), "twitter-blue": ($twitter-blue, $white), "linkedin-blue": ($linkedin-blue, $white)), $colors)

@import "blog"
@import "box"
@import "card"
@import "content"
@import "docs"
@import "hero"
@import "notification"
@import "terminal"

// Smooth scrolling
html
  scroll-behavior: smooth
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

// Responsive images
=responsive-img($m, $d)
  +mobile
    width: $m
  +tablet
    width: $d

.is-hero-logo
  +responsive-img(50%, 25%)

.is-footer-logo
  +responsive-img(20%, 25%)

.is-cncf-logo
  +responsive-img(75%, 33%)

.is-indented
  padding-left: 1rem

// Ensure sticky footer
.site
  display: flex
  flex-direction: column
  min-height: 100vh

  .main
    flex: 1
