From ddd92692fa6bb1342093fb40027d798c1fc4c75e Mon Sep 17 00:00:00 2001 From: Toma Nistor Date: Sun, 18 Feb 2018 01:19:35 -0800 Subject: [PATCH 1/6] Stared removing jQuery and reorganizing partials --- layouts/404.html | 16 +- layouts/_default/list.html | 50 +- layouts/_default/single.html | 54 +- layouts/index.html | 22 +- layouts/partials/about.html | 22 +- layouts/partials/blog.html | 36 +- layouts/partials/body-top.html | 45 ++ layouts/partials/contact.html | 37 +- layouts/partials/disqus.html | 28 +- layouts/partials/footer.html | 105 ++-- layouts/partials/header.html | 198 +++--- layouts/sitemap.xml | 32 +- static/scripts/contact-2c079c75.js | 1 + static/scripts/index-9f7032a2.js | 1 + static/scripts/main-3bfecde2.js | 1 + static/scripts/src/contact.js | 37 ++ static/scripts/src/index.js | 160 +++-- static/scripts/src/main.js | 61 +- static/styles/main-0b3925ea.css | 1 + static/styles/scss/_base.scss | 157 +++++ static/styles/scss/_colors.scss | 7 + static/styles/scss/_flexboxgrid.scss | 882 +++++++++++++++++++++++++++ static/styles/scss/_layout.scss | 36 ++ static/styles/scss/_typography.scss | 58 ++ static/styles/scss/flexboxgrid.scss | 882 --------------------------- static/styles/scss/main.scss | 205 +------ 26 files changed, 1674 insertions(+), 1460 deletions(-) create mode 100644 layouts/partials/body-top.html create mode 100644 static/scripts/contact-2c079c75.js create mode 100644 static/scripts/index-9f7032a2.js create mode 100644 static/scripts/main-3bfecde2.js create mode 100644 static/scripts/src/contact.js create mode 100644 static/styles/main-0b3925ea.css create mode 100644 static/styles/scss/_base.scss create mode 100644 static/styles/scss/_colors.scss create mode 100644 static/styles/scss/_flexboxgrid.scss create mode 100644 static/styles/scss/_layout.scss create mode 100644 static/styles/scss/_typography.scss delete mode 100644 static/styles/scss/flexboxgrid.scss diff --git a/layouts/404.html b/layouts/404.html index 6bc1588..9a2ca6e 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,10 +1,18 @@ -{{ partial "header.html" . }} + + + {{ partial "header.html" . }} + + {{ partial "body-top" . }} +
-
+

404!

WHAT DID YOU DO?!

-
+
-{{ partial "footer.html" . }} +
+ {{ partial "footer.html" . }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 15acc78..325907a 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,23 +1,31 @@ -{{ partial "header.html" . }} + + + {{ partial "header.html" . }} + + {{ partial "body-top" . }} +
-
-
-
-

{{ humanize .Type }}

-
-
-
- {{ range .Data.Pages }} -
-

{{ .Title }}

-
- {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read -
-
- {{ end }} -
-
-
-
+
+
+
+

{{ humanize .Type }}

+
+
+
+ {{ range .Data.Pages }} +
+

{{ .Title }}

+
+ {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read +
+
+ {{ end }} +
+
+
+
-{{ partial "footer.html" . }} +
+ {{ partial "footer.html" . }} + + diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9ea0d90..3729d2f 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,28 +1,36 @@ -{{ partial "header.html" . }} + + + {{ partial "header.html" . }} + + {{ partial "body-top" . }} +
-
-
-

{{ if .Params.heading }} {{ .Params.heading }} {{ else }} {{ .Title }} {{ end }}

+
+
+

{{ if .Params.heading }} {{ .Params.heading }} {{ else }} {{ .Title }} {{ end }}

-
- {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read -
+
+ {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read +
-
- {{ .Content }} -
+
+ {{ .Content }} +
- -
-
- {{ partial "disqus" . }} -
+ +
+
+ {{ partial "disqus" . }} +
-{{ partial "footer.html" . }} +
+ {{ partial "footer.html" . }} + + diff --git a/layouts/index.html b/layouts/index.html index 751c4ce..4e3e627 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,16 @@ -{{ partial "header.html" . }} -{{ partial "about.html" . }} -{{ partial "gallery.html" . }} -{{ partial "blog.html" . }} -{{ partial "contact.html" . }} -{{ partial "footer.html" . }} + + + {{ partial "header.html" . }} + + {{ partial "body-top" . }} +
+ + {{ partial "about.html" . }} + {{ partial "gallery.html" . }} + {{ partial "blog.html" . }} + {{ partial "contact.html" . }} + +
+ {{ partial "footer.html" . }} + + diff --git a/layouts/partials/about.html b/layouts/partials/about.html index dcd968a..28911d6 100644 --- a/layouts/partials/about.html +++ b/layouts/partials/about.html @@ -1,18 +1,20 @@ {{ $directory := "content/" }} {{ $filename := "about.md" }} {{ if (where (readDir $directory) "Name" $filename) }} -
+
-
-

{{ with $.Site.GetPage "page" "about.md" }}{{ .Title }}{{ end }}

+
+
+

{{ with $.Site.GetPage "page" "about.md" }}{{ .Title }}{{ end }}

-
-
- {{ with $.Site.GetPage "page" "about.md" }} - {{ .Content }} - {{ end }} -
+
+
+
+ {{ with $.Site.GetPage "page" "about.md" }} + {{ .Content }} + {{ end }}
+
-
+
{{ end }} diff --git a/layouts/partials/blog.html b/layouts/partials/blog.html index 1bd9a3e..304eb83 100644 --- a/layouts/partials/blog.html +++ b/layouts/partials/blog.html @@ -1,22 +1,22 @@
-
-
-

Latest Posts

-
-
-
- {{ range first 5 (where .Data.Pages "Section" "blog") }} -
-

{{ .Title }}

-
- {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read -
-
- {{ end }} +
+
+

Latest Posts

+
+
+
+ {{ range first 5 (where .Data.Pages "Section" "blog") }} +
+

{{ .Title }}

+
+ {{ .Date.Format (.Site.Params.dateform | default "January 2006") }} · {{ .ReadingTime }} minute read
-
-
-

View All

-
+ + {{ end }} +
+
+
+

View All

+
diff --git a/layouts/partials/body-top.html b/layouts/partials/body-top.html new file mode 100644 index 0000000..8942256 --- /dev/null +++ b/layouts/partials/body-top.html @@ -0,0 +1,45 @@ +{{ if .Site.Params.googleTagManager }} + + + +{{ end }} + +{{ if .IsHome }} +
+
+
+
{{ .Site.Title }}
+
+
+
+

{{ .Site.Params.tagline }}|

+
+
+
+
+{{ end }} + + + +
+
+
+ {{ range .Site.Menus.main }} +

{{ .Name }}

+ {{ end }} +
+
+
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index a51f631..f38b80b 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -1,19 +1,24 @@
-
-
-

Let's Chat

-
-
-
-
-
-
-
- - -
- -
-
+
+ +
+
+

Let's Chat

+
+ +
+
+
+
+
+
+ + +
+ +
+
+ +
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html index bcd3769..d86cb7b 100644 --- a/layouts/partials/disqus.html +++ b/layouts/partials/disqus.html @@ -1,16 +1,16 @@
-
- - +
+ +
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0c5e771..fbde54d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,74 +1,37 @@ - - - - + {{ if .Site.Params.twitter }} +
Twitter
+ {{ end }} + + {{ if or (.Site.Params.copyright) (.Site.Params.credit) }} +
+ {{ if .Site.Params.copyright }} + Copyright © {{ now.Format "2006" }} {{ .Site.Title }}. + {{ end }} + {{ if .Site.Params.credit }} + Theme developed by Toma Nistor + {{ end }} +
+ {{ end }} + + + + {{ if .IsHome }} + + {{ if .Site.Params.ajaxFormspree }} + + {{ end }} + {{ else }} + + {{ end }} + + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6325937..f5f4408 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,106 +1,92 @@ - - - - {{ if .Site.Params.googleTagManager }} - - - - {{ end }} - - - {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }} - {{ if .IsHome }} - {{ .Site.Title }} - {{ else if .Params.heading }} - {{ .Params.heading }} - {{ else }} - {{ .Title }} | {{ .Site.Title }} - {{ end }} - - - - - - - - - - - - - {{ if .Description }} - {{ else if .Site.Params.description }} - {{ else if .Summary }}{{ end }} - {{ if .Site.Params.author }}{{ end }} - {{ if .Site.Params.twitter }} - - - - {{ end }} - - - - {{ if .Site.Params.opengraphImage}}{{ end }} - {{ if .Description }} - {{ else if .Site.Params.description }} - {{ else if .Summary }}{{ end }} - - {{ if .Site.Params.favicon }} - - - {{ end }} - - - {{ if .RSSLink }}{{ end }} - - {{ if .Site.Params.customCSS }}{{ partial "css.html" . }}{{ end }} - {{ if .Site.Params.highlightJS }}{{ end }} - {{ if .Site.GoogleAnalytics }}{{ template "_internal/google_analytics.html" . }}{{ end }} - - - - {{ if .Site.Params.googleTagManager }} - - - - {{ end }} - - {{ if .IsHome }} -
-
-
-
{{ .Site.Title }}
-
-
-

{{ .Site.Params.tagline }}|

-
-
-
- {{ end }} - - -
-
-
- {{ range .Site.Menus.main }} -

{{ .Name }}

- {{ end }} -
-
-
-
+ + {{ if .Site.Params.googleTagManager }} + + + + {{ end }} + + + {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }} + {{ if .IsHome }} + {{ .Site.Title }} + {{ else if .Params.heading }} + {{ .Params.heading }} + {{ else }} + {{ .Title }} | {{ .Site.Title }} + {{ end }} + + + + + + + + + + + + + + {{ if .Description }} + + {{ else if .Site.Params.description }} + + {{ else if .Summary }} + + {{ end }} + + {{ if .Site.Params.author }} + + {{ end }} + + {{ if .Site.Params.twitter }} + + + + {{ end }} + + + + + + {{ if .Site.Params.opengraphImage}} + + {{ end }} + + {{ if .Description }} + + {{ else if .Site.Params.description }} + + {{ else if .Summary }} + + {{ end }} + + {{ if .Site.Params.favicon }} + + + {{ end }} + + + + {{ if .RSSLink }} + + {{ end }} + + + + {{ if .Site.Params.customCSS }} + {{ partial "css.html" . }} + {{ end }} + + {{ if .Site.Params.highlightJS }} + + {{ end }} + + {{ if .Site.GoogleAnalytics }} + {{ template "_internal/google_analytics.html" . }} + {{ end }} + diff --git a/layouts/sitemap.xml b/layouts/sitemap.xml index 9ba6b92..7708755 100644 --- a/layouts/sitemap.xml +++ b/layouts/sitemap.xml @@ -1,21 +1,21 @@ {{ range (where .Data.Pages "Section" "!=" "gallery") }} - - {{ .Permalink }}{{ if not .Lastmod.IsZero }} - {{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}{{ end }}{{ with .Sitemap.ChangeFreq }} - {{ . }}{{ end }}{{ if ge .Sitemap.Priority 0.0 }} - {{ .Sitemap.Priority }}{{ end }}{{ if .IsTranslated }}{{ range .Translations }} - {{ end }} - {{ end }} - + + {{ .Permalink }}{{ if not .Lastmod.IsZero }} + {{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}{{ end }}{{ with .Sitemap.ChangeFreq }} + {{ . }}{{ end }}{{ if ge .Sitemap.Priority 0.0 }} + {{ .Sitemap.Priority }}{{ end }}{{ if .IsTranslated }}{{ range .Translations }} + {{ end }} + {{ end }} + {{ end }} diff --git a/static/scripts/contact-2c079c75.js b/static/scripts/contact-2c079c75.js new file mode 100644 index 0000000..0df217d --- /dev/null +++ b/static/scripts/contact-2c079c75.js @@ -0,0 +1 @@ +$("#form-contact").on("submit",function(e){e.preventDefault();var a=$("input[name=name]").val(),t=$("input[name=email").val(),n=$("input[name=_subject").val(),o=$("textarea[name=message]").val();$.ajax({url:"https://formspree.io/{{ .Site.Params.email }}",method:"POST",data:{name:a,_replyto:t,email:t,_subject:n,message:o},dataType:"json",success:function(){console.log("Form successfully sent"),$("#form-contact").get(0).reset(),$("#form-submit").fadeOut(function(){$("#form-thankyou").fadeIn(function(){$("#form-thankyou").delay(4e3).fadeOut(function(){$("#form-submit").fadeIn()})})})}})}); \ No newline at end of file diff --git a/static/scripts/index-9f7032a2.js b/static/scripts/index-9f7032a2.js new file mode 100644 index 0000000..6129a9d --- /dev/null +++ b/static/scripts/index-9f7032a2.js @@ -0,0 +1 @@ +function fullMobileViewport(){function i(){e.style.height=t+"px"}var e=this,t=window.innerHeight;$(window).resize(function(){Math.abs(t-window.innerHeight)>100&&(t=window.innerHeight,i())}),i()}var $=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),toggle=function(i){if("visible"===window.getComputedStyle(i).visibility)return i.style.visibility="hidden",i.classList.add("hide"),void i.classList.remove("show");i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")};!function(){window.onscroll=function(){this.scrollTop()>this.innerHeight-parseInt(getComputedStyle("nav").height)?($("nav").classList.add("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")})):($("nav").classList.remove("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="hidden",i.classList.add("hide"),i.classList.remove("show")}))},$(".nav-icon").addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("img").classList.toggle("img")}),$$(".nav-full a").forEach(function(i){i.addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("nav-icon").classList.toggle("nav-icon")})})}(),$("header").forEach(function(i){}); \ No newline at end of file diff --git a/static/scripts/main-3bfecde2.js b/static/scripts/main-3bfecde2.js new file mode 100644 index 0000000..975e9ba --- /dev/null +++ b/static/scripts/main-3bfecde2.js @@ -0,0 +1 @@ +var $=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),toggle=function(i){if("visible"===window.getComputedStyle(i).visibility)return i.style.visibility="hidden",i.classList.add("hide"),void i.classList.remove("show");i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")};!function(){$("nav").classList.add("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")}),$(".nav-icon").addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("img").classList.toggle("img")}),$$(".nav-full a").forEach(function(i){i.addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("nav-icon").classList.toggle("nav-icon")})}),hljs.initHighlightingOnLoad()}(); \ No newline at end of file diff --git a/static/scripts/src/contact.js b/static/scripts/src/contact.js new file mode 100644 index 0000000..0065aa0 --- /dev/null +++ b/static/scripts/src/contact.js @@ -0,0 +1,37 @@ +$("#form-contact").on("submit", function(e) { + e.preventDefault(); + + // Store form field values + var name = $("input[name=name]").val(); + var email = $("input[name=email").val(); + var subject = $("input[name=_subject").val(); + var message = $("textarea[name=message]").val(); + + // Send to Formspree + $.ajax({ + url:"https://formspree.io/{{ .Site.Params.email }}", + method:"POST", + data:{ + name:name, + _replyto:email, + email:email, + _subject:subject, + message:message, + }, + dataType:"json", + success:function() { + console.log("Form successfully sent"); + // Reset form + $("#form-contact").get(0).reset(); + // Fade out submit button, fade in thank you message, then fade out message and fade in submit button + $("#form-submit").fadeOut(function(){ + $("#form-thankyou").fadeIn(function(){ + $("#form-thankyou").delay(4000).fadeOut(function(){ + $("#form-submit").fadeIn(); + }); + }); + }); + } + }); + +}); diff --git a/static/scripts/src/index.js b/static/scripts/src/index.js index b5da498..b52bf43 100644 --- a/static/scripts/src/index.js +++ b/static/scripts/src/index.js @@ -1,67 +1,121 @@ -$(document).ready(function() { +var $ = document.querySelector.bind(document); +var $$ = document.querySelectorAll.bind(document); - // Nav starts at bottom then is fixed to top - // Logo and hamburger menus fade in and out - $(window).scroll(function() { - var scrollPosition = $(this).scrollTop(); - if( scrollPosition > $(this).height() - $("nav").height() ) { - $("nav").addClass("nav-fixed"); - $("nav > div.logo").css('visibility','visible').fadeIn(); - $("nav > div.nav-toggle").css('visibility','visible').fadeIn(); - } else { - $("nav").removeClass("nav-fixed"); - $("nav > div.logo").css('visibility','hidden').fadeOut(); - $("nav > div.nav-toggle").css('visibility','hidden').fadeOut(); - } - // // TODO Active nav link changes on scroll - // $(".section").each(function() { - // var target = $(this).offset().top; - // var id = $(this).attr("id"); - // if( scrollPosition >= target ) { - // $("nav > div > h3 > a").removeClass("active"); - // $("nav > div > h3 > a[href=#" + id + "]").addClass("active"); - // } - // }); - }); +var toggle = function(el) { + // If element is visible, hide it + if (window.getComputedStyle(el).visibility === 'visible') { + el.style.visibility = 'hidden'; + el.classList.add('hide') + el.classList.remove('show'); + return; + }; - // Full screen nav open on click - $(".nav-icon").click(function(){ - $(".nav-full").toggleClass("active"); - $("main").toggleClass("active"); - $(this).find("img").toggle(); - }); + // If element is hidden, show it + el.style.visibility = 'visible'; + el.classList.add('show') + el.classList.remove('hide'); +}; - // Full screen nav close on click - $(".nav-full").find("a").click(function(){ - $(".nav-full").toggleClass("active"); - $("main").toggleClass("active"); - $(".nav-icon").find("img").toggle(); +(function() { + // Nav starts at bottom then is fixed to top + // Logo and hamburger menus fade in and out + // $(window).scroll(function() { + // var scrollPosition = $(this).scrollTop(); + // if( scrollPosition > $(this).height() - $("nav").height() ) { + // $("nav").addClass("nav-fixed"); + // $("nav > div.logo").css('visibility','visible').fadeIn(); + // $("nav > div.nav-toggle").css('visibility','visible').fadeIn(); + // } else { + // $("nav").removeClass("nav-fixed"); + // $("nav > div.logo").css('visibility','hidden').fadeOut(); + // $("nav > div.nav-toggle").css('visibility','hidden').fadeOut(); + // } + // }); + + // Nav starts at bottom then is fixed to top + // Logo and hamburger menus fade in and out + window.onscroll = function() { + var scrollPosition = this.scrollTop(); + if (scrollPosition > this.innerHeight - parseInt(getComputedStyle('nav').height)) { + // Nav is fixed to top + $('nav').classList.add('nav-fixed'); + $$('nav > .logo, nav > .nav-toggle').forEach(function(el) { + el.style.visibility = 'visible'; + el.classList.add('show'); + el.classList.remove('hide'); + }); + } else { + // Nav is not fixed + $('nav').classList.remove('nav-fixed'); + $$('nav > .logo, nav > .nav-toggle').forEach(function(el) { + el.style.visibility = 'hidden'; + el.classList.add('hide'); + el.classList.remove('show'); + }); + } + }; + + // Full screen nav open on click + $('.nav-icon').addEventListener('click', function() { + $$('.nav-full, main').forEach(function(el) { + el.classList.toggle('active'); }); + this.querySelector('img').classList.toggle('img'); + }); - // Highlight.js initialization - $("pre code").each(function(i, block) { - hljs.highlightBlock(block); + // Full screen nav close on click + $$('.nav-full a').forEach(function(links) { + links.addEventListener('click', function() { + $$('.nav-full, main').forEach(function(el) { + el.classList.toggle('active'); + }) + this.querySelector('nav-icon').classList.toggle('nav-icon'); }); + }); -}); +}()); // Mobile browsers viewport height bug fix function fullMobileViewport() { - var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome - var element = $(this); - var viewportHeight = $(window).height(); + var element = this; + var viewportHeight = window.innerHeight; + var heightChangeTolerance = 100; // Approximately URL bar height in Chrome - $(window).resize(function () { - if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) { - viewportHeight = $(window).height(); - update(); - } - }); - - function update() { - element.css("height", viewportHeight + "px"); + $(window).resize(function () { + if (Math.abs(viewportHeight - window.innerHeight) > heightChangeTolerance) { + viewportHeight = window.innerHeight; + update(); } + }); + + function update() { + element.style.height = (viewportHeight + 'px'); + } - update(); + update(); } -$("header").each(fullMobileViewport); +$('header').forEach(function(el) { + fullMobileViewport; +}); + + +// Mobile browsers viewport height bug fix +// function fullMobileViewport() { +// var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome +// var element = $(this); +// var viewportHeight = $(window).height(); +// +// $(window).resize(function () { +// if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) { +// viewportHeight = $(window).height(); +// update(); +// } +// }); +// +// function update() { +// element.css("height", viewportHeight + "px"); +// } +// +// update(); +// } +// $("header").each(fullMobileViewport); diff --git a/static/scripts/src/main.js b/static/scripts/src/main.js index 19a1198..58f4d1e 100644 --- a/static/scripts/src/main.js +++ b/static/scripts/src/main.js @@ -1,27 +1,48 @@ -$(document).ready(function() { +var $ = document.querySelector.bind(document); +var $$ = document.querySelectorAll.bind(document); - // Nav is fixed to top - $('nav').addClass('nav-fixed'); - $('nav > div.logo').css('visibility','visible').fadeIn(); - $('nav > div.nav-toggle').css('visibility','visible').fadeIn(); +var toggle = function(el) { + // If element is visible, hide it + if (window.getComputedStyle(el).visibility === 'visible') { + el.style.visibility = 'hidden'; + el.classList.add('hide') + el.classList.remove('show'); + return; + }; - // Full screen nav open on click - $('.nav-icon').click(function(){ - $(".nav-full").toggleClass('active'); - $('main').toggleClass('active'); - $(this).find('img').toggle(); - }); + // If element is hidden, show it + el.style.visibility = 'visible'; + el.classList.add('show') + el.classList.remove('hide'); +}; + +(function() { + // Nav is fixed to top + $('nav').classList.add('nav-fixed'); + $$('nav > .logo, nav > .nav-toggle').forEach(function(el) { + el.style.visibility = 'visible'; + el.classList.add('show'); + el.classList.remove('hide'); + }); - // Full screen nav close on link click - $('.nav-full').find('a').click(function(){ - $('.nav-full').toggleClass('active'); - $('main').toggleClass('active'); - $('.nav-icon').find('img').toggle(); + // Full screen nav open on click + $('.nav-icon').addEventListener('click', function() { + $$('.nav-full, main').forEach(function(el) { + el.classList.toggle('active'); }); + this.querySelector('img').classList.toggle('img'); + }); - // Highlight.js initialization - $('pre code').each(function(i, block) { - hljs.highlightBlock(block); + // Full screen nav close on click + $$('.nav-full a').forEach(function(links) { + links.addEventListener('click', function() { + $$('.nav-full, main').forEach(function(el) { + el.classList.toggle('active'); + }) + this.querySelector('nav-icon').classList.toggle('nav-icon'); }); + }); -}); + // Highlight.js initialization + hljs.initHighlightingOnLoad(); +}()); diff --git a/static/styles/main-0b3925ea.css b/static/styles/main-0b3925ea.css new file mode 100644 index 0000000..aea7d25 --- /dev/null +++ b/static/styles/main-0b3925ea.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css?family=Rubik|Bitter");.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.container-fluid{margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}.container{margin-right:auto;margin-left:auto}.row{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col-xs{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width: 48em){.container{width:49rem}.col-sm{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-sm-offset-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-sm-offset-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-sm-offset-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-sm-offset-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-sm-offset-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-sm-offset-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-sm-offset-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-sm-offset-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-sm-offset-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-sm-offset-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-sm-offset-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-sm-offset-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-sm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width: 64em){.container{width:65rem}.col-md{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-md-offset-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-md-offset-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-md-offset-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-md-offset-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-md-offset-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-md-offset-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-md-offset-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-md-offset-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-md-offset-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-md-offset-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-md-offset-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-md-offset-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-md{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width: 75em){.container{width:76rem}.col-lg{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-lg-offset-1{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-lg-offset-2{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-lg-offset-3{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-lg-offset-4{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-lg-offset-5{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-lg-offset-6{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-lg-offset-7{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-lg-offset-8{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-lg-offset-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-lg-offset-10{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-lg-offset-11{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-lg-offset-12{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-lg{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}h1{font-size:2.961rem}@media (max-width: 48em){h1{font-size:2.441rem}}@media (max-width: 25em){h1{font-size:2.148rem}}h2{font-size:2.221rem}@media (max-width: 48em){h2{font-size:1.953em}}@media (max-width: 25em){h2{font-size:1.719rem}}h3{font-size:1.666rem}@media (max-width: 48em){h3{font-size:1.563rem}}@media (max-width: 25em){h3{font-size:1.375rem}}*{margin:0;padding:0;border:0;color:#212121;font:inherit;vertical-align:baseline;-webkit-box-sizing:border-box;box-sizing:border-box}*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-box-sizing:inherit;box-sizing:inherit;overflow-x:hidden}body{font-size:1.25rem;color:#212121;font-family:"Rubik","Poppins","Hel­vetica",Arial,sans-serif;line-height:1.6}@media (max-width: 48em){body{font-size:1.25rem}}@media (max-width: 25em){body{font-size:1.1rem}}header{height:100vh;background-color:#fff}header div{z-index:101}header img{max-height:12rem}header h1{font-family:"Rubik","Poppins","Hel­vetica",Arial,sans-serif}header .cursor{-webkit-animation:1s blink step-end infinite;animation:1s blink step-end infinite}strong{font-weight:600}del,s{text-decoration:line-through}em,q,dfn{font-style:italic}a{-webkit-transition:color .2s ease-out;transition:color .2s ease-out;text-decoration:none}a img{border:0}a:hover{color:#DA784D}pre{margin-top:0;margin-bottom:2rem;padding:16px;background-color:#F7F7F7;font:12px "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;font-family:"Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace;font-size:85%;line-height:1.45;overflow:auto;word-wrap:normal}pre>code{margin:0;padding:0;border:0;background:transparent;font-size:100%;white-space:pre;word-break:normal}pre code{display:inline;margin:0;padding:0;border:0;background-color:transparent;line-height:inherit;overflow:visible;word-wrap:normal}pre code::before,pre code::after{content:normal}code{padding:4px;background-color:#F7F7F7;font-family:"Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace;font-size:90%}.sans{font-family:"Open Sans", "Myriad Pro", "Myriad", sans-serif}.mono,tt{font-family:"Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}q::before{content:"\201C"}q::after{content:"\201D"}blockquote::before,blockquote::after{color:#DA784D;font-family:"Bitter","Roboto Slab","Cambria",Georgia,serif;font-size:35px;content:'\201C'}blockquote{padding:25px;font-family:"Bitter","Roboto Slab","Cambria",Georgia,serif;text-align:center}blockquote p{display:inline-block;font-style:italic}blockquote::after{content:'\201D'}img{display:block;max-width:100%;margin:0 auto}ul,ol{margin-bottom:2rem}ul li,ol li{margin-left:1.25em}ul li code,ol li code{font-family:"Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}ul li{list-style-type:disc}.show{-webkit-transition:opacity 400ms;transition:opacity 400ms}.hide{opacity:0}@media (max-width: 48em){body .container{padding:4rem 2rem}nav div:not(:first-child):not(:last-child){display:none}nav div.nav-toggle a{display:inline-block}}@media (max-width: 25em){body .container{padding:4rem 2rem}nav div.logo,nav div.nav-toggle{max-width:50% !important}}@-webkit-keyframes "blink"{from,to{color:transparent}50%{color:#212121}}@keyframes "blink"{from,to{color:transparent}50%{color:#212121}}nav{height:4rem;width:100%;background-color:#FFF;position:absolute;bottom:0;z-index:100;text-align:center;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);box-shadow:0 2px 2px rgba(0,0,0,0.4)}nav h3{margin:0;font-family:"Rubik","Poppins","Hel­vetica",Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:600}nav img{display:inline-block;max-width:10em;max-height:2.5em;vertical-align:middle}nav div.logo,nav div.nav-toggle{visibility:hidden;max-width:none}nav .nav-toggle a{display:none}.nav-fixed{position:fixed;top:0;bottom:auto}.nav-full{position:fixed;top:0;bottom:0;width:100vw;right:-100vw;height:100%;background-color:#212121;-webkit-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);transform:translate(0px, 0px);-webkit-transition:0.25s ease-out;transition:0.25s ease-out}.nav-full a{color:#FFF}.nav-full a:hover{color:#DA784D}.nav-full.active{-webkit-transform:translate(-100vw, 0px);-ms-transform:translate(-100vw, 0px);transform:translate(-100vw, 0px)}main{background-color:#fff;-webkit-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);transform:translate(0px, 0px);-webkit-transition:0.25s ease-in;transition:0.25s ease-in}main.active{-webkit-transform:translate(-100vw, 0px);-ms-transform:translate(-100vw, 0px);transform:translate(-100vw, 0px)}.container{max-width:43.750rem;padding:4rem 0 4rem;margin:auto}p{margin-bottom:2rem}p code{font-family:"Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}h1,h2,h3{font-family:"Bitter","Roboto Slab","Cambria",Georgia,serif;margin-top:2rem;letter-spacing:2px}h1 a,h2 a,h3 a{text-decoration:none}.posts-list{margin:0 0 2rem}.sub-header,time{font-size:1.25rem;color:#4E6B6C;margin-bottom:2rem}@media (max-width: 48em){.sub-header,time{font-size:1.25rem}}@media (max-width: 25em){.sub-header,time{font-size:1.1rem}}.content{text-align:left;width:100%}.content time{margin-left:3px}.content a{text-shadow:0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff, 0.03em 0.075em #fff, -0.03em 0.075em #fff, 0.06em 0.075em #fff, -0.06em 0.075em #fff, 0.09em 0.075em #fff, -0.09em 0.075em #fff, 0.12em 0.075em #fff, -0.12em 0.075em #fff, 0.15em 0.075em #fff, -0.15em 0.075em #fff;background-image:-webkit-gradient(linear, left top, left bottom, from(#DA784D), to(#DA784D));background-image:-webkit-linear-gradient(#DA784D, #DA784D);background-image:linear-gradient(#DA784D, #DA784D);background-size:1px 2px;background-repeat:repeat-x;background-position:0 95%;text-decoration:none}.content a:hover{color:#DA784D}.highlight{margin:10px 0}.pagination{margin:50px 0 0}.pagination :nth-child(2){float:right}.full{height:100vh;top:0;bottom:0}.about{width:100%;background-color:#F7F7F7;padding-bottom:4rem}.about p{font-size:1.666rem;margin-top:2rem}@media (max-width: 48em){.about p{font-size:1.563rem}}@media (max-width: 25em){.about p{font-size:1.375rem}}.about a{text-shadow:0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff, 0.03em 0.075em #fff, -0.03em 0.075em #fff, 0.06em 0.075em #fff, -0.06em 0.075em #fff, 0.09em 0.075em #fff, -0.09em 0.075em #fff, 0.12em 0.075em #fff, -0.12em 0.075em #fff, 0.15em 0.075em #fff, -0.15em 0.075em #fff;background-image:-webkit-gradient(linear, left top, left bottom, from(#DA784D), to(#DA784D));background-image:-webkit-linear-gradient(#DA784D, #DA784D);background-image:linear-gradient(#DA784D, #DA784D);background-size:2px 3px;background-repeat:repeat-x;background-position:0 95%;text-decoration:none}.about a:hover{color:#DA784D}.gallery div[class^="col-"],.gallery div[class*=" col-"]{padding:0;position:relative}.gallery div[class^="col-"]:hover .overlay,.gallery div[class*=" col-"]:hover .overlay{opacity:1}.gallery img{padding:6rem}.overlay{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:0;-webkit-transition:.2s ease-out;transition:.2s ease-out;background-color:#212121}.overlay a{color:#FFF}.overlay a:hover{color:#DA784D}.overlay h2{color:#FFF}.overlay h3{font-family:"Rubik","Poppins","Hel­vetica",Arial,sans-serif}.blog{min-height:100vh}.blog h3{margin:0 0 2rem;font-family:"Rubik","Poppins","Hel­vetica",Arial,sans-serif}.contact{width:100%;background-color:#F7F7F7;padding-bottom:4rem}.contact form{margin-top:2rem}.contact #form-thankyou{margin:8px 0;padding:11px}input,textarea{background-color:#FFF;border-color:#F7F7F7;border-radius:3px;border-width:1px;border-style:solid;color:#212121;padding:10px;margin:8px 0;width:100%}input[type="submit"],textarea[type="submit"]{background-color:#4E6B6C;color:#FFF;-webkit-transition:.2s ease-out;transition:.2s ease-out}input[type="submit"]:hover,textarea[type="submit"]:hover{background-color:#DA784D;color:#FFF;cursor:pointer}textarea{min-height:8rem;overflow:auto}footer{height:12rem;background-color:#212121}footer div,footer a{color:#FFF} diff --git a/static/styles/scss/_base.scss b/static/styles/scss/_base.scss new file mode 100644 index 0000000..a89166d --- /dev/null +++ b/static/styles/scss/_base.scss @@ -0,0 +1,157 @@ +// Font styles +strong { + font-weight: 600; +} + +del, +s { + text-decoration: line-through; +} + +em, +dfn { + font-style: italic; +} + +a { + transition: color .2s ease-out; + text-decoration: none; + + img { + border: 0; + } + + &:hover { + color: $accent; + } +} + + +// Code +pre { + margin-top: 0; + margin-bottom: $vertical-rhythm; + padding: 16px; + background-color: $smoke; + font: 12px "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; + font-family: $font-code; + font-size: 85%; + line-height: 1.45; + overflow: auto; + word-wrap: normal; + + > code { + margin: 0; + padding: 0; + border: 0; + background: transparent; + font-size: 100%; + white-space: pre; + word-break: normal; + } + + code { + display: inline; + margin: 0; + padding: 0; + border: 0; + background-color: transparent; + line-height: inherit; + overflow: visible; + word-wrap: normal; + + &::before, + &::after { + content: normal; + } + } +} + +code { + padding: 4px; + background-color: $smoke; + font-family: $font-code; + font-size: 90%; +} + +.sans { + font-family: "Open Sans", "Myriad Pro", "Myriad", sans-serif; +} + +.mono, +tt { + font-family: $font-code; +} + + +// Quotes +q { + @extend em; + + &::before { + content: "\201C"; + } + + &::after { + content: "\201D"; + } +} + +%blockquote { + color: $accent; + font-family: $font-header; + font-size: 35px; + content: '\201C'; +} + +blockquote { + padding: 25px; + font-family: $font-header; + text-align: center; + + p { + display: inline-block; + font-style: italic; + } + + &::before { + @extend %blockquote; + } + + &::after { + @extend %blockquote; + content: '\201D'; + } +} + + +// Images +img { + display: block; + max-width: 100%; + margin: 0 auto; +} + + +// Lists +ul, +ol { + margin-bottom: $vertical-rhythm; + + li { + margin-left: 1.25em; + + code { + font-family: $font-code; + } + } +} + +ul li { + list-style-type: disc; +} + + +// Show or hide elements +.show { transition: opacity 400ms; } +.hide { opacity: 0; } diff --git a/static/styles/scss/_colors.scss b/static/styles/scss/_colors.scss new file mode 100644 index 0000000..4f47367 --- /dev/null +++ b/static/styles/scss/_colors.scss @@ -0,0 +1,7 @@ +// https://coolors.co/1e1e1e-4e6b6c-f7f7f7-ffffff-da784d + +$black: #212121; +$storm: #4E6B6C; +$smoke: #F7F7F7; +$accent: #DA784D; +$white: #FFFFFF; diff --git a/static/styles/scss/_flexboxgrid.scss b/static/styles/scss/_flexboxgrid.scss new file mode 100644 index 0000000..4595efe --- /dev/null +++ b/static/styles/scss/_flexboxgrid.scss @@ -0,0 +1,882 @@ +//column-base selectors +//.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12 +%column-base { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-right: 2rem; + padding-left: 2rem; +} +.container { + margin-right: auto; + margin-left: auto; +} +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + // margin-right: -0.5rem; + // margin-left: -0.5rem; + &.reverse { + flex-direction: row-reverse; + } +} +.col-xs { + @extend %column-base; + flex-grow: 1; + flex-basis: 0; + max-width: 100%; +} +.col-xs-1 { + @extend %column-base; + flex-basis: 8.33333333%; + max-width: 8.33333333%; +} +.col-xs-2 { + @extend %column-base; + flex-basis: 16.66666667%; + max-width: 16.66666667%; +} +.col-xs-3 { + @extend %column-base; + flex-basis: 25%; + max-width: 25%; +} +.col-xs-4 { + @extend %column-base; + flex-basis: 33.33333333%; + max-width: 33.33333333%; +} +.col-xs-5 { + @extend %column-base; + flex-basis: 41.66666667%; + max-width: 41.66666667%; +} +.col-xs-6 { + @extend %column-base; + flex-basis: 50%; + max-width: 50%; +} +.col-xs-7 { + @extend %column-base; + flex-basis: 58.33333333%; + max-width: 58.33333333%; +} +.col-xs-8 { + @extend %column-base; + flex-basis: 66.66666667%; + max-width: 66.66666667%; +} +.col-xs-9 { + @extend %column-base; + flex-basis: 75%; + max-width: 75%; +} +.col-xs-10 { + @extend %column-base; + flex-basis: 83.33333333%; + max-width: 83.33333333%; +} +.col-xs-11 { + @extend %column-base; + flex-basis: 91.66666667%; + max-width: 91.66666667%; +} +.col-xs-12 { + @extend %column-base; + flex-basis: 100%; + max-width: 100%; +} +.col-xs-offset-0 { + @extend %column-base; + margin-left: 0; +} +.col-xs-offset-1 { + @extend %column-base; + margin-left: 8.33333333%; +} +.col-xs-offset-2 { + @extend %column-base; + margin-left: 16.66666667%; +} +.col-xs-offset-3 { + @extend %column-base; + margin-left: 25%; +} +.col-xs-offset-4 { + @extend %column-base; + margin-left: 33.33333333%; +} +.col-xs-offset-5 { + @extend %column-base; + margin-left: 41.66666667%; +} +.col-xs-offset-6 { + @extend %column-base; + margin-left: 50%; +} +.col-xs-offset-7 { + @extend %column-base; + margin-left: 58.33333333%; +} +.col-xs-offset-8 { + @extend %column-base; + margin-left: 66.66666667%; +} +.col-xs-offset-9 { + @extend %column-base; + margin-left: 75%; +} +.col-xs-offset-10 { + @extend %column-base; + margin-left: 83.33333333%; +} +.col-xs-offset-11 { + @extend %column-base; + margin-left: 91.66666667%; +} +.col-xs-offset-12 { + @extend %column-base; +} +.start-xs { + justify-content: flex-start; + text-align: start; +} +.center-xs { + justify-content: center; + text-align: center; +} +.end-xs { + justify-content: flex-end; + text-align: end; +} +.top-xs { + align-items: flex-start; +} +.middle-xs { + align-items: center; +} +.bottom-xs { + align-items: flex-end; +} +.around-xs { + justify-content: space-around; +} +.between-xs { + justify-content: space-between; +} +.first-xs { + order: -1; +} +.last-xs { + order: 1; +} +@media only screen and(min-width: 48em) { + .container { + width: 49rem; + } + .col-sm { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-sm-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + .col-sm-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + .col-sm-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 25%; + max-width: 25%; + } + .col-sm-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + .col-sm-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + .col-sm-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 50%; + max-width: 50%; + } + .col-sm-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + .col-sm-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + .col-sm-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 75%; + max-width: 75%; + } + .col-sm-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + .col-sm-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + .col-sm-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 100%; + max-width: 100%; + } + .col-sm-offset-0 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 0; + } + .col-sm-offset-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 8.33333333%; + } + .col-sm-offset-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 16.66666667%; + } + .col-sm-offset-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 25%; + } + .col-sm-offset-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 33.33333333%; + } + .col-sm-offset-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 41.66666667%; + } + .col-sm-offset-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 50%; + } + .col-sm-offset-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 58.33333333%; + } + .col-sm-offset-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 66.66666667%; + } + .col-sm-offset-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 75%; + } + .col-sm-offset-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 83.33333333%; + } + .col-sm-offset-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 91.66666667%; + } + .col-sm-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .start-sm { + justify-content: flex-start; + text-align: start; + } + .center-sm { + justify-content: center; + text-align: center; + } + .end-sm { + justify-content: flex-end; + text-align: end; + } + .top-sm { + align-items: flex-start; + } + .middle-sm { + align-items: center; + } + .bottom-sm { + align-items: flex-end; + } + .around-sm { + justify-content: space-around; + } + .between-sm { + justify-content: space-between; + } + .first-sm { + order: -1; + } + .last-sm { + order: 1; + } +} +@media only screen and(min-width: 64em) { + .container { + width: 65rem; + } + .col-md { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-md-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + .col-md-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + .col-md-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 25%; + max-width: 25%; + } + .col-md-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + .col-md-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + .col-md-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 50%; + max-width: 50%; + } + .col-md-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + .col-md-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + .col-md-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 75%; + max-width: 75%; + } + .col-md-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + .col-md-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + .col-md-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 100%; + max-width: 100%; + } + .col-md-offset-0 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 0; + } + .col-md-offset-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 8.33333333%; + } + .col-md-offset-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 16.66666667%; + } + .col-md-offset-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 25%; + } + .col-md-offset-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 33.33333333%; + } + .col-md-offset-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 41.66666667%; + } + .col-md-offset-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 50%; + } + .col-md-offset-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 58.33333333%; + } + .col-md-offset-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 66.66666667%; + } + .col-md-offset-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 75%; + } + .col-md-offset-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 83.33333333%; + } + .col-md-offset-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 91.66666667%; + } + .col-md-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .start-md { + justify-content: flex-start; + text-align: start; + } + .center-md { + justify-content: center; + text-align: center; + } + .end-md { + justify-content: flex-end; + text-align: end; + } + .top-md { + align-items: flex-start; + } + .middle-md { + align-items: center; + } + .bottom-md { + align-items: flex-end; + } + .around-md { + justify-content: space-around; + } + .between-md { + justify-content: space-between; + } + .first-md { + order: -1; + } + .last-md { + order: 1; + } +} +@media only screen and(min-width: 75em) { + .container { + width: 76rem; + } + .col-lg { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-lg-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + .col-lg-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + .col-lg-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 25%; + max-width: 25%; + } + .col-lg-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + .col-lg-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + .col-lg-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 50%; + max-width: 50%; + } + .col-lg-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + .col-lg-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + .col-lg-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 75%; + max-width: 75%; + } + .col-lg-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + .col-lg-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + .col-lg-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + flex-basis: 100%; + max-width: 100%; + } + .col-lg-offset-0 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 0; + } + .col-lg-offset-1 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 8.33333333%; + } + .col-lg-offset-2 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 16.66666667%; + } + .col-lg-offset-3 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 25%; + } + .col-lg-offset-4 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 33.33333333%; + } + .col-lg-offset-5 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 41.66666667%; + } + .col-lg-offset-6 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 50%; + } + .col-lg-offset-7 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 58.33333333%; + } + .col-lg-offset-8 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 66.66666667%; + } + .col-lg-offset-9 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 75%; + } + .col-lg-offset-10 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 83.33333333%; + } + .col-lg-offset-11 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + margin-left: 91.66666667%; + } + .col-lg-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .start-lg { + justify-content: flex-start; + text-align: start; + } + .center-lg { + justify-content: center; + text-align: center; + } + .end-lg { + justify-content: flex-end; + text-align: end; + } + .top-lg { + align-items: flex-start; + } + .middle-lg { + align-items: center; + } + .bottom-lg { + align-items: flex-end; + } + .around-lg { + justify-content: space-around; + } + .between-lg { + justify-content: space-between; + } + .first-lg { + order: -1; + } + .last-lg { + order: 1; + } +} +.col.reverse { + flex-direction: column-reverse; +} diff --git a/static/styles/scss/_layout.scss b/static/styles/scss/_layout.scss new file mode 100644 index 0000000..8af4b77 --- /dev/null +++ b/static/styles/scss/_layout.scss @@ -0,0 +1,36 @@ +* { + margin: 0; + padding: 0; + border: 0; + color: $black; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; + + &::before, + &::after { + box-sizing: border-box; + } +} + +html { + box-sizing: inherit; + overflow-x: hidden; +} + +body { + @include size(p); + color: $black; + font-family: $font-body; + line-height: $base-line-height; +} + +header { + height: 100vh; + background-color: $white; + + div { z-index: 101; } + img { max-height: $vertical-rhythm * 6; } + h1 { font-family: $font-body; } + .cursor { animation: 1s blink step-end infinite; } +} diff --git a/static/styles/scss/_typography.scss b/static/styles/scss/_typography.scss new file mode 100644 index 0000000..b8813f8 --- /dev/null +++ b/static/styles/scss/_typography.scss @@ -0,0 +1,58 @@ +$font-header: "Bitter", "Roboto Slab", "Cambria", Georgia, serif; +$font-body: "Rubik", "Poppins", "Hel­vetica", Arial, sans-serif; +$font-code: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace; + +// Modular font scale +// Large: http://www.modularscale.com/?1.25&em&1.333&web&text +// Medium: http://www.modularscale.com/?1.25&em&1.25&web&text +// SMall: http://www.modularscale.com/?1.1&em&1.25&web&text + +$font-scale-large: ( + h1: 2.961rem, + h2: 2.221rem, + h3: 1.666rem, + p: 1.25rem +); + +$font-scale-medium: ( + h1: 2.441rem, + h2: 1.953em, + h3: 1.563rem, + p: 1.25rem, +); + +$font-scale-small: ( + h1: 2.148rem, + h2: 1.719rem, + h3: 1.375rem, + p: 1.1rem +); + +$base-line-height: 1.6; +$base-font-size: 1.25rem; // 20px +$vertical-rhythm: $base-line-height * $base-font-size; // 2.125em or 34px + +$breakpoint-medium: 48em; // 768px +$breakpoint-small: 25em; // 400px + +@mixin size($level) { + font-size: map-get($font-scale-large, $level); + @media (max-width: $breakpoint-medium) { + font-size: map-get($font-scale-medium, $level); + } + @media (max-width: $breakpoint-small) { + font-size: map-get($font-scale-small, $level); + } +} + +h1 { + @include size(h1); +} + +h2 { + @include size(h2); +} + +h3 { + @include size(h3); +} diff --git a/static/styles/scss/flexboxgrid.scss b/static/styles/scss/flexboxgrid.scss deleted file mode 100644 index 9858029..0000000 --- a/static/styles/scss/flexboxgrid.scss +++ /dev/null @@ -1,882 +0,0 @@ -//column-base selectors -//.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12 -%column-base { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; -} -.container-fluid { - margin-right: auto; - margin-left: auto; - padding-right: 2rem; - padding-left: 2rem; -} -.container { - margin-right: auto; - margin-left: auto; -} -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - // margin-right: -0.5rem; - // margin-left: -0.5rem; - &.reverse { - flex-direction: row-reverse; - } -} -.col-xs { - @extend %column-base; - flex-grow: 1; - flex-basis: 0; - max-width: 100%; -} -.col-xs-1 { - @extend %column-base; - flex-basis: 8.33333333%; - max-width: 8.33333333%; -} -.col-xs-2 { - @extend %column-base; - flex-basis: 16.66666667%; - max-width: 16.66666667%; -} -.col-xs-3 { - @extend %column-base; - flex-basis: 25%; - max-width: 25%; -} -.col-xs-4 { - @extend %column-base; - flex-basis: 33.33333333%; - max-width: 33.33333333%; -} -.col-xs-5 { - @extend %column-base; - flex-basis: 41.66666667%; - max-width: 41.66666667%; -} -.col-xs-6 { - @extend %column-base; - flex-basis: 50%; - max-width: 50%; -} -.col-xs-7 { - @extend %column-base; - flex-basis: 58.33333333%; - max-width: 58.33333333%; -} -.col-xs-8 { - @extend %column-base; - flex-basis: 66.66666667%; - max-width: 66.66666667%; -} -.col-xs-9 { - @extend %column-base; - flex-basis: 75%; - max-width: 75%; -} -.col-xs-10 { - @extend %column-base; - flex-basis: 83.33333333%; - max-width: 83.33333333%; -} -.col-xs-11 { - @extend %column-base; - flex-basis: 91.66666667%; - max-width: 91.66666667%; -} -.col-xs-12 { - @extend %column-base; - flex-basis: 100%; - max-width: 100%; -} -.col-xs-offset-0 { - @extend %column-base; - margin-left: 0; -} -.col-xs-offset-1 { - @extend %column-base; - margin-left: 8.33333333%; -} -.col-xs-offset-2 { - @extend %column-base; - margin-left: 16.66666667%; -} -.col-xs-offset-3 { - @extend %column-base; - margin-left: 25%; -} -.col-xs-offset-4 { - @extend %column-base; - margin-left: 33.33333333%; -} -.col-xs-offset-5 { - @extend %column-base; - margin-left: 41.66666667%; -} -.col-xs-offset-6 { - @extend %column-base; - margin-left: 50%; -} -.col-xs-offset-7 { - @extend %column-base; - margin-left: 58.33333333%; -} -.col-xs-offset-8 { - @extend %column-base; - margin-left: 66.66666667%; -} -.col-xs-offset-9 { - @extend %column-base; - margin-left: 75%; -} -.col-xs-offset-10 { - @extend %column-base; - margin-left: 83.33333333%; -} -.col-xs-offset-11 { - @extend %column-base; - margin-left: 91.66666667%; -} -.col-xs-offset-12 { - @extend %column-base; -} -.start-xs { - justify-content: flex-start; - text-align: start; -} -.center-xs { - justify-content: center; - text-align: center; -} -.end-xs { - justify-content: flex-end; - text-align: end; -} -.top-xs { - align-items: flex-start; -} -.middle-xs { - align-items: center; -} -.bottom-xs { - align-items: flex-end; -} -.around-xs { - justify-content: space-around; -} -.between-xs { - justify-content: space-between; -} -.first-xs { - order: -1; -} -.last-xs { - order: 1; -} -@media only screen and(min-width: 48em) { - .container { - width: 49rem; - } - .col-sm { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - .col-sm-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - .col-sm-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - .col-sm-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 25%; - max-width: 25%; - } - .col-sm-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - .col-sm-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - .col-sm-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 50%; - max-width: 50%; - } - .col-sm-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - .col-sm-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - .col-sm-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 75%; - max-width: 75%; - } - .col-sm-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - .col-sm-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - .col-sm-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 100%; - max-width: 100%; - } - .col-sm-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 0; - } - .col-sm-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 8.33333333%; - } - .col-sm-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 16.66666667%; - } - .col-sm-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 25%; - } - .col-sm-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 33.33333333%; - } - .col-sm-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 41.66666667%; - } - .col-sm-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 50%; - } - .col-sm-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 58.33333333%; - } - .col-sm-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 66.66666667%; - } - .col-sm-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 75%; - } - .col-sm-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 83.33333333%; - } - .col-sm-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 91.66666667%; - } - .col-sm-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .start-sm { - justify-content: flex-start; - text-align: start; - } - .center-sm { - justify-content: center; - text-align: center; - } - .end-sm { - justify-content: flex-end; - text-align: end; - } - .top-sm { - align-items: flex-start; - } - .middle-sm { - align-items: center; - } - .bottom-sm { - align-items: flex-end; - } - .around-sm { - justify-content: space-around; - } - .between-sm { - justify-content: space-between; - } - .first-sm { - order: -1; - } - .last-sm { - order: 1; - } -} -@media only screen and(min-width: 64em) { - .container { - width: 65rem; - } - .col-md { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - .col-md-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - .col-md-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - .col-md-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 25%; - max-width: 25%; - } - .col-md-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - .col-md-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - .col-md-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 50%; - max-width: 50%; - } - .col-md-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - .col-md-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - .col-md-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 75%; - max-width: 75%; - } - .col-md-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - .col-md-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - .col-md-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 100%; - max-width: 100%; - } - .col-md-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 0; - } - .col-md-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 8.33333333%; - } - .col-md-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 16.66666667%; - } - .col-md-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 25%; - } - .col-md-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 33.33333333%; - } - .col-md-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 41.66666667%; - } - .col-md-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 50%; - } - .col-md-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 58.33333333%; - } - .col-md-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 66.66666667%; - } - .col-md-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 75%; - } - .col-md-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 83.33333333%; - } - .col-md-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 91.66666667%; - } - .col-md-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .start-md { - justify-content: flex-start; - text-align: start; - } - .center-md { - justify-content: center; - text-align: center; - } - .end-md { - justify-content: flex-end; - text-align: end; - } - .top-md { - align-items: flex-start; - } - .middle-md { - align-items: center; - } - .bottom-md { - align-items: flex-end; - } - .around-md { - justify-content: space-around; - } - .between-md { - justify-content: space-between; - } - .first-md { - order: -1; - } - .last-md { - order: 1; - } -} -@media only screen and(min-width: 75em) { - .container { - width: 76rem; - } - .col-lg { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - .col-lg-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - .col-lg-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - .col-lg-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 25%; - max-width: 25%; - } - .col-lg-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - .col-lg-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - .col-lg-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 50%; - max-width: 50%; - } - .col-lg-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - .col-lg-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - .col-lg-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 75%; - max-width: 75%; - } - .col-lg-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - .col-lg-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - .col-lg-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - flex-basis: 100%; - max-width: 100%; - } - .col-lg-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 0; - } - .col-lg-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 8.33333333%; - } - .col-lg-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 16.66666667%; - } - .col-lg-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 25%; - } - .col-lg-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 33.33333333%; - } - .col-lg-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 41.66666667%; - } - .col-lg-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 50%; - } - .col-lg-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 58.33333333%; - } - .col-lg-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 66.66666667%; - } - .col-lg-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 75%; - } - .col-lg-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 83.33333333%; - } - .col-lg-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - margin-left: 91.66666667%; - } - .col-lg-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .start-lg { - justify-content: flex-start; - text-align: start; - } - .center-lg { - justify-content: center; - text-align: center; - } - .end-lg { - justify-content: flex-end; - text-align: end; - } - .top-lg { - align-items: flex-start; - } - .middle-lg { - align-items: center; - } - .bottom-lg { - align-items: flex-end; - } - .around-lg { - justify-content: space-around; - } - .between-lg { - justify-content: space-between; - } - .first-lg { - order: -1; - } - .last-lg { - order: 1; - } -} -.col.reverse { - flex-direction: column-reverse; -} diff --git a/static/styles/scss/main.scss b/static/styles/scss/main.scss index 6fdf2e5..0db12f5 100644 --- a/static/styles/scss/main.scss +++ b/static/styles/scss/main.scss @@ -1,60 +1,9 @@ @import url("https://fonts.googleapis.com/css?family=Rubik|Bitter"); @import "flexboxgrid"; - -// TODO: Cleanup - -// Colors -// https://coolors.co/1e1e1e-4e6b6c-f7f7f7-ffffff-da784d -$black: #212121; -$storm: #4E6B6C; -$smoke: #F7F7F7; -$accent: #DA784D; - -// Fonts -$font-header: "Bitter", "Roboto Slab", "Cambria", Georgia, serif; -$font-body: "Rubik", "Poppins", "Hel­vetica", Arial, sans-serif; -$font-code: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace; - -// Modular font scale -// Large: http://www.modularscale.com/?1.25&em&1.333&web&text -// Medium: http://www.modularscale.com/?1.25&em&1.25&web&text -// SMall: http://www.modularscale.com/?1.1&em&1.25&web&text - -$font-scale-large: ( -h1: 2.961rem, -h2: 2.221rem, -h3: 1.666rem, -p: 1.25rem -); -$font-scale-medium: ( -h1: 2.441rem, -h2: 1.953em, -h3: 1.563rem, -p: 1.25rem, -); -$font-scale-small: ( -h1: 2.148rem, -h2: 1.719rem, -h3: 1.375rem, -p: 1.1rem -); - -$base-line-height: 1.6; -$base-font-size: 1.25rem; // 20px -$vertical-rhythm: $base-line-height * $base-font-size; // 2.125em or 34px - -$breakpoint-medium: 48em; // 768px -$breakpoint-small: 25em; // 400px - -@mixin size($level) { - font-size: map-get($font-scale-large, $level); - @media (max-width: $breakpoint-medium) { - font-size: map-get($font-scale-medium, $level); - } - @media (max-width: $breakpoint-small) { - font-size: map-get($font-scale-small, $level); - } -} +@import "colors"; +@import "typography"; +@import "layout"; +@import "base"; @media(max-width: 48em) { body .container { @@ -81,37 +30,6 @@ $breakpoint-small: 25em; // 400px } } - -* { - box-sizing: border-box; - border: 0; - font: inherit; - vertical-align: baseline; - margin: 0; - padding: 0; - color: $black; - &:before, &:after { - box-sizing: border-box; - } -} -html { - box-sizing: inherit; - overflow-x: hidden; -} -body { - @include size(p); - font-family: $font-body; - line-height: $base-line-height; - color: $black; -} -header { - height: 100vh; - background-color: #FFF; - div { z-index: 101; } - img { max-height: $vertical-rhythm * 6; } - h1 { font-family: $font-body; } - .cursor { animation: 1s blink step-end infinite; } -} @keyframes "blink" { from, to { color: transparent; } 50% { color: $black; } @@ -198,120 +116,7 @@ h1, h2, h3 { text-decoration: none; } } -h1 { @include size(h1); } -h2 { @include size(h2); } -h3 { @include size(h3); } -strong { - font-weight: 600; -} -del, s { - text-decoration: line-through; -} -em, dfn { - font-style: italic; -} -q { - @extend em; - &:before { - content: "\201C"; - } - &:after { - content: "\201D"; - } -} -a { - text-decoration: none; - transition: color .2s ease-out; - img { - border: none; - } - &:hover { color: $accent } -} -img { - margin: 0 auto; - max-width: 100%; - display: block; -} -pre { - font: 12px "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; - background-color: $smoke; - margin-top: 0; - margin-bottom: $vertical-rhythm; - word-wrap: normal; - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - font-family: $font-code; - > code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; - } - code { - display: inline; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; - } - code::before, code::after { - content: normal; - } -} -code { - font-family: $font-code; - font-size: 90%; - background-color: $smoke; - padding: 4px; -} -.sans { - font-family: "Open Sans", "Myriad Pro", "Myriad", sans-serif; -} -.mono, tt { - font-family: $font-code; -} -ul, ol { - margin-bottom: $vertical-rhythm; - li { - margin-left: 1.25em; - code { - font-family: $font-code; - } - } -} -ul li { - list-style-type: disc; -} -%blockquote { - font-family: $font-header; - content: '\201C'; - font-size: 35px; - color: $accent; -} -blockquote { - font-family: $font-header; - text-align: center; - padding: 25px; - p { - display: inline-block; - font-style: italic; - } - &:before { - @extend %blockquote; - } - &:after { - @extend %blockquote; - content: '\201D'; - } -} + .posts-list { margin: 0 0 $vertical-rhythm; } From 509b5a6525b05b1422cc4531bc705b80bd9c1ef5 Mon Sep 17 00:00:00 2001 From: Toma Nistor Date: Sun, 18 Feb 2018 14:15:29 -0800 Subject: [PATCH 2/6] Removed jQuery from index.js --- static/scripts/index-9f7032a2.js | 1 - static/scripts/index-c3dc14c6.js | 1 + static/scripts/src/index.js | 48 +++++--------------------------- 3 files changed, 8 insertions(+), 42 deletions(-) delete mode 100644 static/scripts/index-9f7032a2.js create mode 100644 static/scripts/index-c3dc14c6.js diff --git a/static/scripts/index-9f7032a2.js b/static/scripts/index-9f7032a2.js deleted file mode 100644 index 6129a9d..0000000 --- a/static/scripts/index-9f7032a2.js +++ /dev/null @@ -1 +0,0 @@ -function fullMobileViewport(){function i(){e.style.height=t+"px"}var e=this,t=window.innerHeight;$(window).resize(function(){Math.abs(t-window.innerHeight)>100&&(t=window.innerHeight,i())}),i()}var $=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),toggle=function(i){if("visible"===window.getComputedStyle(i).visibility)return i.style.visibility="hidden",i.classList.add("hide"),void i.classList.remove("show");i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")};!function(){window.onscroll=function(){this.scrollTop()>this.innerHeight-parseInt(getComputedStyle("nav").height)?($("nav").classList.add("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")})):($("nav").classList.remove("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="hidden",i.classList.add("hide"),i.classList.remove("show")}))},$(".nav-icon").addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("img").classList.toggle("img")}),$$(".nav-full a").forEach(function(i){i.addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("nav-icon").classList.toggle("nav-icon")})})}(),$("header").forEach(function(i){}); \ No newline at end of file diff --git a/static/scripts/index-c3dc14c6.js b/static/scripts/index-c3dc14c6.js new file mode 100644 index 0000000..6d91790 --- /dev/null +++ b/static/scripts/index-c3dc14c6.js @@ -0,0 +1 @@ +function fullMobileViewport(){function i(){e.style.height=n+"px"}var e=this,n=window.innerHeight;$(window).resize(function(){Math.abs(n-window.innerHeight)>100&&(n=window.innerHeight,i())}),i()}var $=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),toggle=function(i){if("visible"===window.getComputedStyle(i).visibility)return i.style.visibility="hidden",i.classList.add("hide"),void i.classList.remove("show");i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")};!function(){window.onscroll=function(){(window.pageYOffset||document.documentElement.scrollTop)>(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-$("nav").clientHeight?($("nav").classList.add("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide")})):($("nav").classList.remove("nav-fixed"),$$("nav > .logo, nav > .nav-toggle").forEach(function(i){i.style.visibility="hidden",i.classList.add("hide"),i.classList.remove("show")}))},$(".nav-icon").addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("img").classList.toggle("img")}),$$(".nav-full a").forEach(function(i){i.addEventListener("click",function(){$$(".nav-full, main").forEach(function(i){i.classList.toggle("active")}),this.querySelector("nav-icon").classList.toggle("nav-icon")})})}(),$$("header").forEach(function(){}); \ No newline at end of file diff --git a/static/scripts/src/index.js b/static/scripts/src/index.js index b52bf43..a97690d 100644 --- a/static/scripts/src/index.js +++ b/static/scripts/src/index.js @@ -17,26 +17,14 @@ var toggle = function(el) { }; (function() { - // Nav starts at bottom then is fixed to top - // Logo and hamburger menus fade in and out - // $(window).scroll(function() { - // var scrollPosition = $(this).scrollTop(); - // if( scrollPosition > $(this).height() - $("nav").height() ) { - // $("nav").addClass("nav-fixed"); - // $("nav > div.logo").css('visibility','visible').fadeIn(); - // $("nav > div.nav-toggle").css('visibility','visible').fadeIn(); - // } else { - // $("nav").removeClass("nav-fixed"); - // $("nav > div.logo").css('visibility','hidden').fadeOut(); - // $("nav > div.nav-toggle").css('visibility','hidden').fadeOut(); - // } - // }); - // Nav starts at bottom then is fixed to top // Logo and hamburger menus fade in and out window.onscroll = function() { - var scrollPosition = this.scrollTop(); - if (scrollPosition > this.innerHeight - parseInt(getComputedStyle('nav').height)) { + var scrollPosition = window.pageYOffset || document.documentElement.scrollTop; + var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + var navHeight = $('nav').clientHeight; + + if (scrollPosition > windowHeight - navHeight) { // Nav is fixed to top $('nav').classList.add('nav-fixed'); $$('nav > .logo, nav > .nav-toggle').forEach(function(el) { @@ -79,7 +67,7 @@ var toggle = function(el) { function fullMobileViewport() { var element = this; var viewportHeight = window.innerHeight; - var heightChangeTolerance = 100; // Approximately URL bar height in Chrome + var heightChangeTolerance = 100; // Approximate address bar height in Chrome $(window).resize(function () { if (Math.abs(viewportHeight - window.innerHeight) > heightChangeTolerance) { @@ -94,28 +82,6 @@ function fullMobileViewport() { update(); } -$('header').forEach(function(el) { +$$('header').forEach(function() { fullMobileViewport; }); - - -// Mobile browsers viewport height bug fix -// function fullMobileViewport() { -// var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome -// var element = $(this); -// var viewportHeight = $(window).height(); -// -// $(window).resize(function () { -// if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) { -// viewportHeight = $(window).height(); -// update(); -// } -// }); -// -// function update() { -// element.css("height", viewportHeight + "px"); -// } -// -// update(); -// } -// $("header").each(fullMobileViewport); From 3910027505f60f76def8be329d6f14ece9832c67 Mon Sep 17 00:00:00 2001 From: Toma Nistor Date: Mon, 19 Feb 2018 23:46:28 -0800 Subject: [PATCH 3/6] Started removing jQuery from contact.js --- layouts/partials/body-top.html | 2 +- static/scripts/contact-034d3a12.js | 1 + static/scripts/contact-2c079c75.js | 1 - static/scripts/src/contact.js | 75 ++++++++++++++++++------------ 4 files changed, 47 insertions(+), 32 deletions(-) create mode 100644 static/scripts/contact-034d3a12.js delete mode 100644 static/scripts/contact-2c079c75.js diff --git a/layouts/partials/body-top.html b/layouts/partials/body-top.html index 8942256..d35e51b 100644 --- a/layouts/partials/body-top.html +++ b/layouts/partials/body-top.html @@ -22,7 +22,7 @@

{{ .Site.Params.tagline }}|