glados.no/_pages/about.md

130 lines
4.1 KiB
Markdown
Raw Normal View History

2020-11-21 14:13:16 +01:00
---
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>