index.html

---
title: jekylldark
layout: page
---
<p>
  jekylldark is a Jekyll theme with a dark color scheme.  It features a
  responsive layout with customizable navbar, sidebar, content area, and footer
  using HTML, Markdown, and Liquid.  It is important to note that while there is
  templating for all of these site areas, it is not necesary to use them all. By
  leaving out a config file, it is possible to eliminate an element from the
  site.  Please see the <a
  href="https://github.com/sutterj/jekylldark#jekylldark">README</a> for
  information about how to apply the theme to your Jekyll site.
</p>
<p>
  In order for the site to work properlly, it will be necessary to create a few
  files and folders.  To start, make sure that your <code>_config.yml</code>
  file has the title and the url of your site.  Then, you will want to add a
  <code>title-description</code>.  This is the desciption that will appear under
  the title of the site in the sidebar.  You can additionally add a
  <code>full-desciption</code> that will appear in the footer of the site where
  there is more room.  The <code>&gt</code> means to ignore line breaks until
  the next item.  It is important to note where <code>-</code>'s are used as
  these matter when creating lists.
</p>
<script class="center" src="https://gist.github.com/sutterj/f7c47e90d812d2a381966b5378c153a6.js"></script>
<p>
  Next, create a folder in the root of the site called <code>_data</code>.  This
  is where we will create the files, <code>footer.yml</code>,
  <code>navigation.yml</code>, and <code>sidebar.yml</code>.  Here is what the
  files that populate this site look like.
</p>
<script src="https://gist.github.com/sutterj/4ff72c0a2e13e32892eb3b84a93514bc.js"></script>
<p>
  By using some key words in each of these files, specifically styled content
  areas are created.  In the footer, adding <code>header: Title</code> will add
  the title and the full description of the site and adding <code>header:
  Connect</code> will create an area for social links and icons. The icons come
  from <a href="https://fontawesome.com">Font Awesome</a> and are retrieved from
  their CDN by adding <code>image: NAMEOFICON</code>.  In almost all cases the
  name of the icon is an all lowercase, no spaces version of the name of the
  site so there should be no need to look it up.
</p>
<script src="https://gist.github.com/sutterj/7945547b774da837b03e775c776ecad2.js"></script>
<p>
  The navbar can be filled out with main navigation locations and with dropdown
  lists.  The way that this is done can be seen in the above gist.
</p>
<script src="https://gist.github.com/sutterj/d975e51ba96edc722383aa55f209982c.js"></script>
<p>
  The sidebar of the site has special areas for projects and posts.  These are
  created with <code>header: Featured Projects</code> and <code>header:
  posts</code>.
</p>
<p>
  Information on creating posts can be found on the <a href="/posts/">posts</a>
  page and examples of the different styled elements can be found on the <a
  href="/examples/">examples</a> page.
</p>