layout: default
{% assign color = page.theme_style | default: site.theme_style %} {% assign favicon = site.data.theme.favicon %}
<div class=“jumbotron jumbotron-fluid eq-height home-{{ color }} vh{{ site.vertical_height }} mb-0” >
<div class="container bottom text-center py-5"> <h1 class="display-5 mb-0 sr-contact">{{ site.title}}</h1> <p class="lead p-1 bold sr-contact" >{{ site.slug }}</p> <!-- <hr class="my-4"> --> {% if site.cta_gs_url %} {% if site.cta_gs_target == '_blank' %} <!-- TODO: update to stable from alpha format --> <button type="button" class="btn btn-primary sr-button" onclick="window.open('{{ site.cta_gs_url }}', '_blank');" >Get Started</button> {% else %} <button type="button" class="btn btn-primary sr-button" onclick="location.href = '{{ site.cta_gs_url }}';" >Get Started</button> {% endif %} {% endif %} <button type="button" class="btn btn-outline-light page-scroll sr-button" href="#content">Learn More</button> </div>
</div>
<section id=“content” class=“mt-10”>
<div class="container-fluid whatare"> <div class="container" > <div class="row h-100 py-5" style="margin:3% 0px;"> <div class="col-12 col-md-6 my-auto"> <h2>What is Solar Flair</h2> <p>Solar Flair is an open source project and the <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> theme that <a href="https://solarinnovations.com" target="_blank">Solar Innovations</a> uses accross their <a href="https://planning.solar" target="_blank">Planning.Solar</a> websites.</p> <p>The theme is designed to have 4 primary branding colors that can be toggled on/off through the config file.</p> <p>This demo site shows all four different theme styles.</p> </div> <div class="col-12 col-md-6 my-auto text-center "> <span class="fa-stack fa-9x sr-icons"> <i class="far fa-sun fa-stack-2x orange-text text-l10-two" ></i> <i class="fas fa-circle fa-stack-1x orange-text text-d10-two" ></i> <!-- <i class="fas fa-sun fa-stack-1x fa-inverse orange-text-d10" ></i> --> </span> </div> </div> </div> </div> <div class="container-fluid" > <div class="row justify-content-center mt-5 "> <div class="col-12"> <h2 class="text-center display-3">Goals of Solar Flair</h2> </div> <div class="text-center col-lg-6 mb-3 col"> <p class="lead"> Solar Flair strives to meet and exceed standards in speed, responsive design, and accessibility. </p> </div> </div> <div class="row"> <div class="col-12" > <div class="container"> <div class="row py-2" > <div class="col-12 order-2 col-lg-7 order-lg-1 my-auto text-center"> <i class="align-middle pl-5 fas fa-fighter-jet fa-3x text-l20-four sr-easeInOut" ></i> <i class="align-middle pl-5 fas fa-fighter-jet fa-7x text-four sr-easeInOut" ></i> <i class="align-middle pl-5 fas fa-fighter-jet fa-10x text-d20-four sr-easeInOut" ></i> </div> <div class="col-12 order-1 col-lg-5 order-lg-2 my-auto text-center p-5"> <div class="text-four promo"> <h3 class="text-d10-four">Fast</h3> <p>Using Jekyll with Solar Flair allows our sites to achieve a loadtime of under 500ms</p> </div> </div> </div> </div> </div> <div class="col-12 py-2" > <div class="container"> <div class="row justify-content-end"> <div class="col-12 col-lg-5 my-auto text-center p-5"> <div class="text-one promo"> <h3 class="text-d10-one">Responsive</h3> <p>The theme will adjust to whatever device users view it on: mobile, tablet, or desktop and laptop computers</p> </div> </div> <div class="col-12 col-lg-7 my-auto text-center"> <i class="align-middle pl-3 pb-3 fas fa-mobile-alt fa-2x text-d10-one sr-pop-a" ></i> <i class="align-middle pl-3 pb-3 fas fa-tablet-alt fa-3x text-d10-one sr-pop-b" ></i> <i class="align-middle pl-3 pb-3 fas fa-laptop fa-4x text-d10-one sr-pop-c" ></i> <i class="align-middle pl-3 pb-3 fas fa-desktop fa-5x text-d10-one sr-pop-d" ></i> </div> </div> </div> </div> <div class="col-12 py-2" > <div class="container"> <div class="row "> <div class="col-6 order-2 col-lg-3 order-lg-1 my-auto text-center py-3"> <i class="align-middle fas fa-universal-access fa-10x text-d10-three sr-easeInOut" ></i> </div> <div class="col-12 order-1 col-lg-6 order-lg-2 my-auto text-center pt-5 pb-2"> <div class="text-three promo"> <h3 class="text-d10-three">Accessible</h3> <p>One of Solar Flair's piorities is enabling any user the access to sites' using the theme</p> </div> </div> <div class="col-6 order-2 col-lg-3 order-lg-3 my-auto text-center py-3"> <i class="align-middle fab fa-accessible-icon fa-10x text-d10-three sr-easeInOut" ></i> </div> </div> </div> </div> </div> </div>
</section>
{{ content }}