<!– CSS that overrides the defaults, when the theme user selected custom colors or other style options or places custom css in the site's global configuration –> <style>
/* Custom max-width for the site */ {% if site.site-max-width %} html body .page-content .margin { max-width: calc({{ site.site-max-width}}px + 80px) !important; } html body .page-content .wrapper { max-width: {{ site.site-max-width }}px !important; } body div.header .header-content { max-width: {{ site.site-max-width }}px !important; } html body nav ul.desktop-nav { max-width: {{ site.site-max-width }}px !important; } {% endif %} /* Custom header-padding to influence it's height */ {% if site.header-padding %} html body div.header { padding-top: {{ site.header-padding }}px; padding-bottom: {{ site.header-padding }}px; } {% endif %} /* Custom footer-padding to influence it's height */ {% if site.footer-padding %} html footer { padding-top: {{ site.footer-padding }}px; padding-bottom: {{ site.footer-padding }}px; } {% endif %} /* Custom header background-color */ {% if site.header-color %} div.header { background-color: {{ site.header-color }} !important; } {% endif %} /* Custom background-color for the front page columns */ {% if site.columns-color %} .dark-section .col { background-color: {{ site.columns-color }} !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } {% endif %} /* Custom text-color for the front page columns */ {% if site.columns-text-color %} html body .dark-section .wrapper .col { color: {{ site.columns-text-color }} !important; } {% endif %} /* Custom color for the site's h1 */ {% if site.h1-color %} h1 { color: {{ site.h1-color }} !important; } {% endif %} /* Custom color for the site's subtitle in the header */ {% if site.subtitle-color %} html body div.header .header-content .header-left p.sub-title { color: {{ site.subtitle-color }}; } {% endif %} /* Custom color for the site's h2 */ {% if site.h2-color %} h2 { color: {{ site.h2-color }} !important; } {% endif %} /* Custom color for the site's h3 */ {% if site.h3-color %} h3 { color: {{ site.h3-color }} !important; } {% endif %} /* Custom color for all of the site's links and buttons (except for the social buttons) */ {% if site.link-color %} html body a { color: {{ site.link-color }}; } html body #accordion a { color: {{ site.link-color }} !important; } html body .wrapper .tag-list li a.selected { background-color: {{ site.link-color }}; border-color: {{ site.link-color }}; } html body .wrapper #accordion .ui-accordion-header.ui-state-active { border-color: {{ site.link-color }}; background-color: {{ site.link-color }}; } a.button { border: 1px solid {{ site.link-color }}; color: {{ site.link-color }}; } a.button:hover { background-color: {{ site.link-color }}; } html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line { background-color: {{ site.link-color }}; } html body nav ul a:hover { color: {{ site.link-color }}; } html body nav ul.desktop-nav li.active { border-bottom: 5px solid {{ site.link-color }}; } html body nav ul.desktop-nav li.active a { color: {{ site.link-color }}; } html body nav ul.desktop-nav li a:hover { color: {{ site.link-color }}; } html body div.mobile-nav-content ul li.active { border-bottom: 1px solid {{ site.link-color }}; } html body div.mobile-nav-content ul li.active a { color: {{ site.link-color }}; } html body div.mobile-nav-content ul li a:hover { color: {{ site.link-color }}; } {% endif %} /* Custom color for the site's plain text */ {% if site.text-color %} html body .page-content .wrapper.home-content { color: {{ site.text-color }}; } html body .wrapper.posts-wrapper .post .post-contents p { color: {{ site.text-color }}; } html body .page-content .wrapper.page p { color: {{ site.text-color }}; } body .wrapper .post ul { color: {{ site.text-color }}; } body .wrapper.page ul { color: {{ site.text-color }}; } html body .page-content .wrapper.single-post p, html body .page-content .wrapper.single-post ul { color: {{ site.text-color }}; } {% endif %} /* Custom background-color for the site's footer */ {% if site.footer-color %} html footer { background-color: {{ site.footer-color }}; } {% endif %} /* Custom color for the site's footer text and social buttons */ {% if site.footer-text-color %} html footer p { color: {{ site.footer-text-color }}; } html footer .social-container a.button { color: {{ site.footer-text-color }} !important; border-color: {{ site.footer-text-color }} !important; } footer .social-container a.button:hover { background-color: {{ site.footer-text-color }} !important; } {% endif %} /* Custom color for the site's inactive and unhovered navigation links */ {% if site.nav-inactive-color %} html body nav ul.desktop-nav li a { color: {{ site.nav-inactive-color }}; } {% endif %} /* Custom font-size for the paragraphs in the home columns */ {% if site.columns-font-size %} html body .dark-section .wrapper .col p { font-size: {{ site.columns-font-size }}; } {% endif %} /* Custom line-height for the paragraphs in the home columns */ {% if site.columns-line-height %} html body .dark-section .wrapper .col p { line-height: {{ site.columns-line-height }}; } {% endif %} /* Custom line-height for the content paragraphs of the site */ {% if site.text-line-height %} html body .wrapper.single-post ul { line-height: {{ site.text-line-height }}; } html body .wrapper.page ul { line-height: {{ site.text-line-height }}; } html body .wrapper .post ul { line-height: {{ site.text-line-height }}; } html body .page-content .wrapper.page p { line-height: {{ site.text-line-height }}; } html body .page-content .wrapper.single-post p { line-height: {{ site.text-line-height }}; } html body .wrapper.single-post p { line-height: {{ site.text-line-height }}; } html body .wrapper.posts-wrapper .post .post-contents p { line-height: {{ site.text-line-height }}; } {% endif %} /* Custom font-size for the content paragraphs of the site */ {% if site.text-font-size %} html body .wrapper.single-post ul { font-size: {{ site.text-font-size }}; } html body .wrapper.page ul { font-size: {{ site.text-font-size }}; } html body .wrapper .post ul { font-size: {{ site.text-font-size }}; } html body .page-content .wrapper.page p { font-size: {{ site.text-font-size }}; } html body .page-content .wrapper.single-post p { font-size: {{ site.text-font-size }}; } html body .wrapper.single-post p { font-size: {{ site.text-font-size }}; } html body .wrapper.posts-wrapper .post .post-contents p { font-size: {{ site.text-font-size }}; } html body code { font-size: {{ site.text-font-size }}; } {% endif %} /* Custom css from the corresponding site's config variable */ {% if site.custom-css %} {{ site.custom-css }} {% endif %}
</style>