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 }}
 {{ $imagesurl := .Site.Params.imagesurl | default ( printf "%simages/"  ( $.Site.BaseURL | default "" )) }}
 {{ $filesurl := .Site.Params.filesurl | default "./assets/assets/" }}
 {{ $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, .nav-bar__menu-item >a:hover  {color: {{ $bg_color }}; }
 .nav-bar__container, .section--footer { background-color: {{ $bg_color }};  }
 .nav-bar__logo,.nav-bar__logo:hover, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ $color }};  }
 .nav-bar__menu-item:hover, .nav-bar__menu-item >a: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 := $hero.bg_color | default $light_color }}
 {{ $color := $hero.color | default $dark_color }}

 #hero { color: {{ $color }}; }

 #hero { background-color: {{ $bg_color }}; }
 {{ if eq $hero.text_shadow true }}
 #hero { text-shadow: 
  {{ $hero.text_shadow_horz | default 2 }}px 
  {{ $hero.text_shadow_vert | default 2 }}px 
  {{ $hero.text_shadow_blur | default 0 }}px 
  {{ $hero.text_shadow_color | default $bg_color }}; }
 {{ end}}
 {{/*  #hero {	text-shadow: -1px 1px 2px white,
				  1px 1px 2px white,
				  1px -1px 0 white,
				  -1px -1px 0 white
 }  */}}
 #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 }}; }
{{ $image := .Site.Params.hero.img | default "hero.jpg" }}
/* TODO mobile image substitution */
{{ $image := print $imagesurl $image }} 
 #hero { background-image: url("{{ $image }}"); }


  {{ 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>