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 }}