Commit 5780b3a1 authored by snowdesign's avatar snowdesign

Update 2018-12-23 00:52:01 UTC

parent 53bd4d8f
0.1.6 - 2017-11-15
- Update post meta and "read more" font styling, update screenshots
- Re-add feature image
- Fix typo that assigned wrong header colour
- Various minor adjustments
0.1.5 - 2017-11-14
- Fix jquery link
0.1.4 - 2017-11-13
- Add Discourse comments embed code
- Footer link and minor footer navigation adjustments
0.1.3 - 2017-10-10
- Fix post.hbs and author.hbs for 1.7 compatibility
0.1.2 - 2017-08-24
- Update for Ghost 1.0 compatibility
0.1.1 - 2017-05-23
- Initial release
Copyright (c) 2013-2017 Ghost Foundation
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.
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}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:"Nunito";font-style:normal;font-weight:300;src:local("Nunito Light"),local("Nunito-Light"),url("../fonts/nunito/Nunito-Light.woff2") format("woff2"),url("../fonts/nunito/Nunito-Light.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:italic;font-weight:300;src:local("Nunito Light Italic"),local("Nunito-LightItalic"),url("../fonts/nunito/Nunito-LightItalic.woff2") format("woff2"),url("../fonts/nunito/Nunito-LightItalic.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url("../fonts/nunito/Nunito-Regular.woff2") format("woff2"),url("../fonts/nunito/Nunito-Regular.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:italic;font-weight:400;src:local("Nunito Italic"),local("Nunito-Italic"),url("../fonts/nunito/Nunito-Italic.woff2") format("woff2"),url("../fonts/nunito/Nunito-Italic.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url("../fonts/nunito/Nunito-SemiBold.woff2") format("woff2"),url("../fonts/nunito/Nunito-SemiBold.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:italic;font-weight:600;src:local("Nunito SemiBold Italic"),local("Nunito-SemiBoldItalic"),url("../fonts/nunito/Nunito-SemiBoldItalic.woff2") format("woff2"),url("../fonts/nunito/Nunito-SemiBoldItalic.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:normal;font-weight:800;src:local("Nunito Extra Bold"),local("Nunito-ExtraBold"),url("../fonts/nunito/Nunito-ExtraBold.woff2") format("woff2"),url("../fonts/nunito/Nunito-ExtraBold.ttf") format("truetype")}@font-face{font-family:"Nunito";font-style:italic;font-weight:800;src:local("Nunito Extra Bold Italic"),local("Nunito-ExtraBoldItalic"),url("../fonts/nunito/Nunito-ExtraBoldItalic.woff2") format("woff2"),url("../fonts/nunito/Nunito-ExtraBoldItalic.ttf") format("truetype")}*,*:before,*:after{box-sizing:inherit}*::selection{color:#fff;background:#13628e;text-shadow:none}html{font-size:62.5%;box-sizing:border-box;overflow-y:scroll}body{font:300 2.1rem/1.5 Nunito, sans-serif;color:#13628e;background:#fff}a{font-weight:400;color:#44a76b;text-decoration:none;transition:all 0.12s ease-out 0s}a:visited{color:#44a76b}a:hover,a:active,a:focus{color:#13628e}abbr,acronym{cursor:help}blockquote{margin:3rem 0;padding:1.5rem 3rem 0.01rem;background:#e2f8fe;border-left:#47cfec 0.6rem solid;border-radius:0.3rem;font-style:italic}caption{margin:0 0 1.5rem 0;text-align:center}code{padding:0.1rem 0.3rem;background:#e2f8fe;border-radius:0.3rem;overflow:auto;font-size:1.5rem}dl{margin:4.5rem 0}dt{font-weight:bold;margin:0 0 1.5rem 0}dd{margin:0 0 4.5rem 3rem}dd+dd{margin:-1.5rem 0 4.5rem 3rem}del{text-decoration:line-through}em,i{font-style:italic}h1,h2,h3{font-weight:400;line-height:1}h4,h5,h6{font-weight:600}h1{font-size:3.8rem;margin:4.5rem 0 1.5rem}h2{font-size:3.3rem;margin:4.5rem 0 1.5rem}h3{font-size:3.0rem;margin:3rem 0 1.5rem}h4{font-size:3.0rem;margin:2.1rem 0 1.5rem}h5{font-size:2.7rem;margin:1.5rem 0}h6{font-size:2.4rem;margin:1.5rem 0}hr{height:0.2rem;margin:4.5rem 0;border:0;border-radius:0.3rem;background:#c5f1fd}button,input[type='submit'],input[type='button'],input[type='reset']{cursor:pointer}input[type="text"],input[type="email"],input[type="password"],input[type="url"]{margin:0 0 1.5rem 0;padding:0.5rem;border:#13628e 0.1rem solid;border-radius:0.3rem;background:#fff;color:#13628e;cursor:text}input[type='checkbox'],input[type='radio']{border:0.1rem solid #13628e;cursor:pointer}input[type='checkbox']{border-radius:0.3rem}label{color:#47cfec;display:block}ol,ul{margin:1.5rem 3rem 4.5rem}ol li,ol li p,ul li,ul li p{margin:1rem 0}ol li ul,ul li ul{margin:0 0 0 3rem}ol{list-style:decimal}ul{list-style:disc}p{margin:1.5rem 0 3rem}q{quotes:"“" "”" "‘" "’"}pre{padding:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow:auto;border-radius:0.3rem;background:#e2f8fe;font-size:1.5rem}strong,b,strong a,b a{font-weight:600}sub{vertical-align:sub}sup{font-size:1.25rem;font-weight:400;vertical-align:super}sup+sup{margin-left:0.3rem}table{margin:3rem 0}table tr:nth-child(2n){background:#f3f9fd}table th{border-bottom:0.1rem solid #13628e;padding:1rem 2rem;font-weight:600}table td{padding:1rem 2rem}textarea{border:#13628e 0.1rem solid}.hidden{visibility:hidden;display:none}.clearfix:after{clear:both}hr.tilt{transform:skewY(-3deg);height:0.15rem;margin:3rem 0}.bigbutton{font:800 3rem Nunito, sans-serif;text-shadow:0.2rem 0.2rem 0 #3d955f;background-color:#44a76b;background-image:linear-gradient(#4ebf7a, #44a76b);cursor:pointer;display:table;position:relative;width:auto;margin:0rem auto 3rem;padding:1.1rem 4.5rem 1.4rem;border:0;border-radius:2.7rem/4.7rem;transition:all 0.12s ease-out}.bigbutton:hover{color:#fff;padding:1.1rem 3.5rem 1.4rem;text-shadow:0.1rem 0.1rem 0 rgba(19,98,142,0.4),0rem 0rem 1rem rgba(255,255,255,0.5)}.medbutton{font:800 3rem Nunito, sans-serif;text-shadow:0.2rem 0.2rem 0 #3d955f;background-color:#44a76b;background-image:linear-gradient(#4ebf7a, #44a76b);cursor:pointer;display:table;position:relative;width:auto;margin:0rem auto 3rem;padding:1.1rem 4.5rem 1.4rem;border:0;border-radius:2.7rem/4.7rem;transition:all 0.12s ease-out;font:800 2.4rem Nunito, sans-serif;padding:1rem 2rem}.medbutton:hover{color:#fff;padding:1.1rem 3.5rem 1.4rem;text-shadow:0.1rem 0.1rem 0 rgba(19,98,142,0.4),0rem 0rem 1rem rgba(255,255,255,0.5)}.medbutton:hover{padding:1rem 1.5rem}.smlbutton{font:800 3rem Nunito, sans-serif;text-shadow:0.2rem 0.2rem 0 #3d955f;background-color:#44a76b;background-image:linear-gradient(#4ebf7a, #44a76b);cursor:pointer;display:table;position:relative;width:auto;margin:0rem auto 3rem;padding:1.1rem 4.5rem 1.4rem;border:0;border-radius:2.7rem/4.7rem;transition:all 0.12s ease-out;font:800 2rem Nunito, sans-serif;border-radius:1.7rem/4.7rem;padding:1rem 2rem}.smlbutton:hover{color:#fff;padding:1.1rem 3.5rem 1.4rem;text-shadow:0.1rem 0.1rem 0 rgba(19,98,142,0.4),0rem 0rem 1rem rgba(255,255,255,0.5)}.smlbutton:hover{padding:1rem 2rem}footer .logo{width:18rem;margin:3rem auto}.wrapper{max-width:75rem;margin:0 auto;padding:0 3rem}.inline-left{float:left;display:inline;padding-right:1rem}.inline-right{float:right;display:inline;padding-left:1rem}hr{transform:skewY(-3deg);height:0.15rem}.main-header{text-align:center}.main-header .logo{max-width:44.7rem;margin:6rem 0 0;animation:drop-down 0.7s;animation-delay:0.3s}#tilt{position:relative;clear:both;margin:0 0 6rem}#tilt:after{content:' ';position:absolute;width:100vw;height:60rem;bottom:1rem;transform:skewY(-3deg);z-index:-1}#tilt:before{content:' ';position:absolute;width:100vw;height:3rem;bottom:-2rem;transform:translate(-50vw) skewY(-3deg);z-index:1;background:#fff}#tilt:after{transform:translate(-50vw) skewY(-3deg);background:#e2f8fe}h2.post-title,h2.post-title a{margin:6rem 0 2rem;font-size:3.8rem;letter-spacing:-0.05rem}.author-thumb{display:none}.post-feature-image{margin:1rem 0 2rem;text-align:center}.post-feature-image img{max-width:100%;border-radius:0.3rem}.post-excerpt .read-more{margin:-2rem 2rem 4.5rem 0;display:block;text-align:right;font-size:1.7rem}.post-excerpt .read-more a{width:10rem;font-weight:600}.post-excerpt .read-more a .symbol{position:absolute;display:inline;width:1rem;font-size:3rem;margin:-1.04rem 0 0 0.6rem}.pagination{margin:6rem auto 3rem;font-weight:400;text-align:center}.pagination .newer-posts{padding:0 1rem;border-right:#44a76b 0.1rem solid}.pagination .page-number{margin:0 1rem}.pagination .older-posts{padding:0 1rem;border-left:#44a76b 0.1rem solid}.main-footer{margin:3rem 0;text-align:center}.post-template h1.post-title{font-size:3.8rem;font-weight:400;color:#13628e}.post-meta{margin:1.5rem 0;font-size:1.8rem;font-weight:600;font-style:italic;color:#47cfec}.post-meta a{font-weight:600;font-style:initial;color:#44a76b}.post-date{display:inline;padding:0 0.6rem 0 0}.post-content img,.post-content video{max-width:100%}.read-next{margin:4.5rem 0 3rem}.read-next h2{font-size:2.1rem;line-height:1.25;margin:1.5rem 0;text-align:center}.footnotes ol{font-size:1.5rem;list-style:outside decimal;margin:3rem 0;padding:0 0 0 1.5rem}.footnotes li{margin:3rem 0;padding:0 0 0 1rem}.footnote p{margin:1rem 0}h1.author-title,h1.page-title{font-size:3.8rem;font-weight:800;color:#47cfec}.author-meta span{margin:0 1.5rem 0 0}@media (max-width: 480px){body{font-size:1.8rem;line-height:1.25}.inline-left,.inline-right{float:unset;display:block;margin:0 auto;padding:1rem 0}.main-header .logo{margin:4.5rem 0 0.2rem}h1.post-title,h1.author-title{font-size:2.7rem;margin:3rem 0 1.5rem}h2.post-title,h2.post-title a{font-size:2.4rem;margin:3rem 0 1.5rem}h3,h4,h5,h6{font-size:2.1rem;margin:1.5rem 0}.post-header .post-meta{font-size:1.5rem;font-weight:600}footer.post-meta .post-date,.post-header .post-date{display:block;padding:0;border:0}.read-next h2{font-size:1.7rem;margin:1.5rem 0}}@media (max-width: 750px){.main-header .logo{width:87%;margin:6rem 0 0}}@keyframes drop-down{0%{opacity:0;transform:translateY(-6rem)}100%{opacity:1;transform:translateY(0)}}
Copyright (c) 2011, Vernon Adams (vern@newtypography.co.uk), with Reserved Font Name Nunito
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
/**
* Main JS file for Casper behaviours
*/
/* globals jQuery, document */
(function ($, undefined) {
"use strict";
var $document = $(document);
$document.ready(function () {
var $postContent = $(".post-content");
$postContent.fitVids();
$(".scroll-down").arctic_scroll();
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
e.preventDefault();
$("body").toggleClass("nav-opened nav-closed");
});
});
// Arctic Scroll by Paul Adam Davis
// https://github.com/PaulAdamDavis/Arctic-Scroll
$.fn.arctic_scroll = function (options) {
var defaults = {
elem: $(this),
speed: 500
},
allOptions = $.extend(defaults, options);
allOptions.elem.click(function (event) {
event.preventDefault();
var $this = $(this),
$htmlBody = $('html, body'),
offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
toMove;
if (offset) {
toMove = parseInt(offset);
$htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
} else if (position) {
toMove = parseInt(position);
$htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
} else {
$htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
}
});
};
})(jQuery);
/*jshint browser:true */
/*!
* FitVids 1.1
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
*/
;(function( $ ){
'use strict';
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null,
ignore: null
};
if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]);
}
if ( options ) {
$.extend( settings, options );
}
return this.each(function(){
var selectors = [
'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]',
'object',
'embed'
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var ignoreList = '.fitvidsignore';
if(settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore;
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function(){
var $this = $(this);
if($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video.
}
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
{
$this.attr('height', 9);
$this.attr('width', 16);
}
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('name')){
var videoName = 'fitvid' + $.fn.fitVids._count;
$this.attr('name', videoName);
$.fn.fitVids._count++;
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width');
});
});
};
// Internal counter for unique video names.
$.fn.fitVids._count = 0;
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );
# README
To update the css, install a Sass compiler. Edit the Sass files and
re-generate the css. Example for SassC:
```
cd /path/to/theme/assets
sassc -t compressed sass/screen.sass > css/screen.css
```
// -------------------------- //
// Base Stylesheet — Contents //
// -------------------------- //
//
// Fonts
// Colors
// Common elements
// Mixins
// Preset classes
// Fonts -------------------------------------------------------------------//
// Light
@font-face
font-family: "Nunito"
font-style: normal
font-weight: 300
src: local("Nunito Light"), local("Nunito-Light"), url("../fonts/nunito/Nunito-Light.woff2") format("woff2"), url("../fonts/nunito/Nunito-Light.ttf") format("truetype")
// Light italic
@font-face
font-family: "Nunito"
font-style: italic
font-weight: 300
src: local("Nunito Light Italic"), local("Nunito-LightItalic"), url("../fonts/nunito/Nunito-LightItalic.woff2") format("woff2"), url("../fonts/nunito/Nunito-LightItalic.ttf") format("truetype")
// Regular
@font-face
font-family: "Nunito"
font-style: normal
font-weight: 400
src: local("Nunito Regular"), local("Nunito-Regular"), url("../fonts/nunito/Nunito-Regular.woff2") format("woff2"), url("../fonts/nunito/Nunito-Regular.ttf") format("truetype")
// Regular italic
@font-face
font-family: "Nunito"
font-style: italic
font-weight: 400
src: local("Nunito Italic"), local("Nunito-Italic"), url("../fonts/nunito/Nunito-Italic.woff2") format("woff2"), url("../fonts/nunito/Nunito-Italic.ttf") format("truetype")
// Semi bold
@font-face
font-family: "Nunito"
font-style: normal
font-weight: 600
src: local("Nunito SemiBold"), local("Nunito-SemiBold"), url("../fonts/nunito/Nunito-SemiBold.woff2") format("woff2"), url("../fonts/nunito/Nunito-SemiBold.ttf") format("truetype")
// Semi bold italic
@font-face
font-family: "Nunito"
font-style: italic
font-weight: 600
src: local("Nunito SemiBold Italic"), local("Nunito-SemiBoldItalic"), url("../fonts/nunito/Nunito-SemiBoldItalic.woff2") format("woff2"), url("../fonts/nunito/Nunito-SemiBoldItalic.ttf") format("truetype")
// Extra bold
@font-face
font-family: "Nunito"
font-style: normal
font-weight: 800
src: local("Nunito Extra Bold"), local("Nunito-ExtraBold"), url("../fonts/nunito/Nunito-ExtraBold.woff2") format("woff2"), url("../fonts/nunito/Nunito-ExtraBold.ttf") format("truetype")
// Extra bold italic
@font-face
font-family: "Nunito"
font-style: italic
font-weight: 800
src: local("Nunito Extra Bold Italic"), local("Nunito-ExtraBoldItalic"), url("../fonts/nunito/Nunito-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/nunito/Nunito-ExtraBoldItalic.ttf") format("truetype")
// Colors -----------------------------------------------------------------//
// Palette
$dark-blue: #13628e
$bright-blue: #c5f1fd
$bright-blue-text: #47cfec
$gold: #f9ff68
$white: #ffffff
$green: #4ebf7a
$green-shade: #44a76b
$red: #d66a6a
// Notification colors
$note-success-color: darken($green, 10%)
$note-success-bg: lighten($green, 35%)
$note-info-color: darken($bright-blue-text, 15%)
$note-info-bg: lighten($bright-blue, 5%)
$note-warning-color: darken($gold, 35%)
$note-warning-bg: lighten($gold, 15%)
$note-danger-color: darken($red, 15%)
$note-danger-bg: lighten($red, 20%)
// Additional colors
$gray-table-row: #f3f9fd // table row
$blue-text-shadow: rgba(19,98,142,0.4) // button text shadow
$white-text-shadow: rgba(255,255,255,0.5) // button text shadow
$green-border: rgba(78,191,122,0.3) // navbar item border
$yellow-highlight: #ffffcd // tos section highlight
$blue-header: #c5f1fd // header gradient
$blue-header-light: #f0fbfe // header gradient
$blue-header2: #e2f8fe // blog header
// Common elements ---------------------------------------------------------//
*, *:before, *:after
box-sizing: inherit
*::selection
color: $white
background: $dark-blue
text-shadow: none
html
font-size: 62.5%
box-sizing: border-box
overflow-y: scroll
body
font: 300 2.1rem/1.5 Nunito, sans-serif
color: $dark-blue
background: $white
a
font-weight: 400
color: $green-shade
text-decoration: none
transition: all 0.12s ease-out 0s
&:visited
color: $green-shade
&:hover, &:active, &:focus
color: $dark-blue
abbr, acronym
cursor: help
blockquote
margin: 3rem 0
padding: 1.5rem 3rem 0.01rem
background: $blue-header2
border-left: $bright-blue-text 0.6rem solid
border-radius: 0.3rem
font-style: italic
caption
margin: 0 0 1.5rem 0
text-align: center
code
padding: 0.1rem 0.3rem
background: $blue-header2
border-radius: 0.3rem
overflow: auto
font-size: 1.5rem
dl
margin: 4.5rem 0
dt
font-weight: bold
margin: 0 0 1.5rem 0
dd
margin: 0 0 4.5rem 3rem
dd + dd
margin: -1.5rem 0 4.5rem 3rem
del
text-decoration: line-through
em, i
font-style: italic
h1, h2, h3
font-weight: 400
line-height: 1
h4, h5, h6
font-weight: 600
h1
font-size: 3.8rem
margin: 4.5rem 0 1.5rem
h2
font-size: 3.3rem
margin: 4.5rem 0 1.5rem
h3
font-size: 3.0rem
margin: 3rem 0 1.5rem
h4
font-size: 3.0rem
margin: 2.1rem 0 1.5rem
h5
font-size: 2.7rem
margin: 1.5rem 0
h6
font-size: 2.4rem
margin: 1.5rem 0
hr
height: 0.2rem
margin: 4.5rem 0
border: 0
border-radius: 0.3rem
background: $bright-blue
button, input[type='submit'],
input[type='button'], input[type='reset']
cursor: pointer
input[type="text"], input[type="email"],
input[type="password"], input[type="url"]
margin: 0 0 1.5rem 0
padding: 0.5rem
border: $dark-blue 0.1rem solid
border-radius: 0.3rem
background: $white
color: $dark-blue
cursor: text
input[type='checkbox'], input[type='radio']
border: 0.1rem solid $dark-blue
cursor: pointer
input[type='checkbox']
border-radius: 0.3rem
label
color: $bright-blue-text
display: block
ol, ul
margin: 1.5rem 3rem 4.5rem
li, li p
margin: 1rem 0
li ul
margin: 0 0 0 3rem
ol
list-style: decimal
ul
list-style: disc
p
margin: 1.5rem 0 3rem
q
quotes: "“" "”" "‘" "’"
pre
padding: 1.5rem
white-space: pre-wrap
word-wrap: break-word
overflow: auto
border-radius: 0.3rem
background: $blue-header2
font-size: 1.5rem
strong, b, strong a, b a
font-weight: 600
sub
vertical-align: sub
sup
font-size: 1.25rem
font-weight: 400
vertical-align: super
// Multiple footnotes
sup + sup
margin-left: 0.3rem
table
margin: 3rem 0
tr:nth-child(2n)
background: $gray-table-row
th
border-bottom: 0.1rem solid $dark-blue
padding: 1rem 2rem
font-weight: 600
td
padding: 1rem 2rem
textarea
border: $dark-blue 0.1rem solid
// Mixins ------------------------------------------------------------------//
// Set tilt style
// Parameters: element width (vw), element height (rem),
// bottom margin (rem), vertical shift (rem), skew amount (deg)
=header-tilt($w, $h, $bmargin, $vshift, $skew)
position: relative
clear: both
margin: 0 0 $bmargin
&:after
content: ' '
position: absolute
width: $w
height: $h
bottom: $vshift
transform: skewY($skew)
z-index: -1
// Set button style
// Parameters: text color, bg gradient color 1, bg gradient color 2
=big-button($tc, $bc1, $bc2)
font: 800 3rem Nunito, sans-serif
text-shadow: 0.2rem 0.2rem 0 darken($bc2, 5%)
background-color: $bc2
background-image: linear-gradient($bc1, $bc2)
cursor: pointer
display: table
position: relative
width: auto
margin: 0rem auto 3rem
padding: 1.1rem 4.5rem 1.4rem
border: 0
border-radius: 2.7rem/4.7rem
transition: all 0.12s ease-out
&:hover
color: $tc
padding: 1.1rem 3.5rem 1.4rem
text-shadow: 0.1rem 0.1rem 0 $blue-text-shadow, 0rem 0rem 1rem $white-text-shadow
=med-button($tc, $bc1, $bc2)
+big-button($tc, $bc1, $bc2)
font: 800 2.4rem Nunito, sans-serif