+ {% if post.link != nil %} + {{ post.title }} → + {% else %} + {{ post.title }} + {% endif %} +
+ + + + {% if site.blog.hero_layout == true %} ++{% endif %} diff --git a/_includes/externals/disqus.html b/_includes/externals/disqus.html new file mode 100644 index 0000000..905be22 --- /dev/null +++ b/_includes/externals/disqus.html @@ -0,0 +1,15 @@ +{% if site.author.disqus %} + + + +{% endif %} diff --git a/_includes/externals/google_analytics.html b/_includes/externals/google_analytics.html new file mode 100644 index 0000000..e3ae452 --- /dev/null +++ b/_includes/externals/google_analytics.html @@ -0,0 +1,11 @@ +{% if site.author.google_analytics %} + +{% endif %} \ No newline at end of file diff --git a/_includes/externals/scripting.html b/_includes/externals/scripting.html new file mode 100644 index 0000000..8ebc550 --- /dev/null +++ b/_includes/externals/scripting.html @@ -0,0 +1,6 @@ + + + +{% if site.blog.inline_footnotes == true %} + +{% endif %} diff --git a/_includes/main/footer.html b/_includes/main/footer.html new file mode 100644 index 0000000..c6b4634 --- /dev/null +++ b/_includes/main/footer.html @@ -0,0 +1,4 @@ + diff --git a/_includes/main/head.html b/_includes/main/head.html new file mode 100644 index 0000000..6b44eac --- /dev/null +++ b/_includes/main/head.html @@ -0,0 +1,55 @@ + + + +
{{ include.title }}
+ {{ include.subtitle }} ++Check out other tags: +
-
+ {% assign tags = site.tags | sort %}
+ {% for tag in tags %}
+
- + #{{ tag[0] }} + + {% endfor %} +
+
{% include utils/date_custom_short.html date = post.date %}
+ + {% endif %} + + {% endfor %} + + {% else %} +There are no posts in this tag.
+{% endif %} + + {% include utils/tag-box.html %} diff --git a/_layouts/blog.html b/_layouts/blog.html new file mode 100644 index 0000000..bb08d74 --- /dev/null +++ b/_layouts/blog.html @@ -0,0 +1,12 @@ +--- +layout: default +title: "Blog" +--- + +{% for post in paginator.posts %} + +{% include blog.html %} + +{% endfor %} + +{% include post/pagination.html %} diff --git a/_layouts/compress.html b/_layouts/compress.html new file mode 100644 index 0000000..8248010 --- /dev/null +++ b/_layouts/compress.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: "" %}{% 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 "" %}
{% endif %}{% unless _pre_before contains "" 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 = "
Step | Bytes |
raw | {{ content | size }}{% if _profile_endings %} |
endings | {{ _profile_endings }}{% endif %}{% if _profile_startings %} |
startings | {{ _profile_startings }}{% endif %}{% if _profile_comments %} |
comments | {{ _profile_comments }}{% endif %}{% if _profile_collapse %} |
collapse | {{ _profile_collapse }}{% endif %}{% if _profile_clippings %} |
clippings | {{ _profile_clippings }}{% endif %} |
- /
-
+
{{ post.title | xml_escape }} +{{ post.content | xml_escape }} +{{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} +{{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} +{{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} +{{ cat | xml_escape }} + {% endfor %} +
+ {% endfor %}
+
- 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%;
+ }
+}
diff --git a/_sass/_barefoot.scss b/_sass/_barefoot.scss
new file mode 100644
index 0000000..fd08f06
--- /dev/null
+++ b/_sass/_barefoot.scss
@@ -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;
+ }
+}
diff --git a/_sass/_base.scss b/_sass/_base.scss
new file mode 100644
index 0000000..d9ac096
--- /dev/null
+++ b/_sass/_base.scss
@@ -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%;
+}
diff --git a/_sass/_blockquote.scss b/_sass/_blockquote.scss
new file mode 100644
index 0000000..48620b1
--- /dev/null
+++ b/_sass/_blockquote.scss
@@ -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;
+ }
+}
diff --git a/_sass/_code.scss b/_sass/_code.scss
new file mode 100644
index 0000000..9b47b32
--- /dev/null
+++ b/_sass/_code.scss
@@ -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;
+// }
diff --git a/_sass/_components.scss b/_sass/_components.scss
new file mode 100644
index 0000000..2182fe6
--- /dev/null
+++ b/_sass/_components.scss
@@ -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
+}
+
+//
- 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
+ }
+}
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
new file mode 100644
index 0000000..dfa6f1c
--- /dev/null
+++ b/_sass/_footer.scss
@@ -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;
+}
diff --git a/_sass/_header.scss b/_sass/_header.scss
new file mode 100644
index 0000000..618e608
--- /dev/null
+++ b/_sass/_header.scss
@@ -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;
+ }
+ }
+}
diff --git a/_sass/_hero.scss b/_sass/_hero.scss
new file mode 100644
index 0000000..9f96794
--- /dev/null
+++ b/_sass/_hero.scss
@@ -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;
+ }
+}
diff --git a/_sass/_icons.scss b/_sass/_icons.scss
new file mode 100644
index 0000000..8760776
--- /dev/null
+++ b/_sass/_icons.scss
@@ -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";
+}
diff --git a/_sass/_jekyll-github.scss b/_sass/_jekyll-github.scss
new file mode 100644
index 0000000..3d8218e
--- /dev/null
+++ b/_sass/_jekyll-github.scss
@@ -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; }
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
new file mode 100644
index 0000000..de44354
--- /dev/null
+++ b/_sass/_mixins.scss
@@ -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%;
+ }
+}
diff --git a/_sass/_notices.scss b/_sass/_notices.scss
new file mode 100644
index 0000000..cadb31d
--- /dev/null
+++ b/_sass/_notices.scss
@@ -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)
+}
diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss
new file mode 100644
index 0000000..fdb524b
--- /dev/null
+++ b/_sass/_pagination.scss
@@ -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);
+ }
+ }
+}
diff --git a/_sass/_table.scss b/_sass/_table.scss
new file mode 100644
index 0000000..7a0ade4
--- /dev/null
+++ b/_sass/_table.scss
@@ -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);
+}
diff --git a/_sass/_titles.scss b/_sass/_titles.scss
new file mode 100644
index 0000000..2a3ad0d
--- /dev/null
+++ b/_sass/_titles.scss
@@ -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;
+ }
+ }
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..73dd021
--- /dev/null
+++ b/_sass/_variables.scss
@@ -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;
diff --git a/about.markdown b/about.markdown
deleted file mode 100644
index 8b4e0b2..0000000
--- a/about.markdown
+++ /dev/null
@@ -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
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..f9f1d58
--- /dev/null
+++ b/about.md
@@ -0,0 +1,25 @@
+---
+layout: page
+title: About
+permalink: /about/
+published: true
+---
+
+
{% include utils/date_custom_short.html date = post.date %}
+ + + + {% comment %} + {% include utils/tag-box.html %} + {% endcomment %} + + +" + fnContent + "
"; + + // Gotta escape `:` used within a querySelector so JS doesn't think you're looking for a pseudo-element. + ref = currentScope.querySelector(fnHrefId.replace(':', '\\:')); + + footnote = "