---
layout: default
---

{% assign color = page.theme_style | default: site.theme_style   %}
{% assign favicon = site.data.theme[color].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 }}