diff --git a/_includes/button.html b/_includes/button.html new file mode 100644 index 000000000000..69984165d4b5 --- /dev/null +++ b/_includes/button.html @@ -0,0 +1 @@ +{{ include.text | default: "Button" }}{% if include.icon %}  {% include icon.html id=include.icon title=include.icon %}{% endif %} diff --git a/_includes/figure.html b/_includes/figure.html new file mode 100644 index 000000000000..da6b1a0442fc --- /dev/null +++ b/_includes/figure.html @@ -0,0 +1,4 @@ +
+ {{ include.alt | default: include.caption }} + {% if include.caption %}
{{ include.caption }}
{% endif %} +
diff --git a/_includes/icon.html b/_includes/icon.html new file mode 100644 index 000000000000..2edf183f22e9 --- /dev/null +++ b/_includes/icon.html @@ -0,0 +1 @@ +{{ include.title | default: include.id }} diff --git a/_includes/map.html b/_includes/map.html new file mode 100644 index 000000000000..c5be686e6e4e --- /dev/null +++ b/_includes/map.html @@ -0,0 +1 @@ +
diff --git a/_includes/nav-categories.html b/_includes/nav-categories.html new file mode 100644 index 000000000000..c165dbb3f68d --- /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 000000000000..c20f8df2bd2f --- /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 000000000000..73b892b4a438 --- /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 000000000000..23cdb9b0b08a --- /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 000000000000..f6d2f3853c4b --- /dev/null +++ b/_includes/nav-share.html @@ -0,0 +1,24 @@ +
+ {% for network in site.sharing_links %} + {% if network[1] != blank %} + {% 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 "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 %} + {% endif %} + {% endfor %} +
diff --git a/_includes/nav-social.html b/_includes/nav-social.html new file mode 100644 index 000000000000..5abedd3286f8 --- /dev/null +++ b/_includes/nav-social.html @@ -0,0 +1,10 @@ + diff --git a/_includes/post-categories.html b/_includes/post-categories.html new file mode 100644 index 000000000000..44c78606a7f2 --- /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 000000000000..191650bfb2b4 --- /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 000000000000..7b00ec826fb7 --- /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 000000000000..633b9e6ca149 --- /dev/null +++ b/_includes/post-meta.html @@ -0,0 +1,16 @@ +{% if page.categories %} + {% capture categories %} + {% for category in page.categories %} + {{ category }}{% if forloop.last == false %},{% endif %} + {% endfor %} + {% endcapture %} +{% elsif page.category %} + {% capture categories %} + {{ page.category }} + {% endcapture %} +{% endif %} + + + {% assign date_format = site.date_format | default: "%d %b %Y" %} + {{ categories | append: " · " }} + diff --git a/_includes/post-pagination.html b/_includes/post-pagination.html new file mode 100644 index 000000000000..0c6585c9ec67 --- /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 000000000000..2c0bd3b38cc2 --- /dev/null +++ b/_includes/post-related.html @@ -0,0 +1,19 @@ +

Related posts

+ diff --git a/_includes/site-analytics.html b/_includes/site-analytics.html new file mode 100644 index 000000000000..363e3eb8e5b9 --- /dev/null +++ b/_includes/site-analytics.html @@ -0,0 +1,12 @@ + + + diff --git a/_includes/site-aside.html b/_includes/site-aside.html new file mode 100644 index 000000000000..7cbb767dec98 --- /dev/null +++ b/_includes/site-aside.html @@ -0,0 +1,23 @@ + diff --git a/_includes/site-before-end.html b/_includes/site-before-end.html new file mode 100644 index 000000000000..a13811112216 --- /dev/null +++ b/_includes/site-before-end.html @@ -0,0 +1 @@ + diff --git a/_includes/site-before-start.html b/_includes/site-before-start.html new file mode 100644 index 000000000000..97abf1de5854 --- /dev/null +++ b/_includes/site-before-start.html @@ -0,0 +1 @@ + diff --git a/_includes/site-favicons.html b/_includes/site-favicons.html new file mode 100644 index 000000000000..7cc673a9568f --- /dev/null +++ b/_includes/site-favicons.html @@ -0,0 +1,7 @@ +{% if site.favicons %} + {% for icon in site.favicons %} + + + {% endfor %} +{% endif %} + diff --git a/_includes/site-feature.html b/_includes/site-feature.html new file mode 100644 index 000000000000..b8664053f4b2 --- /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-fonts.html b/_includes/site-fonts.html new file mode 100644 index 000000000000..26bb37b392ed --- /dev/null +++ b/_includes/site-fonts.html @@ -0,0 +1,11 @@ +{% if site.fonts.font_urls %} + {% for font in site.fonts.font_urls %} + + + {% endfor %} + +{% endif %} diff --git a/_includes/site-footer.html b/_includes/site-footer.html new file mode 100644 index 000000000000..c03cb9e39e9e --- /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 000000000000..d5374bf2958e --- /dev/null +++ b/_includes/site-form.html @@ -0,0 +1,53 @@ +{% if include.name %} + {% assign name = include.name %} +{% else %} + {% assign name = "Contact" %} +{% endif %} + +{% assign name_id = name | downcase | replace: " ", "-" %} + +{% if include.thanks_url %} + {% assign thanks_url = include.thanks_url %} +{% else %} + {% assign thanks_url = "/thanks/" %} +{% endif %} + +
+
+ {{ name }} + + + + + + + + + + +
+ * indicates a required field + + {% if include.netlify_form %} + + {% else %} + + + + {% endif %} +
+
+{% unless include.netlify_form %} + + +{% endunless %} diff --git a/_includes/site-header.html b/_includes/site-header.html new file mode 100644 index 000000000000..c8ba7af54dc3 --- /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 000000000000..4a66f665543c --- /dev/null +++ b/_includes/site-icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/site-logo.html b/_includes/site-logo.html new file mode 100644 index 000000000000..35480c725069 --- /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 000000000000..06085ec40afb --- /dev/null +++ b/_includes/site-search.html @@ -0,0 +1,58 @@ +
+
+ + + + +
+
+ + + + diff --git a/_includes/site-styles.html b/_includes/site-styles.html new file mode 100644 index 000000000000..b4980215db26 --- /dev/null +++ b/_includes/site-styles.html @@ -0,0 +1,4 @@ +{% capture styles %} + @import "alembic"; +{% endcapture %} + diff --git a/_includes/site-sw.html b/_includes/site-sw.html new file mode 100644 index 000000000000..0e82156be1f8 --- /dev/null +++ b/_includes/site-sw.html @@ -0,0 +1,20 @@ + diff --git a/_includes/video.html b/_includes/video.html new file mode 100644 index 000000000000..b6e0faaf674c --- /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 000000000000..331d77424bd5 --- /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 000000000000..62a20b6381ce --- /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 new file mode 100644 index 000000000000..9d1616ca6d56 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,58 @@ + + + + + + + + + {% 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.fonts.preconnect_urls %} + {% for url in site.fonts.preconnect_urls %} + + {% endfor %} + {% endif %} + + + + + {% if site.css_inline == true %} + {% include site-styles.html %} + {% else %} + + {% endif %} + + {% if site.favicons or site.avatarurl %}{% include site-favicons.html %}{% endif %} + + {% if site.google_analytics %}{% include site-analytics.html %}{% endif %} + + {% include site-fonts.html %} + + {% include site-before-start.html %} + + + + {% include site-icons.svg %} + + {{ content }} + + {% if site.service_worker != false %}{% include site-sw.html %}{% endif %} + + {% include site-before-end.html %} + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 000000000000..647b60203291 --- /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 new file mode 100644 index 000000000000..91a68ac47996 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,25 @@ +--- +layout: default +--- + +{% include site-header.html %} + +
+ +
+ +

{{ page.title }}

+ {% include post-meta.html %} + {{ content }} + + {% include nav-share.html %} + + {% include post-comments.html %} + +
+ + {% if page.aside == true %}{% include site-aside.html %}{% endif %} + +
+ +{% include site-footer.html %} diff --git a/_sass/_flex.scss b/_sass/_flex.scss new file mode 100644 index 000000000000..4246b6759a0a --- /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 000000000000..18ddf7fede13 --- /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 000000000000..443489acaf47 --- /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 000000000000..ccdc60ea4612 --- /dev/null +++ b/_sass/_settings.scss @@ -0,0 +1,38 @@ +// Background colours +$backgroundColour: #ffffff !default; +$codeBackgroundColour: #fafafa !default; +$featureBackgroundColour: #f9fafa !default; +$accentColour: #05bf85 !default; + +// Text colours +$headingColour: #242e2b !default; +$bodyColour: #384743 !default; +$linkColour: #05bf85 !default; +$hoverColour: #008000 !default; +$focusColour: #fa407a !default; +$captionColour: #a8adac !default; +$white: #ffffff !default; + +// Typography +$bodytype: ( + font-family: "Georgia, serif", + regular: 400, + bold: 700, + italic: italic, + cap-height: 0.75 +) !default; + +$headingtype: ( + font-family: '"Merriweather", serif', + regular: 400, + bold: 700, + cap-height: 0.75 +) !default; + +$monospacetype: ( + font-family: "Menlo, monospace", + regular: 400, + cap-height: 0.68 +) !default; + +// TIP: Load custom fonts in _config.yaml diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100644 index 000000000000..dc60655fa0f2 --- /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/_theme.scss b/_sass/_theme.scss new file mode 100644 index 000000000000..8bfd4fc216c9 --- /dev/null +++ b/_sass/_theme.scss @@ -0,0 +1,457 @@ +// Structural elements +body { + background: $backgroundColour; + color: $bodyColour; + height: 100%; + display: flex; + @include flex-direction(column); + overflow-x: hidden; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; +} + + +// Header, feature and footer +.header, +.footer { + .nav { + text-align: right; + } + .logo { + @include flex(0 0 auto); + } + .container { + @include flexbox; + @include flex-direction(row); + @include justify-content(space-between); + padding: 1rem 0; + @include breakpoint(break-1) { + @include align-items(center); + } + } +} + +.header .nav { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + justify-content: flex-end; + overflow: hidden; +} + +.feature { + padding-bottom: .4rem; + margin-bottom: 1.6rem; + text-align: center; + background: $featureBackgroundColour; + background-size: cover; + background-position: center; + .container { + min-height: 35vh; + max-width: 60%; + @include flex-direction(column); + @include justify-content(center); + } +} + +.logo { + display: inline-block; + line-height: 0; + max-height: 4rem; + @include flexbox; + @include align-items(center); + img { + max-height: 5rem; + } +} + +.nav { + a { + padding: .2rem; + } + &--social a { + display: inline-block; + line-height: 1; + } +} + +.small { + padding-top: .8rem; + color: $captionColour; + display: inline-block; +} + +.footer { + background: $headingColour; + color: $captionColour; + a { + color: $captionColour; + &:hover { + color: $backgroundColour; + } + } + .container { + @include flex-wrap(wrap); + } + .small { + padding-top: 0; + } +} + + +// Pagination nav +.nav--paginator { + @include flexbox; + @include justify-content(space-between); + color: $captionColour; + text-align: center; +} + +.pagination { + min-width: 20%; +} + + +// Main content +.main { + @include flexbox; + @include flex-direction(column); + @include flex(1, 0, auto); + @include justify-content(flex-start); + margin-bottom: 1.6rem; + @include breakpoint(break-1) { + @include justify-content(center); + @include flex-direction(row); + } +} + +.header, +.feature, +.footer { + @include flex(0, 0, auto); +} + +.content { + @include breakpoint(break-1) { + width: 62%; + } +} + +.share .button { + margin-right: .3rem; +} + +.aside { + @include breakpoint(break-1) { + max-width: 34%; + margin-left: 4%; + @include flex(1, 0, auto); + opacity: 0.5; + transition: opacity .1s; + .section { + position: sticky; + top: 0; + } + &--left { + margin-left: 0; + margin-right: 4%; + order: -1; + } + &:hover { + opacity: 1; + } + } +} + +.section { + margin: 0; +} + + +// Lists +.list { + list-style: none; + &--nav { + overflow: hidden; + margin-bottom: var(--listHeight, 0); + } + .item--post, + .item--result, + .item--category { + margin-left: 0; + } +} + +.item { + &--nav { + @include breakpoint(break-1) { + margin-left: .4rem; + display: inline-block; + } + &:first-of-type { + margin-left: 0; + } + } + &--current { + a { + color: $captionColour; + } + } +} + + +// Links, icons and images +a .icon { + transition: fill .1s; + &:hover { + fill: currentColor; + } +} + +.icon { + vertical-align: middle; + width: 1.1em; + height: 1.1em; + fill: CurrentColor; +} + +// Media content +img { + max-width: 100%; + height: auto; +} + +.figure { + line-height: 0; + &--left { + float: left; + padding-right: .8rem; + } + &--right { + float: right; + text-align: right; + padding-left: .8rem; + } + &--center { + text-align: center; + clear: both; + } +} + +.video, +.map { + position: relative; + padding-bottom: 56.25%; + height: 0; + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.map { + padding-bottom: 70%; +} + +.figure, +.video, +.map, +.form { + margin-bottom: .8rem; +} + +audio, +video { + width: 100%; +} + + +// Form elements and buttons +.form { + position: relative; + &__legend { + font-style: italic; + color: $captionColour; + position: absolute; + overflow: hidden; + right: 0; + clip: rect(0 0 0 0); + } +} + +button, +.button, +input[type="text"], +input[type="email"], +input[type="search"], +input[type="submit"], +input[type="color"], +textarea, +select { + padding: .6rem 1.2rem; + margin-bottom: .6rem; + transition: color .1s, background-color .1s, border .1s; + line-height: inherit; + border: none; + box-shadow: none; + border-radius: 0; + -webkit-appearance: none; + .icon { + margin: 0 0 .35rem; + } +} + +input[type="submit"], +button, +.button { + cursor: pointer; + display: inline-block; + color: $backgroundColour; + background: $accentColour; + transition: box-shadow .1s; + will-change: box-shadow; + box-shadow: inset 0 0 0 2rem transparent; + &:hover { + box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25); + } + &:active, + &:focus { + box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25); + } +} + +.button--nav { + @include breakpoint(break-1) { + display: none; + } + background: none; + color: $linkColour; + margin-bottom: 0; + min-height: 4rem; + min-width: 4rem; + &:hover, + &:focus { + box-shadow: none; + color: $hoverColour; + } +} + +a, +button, +.button, +input, +textarea, +select { + &:focus, + &:hover:focus { + outline: solid .12rem $focusColour; + outline-offset: -.12rem; + } +} + +a:hover:focus { + outline: none; +} + +input[type="text"], +input[type="email"], +input[type="search"], +input[type="color"], +textarea, +select { + width: 100%; + border: 1px solid $captionColour; + &:hover { + border-color: $bodyColour; + } +} + +select { + background: $codeBackgroundColour; +} + +textarea { + resize: vertical; +} + +label { + @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all); +} + +code { + padding: .12rem .2rem; + color: $headingColour; +} + +pre code { + padding: 0; +} + +.required { + color: red; +} + +::-webkit-input-placeholder { + opacity: 0.5; +} +::-moz-placeholder { + opacity: 0.5; +} +:-ms-input-placeholder { + opacity: 0.5; +} +:-moz-placeholder { + opacity: 0.5; +} + +::selection { + background: $headingColour; + color: $backgroundColour; + text-shadow: none; +} + + +// Sassline overrides +.typeset { + a > code { + text-shadow: none; + } + .button, + button { + background-image: none; + text-shadow: none; + color: $backgroundColour; + &:hover, + &:active, + &:focus { + background-image: none; + color: $backgroundColour; + } + } + hr { + width: 100%; + } + li { + > p { + padding: 0; + margin: 0; + } + } + .nav a { + padding-left: 0; + padding-right: 0; + margin-left: .2rem; + margin-right: .2rem; + } + pre { + white-space: pre; + overflow-x: scroll; + } +} diff --git a/_sass/alembic.scss b/_sass/alembic.scss new file mode 100644 index 000000000000..5404837ab607 --- /dev/null +++ b/_sass/alembic.scss @@ -0,0 +1,11 @@ +@charset "utf-8"; + +// Import frameworks & theme styles +@import + "normalize", + "settings", + "sassline-base", + "syntax", + "flex", + "theme" +; diff --git a/_sass/sassline-base/_mixins.scss b/_sass/sassline-base/_mixins.scss new file mode 100644 index 000000000000..08fc704cd52e --- /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 000000000000..35b15325391c --- /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 000000000000..13b1cc73093c --- /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 000000000000..4146bd0583c6 --- /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 000000000000..0b4715300ee5 --- /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/blog/index.html b/blog/index.html new file mode 100644 index 000000000000..f85c96afd066 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,4 @@ +--- +layout: blog +collectionpage: posts +---