intro-header.html

{% comment %}
    @param {string} type - 'page' | 'post' | 'keynote'
    @param {boolean} short
{% endcomment %}

{% if include.type == 'post' %}
<style type="text/css">
    header.intro-header{
        position: relative;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
    }

    {% if page.header-mask %}
    header.intro-header .header-mask{
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0,0,0, {{ page.header-mask }});
    }
    {% endif %}
</style>
<header class="intro-header" >
    <div class="header-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        {% for tag in page.tags %}
                        <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
                        {% endfor %}
                    </div>
                    <h1>{{ page.title }}</h1>
                    {% comment %} always create a h2 for keeping the margin {% endcomment %}
                    <h2 class="subheading">{{ page.subtitle }}</h2>
                    <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
                </div>
            </div>
        </div>
    </div>
</header>
{% endif %}

{% if include.type == 'keynote' %}
<style type="text/css">
    header.intro-header{
        height: 500px;
        overflow: hidden;
    }
    header.intro-header .container{
        visibility: hidden; 
    }
    header iframe{
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* Override Nav Style */
    {% if page.navcolor == "invert" %}
        .navbar-custom .nav li a,
        .navbar-custom .nav li a:hover,
        .navbar-custom .navbar-brand,
        .navbar-custom .navbar-brand:hover {color:#777;}
        .navbar-default .navbar-toggle .icon-bar {background-color:#777;}
    {% endif %}
</style>
<header class="intro-header" >
    <iframe src="{{page.iframe}}"></iframe>
    <!-- keep for SEO -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        {% for tag in page.tags %}
                        <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
                        {% endfor %}
                    </div>
                    <h1>{{ page.title }}</h1>
                    {% comment %} always create a h2 for keeping the margin {% endcomment %}
                    <h2 class="subheading">{{ page.subtitle }}</h2>
                    <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %}
                        on {{ page.date | date: "%B %-d, %Y" }}</span>
                </div>
            </div>
        </div>
    </div>
</header>
{% endif %}

{% if include.type == 'page' %}
<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        {% if include.short %}
        <div class="site-heading" id="tag-heading">
        {% else %}
        <div class="site-heading">
        {% endif %}
          <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
          <span class="subheading">{{ page.description }}</span>
        </div>
      </div>
    </div>
  </div>
</header>
{% endif %}