diff --git a/_includes/ajaxify_content_form.html b/_includes/ajaxify_content_form.html new file mode 100644 index 0000000..6a4b277 --- /dev/null +++ b/_includes/ajaxify_content_form.html @@ -0,0 +1,30 @@ + diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..3d5f7f9 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,19 @@ + +{% if site.enable_anchorjs %} + +{% endif %} + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..8cedeb0 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,109 @@ + + {% if site.google_tag_manager %} + + {% endif %} + + + {% if page.title %}{{ page.title | strip_html }} – {% endif %}{{ site.title | strip_html }} + + + + + + + + {% if page.meta_robots %} + {% else %}{% endif %} + + {% if site.fb_page %}{% endif %} + {% if page.categories %}{% endif %} + + + + + + + + {% if site.extended_fonts %} + + + {% else %} + + + {% endif %} + {% if site.show_social_icons or site.show_sharing_icons %} + + {% endif %} + + + {% if site.enable_mathjax %} + + {% endif %} + + + {% if site.google_verification %} + + {% endif %} + {% if site.bing_verification %} + + {% endif %} + + + + + + + + + + {% if site.post_preview_image %} + + {% endif %} + + + + {% if site.twitter_username %} + + + {% endif %} + + + + {% if site.post_preview_image %} + + {% endif %} + + + + + + + + + + + + + + + + + + + {% if site.google_analytics %} + + {% endif %} + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..d7ac0f3 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,14 @@ +
+
+
+ {{ site.title }} + +
+ {% if site.show_social_icons %} + {% include social_links.html %} + {% endif %} +
+
+
diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000..0b30d9e --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,15 @@ +{% assign default_paths = site.pages | map: "path" %} +{% assign page_paths = site.header_pages | default: default_paths %} + +{% for path in page_paths %} + + {% assign item = site.pages | where: "path", path | first %} + + {% if item.title and page.title == item.title %} + {{ item.title }} + {% elsif item.title %} + {{ item.title }} + {% endif %} + + +{% endfor %} diff --git a/_includes/pagination.html b/_includes/pagination.html new file mode 100644 index 0000000..eec3829 --- /dev/null +++ b/_includes/pagination.html @@ -0,0 +1,23 @@ +{% if paginator.total_pages != 1 %} + +{% endif %} diff --git a/_includes/post_footer.html b/_includes/post_footer.html new file mode 100644 index 0000000..5e9c5d7 --- /dev/null +++ b/_includes/post_footer.html @@ -0,0 +1,10 @@ +
+ John Otander +

+ Pixyll is an open-source Jekyll theme that's built by John Otander. + When he's not writing code and building things, he likes to ski. A. Lot. +

+

+ Follow him on Twitter. +

+
diff --git a/_includes/share_buttons.html b/_includes/share_buttons.html new file mode 100644 index 0000000..fcac358 --- /dev/null +++ b/_includes/share_buttons.html @@ -0,0 +1,41 @@ +
+ {{ site.text.share_buttons.text | default: "Share this post!" }} + +
+ {% if site.share_facebook %} + + {% endif %} + + {% if site.share_twitter %} + + {% endif %} + + {% if site.share_googleplus %} + + {% endif %} + + {% if site.share_linkedin %} + + {% endif %} + + {% if site.share_digg %} + + {% endif %} + + {% if site.share_tumblr %} + + {% endif %} + + {% if site.share_reddit %} + + {% endif %} + + {% if site.share_stumbleupon %} + + {% endif %} + + {% if site.share_hackernews %} + + {% endif %} +
+
diff --git a/_includes/social_links.html b/_includes/social_links.html new file mode 100644 index 0000000..0d1d04c --- /dev/null +++ b/_includes/social_links.html @@ -0,0 +1,59 @@ +
+
+ {% if site.github_username %} + + {% endif %} + {% if site.reddit_username %} + + {% endif %} + {% if site.bitbucket_username %} + + {% endif %} + {% if site.stackoverflow_id %} + + {% endif %} + + {% if site.twitter_username %} + + {% endif %} + {% if site.skype_username %} + + {% endif %} + {% if site.steam_nickname %} + + {% endif %} + {% if site.google_plus_id %} + + {% endif %} + {% if site.email %} + + {% endif %} + {% if site.linkedin_username %} + + {% endif %} + {% if site.angellist_username %} + + {% endif %} + {% if site.medium_id %} + + {% endif %} + {% if site.telegram_username %} + + {% endif %} + {% if site.vk_id %} + + {% endif %} +
+
+ {% if site.bitcoin_url %} + + {% endif %} + {% if site.paypal_url %} + + {% endif %} + {% if site.flattr_button %} + {{ site.flattr_button }} + {% endif %} +
+
+
diff --git a/_layouts/center.html b/_layouts/center.html new file mode 100644 index 0000000..c65db64 --- /dev/null +++ b/_layouts/center.html @@ -0,0 +1,32 @@ + + +{% include head.html %} + + {% if site.google_tag_manager %} + + {% endif %} + {% if site.facebook_comments %} +
+ + {% endif %} + +
+ {% include header.html %} + +
+
+ {{ content }} +
+
+
+ + {% include footer.html %} + + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..b5749a8 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,32 @@ + + +{% include head.html %} + + {% if site.google_tag_manager %} + + {% endif %} + {% if site.facebook_comments %} +
+ + {% endif %} + +
+ {% include header.html %} + +
+
+ {{ content }} +
+
+
+ + {% include footer.html %} + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..b09b848 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,11 @@ +--- +layout: default +--- +
+
+

{{ page.title }}

+
+
+ {{ content }} +
+
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..512c8d6 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,67 @@ +--- +layout: default +--- + +{% assign minutes = content | strip_html | number_of_words | divided_by: 180 %} +{% if minutes == 0 %} +{% assign minutes = 1 %} +{% endif %} + +
+

{{ page.title }}

+ {{ page.date | date: site.date_format }}
+ {% if page.update_date %} + {{ site.text.post.updated | default: "Updated" }}: {{ page.update_date | date: site.date_format }}
+ {% endif %} + + {% if page.minutes %} + {{ page.minutes }} {{ site.text.post.minute_read | default: "minute read" }} + {% else %} + {{ minutes }} {{ site.text.post.minute_read | default: "minute read" }} + {% endif %} + +
+ +
+ {{ content }} +
+ +{% if site.show_sharing_icons %} + {% include share_buttons.html %} +{% endif %} + +{% if site.show_post_footers %} + {% include post_footer.html %} +{% endif %} + +{% if site.disqus_shortname %} +
+ + +{% endif %} + +{% if site.facebook_comments %} +
+{% endif %} + +{% if site.show_related_posts %} +

{{ site.text.post.related_posts | default: "Related Posts" }}

+ {% for post in site.related_posts %} +
+ +

{{ post.title }}

+

{{ post.summary }}

+ +
+ {% endfor %} +{% endif %} diff --git a/_sass/_animations.scss b/_sass/_animations.scss new file mode 100644 index 0000000..d24833b --- /dev/null +++ b/_sass/_animations.scss @@ -0,0 +1,60 @@ +/*! +Animate.css - https://animate.style/ +Licensed under the MIT license - https://opensource.org/licenses/MIT + +Copyright (c) 2014 Daniel Eden +*/ + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + + -webkit-transform: translateY(-20px) translate3d(0, 0, 0); + -ms-transform: translateY(-20px) translate3d(0, 0, 0); + transform: translateY(-20px) translate3d(0, 0, 0); + } + + 100% { + opacity: 1; + + -webkit-transform: translateY(0) translate3d(0, 0, 0); + -ms-transform: translateY(0) translate3d(0, 0, 0); + transform: translateY(0) translate3d(0, 0, 0); + } +} + +.fade-in-down { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..2ea43d3 --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; +/*! + +Pixyll + +A simple, beautiful theme for Jekyll that emphasizes content rather than +aesthetic fluff. + +Built upon BASSCSS (https://basscss.com/). + +Crafted with <3 by John Otander (@4lpine) - ©2015-2021 John Otander +MIT License https://opensource.org/licenses/MIT + +*/ + +html, body { + height: auto; + min-height: 100%; +} + +img { + max-width: 100%; +} + +em img { + max-width: 100%; + margin-left: 0; +} + +body { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} diff --git a/_sass/_basscss.scss b/_sass/_basscss.scss new file mode 100644 index 0000000..3977e58 --- /dev/null +++ b/_sass/_basscss.scss @@ -0,0 +1,25 @@ +/*! + + BASSCSS + + Next-level CSS toolkit - basscss.com + + Made with love by Jxnblk - ©2014 Brent Jackson + MIT License https://opensource.org/licenses/MIT + +*/ + +@import 'basscss/base-buttons'; +@import 'basscss/base-forms'; +@import 'basscss/base-reset'; +@import 'basscss/base-typography'; + +@import 'basscss/buttons-blue'; + +@import 'basscss/syntax-highlighting'; +@import 'basscss/color-base'; +@import 'basscss/colors'; + +@import 'basscss/utility-headings'; +@import 'basscss/utility-typography'; +@import 'basscss/utility-white-space'; diff --git a/_sass/_blockquotes.scss b/_sass/_blockquotes.scss new file mode 100644 index 0000000..e7291ba --- /dev/null +++ b/_sass/_blockquotes.scss @@ -0,0 +1,16 @@ +blockquote { + border-left: 5px solid #7a7a7a; + font-style: italic; + margin-left: $space-1; + padding: $space-1; +} + +blockquote footer { + background-color: #fff; + border-color: transparent; + color: #7a7a7a; + font-size: .85rem; + font-style: normal; + text-align: left; + padding: 0; +} diff --git a/_sass/_clearfix.scss b/_sass/_clearfix.scss new file mode 100644 index 0000000..b770844 --- /dev/null +++ b/_sass/_clearfix.scss @@ -0,0 +1,8 @@ +.clearfix:before, .clearfix:after { + content: ' '; + display: table; +} + +.clearfix:after { + clear: both; +} diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 0000000..b7b274b --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,70 @@ +pre, +pre code { + background-color: transparent; + border-radius: $pre-border-radius; +} + +pre, +code { + font-family: $monospace-font-family; +} + +code { + color: #7a7a7a; +} + +pre { + padding: 1.125em; + line-height: 1.11; + overflow-x: scroll; + margin-bottom: 0.88em; + background-color: $pre-background-color; +} + +.highlight .p { + font-size: 1.125rem; + line-height: 1; +} + +pre { + counter-reset: line-numbering; + white-space: pre; + overflow-x: auto; + word-break: inherit; + word-wrap: inherit; +} + +pre a { + background-image: none; +} + +pre a::before { + content: counter(line-numbering); + counter-increment: line-numbering; + padding-right: 1em; /* space after numbers */ + width: 25px; + text-align: right; + opacity: 0.7; + display: inline-block; + color: $light-gray; + margin-right: 16px; + font-size: 13px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +pre a:first-of-type::before { + padding-top: 10px; +} + +pre a:last-of-type::before { + padding-bottom: 10px; +} + +pre a:only-of-type::before { + padding: 10px; +} diff --git a/_sass/_footer.scss b/_sass/_footer.scss new file mode 100644 index 0000000..8c0a1d5 --- /dev/null +++ b/_sass/_footer.scss @@ -0,0 +1,29 @@ +.site { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; +} + +.site-wrap { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +footer { + background-color: $footer-bg-color; + border-top: $footer-border-top; + color: $footer-color; + font-size: $footer-font-size; + font-weight: $footer-font-weight; + padding: $footer-padding; + text-align: center; +} diff --git a/_sass/_forms.scss b/_sass/_forms.scss new file mode 100644 index 0000000..2563dd5 --- /dev/null +++ b/_sass/_forms.scss @@ -0,0 +1,106 @@ +input, +select, +textarea, +fieldset { + font-size: $form-field-font-size; + margin-top: 0; + margin-bottom: $space-1; +} + +input[type=text], +input[type=datetime], +input[type=datetime-local], +input[type=email], +input[type=month], +input[type=number], +input[type=password], +input[type=search], +input[type=tel], +input[type=time], +input[type=url], +input[type=week] { + box-sizing: border-box; + height: $form-field-height; + padding: $form-field-padding-y $form-field-padding-x; + vertical-align: middle; + -webkit-appearance: none; +} + +select { + box-sizing: border-box; + line-height: 1.75; + padding: $form-field-padding-y $form-field-padding-x; +} + +select:not([multiple]) { + height: $form-field-height; + vertical-align: middle; +} + +textarea { + box-sizing: border-box; + line-height: 1.75; + padding: $form-field-padding-y $form-field-padding-x; +} + +.form-stacked input, +.form-stacked textarea, +.form-stacked select { + width: 100%; +} + +.field-light { + background-color: white; + transition: box-shadow .2s ease; + border-style: solid; + border-width: $border-width; + border-color: $border-color; + border-radius: $border-radius; +} + +.field-light:focus { + outline: none; + border-color: $blue; + box-shadow: 0 0 2px rgba($blue,.5); +} + +.field-light:disabled { + color: $mid-gray; + background-color: $darken-2; +} + +.field-light:read-only:not(select) { + background-color: $darken-2; +} + +.field-light:invalid { + border-color: $red; +} + +.field-light.is-success { + border-color: $green; +} + +.field-light.is-warning { + border-color: $yellow; +} + +.field-light.is-error { + border-color: $red; +} + + +.radio-light, +.checkbox-light { + transition: box-shadow .2s ease; +} + +.radio-light { + border-radius: 50%; +} + +.radio-light:focus, +.checkbox-light:focus { + outline: none; + box-shadow: 0 0 2px rgba($blue, .5); +} diff --git a/_sass/_gists.scss b/_sass/_gists.scss new file mode 100644 index 0000000..d4ca451 --- /dev/null +++ b/_sass/_gists.scss @@ -0,0 +1,12 @@ +.gist, +.gist .highlight .p { + font-size: .75rem; +} + +.gist .lines { + width: 100%; +} + +.gist table>tbody>tr>td { + border-top: 0px; +} diff --git a/_sass/_header.scss b/_sass/_header.scss new file mode 100644 index 0000000..db8b37c --- /dev/null +++ b/_sass/_header.scss @@ -0,0 +1,57 @@ +.site-header { + padding-top: $space-1; + padding-bottom: $space-2; +} + +.site-header a { + color: $header-color; + font-size: $h3; + font-weight: $header-font-weight; + background-image: none; +} + +.site-header .site-title { + font-size: $h2; +} + +.site-nav { + padding-top: $nav-padding; +} + +.site-header nav a { + color: $nav-color; +} + +.site-header nav a:hover, +.site-header nav a:focus, +.site-header nav a:active, +.site-header nav a.nav-active:hover, +.site-header nav a.nav-active:focus, +.site-header nav a.nav-active:active { + color: $nav-link-color; + opacity: 1; + border-bottom: $nav-link-border-bottom; +} + +.site-header nav a.nav-active { + border-bottom: $nav-active-border-bottom; +} + +.site-nav a + a { + margin-left: $nav-link-padding-x; +} + +.site-header a:hover, +.posts .post a:hover .post-meta, +.posts .post a:hover .post-title, +.posts .post a:hover .post-summary { + opacity: 0.88; +} + +.site-header { + text-align: center; +} + +.site-header .site-nav { + text-align: center; +} diff --git a/_sass/_links.scss b/_sass/_links.scss new file mode 100644 index 0000000..9c50696 --- /dev/null +++ b/_sass/_links.scss @@ -0,0 +1,53 @@ +a { + color: $link-color; + background-image: linear-gradient(to top, + rgba(0,0,0,0) 13%, + rgba($link-color,.8) 13%, + rgba($link-color,.8) 18%, + rgba(0,0,0,0) 17% + ); + text-shadow: white 1px 0px 0px, white -1px 0px 0px; +} + +a:hover, +a:focus, +a:active { + border: 0; + color: $link-hover-color; + text-decoration: none; + background-image: linear-gradient(to top, + rgba(0,0,0,0) 13%, + rgba($link-hover-color,.8) 13%, + rgba($link-hover-color,.8) 17%, + rgba(0,0,0,0) 17% + ); + text-shadow: white 1px 0px 0px, white -1px 0px 0px; +} + +// Correct issues with buttons +button, +.button { + text-shadow: none; + background-image: none; +} + +.button:hover, +.button:focus, +.button:active { + color: white; + text-shadow: none; + background-image: none; +} + +.anchorjs-link { + text-shadow: none; + background-image: none; +} +.anchorjs-link:hover, +.anchorjs-link:focus, +.anchorjs-link:active{ + border: 0; + color: $link-hover-color; + text-shadow: none; + background-image: none; +} diff --git a/_sass/_measure.scss b/_sass/_measure.scss new file mode 100644 index 0000000..f509ccb --- /dev/null +++ b/_sass/_measure.scss @@ -0,0 +1,4 @@ +.measure { + margin: 0 auto; + max-width: $measure-width; +} diff --git a/_sass/_media-queries.scss b/_sass/_media-queries.scss new file mode 100644 index 0000000..83ff04c --- /dev/null +++ b/_sass/_media-queries.scss @@ -0,0 +1,64 @@ +@media screen and (min-width: $viewport-small) { + html { + font-size: 16px; + } + + h1, + .h1 { + font-size: $h1; + } + + .site-header { + text-align: left; + } + + .site-nav { + margin-top: 0; + } + + .site-header a { + font-size: $h4; + } + + .site-header .site-title { + font-size: $h3; + float: left; + } + + .site-header .site-nav { + float: right; + margin-top: .25rem; + } + + blockquote { + margin-left: $space-3; + padding: $space-3; + } + + .social-icons-left { + text-align: left; + } + + .social-icons-right { + text-align: right; + } +} + +@media screen and (min-width: $viewport-medium) { + html { + font-size: 18px; + } +} + +@media screen and (min-width: $viewport-large) { + html { + font-size: 20px; + } +} + +@media screen and (min-width: $viewport-large + 14) { + em img { + max-width: $measure-width + 14; + margin-left: -7em; + } +} diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss new file mode 100644 index 0000000..1919713 --- /dev/null +++ b/_sass/_pagination.scss @@ -0,0 +1,52 @@ +.pagination { + font-size: 1rem; + font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 300; + text-align: center; +} + +.pagination a, .pagination .disabled { + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background: #fafafa; + border-radius: 0.1875em; + border: 1px solid #f3f3f3; + color: #333333; + padding: 1em 1.5em; +} + +.pagination .disabled, .pagination .pagination-meta { + opacity: 0.5; +} + +.pagination .pagination-meta { + overflow: hidden; +} + +.pagination a:hover, .pagination a:focus { + background: white; + color: #477dca; +} + +.pagination a:active { + background: #f7f7f7; +} + +.pagination .button { + font-size: 1rem; + font-weight: 300; + letter-spacing: 1px; +} + +.button-disabled { + opacity: 0.55; + background-color: #999; +} + +.button-disabled:hover, +.button-disabled:active, +.button-disabled:focus { + cursor: not-allowed; + background-color: #999; +} diff --git a/_sass/_positions.scss b/_sass/_positions.scss new file mode 100644 index 0000000..3449fac --- /dev/null +++ b/_sass/_positions.scss @@ -0,0 +1,7 @@ +.left { + float: left; +} + +.right { + float: right; +} diff --git a/_sass/_posts.scss b/_sass/_posts.scss new file mode 100644 index 0000000..91f5a06 --- /dev/null +++ b/_sass/_posts.scss @@ -0,0 +1,48 @@ + +.posts { + margin: 0; +} + +.posts .post { + margin-bottom: 0.75em; + border-bottom: thin solid #f3f3f3; +} + +.posts .post:last-child { + border-bottom: none; + margin-bottom: .375em; + padding-bottom: 0; +} + +.post-link .post-title { + margin-top: 0; + font-weight: 600; + color: #333; +} + +.post-footer { + @extend .italic; + + margin-top: .75rem; + text-align: center; +} + +.post-footer .avatar { + margin: 2rem 0; + width: 100px; + border-radius: 50%; +} + +.meta, +.post-meta { + width: auto; + font-weight: 300; + margin: 0; + padding: .25em 0; + color: #7a7a7a; + font-style: italic; +} + +.related-post-title { + border-bottom: thin solid #f3f3f3; +} diff --git a/_sass/_social-icons.scss b/_sass/_social-icons.scss new file mode 100644 index 0000000..b491807 --- /dev/null +++ b/_sass/_social-icons.scss @@ -0,0 +1,25 @@ +.social-icons-left, .social-icons-right { + text-align: center; + float: none; +} + +.social-icons { + font-size: 1.25rem; + padding: 0.5em 0 0 0; + width: 100%; +} + +.social-icons a.fa { + cursor: pointer; + opacity: 0.8; + padding: 0.2em; +} + +.social-icons a.fa:hover { + opacity: 1; +} + +.social-icons iframe[title=Flattr] { + position: relative; + top: 0.1em; +} diff --git a/_sass/_tables.scss b/_sass/_tables.scss new file mode 100644 index 0000000..d8a7d37 --- /dev/null +++ b/_sass/_tables.scss @@ -0,0 +1,47 @@ +/* + Table styles copied from Bootstrap + Copyright (c) 2013 Twitter, Inc +*/ + +table { + width: 100%; + max-width: 100%; + margin-bottom: 1.5rem; + font-size: 1.125rem; + overflow-x:auto; + display:block; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: 12px; + line-height: 1.2; + vertical-align: top; + border-top: 1px solid #333; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #333; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid #333; + } +} diff --git a/_sass/_typography.scss b/_sass/_typography.scss new file mode 100644 index 0000000..9dce6d8 --- /dev/null +++ b/_sass/_typography.scss @@ -0,0 +1,24 @@ +html { + font-size: $base-font-size; +} + +abbr { + border-bottom: $abbr-border-bottom; + cursor: help; +} + +p { + color: #333; + line-height: 1.5; +} + +small, +.small { + font-size: 0.707rem; +} + +sup { + position: relative; + vertical-align: middle; + top: -0.9ex; +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..f5a8679 --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,135 @@ +// Typography +$base-font-size: 14px !default; +$bold-font-weight: bold !default; +$font-family: 'Merriweather', 'PT Serif', Georgia, 'Times New Roman', serif !default; +$line-height: 1.5 !default; +$heading-font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif !default; +$heading-font-weight: 900 !default; +$heading-line-height: 1.25 !default; +$monospace-font-family: 'Source Code Pro', Consolas, monospace !default; +$h1: 2.998rem !default; +$h2: 1.5rem !default; +$h3: 1.25rem !default; +$h4: 1rem !default; +$h5: .875rem !default; +$h6: .75rem !default; +$h00: 4rem !default; +$h0: 3rem !default; +$h00-responsive: 8vw !default; +$h0-responsive: 6vw !default; +$h1-responsive: 4vw !default; +$h00-responsive-max: 7.68rem !default; +$h0-responsive-max: 5.76rem !default; +$h1-responsive-max: 3.84rem !default; +$abbr-border-bottom: 1px black dotted; + +// Page width +$measure-width: 42rem !default; + +// Viewport widths +$viewport-small: 32em; +$viewport-medium: 48em; +$viewport-large: 64em; + +// Colors +$blue: #0076df !default; +$red: #f95020 !default; +$green: #00cf26 !default; +$yellow: #efcc00 !default; +$orange: #ffcc22 !default; +$purple: #f92080 !default; +$dark-blue: #00369f !default; +$green: #00ab37 !default; +$dark-green: #009f06 !default; +$light-pink: #ffdddd !default; +$light-green: #ddffdd !default; +$dark-gray: #333 !default; +$mid-gray: #777 !default; +$light-gray: #ccc !default; +$lighter-gray: #eee !default; +$darken-1: rgba(#000,.0625) !default; +$darken-2: rgba(#000,.125) !default; +$darken-3: rgba(#000,.25) !default; +$darken-4: rgba(#000,.5) !default; + +// Links +$link-color: $blue; +$link-hover-color: darken($blue, 40%); + +// Breakpoints +$breakpoint-md: '(min-width: 52em)'; +$breakpoint-xl: '(min-width: 96em)'; + +// Whitespace +$space-1: .5rem !default; +$space-2: 1rem !default; +$space-3: 2rem !default; +$space-4: 4rem !default; + +// Buttons +$button-font-size: inherit !default; +$button-font-weight: normal !default; +$button-line-height: 1.125rem !default; +$button-padding-y: .5rem !default; +$button-padding-x: 1rem !default; +$button-font-family: $heading-font-family; + +// Forms +$form-field-font-size: 1rem !default; +$form-field-height: 2.25rem !default; +$form-field-padding-y: .5rem !default; +$form-field-padding-x: .5rem !default; + +// Borders +$border-color: $light-gray !default; +$border-width: 1px !default; +$border-radius: 3px !default; + +// Forms +$form-field-font-size: 1rem; +$form-field-height: 2.25rem; +$form-field-padding-y: .5rem; +$form-field-padding-x: .5rem; + +// Code +$pre-border-radius: 0; +$pre-background-color: #fafafa; +$hljs-comment: $mid-gray; +$hljs-keyword: $dark-blue; +$hljs-name: $dark-gray; +$hljs-number: $dark-green; +$hljs-string: $red; +$hljs-title: $red; +$hljs-type: $dark-blue; +$hljs-tag: $dark-blue; +$hljs-attribute: $dark-green; +$hljs-regexp: $dark-green; +$hljs-symbol: $purple; +$hljs-built-in: $dark-blue; +$hljs-preprocessor: $mid-gray; +$hljs-deletion: $light-pink; +$hljs-addition: $light-green; +$hljs-change: $dark-blue; +$hljs-chunk: $light-gray; + +// Header +$header-border-top: thin solid #f3f3f3; +$header-color: $dark-gray; +$header-bg-color: #fafafa; +$header-font-weight: 300; + +// Nav +$nav-color: $mid-gray; +$nav-link-color: #444; +$nav-padding: $space-2; +$nav-link-padding-x: $space-2; +$nav-link-border-bottom: 2px solid #444; +$nav-active-border-bottom: 1px solid $light-gray; + +// Footer +$footer-border-top: thin solid #f3f3f3; +$footer-padding: $space-3; +$footer-color: #7a7a7a; +$footer-bg-color: #fafafa; +$footer-font-weight: 300; +$footer-font-size: .75rem; diff --git a/_sass/basscss/_base-buttons.scss b/_sass/basscss/_base-buttons.scss new file mode 100644 index 0000000..9b49c10 --- /dev/null +++ b/_sass/basscss/_base-buttons.scss @@ -0,0 +1,29 @@ +/* Basscss Base Buttons */ + +button, +.button { + font-family: $button-font-family; + font-size: $button-font-size; + font-weight: $button-font-weight; + text-decoration: none; + cursor: pointer; + display: inline-block; + box-sizing: border-box; + line-height: $button-line-height; + padding: $button-padding-y $button-padding-x; + margin: 0; + height: auto; + border: 1px solid transparent; + vertical-align: middle; + -webkit-appearance: none; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +.button:hover { + text-decoration: none; + border: 1px solid transparent; +} diff --git a/_sass/basscss/_base-forms.scss b/_sass/basscss/_base-forms.scss new file mode 100644 index 0000000..1a69ded --- /dev/null +++ b/_sass/basscss/_base-forms.scss @@ -0,0 +1,57 @@ +/* Basscss Base Forms */ + +input, +select, +textarea, +fieldset { + font-size: $form-field-font-size; + margin-top: 0; + margin-bottom: $space-1; +} + +input[type=text], +input[type=datetime], +input[type=datetime-local], +input[type=email], +input[type=month], +input[type=number], +input[type=password], +input[type=search], +input[type=tel], +input[type=time], +input[type=url], +input[type=week] { + box-sizing: border-box; + height: $form-field-height; + padding: $form-field-padding-y $form-field-padding-x; + vertical-align: middle; + -webkit-appearance: none; +} + +select { + box-sizing: border-box; + line-height: 1.75; + padding: $form-field-padding-y $form-field-padding-x; +} + +select:not([multiple]) { + height: $form-field-height; + vertical-align: middle; +} + +textarea { + box-sizing: border-box; + line-height: 1.75; + padding: $form-field-padding-y $form-field-padding-x; +} + +.fieldset-reset { + padding: 0; + margin-left: 0; + margin-right: 0; + border: 0; +} + +.fieldset-reset legend { + padding: 0; +} diff --git a/_sass/basscss/_base-reset.scss b/_sass/basscss/_base-reset.scss new file mode 100644 index 0000000..9c509a5 --- /dev/null +++ b/_sass/basscss/_base-reset.scss @@ -0,0 +1,20 @@ +body, +button { + margin: 0; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; +} + +img { + max-width: 100%; +} + +svg { + max-height: 100%; +} diff --git a/_sass/basscss/_base-typography.scss b/_sass/basscss/_base-typography.scss new file mode 100644 index 0000000..4fdd735 --- /dev/null +++ b/_sass/basscss/_base-typography.scss @@ -0,0 +1,101 @@ +/* Basscss Base Typography */ + +body { + font-family: $font-family; + line-height: $line-height; + font-size: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $heading-font-family; + font-weight: $heading-font-weight; + line-height: $heading-line-height; + margin-top: 1em; + margin-bottom: .5em; +} + +p, +dl, +ol, +ul { + font-size: $h4; + margin-top: 0; + margin-bottom: $space-2; +} + +ol, +ul { + padding-left: $space-3; +} + +pre, +code, +samp { + font-family: $monospace-font-family; + font-size: inherit; +} + +pre { + margin-top: 0; + margin-bottom: $space-2; + overflow-x: scroll; +} + +hr { + margin-top: $space-3; + margin-bottom: $space-3; +} + +blockquote { + margin-top: $space-3; + margin-bottom: $space-3; + margin-left: 0; + padding-left: $space-2; + padding-right: $space-2; +} + +blockquote, +blockquote p { + font-size: $h3; + font-style: italic; +} + +h1, +.h1 { + font-size: $h1; +} + +h2, +.h2 { + font-size: $h2; +} + +h3, +.h3 { + font-size: $h3; +} + +h4, +.h4 { + font-size: $h4; +} + +h5, +.h5 { + font-size: $h5; +} + +h6, +.h6 { + font-size: $h6; +} + +.list-reset { + list-style: none; + padding-left: 0; +} diff --git a/_sass/basscss/_buttons-blue.scss b/_sass/basscss/_buttons-blue.scss new file mode 100644 index 0000000..c2373a9 --- /dev/null +++ b/_sass/basscss/_buttons-blue.scss @@ -0,0 +1,27 @@ +.button-blue { + color: white; + background-color: $blue; + border-radius: $border-radius; + transition-duration: .1s; + transition-timing-function: ease-out; + transition-property: box-shadow, background-color; +} + +.button-blue:hover { + opacity: .875; +} + +.button-blue:active, +.button-blue.is-active { + box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25); +} + +.button-blue:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5); +} + +.button-blue:disabled, +.button-blue.is-disabled { + opacity: .5; +} diff --git a/_sass/basscss/_color-base.scss b/_sass/basscss/_color-base.scss new file mode 100644 index 0000000..486b02e --- /dev/null +++ b/_sass/basscss/_color-base.scss @@ -0,0 +1,28 @@ +/* Basscss Color Base */ + +body { + color: $dark-gray; + background-color: white; +} + +a { + color: $blue; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +pre, +code { + background-color: $lighter-gray; + border-radius: $border-radius; +} + +hr { + border: 0; + border-bottom-style: solid; + border-bottom-width: $border-width; + border-bottom-color: $border-color; +} diff --git a/_sass/basscss/_colors.scss b/_sass/basscss/_colors.scss new file mode 100644 index 0000000..bd7d44b --- /dev/null +++ b/_sass/basscss/_colors.scss @@ -0,0 +1,97 @@ +/* Basscss Colors */ + +.dark-gray { + color: $dark-gray; +} + +.white { + color: white; +} + +.blue { + color: $blue; +} + +.mid-gray { + color: $mid-gray; +} + +.light-gray { + color: $light-gray; +} + +.lighter-gray { + color: $lighter-gray; +} + +.red { + color: $red; +} + +.green { + color: $green; +} + +.yellow { + color: $yellow; +} + +.orange { + color: $orange; +} + +.bg-dark-gray { + background-color: $dark-gray; +} + +.bg-white { + background-color: white; +} + +.bg-blue { + background-color: $blue; +} + +.bg-mid-gray { + background-color: $mid-gray; +} + +.bg-light-gray { + background-color: $light-gray; +} + +.bg-lighter-gray { + background-color: $lighter-gray; +} + +.bg-red { + background-color: $red; +} + +.bg-green { + background-color: $green; +} + +.bg-yellow { + background-color: $yellow; +} + +.bg-orange { + background-color: $orange; +} + +.bg-darken-1 { + background-color: $darken-1; +} + +.bg-darken-2 { + background-color: $darken-2; +} + +.bg-darken-3 { + background-color: $darken-3; +} + +.bg-darken-4 { + background-color: $darken-4; +} diff --git a/_sass/basscss/_syntax-highlighting.scss b/_sass/basscss/_syntax-highlighting.scss new file mode 100644 index 0000000..d32db05 --- /dev/null +++ b/_sass/basscss/_syntax-highlighting.scss @@ -0,0 +1,119 @@ +.highlight { + -webkit-text-size-adjust: none; +} + +.highlight .c, +.highlight .cs, +.highlight .cm, +.highlight .cp, +.highlight .c1 { + color: $hljs-comment; + font-style: italic; +} + +.highlight .k, +.highlight .kc, +.highlight .kd, +.highlight .kn, +.highlight .kr, +.highlight .kt, +.highlight .kp { + color: $hljs-keyword; +} + +.highlight .na, +.highlight .nb, +.highlight .nc, +.highlight .no, +.highlight .nd, +.highlight .ni, +.highlight .ne, +.highlight .nf, +.highlight .nl, +.highlight .nn, +.highlight .nx { + color: $hljs-name; +} + +.highlight .mi, +.highlight .il { + color: $hljs-number; +} + +.highlight .s, +.highlight .sb, +.highlight .sc, +.highlight .sd, +.highlight .s2, +.highlight .s3, +.highlight .sh, +.highlight .si, +.highlight .sx, +.highlight .sr, +.highlight .ss, +.highlight .s1 { + color: $hljs-string; +} + +.hljs-title, +.hljs-id, +.scss .hljs-preprocessor { + color: $hljs-title; + font-weight: bold; +} + +.highlight .k { + font-weight: normal; +} + +.highlight .nc, +.highlight .no { + color: $hljs-type; +} + +.highlight .o { + color: $hljs-tag; + font-weight: normal; +} + +.highlight .nb { + color: $hljs-attribute; +} + +.highlight .sr { + color: $hljs-regexp; +} + +.highlight .ss { + color: $hljs-symbol; +} + +.hljs-built_in { + color: $hljs-built-in; +} + +.hljs-preprocessor, +.hljs-pragma, +.hljs-pi, +.hljs-doctype, +.hljs-shebang, +.hljs-cdata { + color: $hljs-preprocessor; + font-weight: bold; +} + +.hljs-deletion { + background: $hljs-deletion; +} + +.hljs-addition { + background: $hljs-addition; +} + +.diff .hljs-change { + background: $hljs-change; +} + +.hljs-chunk { + color: $hljs-chunk; +} diff --git a/_sass/basscss/_utility-headings.scss b/_sass/basscss/_utility-headings.scss new file mode 100644 index 0000000..b9fd7f5 --- /dev/null +++ b/_sass/basscss/_utility-headings.scss @@ -0,0 +1,37 @@ +/* Basscss Utility Headings */ + +.h00 { + font-size: $h00; +} + +.h0 { + font-size: $h0; +} + +@media #{$breakpoint-md} { + .h00-responsive { + font-size: $h00-responsive; + } + + .h0-responsive { + font-size: $h0-responsive; + } + + .h1-responsive { + font-size: $h1-responsive; + } +} + +@media #{$breakpoint-xl} { + .h00-responsive { + font-size: $h00-responsive-max; + } + + .h0-responsive { + font-size: $h0-responsive-max; + } + + .h1-responsive { + font-size: $h1-responsive-max; + } +} diff --git a/_sass/basscss/_utility-typography.scss b/_sass/basscss/_utility-typography.scss new file mode 100644 index 0000000..14b1ab4 --- /dev/null +++ b/_sass/basscss/_utility-typography.scss @@ -0,0 +1,38 @@ +/* Basscss Utility Typography */ + +.bold { + font-weight: $bold-font-weight; +} + +.regular { + font-weight: normal; +} + +.italic { + font-style: italic; +} + +.caps { + text-transform: uppercase; + letter-spacing: .2em; +} + +.left-align { + text-align: left; +} + +.center { + text-align: center; +} + +.right-align { + text-align: right; +} + +.justify { + text-align: justify; +} + +.nowrap { + white-space: nowrap; +} diff --git a/_sass/basscss/_utility-white-space.scss b/_sass/basscss/_utility-white-space.scss new file mode 100644 index 0000000..d289db3 --- /dev/null +++ b/_sass/basscss/_utility-white-space.scss @@ -0,0 +1,182 @@ +/* Basscss Utility White Space */ + +.m0 { + margin: 0; +} + +.mt0 { + margin-top: 0; +} + +.mr0 { + margin-right: 0; +} + +.mb0 { + margin-bottom: 0; +} + +.ml0 { + margin-left: 0; +} + +.m1 { + margin: $space-1; +} + +.mt1 { + margin-top: $space-1; +} + +.mr1 { + margin-right: $space-1; +} + +.mb1 { + margin-bottom: $space-1; +} + +.ml1 { + margin-left: $space-1; +} + +.m2 { + margin: $space-2; +} + +.mt2 { + margin-top: $space-2; +} + +.mr2 { + margin-right: $space-2; +} + +.mb2 { + margin-bottom: $space-2; +} + +.ml2 { + margin-left: $space-2; +} + +.m3 { + margin: $space-3; +} + +.mt3 { + margin-top: $space-3; +} + +.mr3 { + margin-right: $space-3; +} + +.mb3 { + margin-bottom: $space-3; +} + +.ml3 { + margin-left: $space-3; +} + +.m4 { + margin: $space-4; +} + +.mt4 { + margin-top: $space-4; +} + +.mr4 { + margin-right: $space-4; +} + +.mb4 { + margin-bottom: $space-4; +} + +.ml4 { + margin-left: $space-4; +} + +.mxn1 { + margin-left: -$space-1; + margin-right: -$space-1; +} + +.mxn2 { + margin-left: -$space-2; + margin-right: -$space-2; +} + +.mxn3 { + margin-left: -$space-3; + margin-right: -$space-3; +} + +.mxn4 { + margin-left: -$space-4; + margin-right: -$space-4; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.p1 { + padding: $space-1; +} + +.py1 { + padding-top: $space-1; + padding-bottom: $space-1; +} + +.px1 { + padding-left: $space-1; + padding-right: $space-1; +} + +.p2 { + padding: $space-2; +} + +.py2 { + padding-top: $space-2; + padding-bottom: $space-2; +} + +.px2 { + padding-left: $space-2; + padding-right: $space-2; +} + +.p3 { + padding: $space-3; +} + +.py3 { + padding-top: $space-3; + padding-bottom: $space-3; +} + +.px3 { + padding-left: $space-3; + padding-right: $space-3; +} + +.p4 { + padding: $space-4; +} + +.py4 { + padding-top: $space-4; + padding-bottom: $space-4; +} + +.px4 { + padding-left: $space-4; + padding-right: $space-4; +} diff --git a/css/pixyll.scss b/css/pixyll.scss new file mode 100644 index 0000000..edfcf14 --- /dev/null +++ b/css/pixyll.scss @@ -0,0 +1,36 @@ +--- +# The scss file which include files from _sass/ +--- +@charset "UTF-8"; + +/*! +* Pixyll - A simple, beautiful Jekyll theme that's mobile first. +* Crafted with <3 by John Otander (@4lpine) - ©2015-2021 John Otander +* @author John Otander (https://johno.com/) +* @link https://github.com/johno/pixyll +* @license MIT +*/ + +@import 'variables'; + +@import 'basscss'; + +@import 'base'; + +@import 'links'; +@import 'positions'; +@import 'clearfix'; +@import 'code'; +@import 'forms'; +@import 'typography'; +@import 'header'; +@import 'tables'; +@import 'animations'; +@import 'footer'; +@import 'social-icons'; +@import 'blockquotes'; +@import 'posts'; +@import 'media-queries'; +@import 'gists'; +@import 'measure'; +@import 'pagination';