New Theme

2020-11-21 14:13:16 +01:00
parent 9bc54d475f
commit cbc70ca8e1
593 changed files with 13702 additions and 14006 deletions
--- a/_pages/about.md
+++ b/_pages/about.md
@@ -0,0 +1,129 @@
+---
+layout: defaults/page
+permalink: /about/
+narrow: true
+title: More info about Friday Theme
+images:
+  - https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5b1016b885e7438c4633109d77368d4d&auto=format&fit=crop&w=1651&q=80
+  - https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=468a8c18f5d811cf03c654b653b5089e&auto=format&fit=crop&w=1650&q=80
+  - https://images.unsplash.com/photo-1504626835342-6b01071d182e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=975855d515c9d56352ee3bfe74287f2b&auto=format&fit=crop&w=1651&q=80
+---
+
+## What is it?
+
+{% include components/intro.md %}
+
+## Full Feature List
+
+- Installation
+  - Designed for Jekyll 3.8
+  - Compatible with GitHub Pages
+- Configuration
+  - Useful data files to quickly generate the profile sidebar and site navigation
+  - Easy to configure, minimal options, sensible defaults
+- Styling
+  - Styled with Bootstrap, proven to work cross-platform
+  - Minimal additional SCSS to get in the way
+  - Entirely customisable by tweaking the Boostrap SCSS variables
+- Layout
+  - 2 column layout
+  - Context-sensitive sidebars for blogs, documentation pages and normal content
+  - Narrow/wide page options
+  - Responsive layout built in
+  - Lots of helpful includes and components to build out your site
+- JavaScript and Components
+  - jQuery and Bootstrap JS included
+  - Use all the Bootstrap components
+- Other goodies
+  - Entypo SVG icons included
+  - Syntax highlighting for code fragments using Rougify for over 100 different languages
+- Blog
+  - A collection layout to build a blog with full support for tagging
+  - Interactive tag filtering for the blog
+- Projects
+  - A layout to list your projects, with a documentation-like layout for each project
+  - Table of contents generation for documentation pages
+- Permalinks
+  - Permalinks using baseurl throughout for deployment under a subdir or on GitHub pages
+  - Permalinks using .html throughout for deployment to environments not using default directory indexes
+
+## Examples
+
+Here's some quick examples of what it can do.
+
+### Code Highlighting
+
+{% highlight javascript %}
+var modulePattern = (function() {
+    // your module code goes here
+    var sum = 0 ;
+
+    return {
+        add:function() {
+            sum = sum + 1;
+            return sum;
+        },
+        reset:function() {
+            return sum = 0;
+        }
+    }
+}());
+{% endhighlight %}
+
+### Bootstrap Components
+
+Here's a CSS component, it's an alert box with the info color:
+
+<div class="alert alert-info">
+    A simple info alert!
+</div>
+
+And this is a more sophisticated example, using the JS to include a carousel of images:
+
+<div id="carouselExampleControls" class="carousel slide mb-4" data-ride="carousel">
+    <div class="carousel-inner">
+        {% for img in page.images %}
+            <div class="carousel-item {% if forloop.first %}active{% endif %}">
+                <img src="{{ img }}" class="d-block w-100" alt="">
+            </div>
+        {% endfor %}
+    </div>
+    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+    </a>
+</div>
+
+The spinner.
+
+<div class="spinner-border text-dark mb-4" role="status">
+  <span class="sr-only">Loading...</span>
+</div>
+
+### Icons
+
+There's a suite of hundreds of Entypo icons included, here's just a few.
+
+<div class="d-flex align-items-center mb-4">
+    <span class="icon grey mr-2">
+        {% include entypo/clock.svg %}
+    </span>
+    <span class="icon grey mr-2">
+        {% include entypo/cycle.svg %}
+    </span>
+    <span class="icon grey mr-2">
+        {% include entypo/chevron-up.svg %}
+    </span>
+    <span class="icon grey mr-2">
+        {% include entypo/new-message.svg %}
+    </span>
+    <span class="icon grey mr-2">
+        {% include entypo/shopping-cart.svg %}
+    </span>
+</div>
+
+
--- a/_pages/index.md
+++ b/_pages/index.md
@@ -0,0 +1,30 @@
+---
+layout: defaults/page
+permalink: index.html
+narrow: true
+title: Welcome to Friday Theme
+---
+
+## What is it?
+
+{% include components/intro.md %}
+
+[Here's the full feature list and some quick examples of what it can do.]({{ site.baseurl}}{% link _pages/about.md %})
+
+## How to use it
+
+This web site is the documentation for the theme and also provides examples of how you can use and modify it. TIt is built using Friday Theme directly from the [GitHub repo](https://github.com/sfreytag/friday-theme) and published to GitHub pages.
+
+[The documentation]({{ site.baseurl }}{% link list/projects.md %}) covers the basics of installing and using it, and is an example of how you could write documentation about your own projects.
+
+[The blog]({{ site.baseurl }}{% link list/posts.html %}) has a bunch of tips about how to use Friday Theme. These show how the blog works, including the tags. There's the three most-recent posts below included below.
+
+<hr />
+
+### Recent Posts
+
+{% for post in site.posts limit:3 %}
+{% include components/post-card.html %}
+{% endfor %}
+
+