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

191 lines
5.0 KiB
HTML
Raw Normal View History

<!-- 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 }}
2017-03-11 20:11:20 -08:00
.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 */
2017-03-04 20:02:56 -08:00
{{ if ne .Site.Params.hero.custom_hero true }}
{{ $bg_color := $hero.bg_color | default $light_color }}
{{ $color := $hero.color | default $dark_color }}
2017-03-04 20:02:56 -08:00
#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 }}"); }
2017-03-04 20:02:56 -08:00
{{ end }} /* end not custom hero
2017-03-10 22:59:27 -08:00
/* 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 }}
2017-03-10 22:59:27 -08:00
{{ 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: "{{ . }}";
}
2017-03-10 22:59:27 -08:00
{{ end }}
{{ with .footer }}
.section--footer {
color: {{ .color }};
background-color: {{ .bg_color }};
}
2017-03-10 22:59:27 -08:00
{{ end }}
{{ with .comments }}
.section--comments {
color: {{ .color }};
background-color: {{ .bg_color }};
}
{{ end }}
2017-03-10 22:59:27 -08:00
{{ end }} /* end sections */
2017-04-07 01:40:29 -07:00
{{ with $modal }}
2017-04-07 01:40:29 -07:00
{{ 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 }}
2017-03-10 22:59:27 -08:00
{{ with .odd }}
.section--odd .btn {
color: {{ .color }};
background-color: {{ .bg_color }};
}
2017-03-04 20:02:56 -08:00
.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>