testing
This commit is contained in:
parent
e19eaf5183
commit
d77fe55504
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
BUNDLE_PATH: ".bundle"
|
||||
BUNDLE_DISABLE_SHARED_GEMS: "true"
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
_site
|
||||
.sass-cache
|
||||
.jekyll-cache
|
||||
# Generated site
|
||||
/_site
|
||||
|
||||
# Local packages
|
||||
/.bundle/ruby/
|
||||
|
||||
# Temporary files
|
||||
.sass-cache/
|
||||
.jekyll-metadata
|
||||
vendor
|
||||
|
|
|
|||
38
404.html
38
404.html
|
|
@ -1,25 +1,23 @@
|
|||
---
|
||||
permalink: /404.html
|
||||
layout: default
|
||||
layout: page
|
||||
title: 404
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
published: true
|
||||
---
|
||||
<div class="page">
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
.container {
|
||||
margin: 10px auto;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
margin: 30px 0;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
</style>
|
||||
<h2 class="go-home">
|
||||
Error 404
|
||||
</h2>
|
||||
<h3 class="go-home">
|
||||
I'm not sure how you got here, but you should head <a href="/">home</a>.
|
||||
</h3>
|
||||
|
||||
<div class="container">
|
||||
<h1>404</h1>
|
||||
|
||||
<p><strong>Page not found :(</strong></p>
|
||||
<p>The requested page could not be found.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Adding the glitch effect -->
|
||||
<script>
|
||||
document.getElementsByTagName('body')[0].classList.add('glitch');
|
||||
</script>
|
||||
|
|
|
|||
34
Gemfile
34
Gemfile
|
|
@ -1,30 +1,10 @@
|
|||
source "https://rubygems.org"
|
||||
# Hello! This is where you manage which Jekyll version is used to run.
|
||||
# When you want to use a different version, change it below, save the
|
||||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
|
||||
#
|
||||
# bundle exec jekyll serve
|
||||
#
|
||||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
#gem "jekyll", "~> 4.2.1"
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
gem "minima", "~> 2.5"
|
||||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||
gem "github-pages", "~> 223", group: :jekyll_plugins
|
||||
# If you have any plugins, put them here!
|
||||
|
||||
gem "jekyll", "~> 3.0"
|
||||
gem "rouge", "~> 1.0"
|
||||
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-feed", "~> 0.12"
|
||||
gem "jekyll-feed"
|
||||
gem "jekyll-paginate"
|
||||
gem "jekyll-sitemap"
|
||||
end
|
||||
|
||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||
# and associated library.
|
||||
platforms :mingw, :x64_mingw, :mswin, :jruby do
|
||||
gem "tzinfo", "~> 1.2"
|
||||
gem "tzinfo-data"
|
||||
end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
|
||||
|
|
|
|||
300
Gemfile.lock
300
Gemfile.lock
|
|
@ -1,292 +1,62 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (6.0.4.4)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 0.7, < 2)
|
||||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
zeitwerk (~> 2.2, >= 2.2.2)
|
||||
addressable (2.8.0)
|
||||
public_suffix (>= 2.0.2, < 5.0)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.11.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
colorator (1.1.0)
|
||||
commonmarker (0.17.13)
|
||||
ruby-enum (~> 0.5)
|
||||
concurrent-ruby (1.1.9)
|
||||
dnsruby (1.61.9)
|
||||
simpleidn (~> 0.1)
|
||||
em-websocket (0.5.3)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0)
|
||||
ethon (0.15.0)
|
||||
ffi (>= 1.15.0)
|
||||
eventmachine (1.2.7-x64-mingw32)
|
||||
execjs (2.8.1)
|
||||
faraday (1.9.3)
|
||||
faraday-em_http (~> 1.0)
|
||||
faraday-em_synchrony (~> 1.0)
|
||||
faraday-excon (~> 1.1)
|
||||
faraday-httpclient (~> 1.0)
|
||||
faraday-multipart (~> 1.0)
|
||||
faraday-net_http (~> 1.0)
|
||||
faraday-net_http_persistent (~> 1.0)
|
||||
faraday-patron (~> 1.0)
|
||||
faraday-rack (~> 1.0)
|
||||
faraday-retry (~> 1.0)
|
||||
ruby2_keywords (>= 0.0.4)
|
||||
faraday-em_http (1.0.0)
|
||||
faraday-em_synchrony (1.0.0)
|
||||
faraday-excon (1.1.0)
|
||||
faraday-httpclient (1.0.1)
|
||||
faraday-multipart (1.0.3)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
faraday-net_http (1.0.1)
|
||||
faraday-net_http_persistent (1.2.0)
|
||||
faraday-patron (1.0.0)
|
||||
faraday-rack (1.0.0)
|
||||
faraday-retry (1.0.3)
|
||||
ffi (1.15.5-x64-mingw32)
|
||||
ffi (1.9.18)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.1)
|
||||
github-pages (223)
|
||||
github-pages-health-check (= 1.17.9)
|
||||
jekyll (= 3.9.0)
|
||||
jekyll-avatar (= 0.7.0)
|
||||
jekyll-coffeescript (= 1.1.1)
|
||||
jekyll-commonmark-ghpages (= 0.1.6)
|
||||
jekyll-default-layout (= 0.1.4)
|
||||
jekyll-feed (= 0.15.1)
|
||||
jekyll-gist (= 1.5.0)
|
||||
jekyll-github-metadata (= 2.13.0)
|
||||
jekyll-include-cache (= 0.2.1)
|
||||
jekyll-mentions (= 1.6.0)
|
||||
jekyll-optional-front-matter (= 0.3.2)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-readme-index (= 0.3.0)
|
||||
jekyll-redirect-from (= 0.16.0)
|
||||
jekyll-relative-links (= 0.6.1)
|
||||
jekyll-remote-theme (= 0.4.3)
|
||||
jekyll-sass-converter (= 1.5.2)
|
||||
jekyll-seo-tag (= 2.7.1)
|
||||
jekyll-sitemap (= 1.4.0)
|
||||
jekyll-swiss (= 1.0.0)
|
||||
jekyll-theme-architect (= 0.2.0)
|
||||
jekyll-theme-cayman (= 0.2.0)
|
||||
jekyll-theme-dinky (= 0.2.0)
|
||||
jekyll-theme-hacker (= 0.2.0)
|
||||
jekyll-theme-leap-day (= 0.2.0)
|
||||
jekyll-theme-merlot (= 0.2.0)
|
||||
jekyll-theme-midnight (= 0.2.0)
|
||||
jekyll-theme-minimal (= 0.2.0)
|
||||
jekyll-theme-modernist (= 0.2.0)
|
||||
jekyll-theme-primer (= 0.6.0)
|
||||
jekyll-theme-slate (= 0.2.0)
|
||||
jekyll-theme-tactile (= 0.2.0)
|
||||
jekyll-theme-time-machine (= 0.2.0)
|
||||
jekyll-titles-from-headings (= 0.5.3)
|
||||
jemoji (= 0.12.0)
|
||||
kramdown (= 2.3.1)
|
||||
kramdown-parser-gfm (= 1.1.0)
|
||||
liquid (= 4.0.3)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.5.1)
|
||||
nokogiri (>= 1.12.5, < 2.0)
|
||||
rouge (= 3.26.0)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.17.9)
|
||||
addressable (~> 2.3)
|
||||
dnsruby (~> 1.60)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (>= 3.0, < 5.0)
|
||||
typhoeus (~> 1.3)
|
||||
html-pipeline (2.14.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.9.0)
|
||||
jekyll (3.6.2)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (>= 1.17, < 3)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
rouge (>= 1.7, < 3)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.7.0)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-coffeescript (1.1.1)
|
||||
coffee-script (~> 2.2)
|
||||
coffee-script-source (~> 1.11.1)
|
||||
jekyll-commonmark (1.3.1)
|
||||
commonmarker (~> 0.14)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-commonmark-ghpages (0.1.6)
|
||||
commonmarker (~> 0.17.6)
|
||||
jekyll-commonmark (~> 1.2)
|
||||
rouge (>= 2.0, < 4.0)
|
||||
jekyll-default-layout (0.1.4)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed (0.15.1)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.13.0)
|
||||
jekyll (>= 3.4, < 5.0)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-include-cache (0.2.1)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-mentions (1.6.0)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-optional-front-matter (0.3.2)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-feed (0.9.2)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-readme-index (0.3.0)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-redirect-from (0.16.0)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-relative-links (0.6.1)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-remote-theme (0.4.3)
|
||||
addressable (~> 2.0)
|
||||
jekyll (>= 3.5, < 5.0)
|
||||
jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
|
||||
rubyzip (>= 1.3.0, < 3.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
jekyll-sass-converter (1.5.1)
|
||||
sass (~> 3.4)
|
||||
jekyll-seo-tag (2.7.1)
|
||||
jekyll (>= 3.8, < 5.0)
|
||||
jekyll-sitemap (1.4.0)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-swiss (1.0.0)
|
||||
jekyll-theme-architect (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-cayman (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-dinky (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-hacker (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-leap-day (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-merlot (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-midnight (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-minimal (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-modernist (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-primer (0.6.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-github-metadata (~> 2.9)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-slate (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-tactile (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-time-machine (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-titles-from-headings (0.5.3)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-watch (2.2.1)
|
||||
jekyll-sitemap (1.1.1)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-watch (1.5.1)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.12.0)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
kramdown (2.3.1)
|
||||
rexml
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.7.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
kramdown (1.16.2)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
ruby_dep (~> 1.2)
|
||||
mercenary (0.3.6)
|
||||
minima (2.5.1)
|
||||
jekyll (>= 3.5, < 5.0)
|
||||
jekyll-feed (~> 0.9)
|
||||
jekyll-seo-tag (~> 2.1)
|
||||
minitest (5.15.0)
|
||||
multipart-post (2.1.1)
|
||||
nokogiri (1.13.1-x64-mingw32)
|
||||
racc (~> 1.4)
|
||||
octokit (4.22.0)
|
||||
faraday (>= 0.9)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.2)
|
||||
pathutil (0.16.1)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (4.0.6)
|
||||
racc (1.6.0)
|
||||
rb-fsevent (0.11.0)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.26.0)
|
||||
ruby-enum (0.9.0)
|
||||
i18n
|
||||
ruby2_keywords (0.0.5)
|
||||
rubyzip (2.3.2)
|
||||
safe_yaml (1.0.5)
|
||||
sass (3.7.4)
|
||||
public_suffix (3.0.1)
|
||||
rb-fsevent (0.10.2)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
rouge (1.11.1)
|
||||
ruby_dep (1.5.0)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.5.3)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.8.2)
|
||||
addressable (>= 2.3.5)
|
||||
faraday (> 0.8, < 2.0)
|
||||
simpleidn (0.2.1)
|
||||
unf (~> 0.1.4)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (1.4.0)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (1.2.9)
|
||||
thread_safe (~> 0.1)
|
||||
tzinfo-data (1.2021.5)
|
||||
tzinfo (>= 1.0.0)
|
||||
unf (0.1.4)
|
||||
unf_ext
|
||||
unf_ext (0.0.8-x64-mingw32)
|
||||
unicode-display_width (1.8.0)
|
||||
wdm (0.1.1)
|
||||
zeitwerk (2.5.3)
|
||||
|
||||
PLATFORMS
|
||||
x64-mingw32
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages (~> 223)
|
||||
jekyll-feed (~> 0.12)
|
||||
minima (~> 2.5)
|
||||
tzinfo (~> 1.2)
|
||||
tzinfo-data
|
||||
wdm (~> 0.1.1)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed
|
||||
jekyll-paginate
|
||||
jekyll-sitemap
|
||||
rouge (~> 1.0)
|
||||
|
||||
BUNDLED WITH
|
||||
2.3.5
|
||||
1.16.0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
# dactl
|
||||
dactl is a fast, modern and configurable [Jekyll](http://jekyllrb.com/) theme with some tricks up it's sleeve. It has a live theme switcher and it's main blog layout display prominent hero images for posts with colored overlays and nice animations.
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
Though minimalistic-looking by nature, dactl is easily configurable and includes quite a lot of niceties:
|
||||
|
||||
Main features:
|
||||
* Customizable blog layout - choose how your posts will be displayed
|
||||
* Light/Dark live theme switcher
|
||||
* Inline footnotes using [Barefoot](https://github.com/philgruneich/barefoot)
|
||||
* [IcoMoon](https://icomoon.io/) custom icon set (~4kb)
|
||||
* Typography and components size set in `rem` and `em` which makes them easily scalable
|
||||
* Responsive design
|
||||
|
||||
Jekyll-specific features:
|
||||
* Pagination (default: 5 posts per page)
|
||||
* Fully compatible with Jekyll 3.x and GitHub Pages
|
||||
* SEO optimized
|
||||
* [Google Analytics](https://www.google.com/analytics/) support
|
||||
* [Disqus](https://disqus.com/) comments support
|
||||
* Syntax highlighter using [Rouge](https://github.com/jneen/rouge) with numbered code lines
|
||||
|
||||
Other features:
|
||||
* Archive page
|
||||
* About page
|
||||
* Tags functionality and tags pages
|
||||
* Link posts functionality
|
||||
|
||||
Some of the features listed above can be easily configured or disabled by you.
|
||||
|
||||
## Information about dactl
|
||||
At it's core, dactl is a forked version of [daktilo](https://github.com/kronik3r/daktilo) but it has been almost entirely rewritten from scratch.
|
||||
I have just started my journey in the world of web development, learning new things on the way.
|
||||
Looking for a way to put my newly acquired skills to test I found Jekyll and I quickly realized that it's going to be a good learning experience since I don't like building 'dummy' projects.
|
||||
I've built this theme as a way to develop my skills further.
|
||||
|
||||
You can find credits at the bottom of this Readme file.
|
||||
**All** feedback is welcome, both positive and negative.
|
||||
|
||||
## Installation
|
||||
### Running locally
|
||||
Assuming you've got Jekyll [installed](https://jekyllrb.com/docs/installation/), clone or download this repo, `cd` to wherever you've put `dactl` folder and run `jekyll -s'`
|
||||
|
||||
### Hosting on GitHub
|
||||
Fork this repo and rename it to `yourusername.github.io`... and that's it!
|
||||
Your new dactl-themed Jekyll blog should be up and running at yourusername.github.io.
|
||||
|
||||
## Usage
|
||||
### Slight warning
|
||||
dactl relies heavily on modern CSS properties such as [mix-blend-mode](http://www.w3.org/TR/compositing-1/#mix-blend-mode), [-webkit-filter](http://www.w3.org/TR/filter-effects-1/) and [css variables](https://drafts.csswg.org/css-variables/) so it may not work properly on older browsers.
|
||||
It was tested with and works fully on webkit-powered browsers - Safari, Chrome, Vivaldi.
|
||||
|
||||
### Layout configurations
|
||||
By default dactl uses blog layout which you can see below or check for yourself in the live version.
|
||||
|
||||
Main blog layout displays 5 posts. Each post has a heading contained in a medium-sized tile - with an color overlay over the background image. You need to set the image and color of the overlay in post's YAML front matter.
|
||||
|
||||
If you don't want to use images for post headings you can easily configure the layout to you needs by changing settings located in `configure.yml` file, both post and blog layout will adapt accordingly.
|
||||
|
||||
Options include:
|
||||
* Use or don't use post heading images (Blog & Post)
|
||||
* Show full post content or post excerpts (Blog)
|
||||
* Show post titles only (Blog)
|
||||
|
||||
## Additional information about some features
|
||||
### Hero images and blog layout
|
||||
Liquid 'script' which is used to append correct hero image and overlay color as set in post YAML Front matter was written by me and while it's really basic it functions properly.
|
||||
You can read more about it and see the code in `include/utils/hero.html`.
|
||||
|
||||
### Theme switcher
|
||||
Theme switcher is made in vanilla Javascript and works using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). Values (colors) specified for each variable are injected into `:root` on every page load.
|
||||
User theme choice is saved in browser's [Local Storage](https://www.w3schools.com/html/html5_webstorage.asp) and is persistent through sessions.
|
||||
|
||||
You can edit the colors of both Light and Dark themes in `themeswitcher.js` file found in `_assets/js/`.
|
||||
|
||||
### Inline Barefoot footnotes
|
||||
dactl uses [Barefoot](https://github.com/philgruneich/barefoot) plugin to create nice looking inline footnotes from those generated by [kramdown](https://kramdown.gettalong.org/), daktl's markdown processor.
|
||||
|
||||
Barefoot description (from project's page):
|
||||
>[Barefoot](https://github.com/philgruneich/barefoot) is a lightweight [Bigfoot.js](https://github.com/lemonmade/bigfoot) alternative written in vanilla Javascript to create beautiful inline footnotes.
|
||||
Barefoot grabs the common markup used for footnotes on the web, mostly generated by Markdown processors, and transform it into beautiful and meaningful footnotes.
|
||||
|
||||
### CSS
|
||||
CSS is built by via Jekyll's SASS compiler. Source partial SASS files are located in `_sass` folder, included into `main.scss`, and compile to `main.css`.
|
||||
|
||||
### Additional pages
|
||||
#### Archive page
|
||||
Archive page displays all of your posts grouped by month. Under this page's title you'll find a Searchbox which is hooked up to DuckDuckGo's `:site` search and will open the results in a new tab.
|
||||
You need to provide your blog's web address in `search_path` field found in `_config.yml` for it to work.
|
||||
#### About page
|
||||
About page displays your photo under the title (set in `config.yml`) and the content of about.md.
|
||||
#### Tags & Tags Pages
|
||||
Tags and tag pages are supported by using Jekyll's native collections functionality.
|
||||
|
||||
## Even more info
|
||||
### Rems, font-size and scaling
|
||||
dactl is built almost entirely with `rem`s (instead of pixels). `rem`s are like `em`s, but instead of building on the immediate parent's font-size, they build on the root element, `<html>`.
|
||||
|
||||
By default, dactl uses the following:
|
||||
~~~
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
~~~
|
||||
To easily scale your site's typography and components, simply customize the base font-sizes found in `_sass/variables.scss` file.
|
||||
|
||||
(Lifted from [here](https://github.com/poole/poole#rems-font-size-and-scaling))
|
||||
|
||||
## Credits
|
||||
### Resources used
|
||||
- [IcoMoon.io](https://icomoon.io/)
|
||||
- [Normalize.css](https://github.com/necolas/normalize.css) - Nicolas Gallagher
|
||||
- [Theme switcher](https://www.fdp.io/blog/2016/11/08/theming-via-css-properties/) - Fernando Paredes
|
||||
- [Barefoot](https://github.com/philgruneich/barefoot) - Philip Gruneich
|
||||
- [The Noun Project](https://thenounproject.com/) - Icon used as dactl's logo - [Artem Kovyazin](https://thenounproject.com/term/raisin/446158), icon used as 'avatar' in About [Drishya](https://thenounproject.com/term/profile/963272)
|
||||
|
||||
### Inspiration and thoughtful code-jacking
|
||||
Inspiration and bits of things listed below are present inside dactl's code:
|
||||
- [Daktilo](https://github.com/kronik3r/daktilo) - dactl is based on Daktilo and inherits it's one-column layout.
|
||||
- [Hydejack](https://github.com/qwtel/hydejack/) - I've learned a lot about Jekyll when I took apart [@qwtel](https://github.com/qwtel/)'s excellent fork of [Hyde](https://github.com/poole/hyde) theme. I embraced his more partials = everything is easier to edit policy. Hydejack theme gave me an idea on how to create hero images liquid scripting, loading google fonts and using rem's/em's and more.
|
||||
- [Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes) - This guy makes awesome themes and writes a lot about Jekyll and it's more obscure use cases on his blog, [Made Mistakes](https://mademistakes.com). Looking through his theme's code - Minimal Mistakes in particular - gave me lot of information about how to build a robust theme and how to make it configurable within `_config.yml`
|
||||
- [Trophy](https://github.com/thomasvaeth/trophy-jekyll) - Link border slide animation SASS mixin which I slightly modified to be able to easily change the direction of the animation.
|
||||
- Various blog posts about Jekyll and [Stackoverflow](https://www.stackoverflow.com) posts with useful [Liquid](https://github.com/Shopify/liquid) snippets.
|
||||
|
||||
## License
|
||||
All parts of dactl Jekyll theme are free to use and abuse under the open-source [MIT license](http://opensource.org/licenses/mit-license.php).
|
||||
|
||||
## TO DO
|
||||
- [ ] Inline critical `.css` in `<head>` for faster load times
|
||||
- [ ] Fix theme-switcher - sometimes it does not inject all of the colors properly on first page load and a refresh, fixes itself after switching the theme back and forth.
|
||||
163
_config.yml
163
_config.yml
|
|
@ -1,55 +1,118 @@
|
|||
# Welcome to Jekyll!
|
||||
#
|
||||
# This config file is meant for settings that affect your whole blog, values
|
||||
# which you are expected to set up once and rarely edit after that. If you find
|
||||
# yourself editing this file very often, consider using Jekyll's data files
|
||||
# feature for the data you need to update frequently.
|
||||
#
|
||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
|
||||
#
|
||||
# If you need help with YAML syntax, here are some quick references for you:
|
||||
# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
|
||||
# https://learnxinyminutes.com/docs/yaml/
|
||||
#
|
||||
# Site settings
|
||||
# These are used to personalize your new site. If you look in the HTML files,
|
||||
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
|
||||
# You can create any custom variable you would like, and they will be accessible
|
||||
# in the templates via {{ site.myvariable }}.
|
||||
# Base blog settings
|
||||
#baseurl : "/dactl/" # the subpath of your site, # e.g. /blog/
|
||||
# set to '' in case of hosting on GitHub
|
||||
url : "https://minetestblog.github.io" # the base hostname & protocol for your site
|
||||
# `http://<username>.github.io` - for GitHub
|
||||
|
||||
title: Minetest Blog
|
||||
email: mistere123.coding@gmail.com
|
||||
description: >- # this means to ignore newlines until "baseurl:"
|
||||
A Periodic development blog for minetest. See what's new in minetest!
|
||||
domain: my-site.github.io # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
|
||||
url: https://my-site.github.io # the base hostname and protocol for your site, e.g. http://example.com
|
||||
#baseurl: /minetestblog.github.io/ # place folder name if the site is served in a subfolder
|
||||
blog:
|
||||
title : Minetest Blog
|
||||
description : >
|
||||
A Periodic development blog for minetest. See what's new in minetest!
|
||||
|
||||
#twitter_username: jekyllrb
|
||||
github_username: minetest
|
||||
# Layout configuration
|
||||
logo_path : "assets/img/minetesticon.png" # path to logo file
|
||||
search_path : # "minetestblog.github.io"
|
||||
# needed for searchbox in archive page
|
||||
hero_layout : true # turn on hero layout for blog and posts
|
||||
hero_placeholder : "assets/img/default_hero.png" # placeholder for hero image
|
||||
excerpts : true # show excerpts instead of full post content on blog page
|
||||
inline_footnotes : true # enable/disable barefoot inline footnotes
|
||||
titles_only : false # show post titles only on main blog page
|
||||
|
||||
# Build settings
|
||||
theme: slate
|
||||
# Fonts
|
||||
font : '"Rubik", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif'
|
||||
load_google_fonts : 'Rubik:400,400italic,700,700italic'
|
||||
|
||||
|
||||
# Author info
|
||||
author:
|
||||
fullname : Minetest
|
||||
rss : true # generate RSS feed and show it's icon in header
|
||||
mail : mistere123.coding@gmail.com # change to your e-mail address
|
||||
twitter : #twitter-user-name
|
||||
github : minetest
|
||||
youtube : #youtube-user-name
|
||||
stackoverflow : #stackoverflow-user-name
|
||||
disqus : #dactl # your disqus site name
|
||||
google_analytics : # 'UA-XXXXXXXX-X'
|
||||
photo : #"uploads/me2.png"
|
||||
photo2x : #"uploads/me.png"
|
||||
|
||||
|
||||
|
||||
## !!
|
||||
## Advanced blog settings
|
||||
## You should not change anything here unless you know what you are doing
|
||||
|
||||
# Gems
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
- jekyll-paginate
|
||||
- jekyll-sitemap
|
||||
|
||||
# Exclude from processing.
|
||||
# The following items will not be processed, by default.
|
||||
# Any item listed under the `exclude:` key here will be automatically added to
|
||||
# the internal "default list".
|
||||
#
|
||||
# Excluded items can be processed by explicitly listing the directories or
|
||||
# their entries' file path in the `include:` list.
|
||||
#
|
||||
# exclude:
|
||||
# - .sass-cache/
|
||||
# - .jekyll-cache/
|
||||
# - gemfiles/
|
||||
# - Gemfile
|
||||
# - Gemfile.lock
|
||||
# - node_modules/
|
||||
# - vendor/bundle/
|
||||
# - vendor/cache/
|
||||
# - vendor/gems/
|
||||
# - vendor/ruby/
|
||||
# Permalinks
|
||||
permalink : posts/:slug
|
||||
|
||||
# Posts
|
||||
excerpt_separator : <!–-break-–>
|
||||
|
||||
# Pagination
|
||||
paginate : 5
|
||||
paginate_path : '/page-:num/'
|
||||
|
||||
# Tags
|
||||
collections:
|
||||
my_tags:
|
||||
output: true
|
||||
permalink: /tag/:slug/
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
type: my_tags
|
||||
values:
|
||||
layout: blog-by-tag
|
||||
|
||||
# Handling Reading
|
||||
exclude : ["README.md", "README.html",YYYY-MM-DD-sample_post.markdown,YYYY-MM-DD-next_post.markdown]
|
||||
|
||||
# https://github.com/jekyll/jekyll/issues/4619
|
||||
# Markdown and highlighter settings
|
||||
markdown: kramdown
|
||||
# !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change
|
||||
# Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44)
|
||||
highlighter: rouge
|
||||
|
||||
# More › http://kramdown.gettalong.org/quickref.html
|
||||
# Options › http://kramdown.gettalong.org/options.html
|
||||
kramdown:
|
||||
input: GFM
|
||||
# https://github.com/jekyll/jekyll/pull/4090
|
||||
syntax_highlighter: rouge
|
||||
|
||||
# Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
|
||||
# span, block element options fall back to global
|
||||
syntax_highlighter_opts:
|
||||
# Rouge Options › https://github.com/jneen/rouge#full-options
|
||||
# css_class: 'highlight'
|
||||
#line_numbers: true # bad idea, spans don't need linenos and would inherit this option
|
||||
span:
|
||||
line_numbers: false
|
||||
block:
|
||||
line_numbers: true
|
||||
start_line: 1
|
||||
|
||||
# Sass settings
|
||||
sass:
|
||||
sass_dir : _sass
|
||||
style : compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
|
||||
|
||||
# HTML Compression
|
||||
# - http://jch.penibelst.de/
|
||||
compress_html:
|
||||
clippings : all
|
||||
endings : all
|
||||
comments : ["<!-- ", " -->"]
|
||||
blanklines : true
|
||||
profile : false
|
||||
ignore:
|
||||
envs : [local]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
{% assign post = include.post %}
|
||||
|
||||
<article class="blog">
|
||||
|
||||
|
||||
{% if site.blog.hero_layout == true %}
|
||||
{% include utils/hero.html %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Post title (& hero image) container -->
|
||||
<div class="
|
||||
{% if site.blog.hero_layout == true %}
|
||||
post-title-container
|
||||
{% if post.hero %}
|
||||
{{ post.url | remove: '/posts/' }} {{ post.url | remove: '/posts/' }}-container hero-hov
|
||||
{% endif %}
|
||||
{% else %}
|
||||
post-title-container-nohero
|
||||
{% endif %}
|
||||
">
|
||||
|
||||
<!-- Post title -->
|
||||
{% if site.blog.hero_layout == true %}
|
||||
<div class="heading-container {% if post.hero %}hero-heading hero-heading-blog{% endif %}">
|
||||
{% endif %}
|
||||
<h1>
|
||||
{% if post.link != nil %}
|
||||
<a href="{{ post.link }}" title="{{ post.title }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a> →
|
||||
{% else %}
|
||||
<a href="{{ post.url | relative_url }}" title="{{ post.title }}">{{ post.title }}</a>
|
||||
{% endif %}
|
||||
</h1>
|
||||
<!-- Post meta -->
|
||||
<div class="
|
||||
{% if site.blog.hero_layout == true %}
|
||||
post-meta
|
||||
{% else %}
|
||||
post-meta-nohero
|
||||
{% endif %}
|
||||
">
|
||||
|
||||
<span>{{ post.date | date: "%d/%m/%Y" }}</span>
|
||||
|
||||
{% if site.blog.hero_layout == false %}
|
||||
<span class="post-meta-link-nohero"><a href="{{ post.url | prepend:site.baseurl }}">▪</a></span>
|
||||
{% endif %}
|
||||
|
||||
<span>
|
||||
{% for tag in post.tags %}
|
||||
<a href="{{ 'tag/' | relative_url }}{{ tag }}">#{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if site.blog.hero_layout == true %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% if site.blog.titles_only == false %}
|
||||
|
||||
{% if site.blog.excerpts == true %}
|
||||
{{ post.excerpt }}
|
||||
<div class="readmore">
|
||||
<a href="{{ post.url | prepend:site.baseurl }}" role="button">Read more</a>
|
||||
<div>
|
||||
|
||||
{% else if site.blog.excerpts == false %}
|
||||
{{ post.content | remove: '<!–-break-–>' }}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
</article>
|
||||
<!-- Last post does not need a hr -->
|
||||
{% if forloop.last == false %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% if site.author.disqus %}
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES * * */
|
||||
var disqus_shortname = '{{ site.author.disqus }}';
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{% if site.author.google_analytics %}
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '{{ site.author.google_analytics }}', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!-- load theme switcher and barefoot footnotes -->
|
||||
|
||||
<script type="text/javascript" src="{{ "assets/js/theme.js" | relative_url }}"></script>
|
||||
{% if site.blog.inline_footnotes == true %}
|
||||
<script type="text/javascript" src="{{ "assets/js/barefoot.js" | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<footer>
|
||||
<span>{{ site.blog.description }}</span>
|
||||
<span>written by {{ site.author.fullname }}</span>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>{% if page.title == "Blog" %}{{ site.blog.title }} <!-- · --> {{ site.tagline }}{% else %}{% if page.tag %}{{ site.data.tags[page.tag].name }}{% else %}{{ page.title }}{% endif %} ▪ {{ site.blog.title }}{% endif %}</title>
|
||||
<!--{% if page.description %}
|
||||
{% capture desc %}{{ page.description }}{:.message}{% endcapture %}
|
||||
<meta name="description" content="{{ desc | markdownify | strip_html | truncatewords: 50 }}">
|
||||
{% else %}{% if page.excerpt %}
|
||||
<meta name="description" content="{{ page.excerpt | strip_html | truncatewords: 50 }}">
|
||||
{% endif %}{% endif %}-->
|
||||
|
||||
|
||||
<meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.blog.description }}{% endif %}">
|
||||
{% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
|
||||
{% if page.title %} {% assign title = page.title ~ ' - ' ~ page.subtitle %} {% else %} {% assign title = site.blog.title %} {% endif %}
|
||||
{% if page.description %} {% assign description = page.description %} {% else %} {% assign description = site.blog.description %} {% endif %}
|
||||
{% if page.keywords %} {% assign keywords = page.keywords %} {% else %} {% assign keywords = site.keywords %} {% endif %}
|
||||
{% if page.cover %} {% assign cover = page.cover %} {% else %} {% assign cover = site.cover %} {% endif %}
|
||||
|
||||
<!-- Twitter Cards -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="{{ title }}" />
|
||||
<meta name="twitter:description" content="{{ description }}" />
|
||||
<meta name="twitter:image" content="{{ site.url }}{{ cover }}" />
|
||||
|
||||
<!-- Google plus -->
|
||||
<meta name="author" content="{{ site.author.googleplus }}">
|
||||
<link rel="author" href="{{ site.author.googleplus }}">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:locale" content="{{ site.lang }}">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:title" content="{{ title }}">
|
||||
<meta property="og:description" content="{{ description }}">
|
||||
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
<meta property="og:site_name" content="{{ site.blog.title }}">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="{{ "assets/vendor/normalize-css/normalize.css" | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ "assets/css/main.css" | relative_url }}">
|
||||
|
||||
{% if site.blog.load_google_fonts %}
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ site.blog.load_google_fonts }}">
|
||||
<style>
|
||||
html {
|
||||
font-family: {{ site.blog.font }};
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
{% if site.blog.inline_footnotes == true %}
|
||||
<link rel="stylesheet" href="{{ "assets/css/bf.css" | relative_url }}">
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<header>
|
||||
<div class="menu">
|
||||
<div class="logo">
|
||||
|
||||
<a href="{{ '/' | prepend: site.baseurl }}">{{ site.blog.title }}</a>
|
||||
<object type="image/svg+xml" data="{{ site.blog.logo_path | relative_url }}" class="logosvg">Your browser does not support svg images</object>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="{{ '/about' | prepend: site.baseurl }}">about</a></li>
|
||||
<li><a href="{{ '/archive' | prepend: site.baseurl }}">archive</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="social">
|
||||
<ul>
|
||||
{% if site.author.youtube %}
|
||||
<li>
|
||||
<a href="https://youtube.com/{{ site.author.youtube }}" target="_blank" class="smaller">
|
||||
<span class="icon-youtube"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if site.author.stackoverflow %}
|
||||
<li>
|
||||
<a href="https://stackoverflow.com/{{ site.author.stackoverflow }}" target="_blank" class="smaller">
|
||||
<span class="icon-stackoverflow"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if site.author.twitter %}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{ site.author.twitter }}" target="_blank" class="smaller">
|
||||
<span class="icon-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if site.author.github %}
|
||||
<li>
|
||||
<a href="https://github.com/{{ site.author.github }}" target="_blank" class="smaller">
|
||||
<span class="icon-github"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if site.author.mail %}
|
||||
<li>
|
||||
<a href="mailto:{{ site.author.mail }}" target="_blank">
|
||||
<span class="icon-mail_outline"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if site.author.rss == true %}
|
||||
<li>
|
||||
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" target="_blank">
|
||||
<span class="icon-rss_feed"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<a href="#" onclick="switchTheme()" title="Switch theme?">
|
||||
<span class="icon-invert_colors" id="theme-switcher"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<li>
|
||||
<a href="{{ post.url | prepend: site.baseurl }}">
|
||||
<span>{{ post.title }}</span>
|
||||
<small>{{ post.date | date: "%d/%m" }}</small>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="searchbox">
|
||||
<form method="get" id="searchie" action="http://duckduckgo.com/">
|
||||
<input type="hidden" name="sites" value="{{ site.blog.search_path }}"/>
|
||||
<input type="hidden" name="k8" value="#444444"/>
|
||||
<input type="hidden" name="k9" value="#D51920"/>
|
||||
<input type="hidden" name="kt" value="h"/>
|
||||
<span class="icon-search"></span>
|
||||
<input type="search" name="q" maxlength="255" placeholder="Search…"/>
|
||||
<!-- <input type="button"/> -->
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<div class="page-title-container">
|
||||
<div class="heading-container">
|
||||
<h1>{{ include.title }}</h1>
|
||||
<span>{{ include.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{% assign post = include.post %}
|
||||
|
||||
<article class="post">
|
||||
|
||||
{% if site.blog.hero_layout == true %}
|
||||
{% include utils/hero.html %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Post title (& hero image) container -->
|
||||
<div class="post-title-container
|
||||
{% if site.blog.hero_layout == true %}
|
||||
{{ post.url | remove: '/posts/' }} {{ post.url | remove: '/posts/' }}-bleed-container bleed-hero-container
|
||||
{% else %}
|
||||
no-hero-margin
|
||||
{% endif %}">
|
||||
<!--Post hero image source-->
|
||||
{% if site.blog.hero_layout == true %}
|
||||
{% if post.source-img %}
|
||||
<div class="post-source-img">
|
||||
<span class="source-text">source: </span>
|
||||
<span class="source"><a href="{{ post.source-img }}">{{ post.source-img }}</a></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<!-- Post title -->
|
||||
<div class="heading-container {% if site.blog.hero_layout == true %}hero-heading hero-heading-post{% endif %}">
|
||||
<h1>
|
||||
{% if post.link != nil %}
|
||||
<a href="{{ post.link }}" title="{{ post.title }}" target="_blank">
|
||||
{% endif %}
|
||||
{{ post.title }}
|
||||
{% if post.link != nil %}
|
||||
→ </a>
|
||||
{% endif %}
|
||||
</h1>
|
||||
<!-- Post meta -->
|
||||
<div class="post-meta">
|
||||
<span>{{ post.date | date: "%d/%m/%Y" }}</span>
|
||||
<!-- {% include utils/date_custom.html date = post.date %} -->
|
||||
<span>
|
||||
{% for tag in post.tags %}
|
||||
<a href="{{ 'tag/' | relative_url }}{{ tag }}">#{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post content -->
|
||||
{{ post.content | remove: '<!–-break-–>' }}
|
||||
</article>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
<nav class="pagination" role="navigation">
|
||||
<hr/>
|
||||
<ul>
|
||||
<li class="pagination-item-prev" >
|
||||
{% if paginator.previous_page %}
|
||||
{% if paginator.page == 2 %}
|
||||
<a rel="prev" href="{{ site.baseurl }}/">« Previous</a>
|
||||
{% else %}
|
||||
<a rel="prev" href="{{ site.baseurl }}/page-{{paginator.previous_page}}/">« Previous</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span>« Previous</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
|
||||
<li class="pagination-item-next" >
|
||||
{% if paginator.next_page %}
|
||||
<a rel="next" href="{{ site.baseurl }}/page-{{paginator.next_page}}/">Next »</a>
|
||||
{% else %}
|
||||
<span>Next »</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<hr/>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<aside class="related">
|
||||
|
||||
<h2>Related posts</h2>
|
||||
<ul class="related-posts">
|
||||
|
||||
{% assign maxRelated = 4 %}
|
||||
{% assign minCommonTags = 2 %}
|
||||
{% assign maxRelatedCounter = 0 %}
|
||||
|
||||
{% for post in site.posts %}
|
||||
|
||||
{% assign sameTagCount = 0 %}
|
||||
{% assign commonTags = '' %}
|
||||
|
||||
{% for tag in post.tags %}
|
||||
{% if post.url != page.url %}
|
||||
{% if page.tags contains tag %}
|
||||
{% assign sameTagCount = sameTagCount | plus: 1 %}
|
||||
{% capture tagmarkup %}
|
||||
<span class="label label-default">#{{ tag }}</span>
|
||||
{% endcapture %}
|
||||
{% assign commonTags = commonTags | append: tagmarkup %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if sameTagCount >= minCommonTags %}
|
||||
|
||||
{% include page/post-list-item.html %}
|
||||
|
||||
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
|
||||
{% if maxRelatedCounter >= maxRelated %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</aside>
|
||||
|
||||
{% comment %}
|
||||
{{ commonTags }}
|
||||
{% endcomment %}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{% if include.date %}
|
||||
{% assign processed_date = include.date %}
|
||||
{% else if page.date %}
|
||||
{% assign processed_date = page.date %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %}-------- Test if we have a date to process --------{% endcomment %}
|
||||
{% if processed_date %}
|
||||
|
||||
{% assign month = "styczeń,luty,marzec,kwiecień,maj,czerwiec,lipiec,sierpień,wrzesień,październik,listopad,grudzień" | split: "," %}
|
||||
|
||||
{% comment %}------ Note : sunday is the first day in this array -------{% endcomment %}
|
||||
{% assign day = "poniedziałek,wtorek,środa,czwartek,piątek,sobota,niedziela" | split: "," %}
|
||||
|
||||
{% assign month_index = processed_date | date: "%m" | minus: 1 %}
|
||||
|
||||
{%comment%}----------------------------------------------
|
||||
Here **minus: 0** is a trick to convert day_index from string to integer and then use it as an array index.
|
||||
----------------------------------------------{%endcomment%}
|
||||
{% assign day_index = processed_date | date: "%w" | minus: 0 %}
|
||||
|
||||
{%comment%}-------- Output the date without 0 in front of 07 08 etc ----------{%endcomment%}
|
||||
{{ day[day_index] }}, {{ processed_date | date: "%d" | minus: 0 }} {{ month[month_index] }} {{ processed_date | date: "%Y" }}
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{% if include.date %}
|
||||
{% assign processed_date = include.date %}
|
||||
{% else if page.date %}
|
||||
{% assign processed_date = page.date %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %}-------- Test if we have a date to process --------{% endcomment %}
|
||||
{% if processed_date %}
|
||||
|
||||
{% assign month = "January,February,March,April,May,June,July,August,September,October,November,December" | split: "," %}
|
||||
|
||||
{% assign month_index = processed_date | date: "%m" | minus: 1 %}
|
||||
|
||||
{%comment%}----------------------------------------------
|
||||
Here **minus: 0** is a trick to convert day_index from string to integer and then use it as an array index.
|
||||
----------------------------------------------{%endcomment%}
|
||||
{% assign day_index = processed_date | date: "%w" | minus: 0 %}
|
||||
|
||||
{%comment%}-------- Output the date ----------{%endcomment%}
|
||||
{{ month[month_index] }} {{ processed_date | date: "%Y" }}
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
{% comment %}
|
||||
|
||||
Jekyll needs to process this file in order to append a correct image and add classes to post heading containers.
|
||||
These classes get injected just before corresponding posts and are named after post-titles.
|
||||
|
||||
This solution relies on background-image, it's easier to make the background-image stretch to fill the container.
|
||||
|
||||
It also needs both :before and :after pseudoclasses to work, that's the only way to add webkit-filter and mix-blend-mode properties which only affect the background-image and not other elements in that div.
|
||||
* :before - sets the background image to one set in post and adds a webkit-filter to it
|
||||
* :after - adds an colored overlay on the image which you can also specify when creating post.
|
||||
|
||||
|
||||
{% comment %}
|
||||
{{ hero | prepend: site.baseurl }}'
|
||||
{% endcomment %}
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
{% if post.hero != nil %}
|
||||
{% assign hero = post.hero %}
|
||||
{% else %}
|
||||
{% assign hero = site.hero.placeholder %}
|
||||
{% endif %}
|
||||
|
||||
{% if post.overlay != nil %}
|
||||
|
||||
{% if post.overlay == "red" %}{% assign overlay = "rgba(255,0,100," %}{% endif %}
|
||||
{% if post.overlay == "blue" %}{% assign overlay = "rgba(0,100,255," %}{% endif %}
|
||||
{% if post.overlay == "green" %}{% assign overlay = "rgba(100,255,0," %}{% endif %}
|
||||
{% if post.overlay == "purple" %}{% assign overlay = "rgba(100,0,255," %}{% endif %}
|
||||
{% if post.overlay == "orange" %}{% assign overlay = "rgba(255,100,0," %}{% endif %}
|
||||
|
||||
{% else %}
|
||||
{% assign overlay = "rgba(0,0,0,.8)" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign opacity = "0.8)" %}
|
||||
|
||||
|
||||
<style>
|
||||
.{{ post.url | remove: '/posts/' }} {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.{{ post.url | remove: '/posts/' }}::before {
|
||||
background-image: url('{{ hero }}');
|
||||
background-size: cover;
|
||||
-webkit-filter: grayscale(1) brightness(0.5) contrast(0.5);
|
||||
|
||||
content:'';
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
.{{ post.url | remove: '/posts/' }}::after {
|
||||
content:'';
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
background-color: {{ overlay }}{{ opacity }};
|
||||
|
||||
/*mix-blend-mode: darken;
|
||||
mix-blend-mode: color-burn;
|
||||
mix-blend-mode: hard-light;*/
|
||||
mix-blend-mode: overlay;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.{{ post.url | remove: '/posts/' }}-container,
|
||||
.{{ post.url | remove: '/posts/' }}-container::before,
|
||||
.{{ post.url | remove: '/posts/' }}-container::after {
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.{{ post.url | remove: '/posts/' }}-bleed-container,
|
||||
.{{ post.url | remove: '/posts/' }}-bleed-container::before,
|
||||
.{{ post.url | remove: '/posts/' }}-bleed-container::after {
|
||||
height: 35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.{{ post.url | remove: '/posts/' }}-container,
|
||||
.{{ post.url | remove: '/posts/' }}-container::before,
|
||||
.{{ post.url | remove: '/posts/' }}-container::after{
|
||||
height: 20rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="tag-box">
|
||||
<hr/>
|
||||
<span>Check out other tags:</span>
|
||||
<ul>
|
||||
{% assign tags = site.tags | sort %}
|
||||
{% for tag in tags %}
|
||||
<li>
|
||||
<a href="/tag/{{ tag | first | slugify }}/">#{{ tag[0] }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
||||
{% comment %}
|
||||
{{ tag[0] | replace:'-', ' ' }} ({{ tag | last | size }})
|
||||
{% endcomment %}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
{% capture page_subtitle %}
|
||||
{% if page.description %}
|
||||
{% capture desc %}{{ page.description }}{% endcapture %}
|
||||
{{ desc | markdownify }}
|
||||
{% else %}
|
||||
Articles tagged with <strong>‘#{{ page.name }}’</strong>
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include page/title.html title=page.name subtitle=page_subtitle %}
|
||||
|
||||
{% if site.tags[page.slug] %}
|
||||
{% for post in site.tags[page.slug] %}
|
||||
|
||||
{% assign currentdate = post.date | date: "%Y/%m" %}
|
||||
{% if currentdate != date %}
|
||||
{% unless forloop.first %}
|
||||
</ul>
|
||||
{% endunless %}
|
||||
<h2 id="y{{post.date | date: "%Y/%m"}}">{% include utils/date_custom_short.html date = post.date %}</h2>
|
||||
<ul class="related-posts">
|
||||
{% assign date = currentdate %}
|
||||
{% endif %}
|
||||
|
||||
<li>
|
||||
<a href="{{ post.url | prepend: site.baseurl }}">
|
||||
<span>{{ post.title }}</span>
|
||||
<small>{{ post.date | date: "%d/%m" }}</small>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if forloop.last %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
<p>There are no posts in this tag.</p>
|
||||
{% endif %}
|
||||
|
||||
{% include utils/tag-box.html %}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
layout: default
|
||||
title: "Blog"
|
||||
---
|
||||
|
||||
{% for post in paginator.posts %}
|
||||
|
||||
{% include blog.html %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% include post/pagination.html %}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
# Jekyll layout that compresses HTML
|
||||
# v3.0.2
|
||||
# http://jch.penibelst.de/
|
||||
# © 2014–2015 Anatol Broder
|
||||
# MIT License
|
||||
---
|
||||
|
||||
{% capture _LINE_FEED %}
|
||||
{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: compress
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% include main/head.html %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper" id="blep">
|
||||
{% include main/header.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include main/footer.html %}
|
||||
</div>
|
||||
|
||||
{% include externals/scripting.html %}
|
||||
{% include externals/google_analytics.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
{% include post.html post=page %}
|
||||
|
||||
{% if site.author.disqus %}
|
||||
{% include externals/disqus.html %}
|
||||
{% endif %}
|
||||
|
||||
{% include post/related.html %}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
slug: dactl
|
||||
name: dactl
|
||||
description: >
|
||||
This tag has the description filled in - check it out `_my_tags/dactyl.md`
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
slug: howto
|
||||
name: How to
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
slug: jekyll
|
||||
name: Jekyll
|
||||
---
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Welcome to the new Minetest Blog"
|
||||
date: 2022-01-22 14:39:05 -0500
|
||||
categories: Blog
|
||||
title: Welcome to the new Minetest Blog
|
||||
tags:
|
||||
- Blog Status
|
||||
description: >
|
||||
A new way to share your work.
|
||||
hero: /assests/img/default_hero.img
|
||||
overlay: grey
|
||||
published: true
|
||||
---
|
||||
# Table of contents
|
||||
* [Briefing](#overview)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,321 @@
|
|||
/* Source: http://codepen.io/bulby97/pen/fcvay */
|
||||
|
||||
.glitch {
|
||||
position: relative;
|
||||
animation: glitch 2s steps(100) infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
1% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
2% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
3% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
4% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
5% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
6% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
7% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
8% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
9% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
10% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
11% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
12% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
13% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
14% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
15% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
16% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
17% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
18% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
19% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
20% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
21% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
22% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
23% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
24% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
25% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
26% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
27% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
28% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
29% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
30% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
31% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
32% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
33% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
34% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
35% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
36% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
37% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
38% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
39% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
40% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
41% {
|
||||
text-shadow: 50px 0 0 blue, -50px 0 0 lime;
|
||||
}
|
||||
42% {
|
||||
text-shadow: 0 0 0 blue, 0 0 0 lime;
|
||||
}
|
||||
43% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
44% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
45% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
46% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
47% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
48% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
49% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
50% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
51% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
52% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
53% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
54% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
55% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
56% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
57% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
58% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
59% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
60% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
61% {
|
||||
text-shadow: 30px 0 0 red, -30px 0 0 lime;
|
||||
}
|
||||
62% {
|
||||
text-shadow: 0 0 0 red, 0 0 0 lime;
|
||||
}
|
||||
63% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
64% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
65% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
66% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
67% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
68% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
69% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
70% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
71% {
|
||||
text-shadow: 70px 0 0 red, -70px 0 0 blue;
|
||||
}
|
||||
72% {
|
||||
text-shadow: 0 0 0 red, 0 0 0 blue;
|
||||
}
|
||||
73% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
74% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
75% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
76% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
77% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
78% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
79% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
80% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
81% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
82% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
83% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
84% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
85% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
86% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
87% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
88% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
89% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
90% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
91% {
|
||||
text-shadow: 60px 0 0 lime, -60px 0 0 blue;
|
||||
}
|
||||
92% {
|
||||
text-shadow: 0 0 0 lime, 0 0 0 blue;
|
||||
}
|
||||
92% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
93% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
94% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
95% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
96% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
97% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
98% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
99% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
100% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Custom */
|
||||
.go-home {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
// Articles / posts
|
||||
//-------------------------------
|
||||
|
||||
article {
|
||||
&.blog {
|
||||
margin-bottom: 2em;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 6em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.post {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.lead {
|
||||
font-size: $lead-font-size;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: .09em solid var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
// resets for lists inside articles
|
||||
li ul { // reset which allows <ul>/<ol> nesting
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li+li { // aligns them nicely
|
||||
margin-top: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Bleed image class
|
||||
.oversize {
|
||||
margin: 2.5rem 0 2.5rem -15%;
|
||||
max-width: 130%;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
.oversize {
|
||||
margin: inherit;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
// Barefoot footnotes
|
||||
//-------------------------------
|
||||
|
||||
.footnote-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.footnote-backdrop {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footnote-button {
|
||||
// background: rgba(110, 110, 110, .2);
|
||||
background: var(--code-bg-color);
|
||||
box-shadow: 0 1px 1px var(--shadow-color);
|
||||
border: 0;
|
||||
border-radius: .475em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
height: .95em;
|
||||
line-height: 0;
|
||||
margin: .2em .2em 0 .2em;
|
||||
padding: .35em;
|
||||
position: relative;
|
||||
top: -.2em;
|
||||
transition-duration: .25s;
|
||||
transition-property: background;
|
||||
/* vertical-align: super; */
|
||||
vertical-align: middle;
|
||||
width: 1.5em;
|
||||
z-index: 5;
|
||||
|
||||
&:after {
|
||||
font-family: 'icomoon';
|
||||
content: "\e5d3";
|
||||
/* numbered footnotes
|
||||
content: attr(data-fn-number); */
|
||||
// color: rgba(110, 110, 110, .5);
|
||||
color: var(--text-color-light);
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: color .25s ease;
|
||||
}
|
||||
|
||||
/* fix focus */
|
||||
&:focus{
|
||||
outline: none
|
||||
}
|
||||
&:hover {
|
||||
// background: rgba(110, 110, 110, .5);
|
||||
background: var(--table-header-color);
|
||||
outline: none;
|
||||
&:after {
|
||||
color: var(--text-color);
|
||||
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
// background: rgba(110, 110, 110, 1);
|
||||
background: var(--table-border-color);
|
||||
transition-delay: .1s;
|
||||
&:after {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bf-footnote {
|
||||
background: var(--code-bg-color);
|
||||
// border: 1px solid var(--code-border);
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
/* border-radius: .25em; */
|
||||
left: 0;
|
||||
margin: $magic 0;
|
||||
max-width: 90vw;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 50% 0;
|
||||
transition-duration: .25s;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease;
|
||||
z-index: 10;
|
||||
|
||||
&.footnote-is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.footnote-is-top {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-wrapper {
|
||||
background: inherit;
|
||||
border-radius: .25em;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 22em;
|
||||
z-index: 14;
|
||||
/* nie dziala ??*/
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-tooltip {
|
||||
background: inherit;
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
// border: 1px solid var(--code-border);
|
||||
height: 1.3em;
|
||||
position: absolute;
|
||||
top: -.49em;
|
||||
transform: rotate(45deg);
|
||||
width: 1.3em;
|
||||
z-index: 12;
|
||||
|
||||
.footnote-is-top & {
|
||||
bottom: -.49em;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-content {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
line-height: $magic - .2em;
|
||||
max-height: 15em;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
outline: none;
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
/* font-size for footnote content*/
|
||||
p {
|
||||
font-size: $footnote-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
// Base
|
||||
//-------------------------------
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::selection {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
.wrapper {
|
||||
max-width: 48rem;
|
||||
margin: 4rem auto 4rem auto;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
body {
|
||||
font-size: $mobile-font-size;
|
||||
}
|
||||
.wrapper {
|
||||
width: 90%;
|
||||
margin: 3rem auto 2rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Links and paragraphs
|
||||
//-------------------------------
|
||||
|
||||
a, .a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
border-bottom: 0.18rem solid transparent;
|
||||
transition: border 0.15s;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.15em solid;
|
||||
}
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
//-------------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: $base-font-weight-bold;
|
||||
line-height: 1.1;
|
||||
color: var(--text-color);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $base-font-weight-bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
abbr {
|
||||
font-size: 85%;
|
||||
font-weight: $base-font-weight-bold;
|
||||
color: var(--text-color);
|
||||
text-transform: uppercase;
|
||||
|
||||
&[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted var(--text-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
// Lists, blockquotes
|
||||
//-------------------------------
|
||||
|
||||
ul, ol, dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// HR, IMG
|
||||
//-------------------------------
|
||||
|
||||
hr {
|
||||
margin-bottom: 4em;
|
||||
max-width: 30%;
|
||||
border: 0.1em solid var(--shadow-color);
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 2.5rem auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
//-------------------------------
|
||||
// Blockquotes
|
||||
//-------------------------------
|
||||
|
||||
blockquote {
|
||||
padding: 0 0 4px 15px;
|
||||
margin: 0 0 2rem -1rem;
|
||||
font-size: $base-font-size;
|
||||
font-weight: $base-font-weight;
|
||||
font-style: italic;
|
||||
line-height: $base-line-height;
|
||||
color: var(--text-color-light);
|
||||
border-left: 3px solid var(--text-color-light);
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
blockquote {
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
// Code
|
||||
//-------------------------------
|
||||
// Inline and block-level code snippets. Includes tweaks to syntax highlighted
|
||||
// snippets from Rouge and Gist embeds.
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-family: $serif;
|
||||
}
|
||||
|
||||
// small code thingies
|
||||
code {
|
||||
padding: .25em .5em;
|
||||
font-size: .85em;
|
||||
// Could be mistaken for a link if the user choses a similar link-color, so better no colored inline code.
|
||||
// color: $code-color;
|
||||
background-color: var(--code-bg-color);
|
||||
// No border radius to prevent repaint on code scroll
|
||||
// border-radius: 3px;
|
||||
}
|
||||
|
||||
code.highlighter-rouge {
|
||||
box-shadow: 0 1px 1px var(--shadow-color);
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: .75em;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
figure, .figure {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
|
||||
> *:first-child {
|
||||
padding: 1rem;
|
||||
background: var(--code-bg-color);
|
||||
}
|
||||
|
||||
> figcaption, > .figcaption {
|
||||
font-size: smaller;
|
||||
color: #9a9a9a;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
//http://www.minh.io/blog/2015/06/28/jekyll-line-numbers/
|
||||
//https://drewsilcock.co.uk/proper-linenumbers
|
||||
//https://sacha.me/articles/jekyll-rouge/#using-rouge-in-jekyll-3-on-github-pages
|
||||
// Rouge
|
||||
.highlight {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: .75em;
|
||||
// /* Prevent code linebreaks and allow side-scrolling (much better readability on mobile) */
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
// /* Make code same width as regular text, and scroll the full page width on mobile */
|
||||
@include figure2();
|
||||
|
||||
backface-visibility: hidden;
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.5em;
|
||||
background-color: var(--code-border);
|
||||
content: "\e86f";
|
||||
font-family: "icomoon" !important;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: 1.6;
|
||||
padding: .5rem 0 .5rem .5rem;
|
||||
margin-bottom: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.lineno {
|
||||
display: inline-block; // Ensures the null space also isn't selectable
|
||||
padding-right: .25rem;
|
||||
color: var(--metadata-color);
|
||||
// Make sure numbers aren't selectable
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
table {
|
||||
// resets down below
|
||||
width: 90%;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
|
||||
td, th {
|
||||
padding: 0.25rem .5rem;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
td.gutter {
|
||||
background: var(--code-border);
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
td.code {
|
||||
position:relative;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
td.code:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Gist via GitHub Pages
|
||||
// .gist .gist-file {
|
||||
// font-family: Menlo, Monaco, "Courier New", monospace !important;
|
||||
// }
|
||||
// .gist .markdown-body {
|
||||
// padding: 15px;
|
||||
// }
|
||||
// .gist pre {
|
||||
// padding: 0;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// .gist .gist-file .gist-data {
|
||||
// font-size: .8rem !important;
|
||||
// line-height: 1.4;
|
||||
// }
|
||||
// .gist code {
|
||||
// padding: 0;
|
||||
// color: inherit;
|
||||
// background-color: transparent;
|
||||
// border-radius: 0;
|
||||
// }
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
// Various components used on pages
|
||||
//-------------------------------
|
||||
|
||||
|
||||
// Post list (and related on post page) container
|
||||
.related {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 4em; // visible under post only
|
||||
}
|
||||
|
||||
// <ul> style for Archive and in 'Related' under posts
|
||||
.related-posts {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
font-weight: normal;
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
li {
|
||||
margin-top: 1rem;
|
||||
small {
|
||||
font-size: .75em;
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
}
|
||||
li+li {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Tag list boxes
|
||||
.tag-box {
|
||||
margin: 2rem 0;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
text-align: center;
|
||||
color: var(--text-color-light);
|
||||
list-style-type: none;
|
||||
margin: .5em 0 1.5em 0;
|
||||
padding: 0px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-weight: $base-font-weight-bold;
|
||||
font-size: $mobile-font-size;
|
||||
margin: 0 .5rem;
|
||||
|
||||
a {
|
||||
color: var (--text-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr:first-child {
|
||||
margin-top: 4em;
|
||||
margin-bottom: 1.5em; //reset
|
||||
}
|
||||
}
|
||||
|
||||
// Searchbox in Archive
|
||||
.searchbox {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: .3rem;
|
||||
text-align: center;
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
}
|
||||
input[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
-webkit-box-sizing: content-box;
|
||||
}
|
||||
input::-webkit-search-decoration,
|
||||
input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
span.icon-search {
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
margin-left: 0.6em;
|
||||
margin-top: 0.6em;
|
||||
z-index: 1;
|
||||
}
|
||||
input[type=search] {
|
||||
width: 50%;
|
||||
color: var(--text-color-light);
|
||||
background: var(--code-bg-color);
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
padding: 9px 10px 9px 38px;
|
||||
font-size: $base-font-size;
|
||||
-webkit-transition: all .5s;
|
||||
-moz-transition: all .5s;
|
||||
transition: all .5s;
|
||||
opacity: .5;
|
||||
}
|
||||
input[type=search]:focus {
|
||||
color: var(--text-color);
|
||||
background: var(--code-bg-color);
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
width: 70%;
|
||||
opacity: 1;
|
||||
}
|
||||
input:-moz-placeholder {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
input[type=search] {
|
||||
width: 70%;
|
||||
}
|
||||
input[type=search]:focus {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Photo in About page
|
||||
.me {
|
||||
width: 6.5rem;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 50em) {
|
||||
.me {
|
||||
width: 6.5rem;
|
||||
margin-top: -4.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Read more link on blog page with gradient overlay
|
||||
.readmore {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
// margin-bottom: -2.5rem;
|
||||
|
||||
a {
|
||||
font-size: $lead-font-size;
|
||||
color: var(--link-color);
|
||||
@include border-slide(left);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -125px;
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
content: '';
|
||||
display: block;
|
||||
background: -moz-linear-gradient(bottom, var(--bg-color) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(bottom, var(--bg-color) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to top, var(--bg-color) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
z-index: 10 // it needs to cover everything, footnote buttons included
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// Footer
|
||||
//-------------------------------
|
||||
|
||||
footer {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-color-light);
|
||||
text-align: center;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
// Header
|
||||
//-------------------------------
|
||||
|
||||
header {
|
||||
overflow: hidden;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 3.5rem;
|
||||
font-weight: $base-font-weight-bold;
|
||||
color: var(--link-color);
|
||||
|
||||
.logosvg {
|
||||
height: 2.7rem;
|
||||
-webkit-filter: var(--invert-logo-color);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
float: left;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin-bottom: 0rem;
|
||||
padding: 0rem;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
a {
|
||||
color: var(--text-color-light);
|
||||
font-size: $base-font-size;
|
||||
font-weight: $base-font-weight;
|
||||
display: block;
|
||||
height: 2rem; // reset
|
||||
.smaller {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social icons
|
||||
.social {
|
||||
float: right;
|
||||
margin-top: 1.75rem;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
li a {
|
||||
display: block;
|
||||
color: var(--text-color-light);
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
width: 2.5rem;
|
||||
|
||||
// ugly fix needed for theme switcher icon
|
||||
&:focus {
|
||||
border: none;
|
||||
&:focus:hover {
|
||||
border-bottom: 0.15em solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.menu,
|
||||
.social {
|
||||
@include centered-block();
|
||||
}
|
||||
// fake it till you make it
|
||||
.logo {
|
||||
margin-top: 5rem;
|
||||
.logosvg {
|
||||
display: block;
|
||||
margin: -9rem auto 5rem auto;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
// Hero
|
||||
//-------------------------------
|
||||
|
||||
// Hero heading colors
|
||||
.hero-heading {
|
||||
&-blog h1 {
|
||||
font-size: 3.25rem;
|
||||
margin: auto 5rem;
|
||||
}
|
||||
&-post h1 {
|
||||
font-size: 4.5rem;
|
||||
margin: auto 5rem;
|
||||
}
|
||||
h1 {
|
||||
color: $hero-heading-color!important;
|
||||
}
|
||||
span {
|
||||
color: $hero-date-color!important;
|
||||
}
|
||||
a {
|
||||
color: $hero-heading-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.hero-heading
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero hover dummy class, used only in blog layout
|
||||
.hero-hov {
|
||||
background: transparent;
|
||||
transition: background .25s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Oversized hero in post layout
|
||||
.bleed-hero-container {
|
||||
width: 130%;
|
||||
height: 130%;
|
||||
margin: 0 -15% 0 -15%;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
.bleed-hero-container {
|
||||
width: 110%;
|
||||
margin: 0 -5% 0- 5%;
|
||||
}
|
||||
}
|
||||
|
||||
// Container for hero image source link
|
||||
.post-source-img {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
span {
|
||||
font-size: .85em;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.source {
|
||||
color: #fff;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.source-text {
|
||||
color: #ccc;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
visibility: visible;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
font-family: 'icomoon';
|
||||
content: '\e894';
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: .5rem .75rem;
|
||||
visibility: visible;
|
||||
}
|
||||
&:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../vendor/icomoon/icomoon.eot?g4m7fo');
|
||||
src: url('../vendor/icomoon/icomoon.eot?g4m7fo#iefix') format('embedded-opentype'),
|
||||
url('../vendor/icomoon/icomoon.ttf?g4m7fo') format('truetype'),
|
||||
url('../vendor/icomoon/icomoon.woff?g4m7fo') format('woff'),
|
||||
url('../vendor/icomoon/icomoon.svg?g4m7fo#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-check_box:before {
|
||||
content: "\e834";
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.icon-local_offer:before {
|
||||
content: "\e54e";
|
||||
}
|
||||
.icon-more_horiz:before {
|
||||
content: "\e5d3";
|
||||
}
|
||||
.icon-code:before {
|
||||
content: "\e86f";
|
||||
}
|
||||
.icon-info:before {
|
||||
content: "\e88e";
|
||||
}
|
||||
.icon-invert_colors:before {
|
||||
content: "\e891";
|
||||
}
|
||||
.icon-language:before {
|
||||
content: "\e894";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-invert_colors2:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-rss_feed:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-mail_outline:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-github:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-stackoverflow:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-youtube:before {
|
||||
content: "\e907";
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/*
|
||||
* GitHub style for Pygments syntax highlighter, for use with Jekyll
|
||||
* Courtesy of GitHub.com
|
||||
*/
|
||||
|
||||
.highlight .c { color: #999988; font-style: italic; }
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2; }
|
||||
.highlight .k { font-weight: bold; }
|
||||
.highlight .o { font-weight: bold; }
|
||||
.highlight .cm { color: #999988; font-style: italic; }
|
||||
.highlight .cp { color: #999999; font-weight: bold; }
|
||||
.highlight .c1 { color: #999988; font-style: italic; }
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd; }
|
||||
.highlight .gd .x { color: #000000; background-color: #ffaaaa; }
|
||||
.highlight .ge { font-style: italic; }
|
||||
.highlight .gr { color: #aa0000; }
|
||||
.highlight .gh { color: #999999; }
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd; }
|
||||
.highlight .gi .x { color: #000000; background-color: #aaffaa; }
|
||||
.highlight .go { color: #888888; }
|
||||
.highlight .gp { color: #555555; }
|
||||
.highlight .gs { font-weight: bold; }
|
||||
.highlight .gu { color: #800080; font-weight: bold; }
|
||||
.highlight .gt { color: #aa0000; }
|
||||
.highlight .kc { font-weight: bold; }
|
||||
.highlight .kd { font-weight: bold; }
|
||||
.highlight .kn { font-weight: bold; }
|
||||
.highlight .kp { font-weight: bold; }
|
||||
.highlight .kr { font-weight: bold; }
|
||||
.highlight .kt { color: #445588; font-weight: bold; }
|
||||
.highlight .m { color: #009999; }
|
||||
.highlight .s { color: #dd1144; }
|
||||
.highlight .n { color: #333333; }
|
||||
.highlight .na { color: teal; }
|
||||
.highlight .nb { color: #0086b3; }
|
||||
.highlight .nc { color: #445588; font-weight: bold; }
|
||||
.highlight .no { color: teal; }
|
||||
.highlight .ni { color: purple; }
|
||||
.highlight .ne { color: #990000; font-weight: bold; }
|
||||
.highlight .nf { color: #990000; font-weight: bold; }
|
||||
.highlight .nn { color: #555555; }
|
||||
.highlight .nt { color: navy; }
|
||||
.highlight .nv { color: teal; }
|
||||
.highlight .ow { font-weight: bold; }
|
||||
.highlight .w { color: #bbbbbb; }
|
||||
.highlight .mf { color: #009999; }
|
||||
.highlight .mh { color: #009999; }
|
||||
.highlight .mi { color: #009999; }
|
||||
.highlight .mo { color: #009999; }
|
||||
.highlight .sb { color: #dd1144; }
|
||||
.highlight .sc { color: #dd1144; }
|
||||
.highlight .sd { color: #dd1144; }
|
||||
.highlight .s2 { color: #dd1144; }
|
||||
.highlight .se { color: #dd1144; }
|
||||
.highlight .sh { color: #dd1144; }
|
||||
.highlight .si { color: #dd1144; }
|
||||
.highlight .sx { color: #dd1144; }
|
||||
.highlight .sr { color: #009926; }
|
||||
.highlight .s1 { color: #dd1144; }
|
||||
.highlight .ss { color: #990073; }
|
||||
.highlight .bp { color: #999999; }
|
||||
.highlight .vc { color: teal; }
|
||||
.highlight .vg { color: teal; }
|
||||
.highlight .vi { color: teal; }
|
||||
.highlight .il { color: #009999; }
|
||||
.highlight .gc { color: #999; background-color: #EAF2F5; }
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// Mixins
|
||||
//-------------------------------
|
||||
|
||||
@mixin centered-block() {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@mixin figure2() {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
background-color: var(--code-bg-color);
|
||||
}
|
||||
|
||||
// Underline slide borders from left/right and back
|
||||
// FROM left or right
|
||||
@mixin border-slide($direction) {
|
||||
position: relative;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.15em;
|
||||
#{$direction}: 0;
|
||||
width: 0%;
|
||||
border-bottom: 0.15em solid;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
// Notice boxes
|
||||
//-------------------------------
|
||||
// Idea taken from
|
||||
// https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/_notices.scss
|
||||
|
||||
@mixin notice($notice_bg, $notice-border-color, $notice-icon, $notice-icon-color) {
|
||||
padding: 1rem 1rem 1rem 5rem;
|
||||
background-color: var(--code-bg-color);
|
||||
font-size: 0.85em;
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-color: $notice-bg;
|
||||
border: 1px solid $notice-border-color;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 4rem;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-family: 'icomoon';
|
||||
content: $notice-icon;
|
||||
color: $notice-icon-color;
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
font-weight: normal;
|
||||
left: 2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
$notice-bg: #d6e3ea;
|
||||
$notice-border-color: rgba(200, 212, 218, .4);
|
||||
$notice-icon: '\e88e';
|
||||
$notice-icon-color: #596267;
|
||||
|
||||
@include notice($notice-bg, $notice-border-color, $notice-icon, $notice-icon-color)
|
||||
}
|
||||
|
||||
.notice-alert {
|
||||
$notice-alert-bg: #eae6ca;
|
||||
$notice-border-color: rgba(222, 218, 192, .4);
|
||||
$notice-alert-icon: '\e002';
|
||||
$notice-alert-icon_color: #77703a;
|
||||
|
||||
@include notice($notice-alert-bg, $notice-border-color, $notice-alert-icon, $notice-alert-icon-color)
|
||||
}
|
||||
|
||||
.notice-success {
|
||||
$notice-success-bg: #d6ead8;
|
||||
$notice-border-color: rgba(202, 220, 204, .4);
|
||||
$notice-success-icon: '\e834';
|
||||
$notice-success-icon_color: #506b53;
|
||||
|
||||
@include notice($notice-success-bg, $notice-border-color, $notice-success-icon, $notice-success-icon-color)
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
// Pagination
|
||||
//-------------------------------
|
||||
// Super lightweight (HTML-wise) blog pagination. `span`s are provided for when there are no more previous or next posts to show.
|
||||
|
||||
|
||||
.pagination {
|
||||
overflow: hidden;
|
||||
max-width: 30%;
|
||||
margin: 0 auto 4rem auto;
|
||||
color: var(--text-color-light);
|
||||
|
||||
> ul {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
max-height: 3rem;
|
||||
padding: 0;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr {
|
||||
max-width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination items can be `span`s or `a`s
|
||||
.pagination-item {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
|
||||
&-prev {
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
a {
|
||||
color: var(--link-color);
|
||||
@include border-slide(right);
|
||||
}
|
||||
}
|
||||
&-next {
|
||||
margin-left: -1px;
|
||||
text-align: right;
|
||||
float: right;
|
||||
a {
|
||||
color: var(--link-color);
|
||||
@include border-slide(left);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Tables
|
||||
//-------------------------------
|
||||
|
||||
table {
|
||||
font-size: 0.85em;
|
||||
background-color: var(--code-bg-color);
|
||||
box-shadow: 0 1px 2px var(--shadow-color);
|
||||
margin-bottom: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
text-align: left;
|
||||
background-color: var(--code-border);
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
// No external borders
|
||||
table th:not(:first-child) {
|
||||
border-left: 1px solid var(--table-border-color);
|
||||
}
|
||||
table td:not(:first-child) {
|
||||
border-left: 1px solid var(--table-border-color);
|
||||
}
|
||||
table tr:not(:first-child) td {
|
||||
border-top: 1px solid var(--table-border-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
// Centered page, post titles and subtitles
|
||||
//-------------------------------
|
||||
|
||||
.page-title-container,
|
||||
.post-title-container {
|
||||
width: 100%;
|
||||
margin-bottom: 6rem;
|
||||
height: 20rem;
|
||||
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
font-weight: $base-font-weight-bold;
|
||||
font-size: $post-title-size;
|
||||
border: 0; // reset
|
||||
a {
|
||||
display: block; // slide border needs to cover the whole heading
|
||||
@include border-slide(left)
|
||||
}
|
||||
}
|
||||
|
||||
// heading container
|
||||
.heading-container {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Post meta under post title
|
||||
.post-meta {
|
||||
font-weight: $base-font-weight;
|
||||
font-size: 22px;
|
||||
color: var(--text-color-light);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85em;
|
||||
|
||||
a {
|
||||
color: var(--text-color-light);
|
||||
text-transform: lowercase;
|
||||
margin: .2em .25em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.page-title,
|
||||
.post-title {
|
||||
height: 10rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.post-meta {
|
||||
font-size: $mobile-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero layout off - blog post titles
|
||||
//-------------------------------
|
||||
.post-title-container-nohero {
|
||||
margin-bottom: 4rem;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: $blog-title-size;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta-nohero {
|
||||
margin-top: 0.5rem;
|
||||
color: var(--text-color-light);
|
||||
font-weight: $base-font-weight;
|
||||
font-size: 0.75em;
|
||||
|
||||
a {
|
||||
color: var(--text-color-light);
|
||||
margin: 0 .25em;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta-link-nohero {
|
||||
margin: 0 .5em 0 .5em;
|
||||
}
|
||||
|
||||
.no-hero-margin {
|
||||
margin-bottom: 0rem; // margin reset
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.post-title-container-nohero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// Variables
|
||||
//-------------------------------
|
||||
|
||||
$sans-serif: -apple-system, BlinkMacSystemFont, San Francisco Text, Helvetica, Arial, "Helvetica Neue", Roboto, "Segoe UI", sans-serif;
|
||||
$serif: Menlo, Monaco, Courier, monospace, serif;
|
||||
// $base-font-family: $sans-serif;
|
||||
$base-font-weight: 400;
|
||||
$base-font-weight-bold: 700;
|
||||
|
||||
$base-font-size: 20px;
|
||||
$mobile-font-size: 18px;
|
||||
$lead-font-size: 1.15em;
|
||||
$blog-title-size: 2.5rem;
|
||||
$post-title-size: 4.25rem;
|
||||
$base-line-height: 1.6;
|
||||
$code-line-height: 1.4;
|
||||
|
||||
$footnote-font-size: 0.75em;
|
||||
$magic: 1.618em;
|
||||
|
||||
$hero-heading-color: #fff;
|
||||
$hero-date-color: #ccc;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
layout: page
|
||||
title: About
|
||||
permalink: /about/
|
||||
---
|
||||
|
||||
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
|
||||
|
||||
You can find the source code for Minima at GitHub:
|
||||
[jekyll][jekyll-organization] /
|
||||
[minima](https://github.com/jekyll/minima)
|
||||
|
||||
You can find the source code for Jekyll at GitHub:
|
||||
[jekyll][jekyll-organization] /
|
||||
[jekyll](https://github.com/jekyll/jekyll)
|
||||
|
||||
|
||||
[jekyll-organization]: https://github.com/jekyll
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
layout: page
|
||||
title: About
|
||||
permalink: /about/
|
||||
published: true
|
||||
---
|
||||
|
||||
<div class="page" markdown="1">
|
||||
|
||||
{% capture page_subtitle %}
|
||||
<img
|
||||
class="me"
|
||||
alt="{{ author.name }}"
|
||||
src="{{ site.author.photo | relative_url }}"
|
||||
srcset="{{ site.author.photo2x | relative_url }} 2x"
|
||||
/>
|
||||
{% endcapture %}
|
||||
|
||||
{% include page/title.html title=page.title subtitle=page_subtitle %}
|
||||
|
||||
## Some heading
|
||||
|
||||
I'll alert the crew. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Did you come here for something in particular or just general Riker-bashing? You did exactly what you had to do. You considered all your options, you tried every alternative and then you made the hard choice. Your shields were failing, sir. Well, that's certainly good to know. A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. How long can two people talk about nothing? I recommend you don't fire until you're within 40,000 kilometers. Congratulations - you just destroyed the Enterprise. Worf, It's better than music. It's jazz. Yes, absolutely, I do indeed concur, wholeheartedly! What's a knock-out like you doing in a computer-generated gin joint like this? I can't. As much as I care about you, my first duty is to the ship. Some days you get the bear, and some days the bear gets you.
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
layout: page
|
||||
title: Archive
|
||||
permalink: /archive/
|
||||
weight: 5
|
||||
sitemap:
|
||||
priority: 0.9
|
||||
---
|
||||
|
||||
<div class="page">
|
||||
|
||||
{% capture page_subtitle %}
|
||||
{% include page/searchbox.html %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include page/title.html title=page.title subtitle=page_subtitle %}
|
||||
|
||||
{% for post in site.posts %}
|
||||
|
||||
{% assign category = site.my_categories | where: "slug", post.category %}
|
||||
{% assign category = category[0] %}
|
||||
{% if category %}
|
||||
{% capture category_content %}<a class="label" href="{{ category.url }}">{{ category.name }}</a>{% endcapture %}
|
||||
{% endif %}
|
||||
|
||||
{% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
|
||||
{% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
|
||||
{% if month != nmonth %}
|
||||
{% if forloop.index != 1 %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<h1>{% include utils/date_custom_short.html date = post.date %}</h1>
|
||||
<ul class="related-posts">
|
||||
{% endif %}
|
||||
|
||||
{% include page/post-list-item.html %}
|
||||
|
||||
{% comment %}
|
||||
tagi w archiwum <span class="post-tag right">{{ tags_content }}</span>
|
||||
{% endcomment %}
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
|
||||
{% comment %}
|
||||
{% include utils/tag-box.html %}
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
# Only the main Sass file needs front matter (the dashes are enough)
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
---
|
||||
@import "variables";
|
||||
@import "barefoot";
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
# Only the main Sass file needs front matter (the dashes are enough)
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
---
|
||||
@charset "utf-8";
|
||||
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
|
||||
@import "base";
|
||||
|
||||
@import "header";
|
||||
@import "articles";
|
||||
@import "titles";
|
||||
@import "hero";
|
||||
|
||||
@import "components";
|
||||
|
||||
@import "notices";
|
||||
@import "blockquote";
|
||||
@import "table";
|
||||
@import "code";
|
||||
|
||||
@import "404";
|
||||
@import "jekyll-github";
|
||||
@import "pagination";
|
||||
@import "footer";
|
||||
|
||||
@import "icons";
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 927 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 398 B |
|
|
@ -0,0 +1,497 @@
|
|||
"use strict";
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var BareFoot = function () {
|
||||
/**
|
||||
* @param {Object} options [Options to configure the script]
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
function BareFoot() {
|
||||
var _this = this;
|
||||
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
_classCallCheck(this, BareFoot);
|
||||
|
||||
var DEFAULTS = {
|
||||
scope: 'body',
|
||||
divFootnotesQuery: ".footnotes",
|
||||
footnotesQuery: "[id^='fn']",
|
||||
supQuery: 'a[href^="#fnref"]',
|
||||
fnButtonMarkup: "<button class=\"footnote-button\" id=\"{{FOOTNOTEREFID}}\" data-footnote=\"{{FOOTNOTEID}}\" alt=\"See Footnote {{FOOTNOTENUMBER}}\" rel=\"footnote\" data-fn-number=\"{{FOOTNOTENUMBER}}\" data-fn-content=\"{{FOOTNOTECONTENT}}\"></button>",
|
||||
fnContentMarkup: "<div class=\"bf-footnote\" id=\"{{FOOTNOTEID}}\"><div class=\"footnote-wrapper\"><div class=\"footnote-content\" tabindex=\"0\">{{FOOTNOTECONTENT}}</div></div><div class=\"footnote-tooltip\" aria-hidden=\"true\"></div>",
|
||||
activeCallback: null,
|
||||
activeBtnClass: 'is-active',
|
||||
activeFnClass: 'footnote-is-active',
|
||||
backdropClass: 'footnote-backdrop',
|
||||
buttonClass: 'footnote-button',
|
||||
fnContainer: 'footnote-container',
|
||||
fnClass: 'bf-footnote',
|
||||
fnContentClass: 'footnote-content',
|
||||
fnWrapperClass: 'footnote-wrapper',
|
||||
tooltipClass: 'footnote-tooltip',
|
||||
fnOnTopClass: 'footnote-is-top'
|
||||
};
|
||||
|
||||
// Merges defaults with custom options
|
||||
this.config = _extends({}, DEFAULTS, options);
|
||||
|
||||
// A selector could select multiple containers
|
||||
this.divFootnotes = [].slice.call(document.querySelectorAll(this.config.divFootnotesQuery));
|
||||
|
||||
// Returns if no container
|
||||
if (!this.divFootnotes) return false;
|
||||
|
||||
// Groups all footnotes within every group.
|
||||
this.footnotes = this.divFootnotes.map(function (el) {
|
||||
return el.querySelectorAll(_this.config.footnotesQuery);
|
||||
});
|
||||
|
||||
// Polyfill for Element.matches()
|
||||
// Based on https://davidwalsh.name/element-matches-selector
|
||||
|
||||
Element.prototype.matches = Element.prototype.matches || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) {
|
||||
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
|
||||
};
|
||||
|
||||
// Polyfill for Element.closest()
|
||||
// Based on http://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery
|
||||
|
||||
Element.prototype.closest = Element.prototype.closest || function (s) {
|
||||
var el = this;
|
||||
|
||||
while (el !== null) {
|
||||
var parent = el.parentElement;
|
||||
if (parent !== null && parent.matches(s)) {
|
||||
return parent;
|
||||
}
|
||||
el = parent;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Calculate vertical scrollbar width
|
||||
// Inspired by https://davidwalsh.name/detect-scrollbar-width
|
||||
|
||||
var scrollDiv = document.createElement('div');
|
||||
scrollDiv.style.cssText = 'width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; visibility: hidden;';
|
||||
document.body.appendChild(scrollDiv);
|
||||
this.scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
}
|
||||
|
||||
/**
|
||||
* Footnotes often have a link to return to the sup, before moving the contents to each individual footnote, we gotta remove this hook to get a clean content.
|
||||
* @param {String} fnHtml [Html from the footnote]
|
||||
* @param {String} backId [ID this footnote refers to]
|
||||
* @return {String} [Clean Html]
|
||||
*/
|
||||
|
||||
|
||||
_createClass(BareFoot, [{
|
||||
key: "removeBackLinks",
|
||||
value: function removeBackLinks(fnHtml, backId) {
|
||||
if (backId.indexOf(' ') >= 0) {
|
||||
backId = backId.trim().replace(/\s+/g, "|").replace(/(.*)/g, "($1)");
|
||||
}
|
||||
|
||||
if (backId.indexOf('#') === 0) {
|
||||
backId = backId.slice(1);
|
||||
}
|
||||
|
||||
var regex = new RegExp("(\\s| )*<\\s*a[^#<]*#" + backId + "[^>]*>(.*?)<\\s*/\\s*a>", "g");
|
||||
|
||||
return fnHtml.replace(regex, "").replace("[]", "");
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the buttons for each footnote based on the configured template.
|
||||
* @param {String} ref [ID this element refers to]
|
||||
* @param {String} id [ID for this element]
|
||||
* @param {String} n [Number that illustrates the footnote]
|
||||
* @param {String} content [Footnote content]
|
||||
* @return {String} [Html Markup]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "buildButton",
|
||||
value: function buildButton(ref, id, n, content) {
|
||||
return this.config.fnButtonMarkup.replace(/\{\{FOOTNOTEREFID\}\}/g, ref).replace(/\{\{FOOTNOTEID\}\}/g, id).replace(/\{\{FOOTNOTENUMBER\}\}/g, n).replace(/\{\{FOOTNOTECONTENT\}\}/g, content);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the content for each footnote based on the configured template.
|
||||
* @param {String} id [ID from the parent of this element]
|
||||
* @param {String} content [Footnote content]
|
||||
* @return {String} [Html Markup]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "buildContent",
|
||||
value: function buildContent(id, content) {
|
||||
return this.config.fnContentMarkup.replace(/\{\{FOOTNOTEID\}\}/g, id).replace(/\{\{FOOTNOTECONTENT\}\}/g, content);
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers whenever an user clicks a footnote button and is responsible to coordinate all the necessary steps to show and position the footnotes.
|
||||
* @param {Event} e [Event]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "clickAction",
|
||||
value: function clickAction(e) {
|
||||
var btn = void 0,
|
||||
content = void 0,
|
||||
id = void 0,
|
||||
fnHtml = void 0,
|
||||
fn = void 0,
|
||||
windowHeight = void 0,
|
||||
scrollHeight = void 0,
|
||||
returnOnDismiss = void 0;
|
||||
|
||||
btn = e.target;
|
||||
content = btn.getAttribute('data-fn-content');
|
||||
id = btn.getAttribute("data-footnote");
|
||||
returnOnDismiss = btn.classList.contains('is-active');
|
||||
|
||||
// We calculate the document.documentElement.scrollHeight before inserting the footnote, so later (at the calculateSpacing function to be more specific), we can check if there's any overflow to the bottom of the page, if so it flips the footnote to the top.
|
||||
scrollHeight = this.getScrollHeight();
|
||||
|
||||
this.dismissFootnotes();
|
||||
|
||||
if (returnOnDismiss) {
|
||||
return;
|
||||
}
|
||||
|
||||
fnHtml = this.buildContent(id, content);
|
||||
btn.insertAdjacentHTML('afterend', fnHtml);
|
||||
fn = btn.nextElementSibling;
|
||||
|
||||
// Position and flip the footnote on demand.
|
||||
this.calculateOffset(fn, btn);
|
||||
this.calculateSpacing(fn, scrollHeight);
|
||||
|
||||
btn.classList.add(this.config.activeBtnClass);
|
||||
fn.classList.add(this.config.activeFnClass);
|
||||
|
||||
// Focus is set on the footnote content, this looks kinda ugly but allows keyboard navigation and scrolling when the content overflow. I have a gut feeling this is good, so I'm sticking to it. All the help to improve accessibility is welcome.
|
||||
fn.querySelector("." + this.config.fnContentClass).focus();
|
||||
|
||||
// As far as I recall, touch devices require a tweak to dismiss footnotes when you tap the body outside the footnote, this is the tweak.
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
document.body.classList.add(this.config.backdropClass);
|
||||
}
|
||||
|
||||
// Triggers the activeCallback if there's any. I never used and never tested this, but I'm passing the button and the footnote as parameters because I think that's all you may expect.
|
||||
if (this.config.activeCallback) {
|
||||
this.config.activeCallback(btn, fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mathematical Hell. This function repositions the footnote according to the edges of the screen. The goal is to never (gonna give you up) overflow content. Also, remember when we calculated the scrollBarWidth? This is where we use it in case the footnote overflows to the right.
|
||||
* @param {Element} fn [Footnote Node]
|
||||
* @param {Element} btn [Button Node]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "calculateOffset",
|
||||
value: function calculateOffset(fn, btn) {
|
||||
var tooltip = void 0,
|
||||
container = void 0,
|
||||
btnOffset = void 0,
|
||||
btnWidth = void 0,
|
||||
contWidth = void 0,
|
||||
contOffset = void 0,
|
||||
wrapWidth = void 0,
|
||||
wrapMove = void 0,
|
||||
wrapOffset = void 0,
|
||||
tipWidth = void 0,
|
||||
tipOffset = void 0,
|
||||
windowWidth = void 0;
|
||||
|
||||
btn = btn || fn.previousElementSibling;
|
||||
|
||||
btnOffset = btn.offsetLeft;
|
||||
btnWidth = btn.offsetWidth;
|
||||
tooltip = fn.querySelector("." + this.config.tooltipClass);
|
||||
tipWidth = tooltip.clientWidth;
|
||||
container = fn.parentNode;
|
||||
contWidth = container.clientWidth;
|
||||
contOffset = container.offsetLeft;
|
||||
wrapWidth = fn.offsetWidth;
|
||||
wrapMove = -(wrapWidth / 2 - contWidth / 2);
|
||||
windowWidth = window.innerWidth || window.availWidth;
|
||||
|
||||
// Footnote overflows to the left
|
||||
if (contOffset + wrapMove < 0) {
|
||||
wrapMove = wrapMove - (contOffset + wrapMove);
|
||||
}
|
||||
// Footnote overflows to the right
|
||||
else if (contOffset + wrapMove + wrapWidth + this.scrollBarWidth > windowWidth) {
|
||||
wrapMove = wrapMove - (contOffset + wrapMove + wrapWidth + this.scrollBarWidth + contWidth / 2 - windowWidth);
|
||||
}
|
||||
|
||||
fn.style.left = wrapMove + "px";
|
||||
wrapOffset = contOffset + wrapMove;
|
||||
tipOffset = contOffset - wrapOffset + contWidth / 2 - tipWidth / 2;
|
||||
tooltip.style.left = tipOffset + "px";
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes element, mostly used for footnotes.
|
||||
* @param {Element} el
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "removeFootnoteChild",
|
||||
value: function removeFootnoteChild(el) {
|
||||
return el.parentNode.removeChild(el);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delays and withholds function triggering in events. Based on https://davidwalsh.name/javascript-debounce-function
|
||||
* @param {Function} func [The function to after the delays]
|
||||
* @param {Number} wait [The delay in milliseconds]
|
||||
* @param {Boolean} immediate [if true, triggers the function on the leading edge rather than the trailing]
|
||||
* @return {Function} [It's a closure, what did you expect?]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "debounce",
|
||||
value: function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function () {
|
||||
var _this2 = this;
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(_this2, args);
|
||||
};
|
||||
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (immediate && !timeout) func.apply(this, args);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to be attached to the resize event and recalculate the position of the active footnotes.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "resizeAction",
|
||||
value: function resizeAction() {
|
||||
var _this3 = this;
|
||||
|
||||
var footnotes = document.querySelectorAll("." + this.config.activeFnClass);
|
||||
|
||||
if (footnotes.length) {
|
||||
[].forEach.call(footnotes, function (fn) {
|
||||
_this3.calculateOffset(fn);
|
||||
_this3.calculateSpacing(fn);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the height of the document. Used to find out if the footnote overflows the content
|
||||
* @return {Number} [see description]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "getScrollHeight",
|
||||
value: function getScrollHeight() {
|
||||
return document.documentElement.scrollHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates if the footnote should appear above or below the button
|
||||
* @param {Element} fn [The footnote in question]
|
||||
* @param {Number} height [By now the footnote is about to show up and we use the previous value, this one, to check if the footnote is overflow the document]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "calculateSpacing",
|
||||
value: function calculateSpacing(fn, height) {
|
||||
var bcr = void 0,
|
||||
bch = void 0,
|
||||
bcb = void 0,
|
||||
margins = void 0,
|
||||
windowHeight = void 0;
|
||||
margins = this.calculateMargins(fn);
|
||||
windowHeight = window.innerHeight || window.availHeight;
|
||||
|
||||
bcr = fn.getBoundingClientRect();
|
||||
bch = bcr.height;
|
||||
bcb = bcr.bottom;
|
||||
|
||||
if (height < this.getScrollHeight() || bcb > windowHeight - margins.bottom) {
|
||||
fn.classList.add(this.config.fnOnTopClass);
|
||||
} else if (windowHeight - (bch + margins.top) > bcb && fn.classList.contains(this.config.fnOnTopClass)) {
|
||||
fn.classList.remove(this.config.fnOnTopClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to be attached to the scroll event to verify if we should change the position of the footnote using the available space.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "scrollAction",
|
||||
value: function scrollAction() {
|
||||
var _this4 = this;
|
||||
|
||||
var footnotes = document.querySelectorAll("." + this.config.activeFnClass);
|
||||
|
||||
if (footnotes.length) {
|
||||
var windowHeight = window.innerHeight || window.availHeight,
|
||||
margins = this.calculateMargins(footnotes[0]);
|
||||
|
||||
[].forEach.call(footnotes, function (el) {
|
||||
_this4.calculateSpacing(el);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the computed margins of an element, used to calculate the position and spacing.
|
||||
* @param {Element} fn [The footnote]
|
||||
* @return {Object} [An object containing all margins]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "calculateMargins",
|
||||
value: function calculateMargins(fn) {
|
||||
var computedStyle = window.getComputedStyle(fn, null);
|
||||
return {
|
||||
top: parseFloat(computedStyle.marginTop),
|
||||
right: parseFloat(computedStyle.marginRight),
|
||||
bottom: parseFloat(computedStyle.marginBottom),
|
||||
left: parseFloat(computedStyle.marginLeft)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* This is set on click and touchend events for the body and removes the footnotes when you click/tap outside them
|
||||
* @param {Event}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "documentAction",
|
||||
value: function documentAction(ev) {
|
||||
if (!ev.target.closest("." + this.config.fnContainer)) this.dismissFootnotes();
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismisses active footnotes when the ESC key is hit and the current active element is a footnote. Returns focus to the footnote button.
|
||||
* @param {Event} e
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "dismissOnEsc",
|
||||
value: function dismissOnEsc(ev) {
|
||||
if (ev.keyCode === 27 && document.activeElement.matches("." + this.config.fnContentClass)) {
|
||||
document.activeElement.closest("." + this.config.activeFnClass).previousElementSibling.focus();
|
||||
return this.dismissFootnotes();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all open footnotes (and also the backdrop, remember it?)
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "dismissFootnotes",
|
||||
value: function dismissFootnotes() {
|
||||
var _this5 = this;
|
||||
|
||||
var footnotes = document.querySelectorAll("." + this.config.activeFnClass);
|
||||
|
||||
if (footnotes.length) {
|
||||
[].forEach.call(footnotes, function (el) {
|
||||
el.previousElementSibling.classList.remove(_this5.config.activeBtnClass);
|
||||
el.addEventListener('transitionend', _this5.removeFootnoteChild(el), false);
|
||||
el.classList.remove(_this5.config.activeFnClass);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.body.classList.contains(this.config.backdropClass)) document.body.classList.remove(this.config.backdropClass);
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens pandora's box. This function crosses every footnote and makes all the replacements and then sets up every eventListener for the script to work.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var _this6 = this;
|
||||
|
||||
[].forEach.call(this.footnotes, function (fns, i) {
|
||||
var currentScope = fns[0].closest(_this6.config.scope);
|
||||
|
||||
[].forEach.call(fns, function (fn, i) {
|
||||
var fnContent = void 0,
|
||||
fnHrefId = void 0,
|
||||
fnId = void 0,
|
||||
ref = void 0,
|
||||
fnRefN = void 0,
|
||||
footnote = void 0;
|
||||
|
||||
fnRefN = i + 1;
|
||||
fnHrefId = fn.querySelector(_this6.config.supQuery).getAttribute('href');
|
||||
|
||||
fnContent = _this6.removeBackLinks(fn.innerHTML.trim(), fnHrefId);
|
||||
|
||||
fnContent = fnContent.replace(/"/g, """).replace(/</g, "<sym;").replace(/>/g, ">sym;");
|
||||
|
||||
if (fnContent.indexOf("<") !== 0) fnContent = "<p>" + fnContent + "</p>";
|
||||
|
||||
// Gotta escape `:` used within a querySelector so JS doesn't think you're looking for a pseudo-element.
|
||||
ref = currentScope.querySelector(fnHrefId.replace(':', '\\:'));
|
||||
|
||||
footnote = "<div class=\"" + _this6.config.fnContainer + "\">" + _this6.buildButton(fnHrefId, fn.id, fnRefN, fnContent) + "</div>";
|
||||
|
||||
ref.insertAdjacentHTML('afterend', footnote);
|
||||
ref.parentNode.removeChild(ref);
|
||||
});
|
||||
});
|
||||
|
||||
// Setting up events
|
||||
|
||||
[].forEach.call(document.querySelectorAll("." + this.config.buttonClass), function (el) {
|
||||
el.addEventListener("click", _this6.clickAction.bind(_this6));
|
||||
});
|
||||
|
||||
window.addEventListener("resize", this.debounce(this.resizeAction.bind(this), 100));
|
||||
window.addEventListener("scroll", this.debounce(this.scrollAction.bind(this), 100));
|
||||
window.addEventListener("keyup", this.dismissOnEsc.bind(this));
|
||||
document.body.addEventListener("click", this.documentAction.bind(this));
|
||||
document.body.addEventListener("touchend", this.documentAction.bind(this));
|
||||
|
||||
this.divFootnotes.forEach(function (el) {
|
||||
return el.parentNode.removeChild(el);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return BareFoot;
|
||||
}();
|
||||
|
||||
// initiate
|
||||
|
||||
var lf = new BareFoot({
|
||||
scope: "article"
|
||||
});
|
||||
lf.init();
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
// Staticman comment replies
|
||||
// modified from Wordpress https://core.svn.wordpress.org/trunk/wp-includes/js/comment-reply.js
|
||||
var addComment = {
|
||||
moveForm: function( commId, parentId, respondId, postId ) {
|
||||
var div, element, style, cssHidden,
|
||||
t = this,
|
||||
comm = t.I( commId ),
|
||||
respond = t.I( respondId ),
|
||||
cancel = t.I( 'cancel-comment-reply-link' ),
|
||||
parent = t.I( 'comment-parent' ),
|
||||
post = t.I( 'comment-post-slug' ),
|
||||
commentForm = respond.getElementsByTagName( 'form' )[0];
|
||||
|
||||
if ( ! comm || ! respond || ! cancel || ! parent || ! commentForm ) {
|
||||
return;
|
||||
}
|
||||
|
||||
t.respondId = respondId;
|
||||
postId = postId || false;
|
||||
|
||||
if ( ! t.I( 'sm-temp-form-div' ) ) {
|
||||
div = document.createElement( 'div' );
|
||||
div.id = 'sm-temp-form-div';
|
||||
div.style.display = 'none';
|
||||
respond.parentNode.insertBefore( div, respond );
|
||||
}
|
||||
|
||||
comm.parentNode.insertBefore( respond, comm.nextSibling );
|
||||
if ( post && postId ) {
|
||||
post.value = postId;
|
||||
}
|
||||
parent.value = parentId;
|
||||
cancel.style.display = '';
|
||||
|
||||
cancel.onclick = function() {
|
||||
var t = addComment,
|
||||
temp = t.I( 'sm-temp-form-div' ),
|
||||
respond = t.I( t.respondId );
|
||||
|
||||
if ( ! temp || ! respond ) {
|
||||
return;
|
||||
}
|
||||
|
||||
t.I( 'comment-parent' ).value = '0';
|
||||
temp.parentNode.insertBefore( respond, temp );
|
||||
temp.parentNode.removeChild( temp );
|
||||
this.style.display = 'none';
|
||||
this.onclick = null;
|
||||
return false;
|
||||
};
|
||||
|
||||
/*
|
||||
* Set initial focus to the first form focusable element.
|
||||
* Try/catch used just to avoid errors in IE 7- which return visibility
|
||||
* 'inherit' when the visibility value is inherited from an ancestor.
|
||||
*/
|
||||
try {
|
||||
for ( var i = 0; i < commentForm.elements.length; i++ ) {
|
||||
element = commentForm.elements[i];
|
||||
cssHidden = false;
|
||||
|
||||
// Modern browsers.
|
||||
if ( 'getComputedStyle' in window ) {
|
||||
style = window.getComputedStyle( element );
|
||||
// IE 8.
|
||||
} else if ( document.documentElement.currentStyle ) {
|
||||
style = element.currentStyle;
|
||||
}
|
||||
|
||||
/*
|
||||
* For display none, do the same thing jQuery does. For visibility,
|
||||
* check the element computed style since browsers are already doing
|
||||
* the job for us. In fact, the visibility computed style is the actual
|
||||
* computed value and already takes into account the element ancestors.
|
||||
*/
|
||||
if ( ( element.offsetWidth <= 0 && element.offsetHeight <= 0 ) || style.visibility === 'hidden' ) {
|
||||
cssHidden = true;
|
||||
}
|
||||
|
||||
// Skip form elements that are hidden or disabled.
|
||||
if ( 'hidden' === element.type || element.disabled || cssHidden ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
element.focus();
|
||||
// Stop after the first focusable element.
|
||||
break;
|
||||
}
|
||||
|
||||
} catch( er ) {}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
I: function( id ) {
|
||||
return document.getElementById( id );
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
// Theme switcher based on CSS variables made by Fernardo Paredes
|
||||
// https://www.fdp.io/blog/2016/11/08/theming-via-css-properties/
|
||||
|
||||
// Polyfilling Object.entries for Safari :/
|
||||
Object.entries = (object) => Object.keys(object).map(
|
||||
(key) => [ key, object[key] ]
|
||||
)
|
||||
|
||||
const isObject = (obj) => obj === Object(obj)
|
||||
|
||||
const LightTheme = {
|
||||
'--bg-color': '#eee',
|
||||
'--text-color': '#484848',
|
||||
'--text-color-light': '#828282',
|
||||
'--link-color': '#000',
|
||||
'--metadata-color': '#999',
|
||||
'--post-title': '#313131',
|
||||
'--code-bg-color': '#fff',
|
||||
'--code-border': '#f5f5f5',
|
||||
'--table-border-color': '#e5e5e5',
|
||||
'--table-header-color': '#fefefe',
|
||||
'--shadow-color': 'rgba(0, 0, 0, 0.1)',
|
||||
'--invert-logo-color': 'invert(0)',
|
||||
themeName: 'LightTheme'
|
||||
}
|
||||
|
||||
const NightTheme = {
|
||||
'--bg-color': '#1c1c1c',
|
||||
'--text-color': '#c4c4c4',
|
||||
'--text-color-light': '#777',
|
||||
'--link-color': '#f1f1f1',
|
||||
'--metadata-color': '#666',
|
||||
'--post-title': '#fff',
|
||||
'--code-bg-color': '#252525',
|
||||
'--code-border': '#222',
|
||||
'--table-border-color': '#292929',
|
||||
'--table-header-color': '#505050',
|
||||
'--shadow-color': 'rgba(255, 255, 255, 0.1)',
|
||||
'--invert-logo-color': 'invert(1)',
|
||||
themeName: 'NightTheme'
|
||||
}
|
||||
|
||||
const setCSSVariable = (key, value) => document.body.style.setProperty(key, value)
|
||||
|
||||
const saveTheme = (theme) => {
|
||||
if (window.localStorage) {
|
||||
localStorage['theme'] = JSON.stringify(theme)
|
||||
localStorage['currentTheme'] = theme.themeName
|
||||
}
|
||||
}
|
||||
|
||||
const loadSavedTheme = () => {
|
||||
if (window.localStorage) {
|
||||
const maybeTheme = localStorage['theme']
|
||||
if (maybeTheme) return JSON.parse(maybeTheme)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const updateTheme = (theme) => {
|
||||
if (!isObject(theme)) return
|
||||
|
||||
Object
|
||||
.entries(theme)
|
||||
.forEach(([key, value]) => setCSSVariable(key, value))
|
||||
|
||||
saveTheme(theme)
|
||||
}
|
||||
|
||||
const checkForSavedTheme = () => {
|
||||
const theme = loadSavedTheme()
|
||||
if (theme) updateTheme(theme)
|
||||
}
|
||||
|
||||
const switchTheme = () => {
|
||||
const el = document.getElementById('theme-switcher')
|
||||
// Check if we have a saved theme
|
||||
const theme = loadSavedTheme()
|
||||
const currentTheme = localStorage['currentTheme']
|
||||
if (theme && currentTheme === NightTheme.themeName) {
|
||||
updateTheme(LightTheme)
|
||||
el.className = iconForTheme(LightTheme.themeName)
|
||||
} else {
|
||||
updateTheme(NightTheme)
|
||||
el.className = iconForTheme(NightTheme.themeName)
|
||||
}
|
||||
}
|
||||
|
||||
const iconForTheme = (themeName) => {
|
||||
if (themeName === NightTheme.themeName) {
|
||||
return 'icon-invert_colors'
|
||||
} else {
|
||||
return 'icon-invert_colors2'
|
||||
}
|
||||
}
|
||||
|
||||
// initiate
|
||||
|
||||
// set inital theme to light
|
||||
updateTheme(LightTheme);
|
||||
checkForSavedTheme();
|
||||
|
||||
const el = document.getElementById('theme-switcher');
|
||||
|
||||
if (window.localStorage && localStorage['currentTheme']) {
|
||||
var iconClasses = iconForTheme(localStorage['currentTheme']);
|
||||
el.className = iconClasses;
|
||||
} else {
|
||||
el.className = iconForTheme();
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="warning" d="M554 340.667v172h-84v-172h84zM554 170.667v86h-84v-86h84zM42 42.667l470 810 470-810h-940z" />
|
||||
<glyph unicode="" glyph-name="local_offer" d="M234 640.667c36 0 64 28 64 64s-28 64-64 64-64-28-64-64 28-64 64-64zM914 444.667c16-16 24-36 24-60s-8-44-24-60l-300-300c-16-16-36-24-60-24s-44 8-60 24l-384 384c-16 16-24 36-24 60v300c0 46 38 84 84 84h300c24 0 44-8 60-24z" />
|
||||
<glyph unicode="" glyph-name="more_horiz" d="M512 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM768 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM256 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86z" />
|
||||
<glyph unicode="" glyph-name="check_box" d="M426 212.667l384 384-60 62-324-324-152 152-60-60zM810 810.667c48 0 86-40 86-86v-596c0-46-38-86-86-86h-596c-48 0-86 40-86 86v596c0 46 38 86 86 86h596z" />
|
||||
<glyph unicode="" glyph-name="code" d="M622 230.667l198 196-198 196 60 60 256-256-256-256zM402 230.667l-60-60-256 256 256 256 60-60-198-196z" />
|
||||
<glyph unicode="" glyph-name="info" d="M554 554.667v86h-84v-86h84zM554 212.667v256h-84v-256h84zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
|
||||
<glyph unicode="" glyph-name="invert_colors" d="M512 102.667v618l-180-180c-48-48-76-114-76-182 0-137.583 118.4-256 256-256zM754 600.667c134-134 134-348 0-482-66-66-154-100-242-100s-176 34-242 100c-134 134-134 348 0 482l242 242z" />
|
||||
<glyph unicode="" glyph-name="language" d="M698 340.667h144c6 28 12 56 12 86s-6 58-12 86h-144c4-28 6-56 6-86s-2-58-6-86zM622 104.667c78 26 146 82 186 152h-126c-14-54-34-104-60-152zM612 340.667c4 28 6 56 6 86s-2 58-6 86h-200c-4-28-6-56-6-86s2-58 6-86h200zM512 86.667c36 52 64 108 82 170h-164c18-62 46-118 82-170zM342 596.667c14 54 34 104 60 152-78-26-146-82-186-152h126zM216 256.667c40-70 108-126 186-152-26 48-46 98-60 152h-126zM182 340.667h144c-4 28-6 56-6 86s2 58 6 86h-144c-6-28-12-56-12-86s6-58 12-86zM512 766.667c-36-52-64-108-82-170h164c-18 62-46 118-82 170zM808 596.667c-40 70-108 126-186 152 26-48 46-98 60-152h126zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
|
||||
<glyph unicode="" glyph-name="search" d="M406 340.667c106 0 192 86 192 192s-86 192-192 192-192-86-192-192 86-192 192-192zM662 340.667l212-212-64-64-212 212v34l-12 12c-48-42-112-66-180-66-154 0-278 122-278 276s124 278 278 278 276-124 276-278c0-68-24-132-66-180l12-12h34z" />
|
||||
<glyph unicode="" glyph-name="invert_colors2" d="M268.8 119.467c68.267-68.267 153.6-98.133 243.2-98.133s174.933 34.133 243.2 98.133c132.267 132.267 132.267 349.867 0 482.133l-243.2 243.2-243.2-243.2c-132.267-132.267-132.267-349.867 0-482.133zM512 721.067l179.2-179.2c46.933-46.933 76.8-110.933 76.8-179.2s-25.6-132.267-76.8-179.2c-46.933-46.933-110.933-76.8-179.2-76.8v614.4z" />
|
||||
<glyph unicode="" glyph-name="rss_feed" d="M170 508.667c234 0 424-190 424-424h-122c0 166-136 302-302 302v122zM170 748.667c366 0 664-298 664-664h-120c0 300-244 544-544 544v120zM170 178.667c0 52 42 92 94 92s92-40 92-92-40-94-92-94-94 42-94 94z" />
|
||||
<glyph unicode="" glyph-name="mail_outline" d="M512 468.667l342 214h-684zM854 170.667v426l-342-212-342 212v-426h684zM854 768.667c46 0 84-40 84-86v-512c0-46-38-86-84-86h-684c-46 0-84 40-84 86v512c0 46 38 86 84 86h684z" />
|
||||
<glyph unicode="" glyph-name="icon-github" d="M512 853.334c-235.52 0-426.667-191.147-426.667-426.667 0-188.587 122.453-348.587 291.84-405.333 21.333-3.413 28.16 9.813 28.16 21.333 0 9.813 0 36.693 0 72.107-118.187-25.6-143.36 57.173-143.36 57.173-19.627 49.493-47.36 62.72-47.36 62.72-38.827 26.453 2.987 25.6 2.987 25.6 42.667-2.987 65.28-43.947 65.28-43.947 37.12-64.853 99.84-45.653 124.16-35.413 3.84 27.733 14.933 46.507 26.88 57.173-94.72 10.667-194.133 47.36-194.133 209.92 0 47.36 16.213 85.333 43.947 115.627-4.267 10.667-19.2 55.040 4.267 112.64 0 0 35.84 11.52 117.333-43.52 33.707 9.387 70.4 14.080 106.667 14.080s72.96-4.693 106.667-14.080c81.493 55.040 117.333 43.52 117.333 43.52 23.467-57.6 8.533-101.973 4.267-112.64 27.733-30.293 43.947-68.267 43.947-115.627 0-162.987-99.84-198.827-194.987-209.493 15.36-13.227 29.44-39.253 29.44-78.933 0-57.173 0-103.253 0-116.907 0-11.52 6.827-25.173 28.587-21.333 169.387 57.173 291.413 216.747 291.413 405.333 0 235.52-191.147 426.667-426.667 426.667z" />
|
||||
<glyph unicode="" glyph-name="icon-stackoverflow" d="M740.693 76.8v229.547h76.373v-306.347h-689.067v306.347h76.8v-229.547h535.893zM288.853 327.68l15.787 75.093 375.040-78.933-15.787-75.093-375.040 78.933zM338.347 507.307l32.427 68.693 347.307-161.28-32.427-69.12-347.307 161.707zM434.773 677.547l49.067 58.88 294.4-245.76-49.067-58.453-294.4 245.333zM624.64 858.88l228.693-307.627-61.44-45.653-228.693 307.627 61.44 45.653zM281.173 153.174v76.8h383.147v-76.8h-383.147z" />
|
||||
<glyph unicode="" glyph-name="icon-twitter" d="M958.293 682.667c-32.853-14.933-68.267-24.747-104.96-29.44 37.547 22.613 66.56 58.453 80.213 101.547-35.413-21.333-74.667-36.267-116.053-44.8-33.707 36.693-81.067 58.027-134.827 58.027-100.267 0-182.187-81.92-182.187-183.040 0-14.507 1.707-28.587 4.693-41.813-151.893 7.68-287.147 80.64-377.173 191.147-15.787-26.88-24.747-58.453-24.747-91.733 0-63.573 32-119.893 81.493-151.893-30.293 0-58.453 8.533-83.2 21.333 0 0 0 0 0-1.28 0-88.747 63.147-162.987 146.773-179.627-15.36-4.267-31.573-6.4-48.213-6.4-11.52 0-23.040 1.28-34.133 3.413 23.040-72.107 90.027-125.867 170.667-127.147-62.293-49.493-141.227-78.507-227.413-78.507-14.507 0-29.013 0.853-43.52 2.56 81.067-52.053 177.493-82.347 280.747-82.347 336.213 0 520.96 279.040 520.96 520.96 0 8.107 0 15.787-0.427 23.893 35.84 25.6 66.56 58.027 91.307 95.147z" />
|
||||
<glyph unicode="" glyph-name="icon-youtube" d="M426.667 234.667v384l256-192zM853.333 750.934c-25.6 8.533-183.467 17.067-341.333 17.067s-315.733-8.107-341.333-16.213c-66.56-22.187-85.333-171.52-85.333-325.12 0-153.173 18.773-302.933 85.333-324.693 25.6-8.533 183.467-16.64 341.333-16.64s315.733 8.107 341.333 16.64c66.56 21.76 85.333 171.52 85.333 324.693 0 153.6-18.773 302.507-85.333 324.267z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,424 @@
|
|||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
* without disabling user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of focused elements when they are also in an
|
||||
* active/hover state.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
box-sizing: content-box; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
layout: null
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>{{ site.blog.title | xml_escape }}</title>
|
||||
<description>{{ site.blog.description | xml_escape }}</description>
|
||||
<link>{{ site.url }}{{ site.baseurl }}/</link>
|
||||
<atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
|
||||
<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
|
||||
<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
|
||||
<generator>Jekyll v{{ jekyll.version }}</generator>
|
||||
{% for post in site.posts limit:10 %}
|
||||
<item>
|
||||
<title>{{ post.title | xml_escape }}</title>
|
||||
<description>{{ post.content | xml_escape }}</description>
|
||||
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
|
||||
<link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
|
||||
<guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
|
||||
{% for tag in post.tags %}
|
||||
<category>{{ tag | xml_escape }}</category>
|
||||
{% endfor %}
|
||||
{% for cat in post.categories %}
|
||||
<category>{{ cat | xml_escape }}</category>
|
||||
{% endfor %}
|
||||
</item>
|
||||
{% endfor %}
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
layout: blog
|
||||
title: Blog
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
# Feel free to add content and custom Front Matter to this file.
|
||||
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
|
||||
|
||||
layout: home
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: null
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
---
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
||||
Sitemap: {{ site.url }}/sitemap.xml
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
layout: null
|
||||
sitemap:
|
||||
exclude: 'yes'
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
{% for post in site.posts %}
|
||||
{% unless post.published == false %}
|
||||
<url>
|
||||
<loc>{{ site.url }}{{ post.url }}/</loc>
|
||||
{% if post.sitemap.lastmod %}
|
||||
<lastmod>{{ post.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
|
||||
{% elsif post.date %}
|
||||
<lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
|
||||
{% else %}
|
||||
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
|
||||
{% endif %}
|
||||
{% if post.sitemap.changefreq %}
|
||||
<changefreq>{{ post.sitemap.changefreq }}</changefreq>
|
||||
{% else %}
|
||||
<changefreq>monthly</changefreq>
|
||||
{% endif %}
|
||||
{% if post.sitemap.priority %}
|
||||
<priority>{{ post.sitemap.priority }}</priority>
|
||||
{% else %}
|
||||
<priority>0.7</priority>
|
||||
{% endif %}
|
||||
</url>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% for page in site.pages %}
|
||||
{% unless page.sitemap.exclude == "yes" %}
|
||||
<url>
|
||||
<loc>{{ site.url }}{{ page.url | remove: "index.html" }}</loc>
|
||||
{% if page.sitemap.lastmod %}
|
||||
<lastmod>{{ page.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
|
||||
{% elsif page.date %}
|
||||
<lastmod>{{ page.date | date_to_xmlschema }}</lastmod>
|
||||
{% else %}
|
||||
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
|
||||
{% endif %}
|
||||
{% if page.sitemap.changefreq %}
|
||||
<changefreq>{{ page.sitemap.changefreq }}</changefreq>
|
||||
{% else %}
|
||||
<changefreq>monthly</changefreq>
|
||||
{% endif %}
|
||||
{% if page.sitemap.priority %}
|
||||
<priority>{{ page.sitemap.priority }}</priority>
|
||||
{% else %}
|
||||
<priority>0.5</priority>
|
||||
{% endif %}
|
||||
</url>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</urlset>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Loading…
Reference in New Issue