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

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

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

 {{ with .Site.Params }}

 {{ with .navbar }}

 {{ with .font }}
 .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
 {{ end }}

 {{ with .bg_color }}
 .nav-bar__menu-item:hover {color: {{ . }}; }
 .nav-bar, .section--footer { background-color: {{ . }};  }
 {{ end }}

 {{ with .text_size }}
 .nav-bar__logo { font-size: {{ . }}em; }
 {{ end }}

 {{ with .color }}
  .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ . }};  }
  .nav-bar__menu-item:hover { background-color: {{ . }}; }
 {{ end }}

{{ with .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 }}

 {{ end }}  /* end navbar */

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

  {{ with .color }}
  #hero { color: {{ . }}; }
  {{ end }}

  {{ with .bg_color }}
  #hero { background-color: {{ . }}; }
  {{ 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_color }}
  #hero h1 { color: {{ . }}; }
  {{ end }}

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

  {{ with .subheadline_color }}
  #hero h2 { color: {{ . }}; }
  {{ end }}

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

  {{ with .subsubheadline_color }}
  #hero h3 { color: {{ . }}; }
  {{ end }}

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

  {{ with .lines_color }}
  #hero h4 { color: {{ . }}; }
  {{ end }}

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

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

  {{ with .divider_color }}
  #hero hr { border-top-color: {{ . }}; }
  {{ end }}

  {{ end }}  /* end hero */


  {{ 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 .odd }}
    .section--odd, .section--even .btn {
      color: {{ .color }};
      background-color: {{ .bg_color }};
    }

    {{ end }}

    {{ with .even }}
    .section--even, .section--odd .btn {
      color: {{ .color }};
      background-color: {{ .bg_color }};
    }
    {{ 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 */

 {{ end }} /* .Site.Params*/

 </style>