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

256 lines
5.3 KiB
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>