gitea-pages/pages/special-layouts/shuffle.html

---
title: Shuffle
permalink: /shuffle/
tags: special-layouts
type: noTags
keywords:
audience:
last_updated:
summary:
metadata: false
---
{% include linkrefs.html %}

<script src="{{ "/js/jquery.shuffle.min.js" | prepend:site.baseurl }}"></script>
<script src="{{ "/js/jquery.ba-throttle-debounce.min.js" | prepend:site.baseurl }}"></script>

      <div class="filter-options">
      <button class="btn btn-primary" data-group="all">All</button>
      <button class="btn btn-primary" data-group="getting-started">Getting Started</button>
      <button class="btn btn-primary" data-group="formatting">Formatting</button>
      <button class="btn btn-primary" data-group="publishing">Publishing</button>
      <button class="btn btn-primary" data-group="single-sourcing">Single Sourcing</button>
      <button class="btn btn-primary" data-group="special-layouts">Special Layouts</button>
      <button class="btn btn-primary" data-group="news">News</button>

    </div>      

<div id="grid" class="row">


    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["getting-started"]'>

               <div class="panel panel-danger">
               <div class="panel-heading">Getting started</div>
               <div class="panel-body">
                  If you're getting started with Jekyll, see the links in this section. It will take you from the beginning level to comfortable. 
                  <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "getting-started" %}
                  <li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                  </ul>
               </div>
            </div>
    
    </div>
   

    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["news"]'>
             
             <div class="panel panel-info">
               <div class="panel-heading">Latest news</div>
               <div class="panel-body">Here's the latest news about this theme. These links point to posts rather than pages.
               <ul>
                  {% for post in site.posts %}
                  {% for tag in post.tags %}
                  {% if tag == "news" %}
                  <li><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> ({{ post.date | date: "%b %-d, %Y" }})</li>
                  <div class="summary">{{post.summary}}</div>
                  {% endif %}
                  {% endfor %}
                  {% endfor %}
               </ul>
            </div>
         </div>

    </div>



    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["formatting"]'>

                <div class="panel panel-danger">
               <div class="panel-heading">Formatting</div>
               <div class="panel-body">
                  These topics get into formatting syntax, such as images and tables, that you'll use on each of your pages: 
                  <ul>
                    <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "formatting" %}
                  <li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                    
                  </ul>
               </div>
            </div>

    </div>

    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["single-sourcing"]'>
         
      <div class="panel panel-default">
               <div class="panel-heading">Single Sourcing</div>
               <div class="panel-body">These topics cover strategies for single-sourcing:
               <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "single-sourcing" %}
                  <li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
               </ul>
            </div>
         </div>

    </div>

       <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["publishing"]'>
         
<div class="panel panel-primary">
               <div class="panel-heading">Publishing</div>
               <div class="panel-body">
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "publishing" %}
                  <li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
               </div>
            </div>

    </div>

        <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["special-layouts"]'>

             <div class="panel panel-warning">
               <div class="panel-heading">Special Layouts</div>
               <div class="panel-body">
                  These pages highlight special layouts outside of the conventional page and TOC hierarchy.
                  <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "special-layouts" %}
                     <li><a href="{{ page.permalink | prepend: site.baseurl }}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                  </ul>
               </div>
            </div>

    </div>
          <!-- sizer -->
      <div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>          


    </div><!-- /#grid -->

{% include initialize_shuffle.html %}
</div>