diff --git a/.gitignore b/.gitignore index 57510a2..b41a72f 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,6 @@ _site/ +.sass-cache/ +.jekyll-metadata +alembic-jekyll-theme-*.gem +Gemfile.lock +**/Gemfile.lock diff --git a/404.md b/404.md new file mode 100644 index 0000000..fa2e148 --- /dev/null +++ b/404.md @@ -0,0 +1,13 @@ +--- +title: "404" +excerpt: "Page Not Found" +permalink: 404.html +indexing: false +sitemap: false +--- + +Sorry, but the page could not be found. + +Are you looking for: + +{% include nav-default.html %} diff --git a/CNAME b/CNAME index 8b13789..b88c2be 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ - +blog.zetaops.io diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..74c6540 --- /dev/null +++ b/Gemfile @@ -0,0 +1,19 @@ +source "https://rubygems.org" + +# Make sure Jekyll 3.3 is running +gem "jekyll", "~> 3.4" + +# The theme for the site +gem "alembic-jekyll-theme", "~> 2.2" + +# The plugins for the site +group :jekyll_plugins do + gem "jekyll-sitemap" + gem "jekyll-mentions" + gem "jekyll-paginate" + gem "jekyll-seo-tag" + gem "jekyll-redirect-from" + gem "jekyll-default-layout" + gem "jekyll-feed" + gem "jemoji" +end diff --git a/_config.yml b/_config.yml index e69de29..03c2a7f 100644 --- a/_config.yml +++ b/_config.yml @@ -0,0 +1,112 @@ +# Site configuration +# 1. Files excluded from Jekyll builds +# 2. Installed Gems +# 3. Gem settings +# 4. Jekyll settings +# 5. Collections +# 6. Jekyll collections settings +# 7. Site settings +# 8. Site navigation + +# 1. Files excluded from Jekyll builds +exclude: +- thanks.md +- elements.md +- README.md +- CODE_OF_CONDUCT.md +- CONTRIBUTING.md +- screenshot.png +- LICENSE +- CNAME +- Gemfile +- Gemfile.lock +- demo/* +- alembic-jekyll-theme.gemspec + +# 2. Installed Gems +plugins: +- jekyll-sitemap +- jekyll-mentions +- jekyll-paginate +- jekyll-seo-tag +- jekyll-redirect-from +- jekyll-default-layout +- jekyll-feed +- jemoji + +# 3. Gem settings +paginate: 2 # jekyll-paginate > items per page +paginate_path: blog/page:num # jekyll-paginate > blog page +jekyll-mentions: https://twitter.com # jekyll-mentions > service used when @replying +twitter: + username: zetaops # jekyll-seo-tag > Owners twitter username +author: ZetaOps # jekyll-seo-tag > default author +social: # jekyll-seo-tag > social overrides + name: ZetaOps # jekyll-seo-tag > real name + links: # jekyll-seo-tag > social aliases (sameAs) + - https://twitter.com/zetaops + - https://github.com/zetaops + +# 4. Jekyll settings +sass: + style: compressed # Style compression +permalink: pretty # Permalink style (/YYYY/MM/DD/page-name/) +excerpt_separator: # Marks end of excerpt in posts +timezone: Europe/London # Timezone for blog posts and alike + +# 5. Collections +collections: + posts: + title: ZetaOps Blog # Needed for Siteleaf + output: true + #description: "My thoughts and ideas" # The post list page content + feature_text: # Caption of blog list page entry image + feature_image: "/assets/default-social-image.png" + +# 6. Jekyll collections settings +defaults: + - + values: + image: "/assets/default-social-image.png" # Default image for sharing + +# 7. Site settings +encoding: utf-8 # Make sure the encoding is right +lang: en-GB # Set the site language +title: "ZetaOps" # Site name or title, also used in jekyll-seo-tag +logo: "/assets/logo.png" # Site logo, also used in jekyll-seo-tag +description: "İlgilendiğimiz konularda ortaya çıkan deneyimlerimizi ve dünyadaki gelişmeleri buradan paylaşacağız." # Site description and default description, also used in jekyll-seo-tag +url: "https://blog.zetaops.io" # Site url, also used in jekyll-seo-tag +baseurl: "" +repo: "https://github.com/zetaops/zetaops.github.io" +#email: "me@daviddarnes.com" +# disqus: "alembic-1" # Blog post comments, uncomment the option and set the site ID from your Disqus account +avatarurl: "/favicon.ico" # Uses avatars for favicons to get multple sites, eg Gravatar, Twitter, GitHub + +# 8. Site navigation +navigation_header: + Home: / + Categories: /categories/ + Search: /search/ + +navigation_footer: + #Created by David Darnes: https://darn.es + +social_links: # Appears in sidebar. Set the urls then uncomment and comment out as desired + Twitter: https://twitter.com/zetaops + #LinkedIn: https://www.linkedin.com/in/daviddarnes + #Google+: https://plus.google.com/+DavidDarnes + GitHub: https://github.com/zetaops + link: http://zetaops.io + RSS: /feed.xml + +sharing_links: # Appear at the bottom of single blog posts, uncomment and comment out as desired. Colours set the button colour + Twitter: "#1DA1F2" + facebook: "#3B5998" + Google+: "#DC4E41" + # Pinterest: "#BD081C" + # LinkedIn: "#0077B5" + # tumblr: "#36465D" + # Reddit: "#FF4500" + # Hacker News: "#ff6600" + # Designer News: "#2D72D9" + # Email: "" diff --git a/_includes/button.html b/_includes/button.html new file mode 100644 index 0000000..4f2345e --- /dev/null +++ b/_includes/button.html @@ -0,0 +1 @@ +{{ include.text | default: "Button" }}{% if include.icon %}  {% include icon.html id=include.icon %}{% endif %} diff --git a/_includes/figure.html b/_includes/figure.html new file mode 100644 index 0000000..bc9daad --- /dev/null +++ b/_includes/figure.html @@ -0,0 +1,5 @@ +{% if include.alt %}{% assign altText = include.alt %}{% else %}{% assign altText = include.caption %}{% endif %} +
+ {% if include.image %}{% else %}Image not found{% endif%} + {% if include.caption %}
{{ include.caption }}
{% endif %} +
diff --git a/_includes/icon.html b/_includes/icon.html new file mode 100644 index 0000000..e5c0e52 --- /dev/null +++ b/_includes/icon.html @@ -0,0 +1 @@ +{% if include.title %}{{ include.title }}{% endif %} diff --git a/_includes/image.html b/_includes/image.html deleted file mode 100644 index f6fa3f3..0000000 --- a/_includes/image.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/map.html b/_includes/map.html new file mode 100644 index 0000000..8854d35 --- /dev/null +++ b/_includes/map.html @@ -0,0 +1,3 @@ +
+ {% if include.id %}{% else %}Map not found{% endif %} +
diff --git a/_includes/nav-categories.html b/_includes/nav-categories.html new file mode 100644 index 0000000..72302b3 --- /dev/null +++ b/_includes/nav-categories.html @@ -0,0 +1,9 @@ + diff --git a/_includes/nav-default.html b/_includes/nav-default.html new file mode 100644 index 0000000..5d29ded --- /dev/null +++ b/_includes/nav-default.html @@ -0,0 +1,23 @@ + diff --git a/_includes/nav-footer.html b/_includes/nav-footer.html new file mode 100644 index 0000000..c177db4 --- /dev/null +++ b/_includes/nav-footer.html @@ -0,0 +1,20 @@ +{% if site.navigation_footer %} + +{% else %} + {% include nav-default.html %} +{% endif %} diff --git a/_includes/nav-header.html b/_includes/nav-header.html new file mode 100644 index 0000000..cf155c9 --- /dev/null +++ b/_includes/nav-header.html @@ -0,0 +1,54 @@ +{% if site.navigation_header %} + +{% else %} + {% include nav-default.html %} +{% endif %} + + + + diff --git a/_includes/nav-share.html b/_includes/nav-share.html new file mode 100644 index 0000000..a4aa3ab --- /dev/null +++ b/_includes/nav-share.html @@ -0,0 +1,23 @@ +
+ {% for network in site.sharing_links %} + {% assign name = network[0] %} + {% assign id = network[0] | downcase | remove: " " %} + {% assign url = site.url | append: site.baseurl | append: page.url %} + {% assign color = network[1] %} + + {% capture share_link %} + {% if id contains "twitter" %}https://twitter.com/intent/tweet/?url={{ url }}&text={{ page.title | uri_escape }}{% if site.twitter.username %}&via={{ site.twitter.username}}{% endif %}{% endif %} + {% if id contains "facebook" %}https://facebook.com/sharer/sharer.php?u={{ url }}{% endif %} + {% if id contains "google+" %}https://plus.google.com/share?url={{ url }}{% endif %} + {% if id contains "pinterest" %}https://pinterest.com/pin/create/button/?url={{ url }}&description={{ page.title }}&media={{ page.image }}{% endif %} + {% if id contains "linkedin" %}https://www.linkedin.com/shareArticle?url={{ url }}&title={{ page.title }}&source={{ site.title }}&mini=true{% endif %} + {% if id contains "tumblr" %}https://tumblr.com/widgets/share/tool?canonicalUrl={{ url }}&tags={{ page.category }}&caption={{ page.title }}{% endif %} + {% if id contains "reddit" %}https://reddit.com/submit?url={{ url }}&title={{ page.title }}&resubmit=true{% endif %} + {% if id contains "hackernews" %}https://news.ycombinator.com/submitlink?u={{ url }}&t={{ page.title }}{% endif %} + {% if id contains "designernews" %}https://www.designernews.co/submit?url={{ url }}&title={{ page.title }}{% endif %} + {% if id contains "email" %}mailto:?subject={{ page.title }}&body={{ url | prepend: "Hey, check out this: "}}{% endif %} + {% endcapture %} + + {% include button.html text=name icon=id link=share_link color=color %} + {% endfor %} +
diff --git a/_includes/nav-social.html b/_includes/nav-social.html new file mode 100644 index 0000000..1794f9d --- /dev/null +++ b/_includes/nav-social.html @@ -0,0 +1,8 @@ + diff --git a/_includes/post-categories.html b/_includes/post-categories.html new file mode 100644 index 0000000..c14d64d --- /dev/null +++ b/_includes/post-categories.html @@ -0,0 +1,25 @@ +{% for category in site.categories %} + {% assign category_name = category | first %} +
+

{{ category_name }}

+ + {% unless forloop.last %}
{% endunless %} +
+{% endfor %} + +{% if has_categories != true %} +
+

There are no categorised posts

+
+{% endif %} diff --git a/_includes/post-comments.html b/_includes/post-comments.html new file mode 100644 index 0000000..6044c90 --- /dev/null +++ b/_includes/post-comments.html @@ -0,0 +1,17 @@ +{% if site.disqus and page.comments != false %} +
+ + +{% endif %} diff --git a/_includes/post-list.html b/_includes/post-list.html new file mode 100644 index 0000000..0b56180 --- /dev/null +++ b/_includes/post-list.html @@ -0,0 +1,34 @@ +{% if paginator.posts %} +
+ + {% include post-pagination.html %} +
+{% else %} +
+ +
+{% endif %} diff --git a/_includes/post-meta.html b/_includes/post-meta.html new file mode 100644 index 0000000..d2c5884 --- /dev/null +++ b/_includes/post-meta.html @@ -0,0 +1,3 @@ + + {% if page.category %}{{ page.category }}  ·  {% endif %} + diff --git a/_includes/post-pagination.html b/_includes/post-pagination.html new file mode 100644 index 0000000..19ff05d --- /dev/null +++ b/_includes/post-pagination.html @@ -0,0 +1,17 @@ + diff --git a/_includes/post-related.html b/_includes/post-related.html new file mode 100644 index 0000000..2c0bd3b --- /dev/null +++ b/_includes/post-related.html @@ -0,0 +1,19 @@ +

Related posts

+ diff --git a/_includes/site-aside.html b/_includes/site-aside.html new file mode 100644 index 0000000..79d6f0a --- /dev/null +++ b/_includes/site-aside.html @@ -0,0 +1,23 @@ + diff --git a/_includes/site-favicons.html b/_includes/site-favicons.html new file mode 100644 index 0000000..043a2fc --- /dev/null +++ b/_includes/site-favicons.html @@ -0,0 +1,4 @@ + + + + diff --git a/_includes/site-feature.html b/_includes/site-feature.html new file mode 100644 index 0000000..05135c2 --- /dev/null +++ b/_includes/site-feature.html @@ -0,0 +1,15 @@ +{% assign feature_text = page.feature_text %} +{% assign feature_image = page.feature_image %} +{% if page.collectionpage %} + {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} + {% assign feature_text = collectiondata.feature_text %} + {% assign feature_image = collectiondata.feature_image %} +{% endif %} + +{% if feature_text or feature_image %} +
+
+ {{ feature_text | markdownify }} +
+
+{% endif %} diff --git a/_includes/site-footer.html b/_includes/site-footer.html new file mode 100644 index 0000000..c03cb9e --- /dev/null +++ b/_includes/site-footer.html @@ -0,0 +1,9 @@ + diff --git a/_includes/site-form.html b/_includes/site-form.html new file mode 100644 index 0000000..609cbf9 --- /dev/null +++ b/_includes/site-form.html @@ -0,0 +1,27 @@ +
+
+ + + + + + + + + + +
+ * indicates a required field + + + + +
+
+ + diff --git a/_includes/site-header.html b/_includes/site-header.html new file mode 100644 index 0000000..c8ba7af --- /dev/null +++ b/_includes/site-header.html @@ -0,0 +1,10 @@ +
+
+ {% if site.logo %}{% include site-logo.html %}{% endif %} + + {% include nav-header.html %} +
+ + {% include site-feature.html %} + +
diff --git a/_includes/site-icons.svg b/_includes/site-icons.svg new file mode 100644 index 0000000..6bbfa3d --- /dev/null +++ b/_includes/site-icons.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/site-logo.html b/_includes/site-logo.html new file mode 100644 index 0000000..69a0ad9 --- /dev/null +++ b/_includes/site-logo.html @@ -0,0 +1,3 @@ + diff --git a/_includes/site-search.html b/_includes/site-search.html new file mode 100644 index 0000000..5f1eca6 --- /dev/null +++ b/_includes/site-search.html @@ -0,0 +1,58 @@ +
+
+ + + + +
+
+ + + + diff --git a/_includes/video.html b/_includes/video.html new file mode 100644 index 0000000..b220116 --- /dev/null +++ b/_includes/video.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/_layouts/blog.html b/_layouts/blog.html new file mode 100644 index 0000000..f513520 --- /dev/null +++ b/_layouts/blog.html @@ -0,0 +1,34 @@ +--- +layout: default +--- + +{% include site-header.html %} + +
+ +
+ +
+ + {% if paginator.posts %} + {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} +

{{ collectiondata.title }}

+ {{ collectiondata.description | markdownify }} + + {% else %} +

{{ page.title }}

+ {{ content }} + + {% endif %} + +
+ + {% include post-list.html %} + +
+ + {% if page.aside == true %}{% include site-aside.html %}{% endif %} + +
+ +{% include site-footer.html %} diff --git a/_layouts/categories.html b/_layouts/categories.html new file mode 100644 index 0000000..89103fd --- /dev/null +++ b/_layouts/categories.html @@ -0,0 +1,27 @@ +--- +layout: default +--- + +{% include site-header.html %} + +
+ +
+ +
+ +

{{ page.title }}

+ + {{ content }} + +
+ + {% include post-categories.html %} + +
+ + {% if page.aside == true %}{% include site-aside.html align="left" %}{% endif %} + +
+ +{% include site-footer.html %} diff --git a/_layouts/default.html b/_layouts/default.html index abedefd..756b46f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,178 +1,33 @@ - - - - - - - ZetaOps Teknoloji Yazıları - Zetaops Blog - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Zetaops Blog

- -

World is concurrent.

- -
- -
- -
-
-
-
- -
- {{ content }} -
- - -
-

- - -

- - - - -

- - -

-
-
- -
- - - - -
-
- - - - - - - + + + + + {% if page.indexing == false %} + + {% endif %} - + {% if page.collectionpage %} + {% seo title=false %} + {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} + {{ collectiondata.title }} - {{ site.title }} + + + + {% else %} + {% seo %} + {% endif %} + + {% if site.avatarurl %}{% include site-favicons.html %}{% endif %} + + + {% include site-icons.svg %} + {{ content }} - + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..7d1e2dc --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,21 @@ +--- +layout: default +--- + +{% include site-header.html %} + +
+ +
+ +

{{ page.title }}

+ + {{ content }} + +
+ + {% if page.aside == true %}{% include site-aside.html %}{% endif %} + +
+ +{% include site-footer.html %} diff --git a/_layouts/post.html b/_layouts/post.html index 31803e4..0108f10 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,29 +2,24 @@ layout: default --- +{% include site-header.html %} - +
-
+
-

{{page.title}}

+

{{ page.title }}

+ {% include post-meta.html %} + {{ content }} + {% include nav-share.html %} -

+ {% include post-comments.html %} -

+ -
-{{ content }} -
+ {% if page.aside == true %}{% include site-aside.html %}{% endif %} +
-{% if page.author == nil %} - {% assign author = 'ZetaOps' %} -{% else %} - {% assign author = page.author %} -{% endif %} - -
-
-Posted by {{ author }} +{% include site-footer.html %} diff --git a/_posts/2015-04-27-when-you-shouldnt-choose-online-net.md b/_posts/2015-04-27-when-you-shouldnt-choose-online-net.md index 6331e8d..a08446b 100644 --- a/_posts/2015-04-27-when-you-shouldnt-choose-online-net.md +++ b/_posts/2015-04-27-when-you-shouldnt-choose-online-net.md @@ -1,5 +1,4 @@ --- -layout: post title: When you shouldn't choose online.net? author: Gokhan Boranalp --- @@ -59,12 +58,12 @@ I have collected all the support tickets during our quest to setup our system. Y I wish this blog post could be useful anyone intends to setup a similar system. -{% include image.html max-width="800px" file="/images/2015-04-27/ticket1.png" %} +{% include figure.html image="/images/2015-04-27/ticket1.png" %} Humm their network infrastructure have some IDS, IPS and firewall with strict rules working on their RPN. The server suddenly locked up. It means any protocol including chatty protocols having fast communication will be marked as hostile. -{% include image.html max-width="800px" file="/images/2015-04-27/ticket2.png" %} +{% include figure.html image="/images/2015-04-27/ticket2.png" %} misc questions -{% include image.html max-width="800px" file="/images/2015-04-27/ticket3.png" %} +{% include figure.html image="/images/2015-04-27/ticket3.png" %} diff --git a/_posts/2016-02-22-riak-2-1-3-resource-friendly-release.md b/_posts/2016-02-22-riak-2-1-3-resource-friendly-release.md index 0042690..41cdabe 100644 --- a/_posts/2016-02-22-riak-2-1-3-resource-friendly-release.md +++ b/_posts/2016-02-22-riak-2-1-3-resource-friendly-release.md @@ -1,5 +1,4 @@ --- -layout: post title: Riak 2.1.3 Resource Friendly Release author: Ali Riza Keles --- diff --git a/_posts/2016-11-04-hpyoko-flask-powered-twitter-clone.md b/_posts/2016-11-04-hpyoko-flask-powered-twitter-clone.md index f63b56b..bdf3d5f 100644 --- a/_posts/2016-11-04-hpyoko-flask-powered-twitter-clone.md +++ b/_posts/2016-11-04-hpyoko-flask-powered-twitter-clone.md @@ -1,5 +1,4 @@ --- -layout: post title: HPyoko and Flask powered twitter clone. Based on Flask's MiniTwit example author: Gokhan Boranalp --- diff --git a/_posts/2016-11-04-zato-ile-servis-orkestrasyonu.md b/_posts/2016-11-04-zato-ile-servis-orkestrasyonu.md index 326b9a0..5c7cff8 100644 --- a/_posts/2016-11-04-zato-ile-servis-orkestrasyonu.md +++ b/_posts/2016-11-04-zato-ile-servis-orkestrasyonu.md @@ -1,5 +1,4 @@ --- -layout: post title: Zato ile Servis Orkestrasyonu author: Ali Riza Keles --- diff --git a/_posts/2016-11-04-zetaops-teknoloji-yazilari.html b/_posts/2016-11-04-zetaops-teknoloji-yazilari.md similarity index 95% rename from _posts/2016-11-04-zetaops-teknoloji-yazilari.html rename to _posts/2016-11-04-zetaops-teknoloji-yazilari.md index ef8ca24..a171af4 100644 --- a/_posts/2016-11-04-zetaops-teknoloji-yazilari.html +++ b/_posts/2016-11-04-zetaops-teknoloji-yazilari.md @@ -1,5 +1,4 @@ --- -layout: post title: ZetaOps Teknoloji Yazıları author: ZetaOps --- diff --git a/_sass/_flex.scss b/_sass/_flex.scss new file mode 100644 index 0000000..4a38431 --- /dev/null +++ b/_sass/_flex.scss @@ -0,0 +1,394 @@ +// Flexbox Mixins +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox +// +// Copyright (c) 2013 Brian Franco +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// This is a set of mixins for those who want to mess around with flexbox +// using the native support of current browsers. For full support table +// check: http://caniuse.com/flexbox +// +// Basically this will use: +// +// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping) +// * Final standards syntax (FF, Safari, Chrome, IE11, Opera) +// +// This was inspired by: +// +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// +// With help from: +// +// * http://w3.org/tr/css3-flexbox/ +// * http://the-echoplex.net/flexyboxes/ +// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx +// * http://css-tricks.com/using-flexbox/ +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes + +//---------------------------------------------------------------------- + +// Flexbox Containers +// +// The 'flex' value causes an element to generate a block-level flex +// container box. +// +// The 'inline-flex' value causes an element to generate a inline-level +// flex container box. +// +// display: flex | inline-flex +// +// http://w3.org/tr/css3-flexbox/#flex-containers +// +// (Placeholder selectors for each type, for those who rather @extend) + +@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +%flexbox { @include flexbox; } + +//---------------------------------- + +@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; } + +//---------------------------------------------------------------------- + +// Flexbox Direction +// +// The 'flex-direction' property specifies how flex items are placed in +// the flex container, by setting the direction of the flex container's +// main axis. This determines the direction that flex items are laid out in. +// +// Values: row | row-reverse | column | column-reverse +// Default: row +// +// http://w3.org/tr/css3-flexbox/#flex-direction-property + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + // Shorter version: + @mixin flex-dir($args...) { @include flex-direction($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Wrap +// +// The 'flex-wrap' property controls whether the flex container is single-line +// or multi-line, and the direction of the cross-axis, which determines +// the direction new lines are stacked in. +// +// Values: nowrap | wrap | wrap-reverse +// Default: nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-wrap-property + +@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Flow (shorthand) +// +// The 'flex-flow' property is a shorthand for setting the 'flex-direction' +// and 'flex-wrap' properties, which together define the flex container's +// main and cross axes. +// +// Values: | +// Default: row nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-flow-property + +@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +} + +//---------------------------------------------------------------------- + +// Flexbox Order +// +// The 'order' property controls the order in which flex items appear within +// their flex container, by assigning them to ordinal groups. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#order-property + +@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Grow +// +// The 'flex-grow' property sets the flex grow factor. Negative numbers +// are invalid. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#flex-grow-property + +@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Shrink +// +// The 'flex-shrink' property sets the flex shrink factor. Negative numbers +// are invalid. +// +// Default: 1 +// +// http://w3.org/tr/css3-flexbox/#flex-shrink-property + +@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Basis +// +// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. +// +// Values: Like "width" +// Default: auto +// +// http://www.w3.org/TR/css3-flexbox/#flex-basis-property + +@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox "Flex" (shorthand) +// +// The 'flex' property specifies the components of a flexible length: the +// flex grow factor and flex shrink factor, and the flex basis. When an +// element is a flex item, 'flex' is consulted instead of the main size +// property to determine the main size of the element. If an element is +// not a flex item, 'flex' has no effect. +// +// Values: none | || +// Default: See individual properties (1 1 0). +// +// http://w3.org/tr/css3-flexbox/#flex-property + +@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so let's grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +} + +//---------------------------------------------------------------------- + +// Flexbox Justify Content +// +// The 'justify-content' property aligns flex items along the main axis +// of the current line of the flex container. This is done after any flexible +// lengths and any auto margins have been resolved. Typically it helps distribute +// extra free space leftover when either all the flex items on a line are +// inflexible, or are flexible but have reached their maximum size. It also +// exerts some control over the alignment of items when they overflow the line. +// +// Note: 'space-*' values not supported in older syntaxes. +// +// Values: flex-start | flex-end | center | space-between | space-around +// Default: flex-start +// +// http://w3.org/tr/css3-flexbox/#justify-content-property + +@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Align Items +// +// Flex items can be aligned in the cross axis of the current line of the +// flex container, similar to 'justify-content' but in the perpendicular +// direction. 'align-items' sets the default alignment for all of the flex +// container's items, including anonymous flex items. 'align-self' allows +// this default alignment to be overridden for individual flex items. (For +// anonymous flex items, 'align-self' always matches the value of 'align-items' +// on their associated flex container.) +// +// Values: flex-start | flex-end | center | baseline | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-items-property + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +} + +//---------------------------------- + +// Flexbox Align Self +// +// Values: auto | flex-start | flex-end | center | baseline | stretch +// Default: auto + +@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Align Content +// +// The 'align-content' property aligns a flex container's lines within the +// flex container when there is extra space in the cross-axis, similar to +// how 'justify-content' aligns individual items within the main-axis. Note, +// this property has no effect when the flexbox has only a single line. +// +// Values: flex-start | flex-end | center | space-between | space-around | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-content-property + +@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +} diff --git a/_sass/_normalize.scss b/_sass/_normalize.scss new file mode 100644 index 0000000..18ddf7f --- /dev/null +++ b/_sass/_normalize.scss @@ -0,0 +1,419 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} diff --git a/_sass/_sassline-base.scss b/_sass/_sassline-base.scss new file mode 100644 index 0000000..443489a --- /dev/null +++ b/_sass/_sassline-base.scss @@ -0,0 +1,6 @@ +// Import Sassline base SCSS files in order so variables are read correctly. +@import "sassline-base/reset"; +@import "sassline-base/variables"; +@import "sassline-base/modular-scale"; +@import "sassline-base/mixins"; +@import "sassline-base/typography"; diff --git a/_sass/_settings.scss b/_sass/_settings.scss new file mode 100644 index 0000000..eeeea7b --- /dev/null +++ b/_sass/_settings.scss @@ -0,0 +1,39 @@ +// Background colours +$backgroundColour: #ffffff; +$codeBackgroundColour: #f4f4f4; +$featureBackgroundColour: #eeeeee; +$accentColour: #05bf85; + +// Text colours +$headingColour: #333333; +$bodyColour: #555555; +$linkColour: #0a555c; +$hoverColour: #0a4c5c; +$focusColour: #fa407a; +$captionColour: #aaaaaa; +$white: #ffffff; + +// Typography +$bodytype: ( + font-family: 'Georgia, serif', + regular: 400, + bold: 700, + italic: italic, + cap-height: 0.75 +); + +$headingtype: ( + font-family: '"Merriweather", serif', + regular: 400, + bold: 700, + cap-height: 0.75 +); + +$monospacetype: ( + font-family: 'Menlo, monospace', + regular: 400, + cap-height: 0.68 +); + +// Font import, if you're using a non-standard web font +@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100644 index 0000000..dc60655 --- /dev/null +++ b/_sass/_syntax.scss @@ -0,0 +1,61 @@ +.hll { background-color: #ffffcc } +.c { color: #999988; font-style: italic } /* Comment */ +.err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.k { color: #000000; font-weight: bold } /* Keyword */ +.o { color: #000000; font-weight: bold } /* Operator */ +.cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.c1 { color: #999988; font-style: italic } /* Comment.Single */ +.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.ge { color: #000000; font-style: italic } /* Generic.Emph */ +.gr { color: #aa0000 } /* Generic.Error */ +.gh { color: #999999 } /* Generic.Heading */ +.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.go { color: #888888 } /* Generic.Output */ +.gp { color: #555555 } /* Generic.Prompt */ +.gs { font-weight: bold } /* Generic.Strong */ +.gu { color: #aaaaaa } /* Generic.Subheading */ +.gt { color: #aa0000 } /* Generic.Traceback */ +.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.m { color: #009999 } /* Literal.Number */ +.s { color: #d01040 } /* Literal.String */ +.na { color: #008080 } /* Name.Attribute */ +.nb { color: #0086B3 } /* Name.Builtin */ +.nc { color: #445588; font-weight: bold } /* Name.Class */ +.no { color: #008080 } /* Name.Constant */ +.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.ni { color: #800080 } /* Name.Entity */ +.ne { color: #990000; font-weight: bold } /* Name.Exception */ +.nf { color: #990000; font-weight: bold } /* Name.Function */ +.nl { color: #990000; font-weight: bold } /* Name.Label */ +.nn { color: #555555 } /* Name.Namespace */ +.nt { color: #000080 } /* Name.Tag */ +.nv { color: #008080 } /* Name.Variable */ +.ow { color: #000000; font-weight: bold } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #009999 } /* Literal.Number.Float */ +.mh { color: #009999 } /* Literal.Number.Hex */ +.mi { color: #009999 } /* Literal.Number.Integer */ +.mo { color: #009999 } /* Literal.Number.Oct */ +.sb { color: #d01040 } /* Literal.String.Backtick */ +.sc { color: #d01040 } /* Literal.String.Char */ +.sd { color: #d01040 } /* Literal.String.Doc */ +.s2 { color: #d01040 } /* Literal.String.Double */ +.se { color: #d01040 } /* Literal.String.Escape */ +.sh { color: #d01040 } /* Literal.String.Heredoc */ +.si { color: #d01040 } /* Literal.String.Interpol */ +.sx { color: #d01040 } /* Literal.String.Other */ +.sr { color: #009926 } /* Literal.String.Regex */ +.s1 { color: #d01040 } /* Literal.String.Single */ +.ss { color: #990073 } /* Literal.String.Symbol */ +.bp { color: #999999 } /* Name.Builtin.Pseudo */ +.vc { color: #008080 } /* Name.Variable.Class */ +.vg { color: #008080 } /* Name.Variable.Global */ +.vi { color: #008080 } /* Name.Variable.Instance */ +.il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_sass/sassline-base/_mixins.scss b/_sass/sassline-base/_mixins.scss new file mode 100644 index 0000000..49168e9 --- /dev/null +++ b/_sass/sassline-base/_mixins.scss @@ -0,0 +1,420 @@ +// SCSS mixins +// --------------------------------------- + +// Global variables used in mixins. + +// Number of breakpoints. +$breakpoints-limit: length($breakpoints); + +// List of rootsizes, breakpoints, and max-widths. +$sizes: map-values($rootsizes); +$points: map-values($breakpoints); +$line-widths: map-values($measures); +$max-widths: map-values($maxwidths); + + +// Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints. +// Defaults to min-width, but both min->max and max-width are available too. +// Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7 +@mixin breakpoint($break: 0, $max: 0) { + // Type of break variable + $value: type-of($break); + + // If it is a string (i.e. a breakpoint variable). + @if $value == string { + // If using 'break-1', 'break-2' etc output the correct breakpoints from map. + @if map-has-key($breakpoints, $break) { + @media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; } + } @else { + @warn "#{$break} is not a set breakpoint variable"; + } + + // If it is a number, use this for the breakpoint. + } @else if $value == number { + // If using other numbers output value in ems either for min, min & max or max width breakpoints. + $query: "all" !default; + @if $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; } + @else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; } + @else if $break == 0 and $max != 0 { $query: "(max-width: #{$max / 16 * 1em})"; } + @media #{$query} { @content; } + + } @else { + @warn "#{$break} is not valid to use as a breakpoint"; + } +} + +// Root font-size in %, outputted in correct breakpoints. +@mixin rootsize { + font-size: nth($sizes, 1) / 16 * 100%; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + font-size: nth($sizes, $i) / 16 * 100%; + } + } +} + +// Max-widths for typeset containers, outputted in correct breakpoints. +@mixin maxwidth($breakpoint: 0) { + // Type of chosen variables. + $break-value: type-of($breakpoint); + + // If specifying a breakpoint to use (and breakpoint exists). + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { + + max-width: #{nth($max-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem; + + } @else if $breakpoint == all { + max-width: #{nth($max-widths, 1) / nth($sizes, 1)}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + max-width: #{nth($max-widths, $i) / nth($sizes, $i)}rem; + } + } + } +} + +// Set the measure for single columns, outputted in correct breakpoints. +@mixin measure($breakpoint: 0) { + // Type of chosen variables. + $break-value: type-of($breakpoint); + + // If specifying a breakpoint to use (and breakpoint exists). + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { + + max-width: #{nth($line-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem; + + } @else if $breakpoint == all { + max-width: #{nth($line-widths, 1) / nth($sizes, 1)}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + max-width: #{nth($line-widths, $i) / nth($sizes, $i)}rem; + } + } + } +} + +// Calculate percentage width of container to get optimal measure for main text columns. +// Defaults to all breakpoints. +// Note: will not output for base breakpoint as this comes from the 'measure' mixin. +@mixin ideal-measure($breakpoint: 0, $gutter: 0, $main: true, $output: max-width) { + // Type of chosen variables. + $break-value: type-of($breakpoint); + + // If specifying a breakpoint to use (and breakpoint exists and is larger than 0). + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint > 0 { + + @if $gutter == small { + $gutter: map-get($gutterwidths, small) * 2 / 1rem; + } @else if $gutter == medium { + $gutter: map-get($gutterwidths, medium) * 2 / 1rem; + } @else if $gutter == large { + $gutter: map-get($gutterwidths, large) * 2 / 1rem; + } @else { + $gutter: 0; + } + + $rootsize: map-get($rootsizes, rootsize-#{$breakpoint}); + $ideal-measure: map-get($measures, measure-#{$breakpoint}); + $gutter-size: ($gutter * $rootsize); + $container-width: map-get($maxwidths, width-#{$breakpoint}); + + $percentage: percentage(($ideal-measure + $gutter-size) / $container-width); + + @if $percentage < 55 { + $percentage: 55%; + } @else if $percentage > 65 { + $percentage: 65%; + } + + @if $main == false { + $percentage: 100 - $percentage; + } + + #{$output}: $percentage; + } +} + +// Value in scale in $modular-scale? +// Used in following fontsize mixin. +@function in-modular-scale($scale, $key) { + $map: map-get($modular-scale, $scale); + $output: map-has-key($map, $key); + @return $output; +} + +// Font-size in rems. Either set per breakpoint or for all. +// Use values as you would for pixels i.e. 16 or use values from the modular scale. +@mixin fontsize($fontsize, $breakpoint: 0) { + // Type of chosen variables. + $font-value: type-of($fontsize); + $break-value: type-of($breakpoint); + + // Check if value exists in scale. + $in-scale: in-modular-scale(scale-0, $fontsize); + + // If specifying a breakpoint to use (and breakpoint exists). + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { + + // If using a number for fontsize. + @if $font-value == number { + font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem; + + // If using a variable from the scale for fontsize. + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-#{$breakpoint}); + $get-size: map-get($get-scale, $fontsize); + + font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem; + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + // If want to use value for all breakpoints. + } @else if $breakpoint == all { + + // If using a number for fontsize. + @if $font-value == number { + font-size: #{$fontsize / nth($sizes, 1)}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + font-size: #{$fontsize / nth($sizes, $i)}rem; + } + } + + // If using a variable from the scale for fontsize. + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-0); + $get-size: map-get($get-scale, $fontsize); + font-size: #{$get-size / nth($sizes, 1)}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + $get-scale: map-get($modular-scale, scale-#{$i - 1}); + $get-size: map-get($get-scale, $fontsize); + + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + font-size: #{$get-size / nth($sizes, $i)}rem; + } + } + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + } @else { + @warn "#{$breakpoint} is not valid to use as a breakpoint"; + } +} + +// Advanced baseline magic. +// ! Read the README to help understand what is going on here. +// Parts based on https://gist.github.com/razwan/10662500 +@mixin baseline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) { + // Type of chosen variables. + $font-value: type-of($fontsize); + $break-value: type-of($breakpoint); + + // Cap height + $cap-height: map-get($font, cap-height); + + // Check if value exists in scale. + $in-scale: in-modular-scale(scale-0, $fontsize); + + // Set the line-height (if it isn’t set at 0). + @if $lineheight != 0 { + line-height: #{$lineheight}rem; + } + + // If specifying a breakpoint to use (and breakpoint exists). + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { + + // If using a number for fontsize. + @if $font-value == number { + $rootsize: nth($sizes, ($breakpoint + 1)); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + // If using a variable from the scale for fontsize. + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-#{$breakpoint}); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, ($breakpoint + 1)); + + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + // If want to use value for all breakpoints. + } @else if $breakpoint == all { + + // If using a number for fontsize. + @if $font-value == number { + $rootsize: nth($sizes, 1); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + $rootsize: nth($sizes, $i); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + } + } + + // If using a variable from the scale for fontsize. + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-0); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, 1); + + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + // Loop through breakpoints. + @for $i from 2 through $breakpoints-limit { + $get-scale: map-get($modular-scale, scale-#{$i - 1}); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, $i); + + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + } + } + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + } @else { + @warn "#{$breakpoint} is not valid to use as a breakpoint"; + } +} + +// Set fontsize and baseline at once. Mix of fontsize and baseline mixin. +@mixin sassline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) { + $font-value: type-of($fontsize); + $break-value: type-of($breakpoint); + $cap-height: map-get($font, cap-height); + $in-scale: in-modular-scale(scale-0, $fontsize); + + line-height: #{$lineheight}rem; + + @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 { + + @if $font-value == number { + $rootsize: nth($sizes, ($breakpoint + 1)); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-#{$breakpoint}); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, ($breakpoint + 1)); + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + } @else if $breakpoint == all { + + @if $font-value == number { + $rootsize: nth($sizes, 1); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + font-size: #{$fontsize / nth($sizes, 1)}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + @for $i from 2 through $breakpoints-limit { + $rootsize: nth($sizes, $i); + $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)}; + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + font-size: #{$fontsize / nth($sizes, $i)}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + } + } + + } @else if $in-scale == true { + $get-scale: map-get($modular-scale, scale-0); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, 1); + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + font-size: #{$get-size / nth($sizes, 1)}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + + @for $i from 2 through $breakpoints-limit { + $get-scale: map-get($modular-scale, scale-#{$i - 1}); + $get-size: map-get($get-scale, $fontsize); + $rootsize: nth($sizes, $i); + $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001}; + $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)}; + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + font-size: #{$get-size / nth($sizes, $i)}rem; + margin-bottom: #{$baseline-push}rem; + padding-top: #{$baseline-shift}rem; + } + } + + } @else { + @warn "#{$fontsize} is not a valid scale variable"; + } + + } @else { + @warn "#{$breakpoint} is not valid to use as a breakpoint"; + } +} + +// Clearfix. +@mixin clearfix { + &:before, &:after{ + display: table; + content: ""; + } + &:after{ + clear: both; + } +} diff --git a/_sass/sassline-base/_modular-scale.scss b/_sass/sassline-base/_modular-scale.scss new file mode 100644 index 0000000..35b1532 --- /dev/null +++ b/_sass/sassline-base/_modular-scale.scss @@ -0,0 +1,66 @@ +// Modular scale +// --------------------------------------- + +// Setting responsive modular-scales. Use appropriate scales for viewport sizes. +$modular-scale: ( + // Major Third http://www.modularscale.com/?16,28&px&1.25&web&text + scale-0: ( + alpha: 28.0, + beta: 25.0, + gamma: 22.4, + delta: 20.0, + epsilon: 17.9, + zeta: 16.0, + eta: 14.3, + theta: 12.8, + iota: 11.5 + ), + // Major Third http://www.modularscale.com/?17,30&px&1.25&web&text + scale-1: ( + alpha: 30.0, + beta: 26.6, + gamma: 24.0, + delta: 21.3, + epsilon: 19.2, + zeta: 17.0, + eta: 15.3, + theta: 13.6, + iota: 12.8 + ), + // Major Third http://www.modularscale.com/?18,32&px&1.25&web&text + scale-2: ( + alpha: 32.0, + beta: 28.1, + gamma: 25.6, + delta: 22.5, + epsilon: 20.5, + zeta: 18.0, + eta: 16.3, + theta: 14.4, + iota: 13.1 + ), + // Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text + scale-3: ( + alpha: 40.0, + beta: 35.5, + gamma: 30.0, + delta: 26.7, + epsilon: 22.5, + zeta: 20.0, + eta: 16.9, + theta: 15.0, + iota: 12.7 + ), + // Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text + scale-4: ( + alpha: 50.0, + beta: 43.9, + gamma: 35.3, + delta: 31.1, + epsilon: 25.0, + zeta: 22.0, + eta: 17.6, + theta: 15.6, + iota: 12.5 + ) +); diff --git a/_sass/sassline-base/_reset.scss b/_sass/sassline-base/_reset.scss new file mode 100644 index 0000000..13b1cc7 --- /dev/null +++ b/_sass/sassline-base/_reset.scss @@ -0,0 +1,13 @@ +// Reset +// --------------------------------------- + +// Reset all the things +* { box-sizing: border-box; } +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } +html, body { height: 100%; } +a img { border: none; } +blockquote { quotes: none; } +blockquote:before, blockquote:after { content: ''; content: none; } +table { border-collapse: collapse; border-spacing: 0; } +caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } diff --git a/_sass/sassline-base/_typography.scss b/_sass/sassline-base/_typography.scss new file mode 100644 index 0000000..4146bd0 --- /dev/null +++ b/_sass/sassline-base/_typography.scss @@ -0,0 +1,363 @@ +// Typography +// --------------------------------------- + +// Setting root sizes and base styles. +html { + @include rootsize; + + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// Site-wide base styles. +body { + @include fontsize(zeta, all); + + font-family: unquote(map-get($bodytype, font-family)); + font-style: normal; + font-weight: map-get($bodytype, regular); + line-height: 2rem; +} + +// Links. +a { + color: $linkColour; + text-decoration: none; + transition: color .1s, background-color .1s; + + &:hover, &:active, &:focus { + color: $hoverColour; + text-decoration: none; + } +} + +// Styles for typeset text. +.typeset { + + // Nice underlines for text links. + p a, li a { + background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$linkColour 50%); + background-position: 0 93%; + background-repeat: repeat-x; + background-size: 100% 0.15rem; + text-shadow: 0.1rem 0 $backgroundColour, + 0.15rem 0 $backgroundColour, + -0.1rem 0 $backgroundColour, + -0.15rem 0 $backgroundColour; + + &:hover, &:active, &:focus { + background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$hoverColour 50%); + } + } + + // Paragraphs. OpenType ligatures and oldstyle figures enabled if available. + p { + @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all); + + font-feature-settings: 'kern', 'onum', 'liga'; + } + + // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available. + h1, h2, h3, h4, h5, h6 { + color: $headingColour; + font-family: unquote(map-get($headingtype, font-family)); + font-feature-settings: 'dlig', 'liga', 'lnum', 'kern'; + font-style: normal; + font-weight: map-get($headingtype, bold); + } + + // Heading level 1. + h1, .alpha { + @include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all); + } + + // Heading level 2. + h2, .beta { + @include sassline(beta, $headingtype, 3, 1, all); + } + + // Heading level 3. + h3, .gamma { + @include sassline(gamma, $headingtype, 3, 1, all); + } + + // Heading level 4. + h4, .delta { + @include sassline(delta, $headingtype, 2, 0, all); + } + + // Heading level 5. + h5, .epsilon { + @include sassline(epsilon, $headingtype, 2, 0, all); + } + + // Heading level 6. + h6, .zeta { + @include sassline(zeta, $headingtype, 2, 0, all); + } + + // Lists. + ul, ol { + @include baseline(zeta, $bodytype, 2, 2, all); + + li { + font-feature-settings: 'kern', 'onum', 'liga'; + margin-left: 2rem; + + @include breakpoint(break-1) { + margin-left: 0; + } + + ol, ul { + padding-top: 1rem; + margin-bottom: 1rem; + margin-left: 2rem; + } + } + } + + // Ordered lists. + ol { + list-style-type: none; + + li { + counter-increment: top-level; + + &:before { + content: counter(top-level) '.'; + font-feature-settings: 'lnum', 'tnum'; + margin-left: -3rem; + position: absolute; + text-align: right; + width: 2em; + } + + ul { + + li { + + &:before { + content: ''; + } + + ol { + + li { + counter-increment: alt-level; + + &:before { + content: counter(alt-level) '.'; + } + } + } + } + } + + ol { + + li { + counter-increment: sub-level; + + &:before { + content: counter(top-level) '.' counter(sub-level); + } + + ul { + + li { + + &:before { + content: ''; + } + } + } + + ol { + + li { + counter-increment: sub-sub-level; + + &:before { + content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level); + } + } + } + } + } + } + } + + // Definition lists. + dl { + @include baseline(zeta, $bodytype, 2, 2, all); + + dt, dd { + font-feature-settings: 'kern', 'onum', 'liga'; + margin-left: 2rem; + + @include breakpoint(break-1) { + margin-left: 0; + } + } + + dt { + font-weight: map-get($bodytype, bold); + } + + dd + dt { + padding-top: 1rem; + } + } + + // Tables. + table { + @include sassline(eta, $headingtype, 2, 0, all); + + font-family: unquote(map-get($headingtype, font-family)); + font-feature-settings: 'liga', 'lnum', 'tnum', 'kern'; + font-style: normal; + font-weight: map-get($headingtype, regular); + width: 100%; + + thead { + + th { + @include sassline(zeta, $headingtype, 2, 0, all); + padding-bottom: 1px; + } + } + } + + // Bold. + b, strong, .bold { + font-weight: map-get($bodytype, bold); + } + + // Italic. + em, i, .italic { + font-style: map-get($bodytype, italic); + } + + // Caption and inline small text. + small, .caption { + @include fontsize(theta, all); + + font-family: unquote(map-get($headingtype, font-family)); + font-style: normal; + font-weight: map-get($headingtype, regular); + } + + small { + line-height: 1rem; + } + + .caption { + @include baseline(theta, $headingtype, 2, 2, all); + + color: $captionColour; + } + + // Nice spacing for captions. + h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption { + margin-top: -1rem; + } + + .delta + .caption, .epsilon + .caption, .zeta + .caption { + margin-top: 0rem; + } + + // Quotes. + blockquote { + + p { + border-left: 0.15rem solid $linkColour; + font-style: map-get($bodytype, italic); + padding-left: 1rem; + + // Add spacing below blockquote paragraphs to align to baseline grid. + $get-scale: map-get($modular-scale, scale-0); + $get-size: map-get($get-scale, zeta); + $rootsize: nth($sizes, 1); + $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001}; + $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)}; + + margin-bottom: #{$baseline-push}rem; + padding-bottom: #{$baseline-shift}rem; + + @for $i from 2 through $breakpoints-limit { + $get-scale: map-get($modular-scale, scale-#{$i - 1}); + $get-size: map-get($get-scale, zeta); + $rootsize: nth($sizes, $i); + $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001}; + $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)}; + + @media screen and (min-width: nth($points, $i) / 16 * 1em ) { + margin-bottom: #{$baseline-push}rem; + padding-bottom: #{$baseline-shift}rem; + } + } + } + + @include breakpoint(break-1) { + margin-left: -1rem; + } + } + + // Horizontal rule. + hr { + background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%); + background-position: 0 50%; + background-repeat: repeat-x; + background-size: 100% 0.15rem; + border: 0; + margin: 0; + padding-bottom: 3rem; + padding-top: 3rem; + } + + // Code block. + code, pre { + background-color: $codeBackgroundColour; + font-family: unquote(map-get($monospacetype, font-family)); + } + + pre { + display: block; + margin-bottom: 2rem; + padding: 1rem; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + } + + code { + @include fontsize(theta, all); + + line-height: 1rem; + } + + // Letter space those capitals people, Jan Tschichold would be proud. + .upper { + font-kerning: normal; + letter-spacing: 0.1rem; + text-transform: uppercase; + } + + // Real small caps. + .small-caps { + font-feature-settings: 'smcp', 'kern'; + font-kerning: normal; + letter-spacing: 0.1rem; + } + + // Consistent height numbers with OpenType. + .lining-numerals { + font-feature-settings: 'lnum', 'kern'; + } + + // Ascending and descending numbers with OpenType. + .oldstyle-numerals { + font-feature-settings: 'onum', 'kern'; + } +} diff --git a/_sass/sassline-base/_variables.scss b/_sass/sassline-base/_variables.scss new file mode 100644 index 0000000..898d263 --- /dev/null +++ b/_sass/sassline-base/_variables.scss @@ -0,0 +1,96 @@ +// SCSS variables +// --------------------------------------- + +// Note: For the following Sass maps enter values as if they would be px units. + +// Breakpoint sizes from px to ems. Add more values here to add more breakpoints. +// Change names if you prefer, it wont break the mixin as long as they are strings not just numbers. +$breakpoints: ( + break-0: 0, // 0px Mobile first + break-1: 640, // 640px ~ Small tablet up + break-2: 800, // 800px ~ Large tablet up + break-3: 1024, // 1024px ~ Desktop up + break-4: 1600 // 1600px ~ Large desktop up +) !default; + +// Root font-sizes for each breakpoint. Set to half desired line-height of body text. +// ! Make sure to have as many sizes as breakpoints above. +$rootsizes: ( + rootsize-0: 12, // 24px line-height body text + rootsize-1: 14, // 28px line-height body text + rootsize-2: 15, // 30px line-height body text + rootsize-3: 17, // 34px line-height body text + rootsize-4: 19 // 38px line-height body text +) !default; + +// Set the optimum line-length for your text (based on typeface). +// Aim for 75–100 characters a line when possible, at smaller sizes type size is more important. +// ! Make sure to have as many widths as breakpoints above. +// Note: this was 'maxwidths' in previous versions. +$measures: ( + measure-0: 500, // 500px wide + measure-1: 550, // 550px wide + measure-2: 600, // 600px wide + measure-3: 680, // 680px wide + measure-4: 750 // 750px wide +) !default; + +// Set the max-widths for containers (based on design). +// ! Make sure to have as many widths as breakpoints above. +$maxwidths: ( + width-0: 500, // 500px wide + width-1: 600, // 600px wide + width-2: 800, // 800px wide + width-3: 1100, // 110px wide + width-4: 1300 // 1300px wide +) !default; + +// Gutter widths +$gutterwidths: ( + small: 1rem, + medium: 2rem, + large: 4rem +) !default; + +// Add typefaces here. +// Add weight and style details too. +// ! Set cap height to set to the baseline. +$bodytype: ( + font-family: 'Georgia, serif', + regular: 400, + bold: 700, + italic: italic, + cap-height: 0.66 +) !default; + +$headingtype: ( + font-family: 'Helvetica, sans-serif', + regular: 400, + bold: 700, + cap-height: 0.66 +) !default; + +$monospacetype: ( + font-family: 'Menlo, monospace', + regular: 400, + cap-height: 0.68 +) !default; + +// Here are some local fonts cap-height sizes to get you started: +// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52 +// Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76 + +// Selection of Typekit fonts cap-height sizes: +// Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36 + +// Text colours. British English. +$headingColour: #2E2E2E !default; +$bodyColour: #494949 !default; +$linkColour: #0E58F5 !default; +$hoverColour: #0B348B !default; +$captionColour: #BDC8CC !default; +$white: #FFFFFF !default; + +// Background colours. +$backgroundColour: #FCFCFC !default; +$codeBackgroundColour: #F5F4F2 !default; diff --git a/assets/default-social-image.png b/assets/default-social-image.png new file mode 100644 index 0000000..7d38912 Binary files /dev/null and b/assets/default-social-image.png differ diff --git a/assets/jwplayer/glow/controlbar/background.png b/assets/jwplayer/glow/controlbar/background.png deleted file mode 100644 index 59a2322..0000000 Binary files a/assets/jwplayer/glow/controlbar/background.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/blankButton.png b/assets/jwplayer/glow/controlbar/blankButton.png deleted file mode 100644 index 010159f..0000000 Binary files a/assets/jwplayer/glow/controlbar/blankButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/divider.png b/assets/jwplayer/glow/controlbar/divider.png deleted file mode 100644 index 021685f..0000000 Binary files a/assets/jwplayer/glow/controlbar/divider.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/fullscreenButton.png b/assets/jwplayer/glow/controlbar/fullscreenButton.png deleted file mode 100644 index e06aa50..0000000 Binary files a/assets/jwplayer/glow/controlbar/fullscreenButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png b/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png deleted file mode 100644 index 4d23d00..0000000 Binary files a/assets/jwplayer/glow/controlbar/fullscreenButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/muteButton.png b/assets/jwplayer/glow/controlbar/muteButton.png deleted file mode 100644 index 55de26a..0000000 Binary files a/assets/jwplayer/glow/controlbar/muteButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/muteButtonOver.png b/assets/jwplayer/glow/controlbar/muteButtonOver.png deleted file mode 100644 index 08bf066..0000000 Binary files a/assets/jwplayer/glow/controlbar/muteButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/normalscreenButton.png b/assets/jwplayer/glow/controlbar/normalscreenButton.png deleted file mode 100644 index 2229507..0000000 Binary files a/assets/jwplayer/glow/controlbar/normalscreenButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png b/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png deleted file mode 100644 index 6668f38..0000000 Binary files a/assets/jwplayer/glow/controlbar/normalscreenButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/pauseButton.png b/assets/jwplayer/glow/controlbar/pauseButton.png deleted file mode 100644 index 23706cd..0000000 Binary files a/assets/jwplayer/glow/controlbar/pauseButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/pauseButtonOver.png b/assets/jwplayer/glow/controlbar/pauseButtonOver.png deleted file mode 100644 index 252e721..0000000 Binary files a/assets/jwplayer/glow/controlbar/pauseButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/playButton.png b/assets/jwplayer/glow/controlbar/playButton.png deleted file mode 100644 index 345e5e8..0000000 Binary files a/assets/jwplayer/glow/controlbar/playButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/playButtonOver.png b/assets/jwplayer/glow/controlbar/playButtonOver.png deleted file mode 100644 index 3fe2848..0000000 Binary files a/assets/jwplayer/glow/controlbar/playButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/timeSliderBuffer.png b/assets/jwplayer/glow/controlbar/timeSliderBuffer.png deleted file mode 100644 index 5e151d6..0000000 Binary files a/assets/jwplayer/glow/controlbar/timeSliderBuffer.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png b/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png deleted file mode 100644 index e89fc5c..0000000 Binary files a/assets/jwplayer/glow/controlbar/timeSliderCapLeft.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/timeSliderCapRight.png b/assets/jwplayer/glow/controlbar/timeSliderCapRight.png deleted file mode 100644 index ae47e90..0000000 Binary files a/assets/jwplayer/glow/controlbar/timeSliderCapRight.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/timeSliderProgress.png b/assets/jwplayer/glow/controlbar/timeSliderProgress.png deleted file mode 100644 index 03d2a98..0000000 Binary files a/assets/jwplayer/glow/controlbar/timeSliderProgress.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/timeSliderRail.png b/assets/jwplayer/glow/controlbar/timeSliderRail.png deleted file mode 100644 index 92d52f9..0000000 Binary files a/assets/jwplayer/glow/controlbar/timeSliderRail.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/unmuteButton.png b/assets/jwplayer/glow/controlbar/unmuteButton.png deleted file mode 100644 index 6b8ec46..0000000 Binary files a/assets/jwplayer/glow/controlbar/unmuteButton.png and /dev/null differ diff --git a/assets/jwplayer/glow/controlbar/unmuteButtonOver.png b/assets/jwplayer/glow/controlbar/unmuteButtonOver.png deleted file mode 100644 index 5a76e0b..0000000 Binary files a/assets/jwplayer/glow/controlbar/unmuteButtonOver.png and /dev/null differ diff --git a/assets/jwplayer/glow/display/background.png b/assets/jwplayer/glow/display/background.png deleted file mode 100644 index 08be16d..0000000 Binary files a/assets/jwplayer/glow/display/background.png and /dev/null differ diff --git a/assets/jwplayer/glow/display/bufferIcon.png b/assets/jwplayer/glow/display/bufferIcon.png deleted file mode 100644 index 5c22bbc..0000000 Binary files a/assets/jwplayer/glow/display/bufferIcon.png and /dev/null differ diff --git a/assets/jwplayer/glow/display/muteIcon.png b/assets/jwplayer/glow/display/muteIcon.png deleted file mode 100644 index 2b1e6c6..0000000 Binary files a/assets/jwplayer/glow/display/muteIcon.png and /dev/null differ diff --git a/assets/jwplayer/glow/display/playIcon.png b/assets/jwplayer/glow/display/playIcon.png deleted file mode 100644 index 5705ded..0000000 Binary files a/assets/jwplayer/glow/display/playIcon.png and /dev/null differ diff --git a/assets/jwplayer/glow/dock/button.png b/assets/jwplayer/glow/dock/button.png deleted file mode 100644 index 08be16d..0000000 Binary files a/assets/jwplayer/glow/dock/button.png and /dev/null differ diff --git a/assets/jwplayer/glow/glow.xml b/assets/jwplayer/glow/glow.xml deleted file mode 100644 index 71bdced..0000000 --- a/assets/jwplayer/glow/glow.xml +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -