uci-hugo-landingpage/layouts/partials/head/styles.html

<!-- Configurable Styles partial to appear in head -->
 <style>

 {{ $navbar := .Site.Params.navbar }}
 {{ $hero := .Site.Params.hero }}
 {{ $sections := .Site.Params.sections }}
 {{ $modal := .Site.Params.modal }}
 {{ $buttons := .Site.Params.buttons }}

 {{ $dark_color:=.Site.Params.dark_color }}
 {{ $light_color:=.Site.Params.light_color }}

{{ with .Site.Params.font }}
  body { font-family:{{ . }},Helvetica,Arial,sans-serif; }
 {{ end }}

 /* NAVBAR */

 {{ $bg_color := $navbar.bg_color | default $dark_color }}
 {{ $color := $navbar.color | default $light_color }}
 .nav-bar__menu-item:hover {color: {{ $bg_color }}; }
 .nav-bar, .section--footer { background-color: {{ $bg_color }};  }
 .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ $color }};  }
 .nav-bar__menu-item:hover { background-color: {{ $color }}; }
 
 {{ with $navbar.font }}
 .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
 {{ end }}

{{ with $navbar.logo_text_short }}
@media only screen and (max-width: 400px) {
 .nav-bar__logo {
   text-indent: -9999px;
   line-height: 0; /* Collapse the original line */
 }

 .nav-bar__logo::after {
   content: "{{ . }}";
   text-indent: 0;
   display: block;
   line-height: initial; /* New content takes up original line height */
 }
 }
 {{ end }}

 /* HERO */

{{ if ne .Site.Params.hero.custom_hero true }}

 {{ $bg_color := .Params.bg_color | default $light_color }}
 <!-- {{ $bg_color := $hero.bg_color | default $light_color }} -->
 {{ $color := $hero.color | default $dark_color }}

   #hero { color: {{ $color }}; }
   #hero { background-color: {{ $bg_color }}; }
   #hero h1 { color: {{ $hero.headline_color | default $color }}; }
   #hero h2 { color: {{ $hero.subheadline_color | default $color }}; }
   #hero h3 { color: {{ $hero.subsubheadline_color | default $color }}; }
   #hero h4 { color: {{ $hero.lines_color | default $color }}; }
   #hero hr { border-top-color: {{ $hero.divider_color | default $color }}; }
  

 {{ with $hero }}

  {{ with $.Site.Params.imagespath }}
    {{ $.Scratch.Set "path" ( . ) }}
  {{ else }}
     {{ $.Scratch.Set "path" ( printf "%s/images/"  ( $.Site.BaseURL | default "" ) ) }}
  {{ end }}
  #hero {
    background-image: url("{{ $.Scratch.Get "path" }}{{ .img | default "hero.jpg" }}");
  }

  {{ with .font }}
  #hero > .section__container { font-family:{{ . }},Helvetica,Arial,sans-serif;}
  {{ end }}



  {{ if and ( .text_outline ) ( .text_shadow ) }}
  #hero > .section__container {
    text-shadow:
     -2px -2px 0 {{ .text_outline }},
      2px -2px 0 {{ .text_outline }},
     -2px 2px 0 {{ .text_outline }},
      2px 2px 0 {{ .text_outline }},
      -7px -3px 0 {{ .text_shadow }};
   }
   {{ else }}

   {{ with .text_outline }}
   #hero > .section__container {
     text-shadow:
      -2px -2px 0 {{ . }},
       2px -2px 0 {{ . }},
       -2px 2px 0 {{ . }},
        2px 2px 0 {{ . }};
    }
   {{ end }}

   {{ with .text_shadow }}
   #hero > .section__container {
     text-shadow:
      -7px -3px 0 {{ . }}
    }
   {{ end }}

   {{ end }}


  {{ with .headlines_font }}
  #hero h1, #hero h2, #hero h3 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
  {{ end }}

   {{ with .headline_size }}
  #hero h1 { font-size: {{ . }}em; }
  {{ end }}

  {{ with .subheadline_size }}
  #hero h2 { font-size: {{ . }}em; }
  {{ end }}

 {{ with .subsubheadline_size }}
  #hero h3 { font-size: {{ . }}em; }
  {{ end }}

  {{ with .lines_size }}
  #hero h4 { font-size: {{ . }}em; }
  {{ end }}

  {{ with .divider_thickness }}
  #hero hr { border-width: {{ . }}px; }
  {{ end }}


  {{ end }}  /* end with hero */

  {{ end }}  /* end not custom hero

  /* sections */

 {{ $bg_color := $sections.bg_color | default $light_color }}
 {{ $color := $sections.color | default $dark_color }}
  
 .section--odd, .section--even .btn {
   color: {{ $sections.odd.color | default $color }};
   background-color: {{ $sections.odd.bg_color | default $bg_color }};
 }
.section--even, .section--odd .btn {
   color: {{ $sections.even.color | default $bg_color }};
   background-color: {{ $sections.even.bg_color | default $color }};
  }

  {{ with $sections }}

    {{ with .font }}
    .section, .section h1, .section h2, .section h3, .section p { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
    {{ end }}

  

    {{ with .headline_font }}
    .section__headline h1 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
    {{ end }}

    {{ with .bullet_icon }}
    .section__content :not(.highlight) ul > li::before {
      content: "{{ . }}";
      }

    {{ end }}



    {{ with .footer }}
    .section--footer {
      color: {{ .color }};
      background-color: {{ .bg_color }};
    }
    {{ end }}

    {{ with .comments }}
    .section--comments {
      color: {{ .color }};
      background-color: {{ .bg_color }};
    }
    {{ end }}

  {{ end }}  /* end sections */


  {{ with $modal }}

  {{ with .font }}
  .section__container--modal { font-family:{{ . }},Helvetica,Arial,sans-serif; }
  {{ end }}

  {{ with .color }}
   .section__container--modal { color: {{ . }};  }
  {{ end }}

  {{ with .bg_color }}
  .section__container--modal { background-color: {{ . }};  }
  {{ end }}

  {{ with .headline_size }}
  .section__headline--modal > h1 { font-size: {{ . }}em; }
  {{ end }}

  {{ with .text_size }}
  .section__container--modal { font-size: {{ . }}em; }
  {{ end }}



  {{ end }} /*end modal */


  {{ with $buttons }}

  {{ with .odd }}
  .section--odd .btn {
    color: {{ .color }};
    background-color: {{ .bg_color }};
  }

  .section--odd .btn:hover {
    color: {{ .hover_color }};
    background-color: {{ .hover_bg_color }};
  }
  {{ end }}

  {{ with .even }}
  .section--even .btn {
    color: {{ .color }};
    background-color: {{ .bg_color }};
  }

  .section--even .btn:hover {
    color: {{ .hover_color }};
    background-color: {{ .hover_bg_color }};
  }
  {{ end }}

  {{ end }} /* .buttons */

 </style>