commit d2264ad3f3d1d1ca1693d2ac245e6d26e6d76dba Author: Nishanth Shanmugham Date: Mon Aug 24 18:28:03 2015 -0500 Add all files diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..33afc40 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Nishanth Shanmugham + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..e69de29 diff --git a/flexbox-prefixes.less b/flexbox-prefixes.less new file mode 100644 index 0000000..897fe1c --- /dev/null +++ b/flexbox-prefixes.less @@ -0,0 +1,130 @@ +// Flexbox display +// flex or inline-flex +.flex-display(@display: flex) { + display: ~"-webkit-@{display}"; + display: ~"-moz-@{display}"; + display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox + display: ~"-ms-@{display}"; // IE11 + display: @display; +} + +// The 'flex' shorthand +// - applies to: flex items +// , initial, auto, or none +.flex(@columns: initial) { + -webkit-flex: @columns; + -moz-flex: @columns; + -ms-flex: @columns; + flex: @columns; +} + +// Flex Flow Direction +// - applies to: flex containers +// row | row-reverse | column | column-reverse +.flex-direction(@direction: row) { + -webkit-flex-direction: @direction; + -moz-flex-direction: @direction; + -ms-flex-direction: @direction; + flex-direction: @direction; +} + +// Flex Line Wrapping +// - applies to: flex containers +// nowrap | wrap | wrap-reverse +.flex-wrap(@wrap: nowrap) { + -webkit-flex-wrap: @wrap; + -moz-flex-wrap: @wrap; + -ms-flex-wrap: @wrap; + flex-wrap: @wrap; +} + +// Flex Direction and Wrap +// - applies to: flex containers +// || +.flex-flow(@flow) { + -webkit-flex-flow: @flow; + -moz-flex-flow: @flow; + -ms-flex-flow: @flow; + flex-flow: @flow; +} + +// Display Order +// - applies to: flex items +// +.flex-order(@order: 0) { + -webkit-order: @order; + -moz-order: @order; + -ms-order: @order; + order: @order; +} + +// Flex grow factor +// - applies to: flex items +// +.flex-grow(@grow: 0) { + -webkit-flex-grow: @grow; + -moz-flex-grow: @grow; + -ms-flex-grow: @grow; + flex-grow: @grow; +} + +// Flex shrink +// - applies to: flex item shrink factor +// +.flex-shrink(@shrink: 1) { + -webkit-flex-shrink: @shrink; + -moz-flex-shrink: @shrink; + -ms-flex-shrink: @shrink; + flex-shrink: @shrink; +} + +// Flex basis +// - the initial main size of the flex item +// - applies to: flex itemsnitial main size of the flex item +// +.flex-basis(@width: auto) { + -webkit-flex-basis: @width; + -moz-flex-basis: @width; + -ms-flex-basis: @width; + flex-basis: @width; +} + +// Axis Alignment +// - applies to: flex containers +// flex-start | flex-end | center | space-between | space-around +.justify-content(@justify: flex-start) { + -webkit-justify-content: @justify; + -moz-justify-content: @justify; + -ms-justify-content: @justify; + justify-content: @justify; +} + +// Packing Flex Lines +// - applies to: multi-line flex containers +// flex-start | flex-end | center | space-between | space-around | stretch +.align-content(@align: stretch) { + -webkit-align-content: @align; + -moz-align-content: @align; + -ms-align-content: @align; + align-content: @align; +} + +// Cross-axis Alignment +// - applies to: flex containers +// flex-start | flex-end | center | baseline | stretch +.align-items(@align: stretch) { + -webkit-align-items: @align; + -moz-align-items: @align; + -ms-align-items: @align; + align-items: @align; +} + +// Cross-axis Alignment +// - applies to: flex items +// auto | flex-start | flex-end | center | baseline | stretch +.align-self(@align: auto) { + -webkit-align-self: @align; + -moz-align-self: @align; + -ms-align-self: @align; + align-self: @align; +} diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..af98f52 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,11 @@ +{{ partial "header.html" . }} +
+
+
+
404
+
Sorry, this page does not exist.
+
Visit home page
+
+
+
+{{ partial "footer.html" . }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..aa92046 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,13 @@ +{{ partial "header.html" . }} +
+
+
+ {{ partial "page-heading" . }} + {{ range .Data.Pages.ByPublishDate }} + {{ partial "li.html" . }} + {{ end }} +
+
+
+{{ partial "footer.html" . }} + diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..a7016df --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,9 @@ +{{ partial "header.html" . }} +
+
+
+ {{ .Content }} +
+
+
+{{ partial "footer.html" . }} diff --git a/layouts/fixed/single.html b/layouts/fixed/single.html new file mode 100644 index 0000000..afaa2df --- /dev/null +++ b/layouts/fixed/single.html @@ -0,0 +1,12 @@ +{{ partial "header.html" . }} +
+
+
+ {{ partial "page-heading.html" . }} +
+ {{ .Content }} +
+
+
+
+{{ partial "footer.html" . }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..e489a67 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,15 @@ +{{ partial "header.html" . }} +
+
+
+
Posts
+ {{ range .Data.Pages.ByPublishDate }} + {{ if eq .Section "posts" }} + {{ partial "li.html" . }} + {{ end }} + {{ end }} +
+
+
+{{ partial "footer.html" . }} + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..7ad7717 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,4 @@ +{{ partial "footer_scripts" . }} + + + diff --git a/layouts/partials/footer_scripts.html b/layouts/partials/footer_scripts.html new file mode 100644 index 0000000..2864a41 --- /dev/null +++ b/layouts/partials/footer_scripts.html @@ -0,0 +1,13 @@ + +{{ if .Site.Params.GATracker }} + + +{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..537f29e --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,14 @@ + +{{ partial "meta.html" . }} + + +{{ $URL := "/" }} +{{ if eq $URL "/" }} + {{ .Site.Title }} +{{ else }} + {{ .Title }} · {{ .Site.Title }} +{{ end }} + + +{{ partial "head_includes.html" . }} + diff --git a/layouts/partials/head_includes.html b/layouts/partials/head_includes.html new file mode 100644 index 0000000..615fc2c --- /dev/null +++ b/layouts/partials/head_includes.html @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..e09a41b --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,66 @@ + + + +{{ partial "head.html" . }} + + + +{{ $url := replace .Permalink ( printf "%s" .Site.BaseUrl) "" }} + +
+
+
+ +
{{ .Site.Params.Author }}
 +
+
+
+ +
+
+
+ + {{ if .Site.Params.GitHub }} + + + + {{ end }} + + {{ if .Site.Params.Twitter }} + + + + {{ end }} + + {{ if .Site.Params.LinkedIn }} + + + + {{ end }} + + {{ if .Site.Params.Facebook }} + + + + {{ end }} + + {{ if .Site.Params.SoundCloud }} + + + + {{ end }} + + {{ if .Site.Params.Email }} + + + + {{ end }} +
+
+
diff --git a/layouts/partials/li.html b/layouts/partials/li.html new file mode 100644 index 0000000..d6e13a7 --- /dev/null +++ b/layouts/partials/li.html @@ -0,0 +1,4 @@ +
  • +
    {{ .Date.Format .Site.Params.DateForm }}
    +
    {{ .Title }}
     +
    • diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html new file mode 100644 index 0000000..5e63dec --- /dev/null +++ b/layouts/partials/meta.html @@ -0,0 +1,6 @@ + + + + + +{{ if .Site.Params.Description }}{{ end }} diff --git a/layouts/partials/page-heading.html b/layouts/partials/page-heading.html new file mode 100644 index 0000000..b1fcd61 --- /dev/null +++ b/layouts/partials/page-heading.html @@ -0,0 +1,8 @@ +
    +{{ if .Params.heading }} + {{ .Params.heading }} +{{ else }} + {{ .Title }} +{{ end }} +
    + diff --git a/layouts/posts/single.html b/layouts/posts/single.html new file mode 100644 index 0000000..52446fe --- /dev/null +++ b/layouts/posts/single.html @@ -0,0 +1,30 @@ + + + +{{ partial "head.html" . }} + + + +{{ $url := replace .Permalink ( printf "%s" .Site.BaseUrl) "" }} + +
    +
    +
    +
    + {{ partial "page-heading.html" . }} +
    +
    {{ .Date.Format .Site.Params.DateForm }}
    +
    {{ if eq 1 .FuzzyWordCount }}{{ .FuzzyWordCount }} word{{ else }}{{ .FuzzyWordCount }} words{{ end }}
    +
    {{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
    +
    +
    +
    + {{ .Content }} +
    +

    Back home

    +
    +
    +
    +
    + +{{ partial "footer.html" . }} diff --git a/less-watcher.js b/less-watcher.js new file mode 100644 index 0000000..074beec --- /dev/null +++ b/less-watcher.js @@ -0,0 +1,11 @@ +const fs = require('fs'); +const spawn = require('child_process').spawn; + +process.argv.slice(2).forEach(function(file) { + fs.watch(file, function(e) { + if (e === 'change') { + spawn('lessc', ['main.less', 'static/css/main.css']); + } + }); +}); + diff --git a/main.less b/main.less new file mode 100644 index 0000000..4bec9a5 --- /dev/null +++ b/main.less @@ -0,0 +1,497 @@ +// Font imports: + +@import url(http://fonts.googleapis.com/css?family=Raleway:200); +@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); +@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); + +// Less variables + +@base-font-size: 16px; +@vspacing: @base-font-size*2; + +@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace"; +@body-font-stack: ~"'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif"; +@heading-font-stack: ~"'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif"; +@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; + +@black: #333; +@gray: #b7b7b7; +@accent: #21bB5b; // green +@white: #fefefe; +@milk: #fefefe; + +@transition-speed-1: .1s; +@transition-speed-2: .25s; +@in-sine: cubic-bezier(0.47, 0, 0.75, 0.72); + +// Utils and prefixing + +@import 'flexbox-prefixes'; + +.heading(@font-size: 18px) { + font-size: @font-size; + font-family: @heading-font-stack; + letter-spacing: -0.005rem; + text-transform: uppercase; + font-weight: 700; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + color: @black; +} + +.transition (@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; +} + +.user-select(@user-select) { + -webkit-user-select: @user-select; + -moz-user-select: @user-select; + -ms-user-select: @user-select; + user-select: @user-select; +} + +.meta() { + font-size: 14px; + color: @gray; +} + + +// Slap-on utils + +.dark { + color: @black !important; +} + +.light { + color: @gray !important; +} + +.accent { + color: @accent !important; +} + +// General styles + +*, *:before, *:after { + box-sizing: border-box; +} + +a, a:visited, a:focus, a:active { + text-decoration: none; +} + +html { + height: 100%; + font-size: @base-font-size; +} + +body { + .flex-display(); + .flex-direction(column); // vertically stack sections + .align-items(center); // horizontally center all sections + .justify-content(flex-start); // start sections at the top + width: 100%; + min-height: 100%; + font-weight: 400; + font-family: @body-font-stack; + color: @black; + line-height: 1.6; + text-rendering: optimizeLegibility !important; + // TODO: Uncomment when moz supports at subpixel level + // -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: subpixel-antialiased; + font-smoothing: subpixel-antialiased; +} + +@media (min-width: 550px) { + body { + .justify-content(center); // vertically center all sections + } +} + +// Ionicon classes + +.icon { + // INFO: Comment out if you see performance issues, especially on mobile + text-rendering: geometricPrecision !important; +} + +// * Sections – the cornerstone of page elements +// * Container – contains section contents +// +// Both classes are flex elements + +.section { + .flex-display(); + // Sections position their containers centrally, with spacing to the sides + // The containers can then move their children around as needed. + .justify-content(center); + .align-items(center); + width: 100%; +} + +.container { + .flex-display(); + width: 100%; +} + +@media (min-width: 550px) { + .section { + padding: 0 20px; + margin-left: 100px; + margin-right: 100px; + max-width: 900px; + } +} + +// Sections order + +.section.header { + .flex-order(0); +} +.section.icons { + .flex-order(1); +} +.section.main { + .flex-order(2); +} + +@media (min-width: 550px) { + .section.header { + .flex-order(0); + } + .section.icons { + .flex-order(2); + } + .section.main { + .flex-order(1); + } +} + +// Styles for sections and contents +// Header section + +.section.header { + background-color: @accent; + + .container { + .align-items(center); + .justify-content(center); + } + + .content { + .flex-display(); + .flex-direction(column); + .align-items(center); + } + + .name { + .heading(); + color: @white; + } + + nav { + font-size: 14px; + margin-bottom: floor(@vspacing/2); + // font-weight: 600; + + ul { + list-style: none; + text-align: center; + .flex-display(inline-flex); + } + + ul a { + margin-right: 12px; + + &:last-child { + margin-right: 0; + } + } + + ul li { + color: @milk; + .transition(~'color @{transition-speed-1} @{in-sine}'); + + &:hover { + color: @white + } + } + } +} + +@media (min-width: 550px) { + .section.header { + background-color: transparent; + + .container { + .justify-content(flex-start); + } + + .content { + .align-items(flex-start); + } + + .name { + color: @black; + } + + nav { + margin-bottom: 0; + + ul { + text-align: left; + } + + ul li { + color: @gray; + + &:hover { + color: @black; + } + } + } + } +} + +// Icons + +.section.icons { + background-color: @accent; + + .container { + .align-items(center); + .justify-content(center); + } + + .content { + a { + margin-right: 4px; + color: @milk; + .transition(~'color @{transition-speed-1} @{in-sine}'); + + &:last-child { + margin-right: 0; + } + + &:hover { + color: @white; + } + + .icon { + font-size: 16px; + + + + &.larger { + font-size: 18px; + } + } + } + } +} + +@media (min-width: 550px) { + .section.icons { + background-color: transparent; + + .container { + .justify-content(flex-start); + } + + .content { + a { + color: @gray; + + &:hover { + color: @black; + } + } + + } + } +} + +// Main section + +.section.main { + .container { + .align-items(center); + .justify-content(flex-start); + } + + .content { + color: @black; + font-size: 16px; + + .page-heading { + .heading(); + margin-bottom: floor(@vspacing/2); + } + + .front-matter { + .page-heading { + margin-bottom: 0; + } + + .meta { + .meta(); + .flex-display(); + margin-bottom: @vspacing; + } + + .date, .word-count, .reading-time .middot { + display: none; + } + + .middot { + font-size: 6px; + margin: 0 6px; + display: inline; + vertical-align: middle; + + &:before { + content: "•"; + } + } + } + } +} + +@media (min-width: 550px) { + .section.main { + .content { + .front-matter { + .date, .word-count, .reading-time .middot { + display: initial; + } + } + } + } +} + +// 404 page + +.section.main { + .container.f04 { + .justify-content(center); + + .content { + .flex-display(); + .flex-direction(column); + .align-items(center); + + .num { + margin: 30px 0px 30px 0; + font-weight: 200; + font-family: @special-font-stack-1; + font-size: 50px; + } + + .detail { + margin-bottom: 40px; + } + } + } +} + +@media (min-width: 550px) { + .section.main { + .container.f04 { + .justify-content(flex-start); + + .content { + .align-items(flex-start); + + .num { + margin: 0 0 10px 0; + font-size: 32px; + } + + .detail { + margin-bottom: 30px; + } + } + } + } +} + +// Post item + +.section.main { + .container { + .content { + .post-item { + .flex-display(); + .align-items(center); + list-style: none; + + .meta { + .meta(); + min-width: 100px; + text-align: right; + margin-right: 20px; + } + } + } + } +} + +// Spacing + +.section { + padding: 0 20px; +} + +.section.header { + padding-top: @vspacing; + padding-bottom: floor(@vspacing/2); +} + +.section.icons { + padding-top: 0; + padding-bottom: @vspacing; +} + +.section.main { + padding-top: @vspacing; + padding-bottom: @vspacing; +} + +@media (min-width: 550px) { + @vspacing: 60px; + + .container { + margin: 0 20px; + } + + .section.header { + padding-top: @vspacing; + padding-bottom: @vspacing; + } + + .section.icons { + padding-top: @vspacing; + padding-bottom: @vspacing; + } + + .section.main { + padding-top: 0; + padding-bottom: 0; + } + + .section.main.post { + padding-top: @vspacing; + padding-bottom: @vspacing; + } +} + +a { + color: @accent; +} + +@import 'markdown'; diff --git a/markdown.less b/markdown.less new file mode 100644 index 0000000..403fd52 --- /dev/null +++ b/markdown.less @@ -0,0 +1,181 @@ +.section.main .content { +.markdown { + +@background-gray: #f9f9f9; + +// +// Heading +// + +h1, h2, h3, h4, h5, h6 { + .heading(); +} + +h1 { + font-size: 1.75rem; + margin-bottom: 2rem; +} + +h2 { + font-size: 1.5rem; + margin-bottom: 1.5rem; +} + +h3 { + font-size: 1em; + margin-bottom: 1rem; +} + +h4, h5, h6 { + font-size: 1rem; + margin-bottom: 1rem; + letter-spacing: none; + text-transform: none; +} + +// +// Code +// + +code, pre { + font-family: @monospace-font-stack; + font-size: 15px; + background-color: @background-gray; +} + +code { + /* enclosed by single backtick (`) */ + padding: .15em .5em; + color: darken(#d01040, 10%); + border-radius: 2px; +} + +pre { + /* Hugo specific: consider using the 'highlight' shortcode */ + display: block; + margin-top: 1rem; + margin-bottom: 2rem; + padding: 1rem; + line-height: 1.5em; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; +} + +pre code { + /* enclosed by 4 backticks (````) */ + padding: 0; + font-size: 15px; +} + +// +// Body text +// + + +p { + /* Invoked by line break */ + font-size: 1rem; + margin-top: 0; + margin-bottom: 1em; +} + + +// TODO: Try out and adjust properties for selectors below + +// Lists + +ul, ol, dl { + margin-top: 1rem; + margin-bottom: 2rem; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; +} + +ul { + margin-bottom: 1.25rem; +} + +li { + list-style-type: disc; + list-style-position: inside; +} + +// Miscenllaneous + +hr { + position: relative; + margin: 1.75rem 0; + border: 0; + border-top: 1px solid lighten(@gray, 10%); + border-top: 1px solid lighten(@gray, 20%); +} + +abbr { + font-size: 0.85rem; + font-weight: bold; + color: lighten(@black, 20%); + text-transform: uppercase; +} + +abbr[title] { + cursor: help; + border-bottom: 1px dotted lighten(@gray, 10%); +} + + +// Quotes + +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; +} + +blockquote p:last-child { + margin-bottom: 0; +} + +@media (min-width: 550px) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +// Images and tables + +img { + display: block; + margin: 0 0 1rem; + max-width: 100%; +} + +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} + +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} + +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: @background-gray; +} + +} // end .markdown +} // end .section.main .content diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..9c76aec --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,599 @@ +@import url(http://fonts.googleapis.com/css?family=Raleway:200); +@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); +@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); +.dark { + color: #333333 !important; +} +.light { + color: #b7b7b7 !important; +} +.accent { + color: #21bb5b !important; +} +*, +*:before, +*:after { + box-sizing: border-box; +} +a, +a:visited, +a:focus, +a:active { + text-decoration: none; +} +html { + height: 100%; + font-size: 16px; +} +body { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + -ms-justify-content: flex-start; + justify-content: flex-start; + width: 100%; + min-height: 100%; + font-weight: 400; + font-family: 'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif; + color: #333333; + line-height: 1.6; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: subpixel-antialiased; + font-smoothing: subpixel-antialiased; +} +@media (min-width: 550px) { + body { + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; + } +} +.icon { + text-rendering: geometricPrecision !important; +} +.section { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + width: 100%; +} +.container { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + width: 100%; +} +@media (min-width: 550px) { + .section { + padding: 0 20px; + margin-left: 100px; + margin-right: 100px; + max-width: 900px; + } +} +.section.header { + -webkit-order: 0; + -moz-order: 0; + -ms-order: 0; + order: 0; +} +.section.icons { + -webkit-order: 1; + -moz-order: 1; + -ms-order: 1; + order: 1; +} +.section.main { + -webkit-order: 2; + -moz-order: 2; + -ms-order: 2; + order: 2; +} +@media (min-width: 550px) { + .section.header { + -webkit-order: 0; + -moz-order: 0; + -ms-order: 0; + order: 0; + } + .section.icons { + -webkit-order: 2; + -moz-order: 2; + -ms-order: 2; + order: 2; + } + .section.main { + -webkit-order: 1; + -moz-order: 1; + -ms-order: 1; + order: 1; + } +} +.section.header { + background-color: #21bb5b; +} +.section.header .container { + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; +} +.section.header .content { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; +} +.section.header .name { + font-size: 18px; + font-family: 'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif; + letter-spacing: -0.005rem; + text-transform: uppercase; + font-weight: 700; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + color: #333333; + color: #fefefe; +} +.section.header nav { + font-size: 14px; + margin-bottom: 16px; +} +.section.header nav ul { + list-style: none; + text-align: center; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: -ms-inline-flex; + display: inline-flex; +} +.section.header nav ul a { + margin-right: 12px; +} +.section.header nav ul a:last-child { + margin-right: 0; +} +.section.header nav ul li { + color: #fefefe; + -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); +} +.section.header nav ul li:hover { + color: #fefefe; +} +@media (min-width: 550px) { + .section.header { + background-color: transparent; + } + .section.header .container { + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + -ms-justify-content: flex-start; + justify-content: flex-start; + } + .section.header .content { + -webkit-align-items: flex-start; + -moz-align-items: flex-start; + -ms-align-items: flex-start; + align-items: flex-start; + } + .section.header .name { + color: #333333; + } + .section.header nav { + margin-bottom: 0; + } + .section.header nav ul { + text-align: left; + } + .section.header nav ul li { + color: #b7b7b7; + } + .section.header nav ul li:hover { + color: #333333; + } +} +.section.icons { + background-color: #21bb5b; +} +.section.icons .container { + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; +} +.section.icons .content a { + margin-right: 4px; + color: #fefefe; + -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); + -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); +} +.section.icons .content a:last-child { + margin-right: 0; +} +.section.icons .content a:hover { + color: #fefefe; +} +.section.icons .content a .icon { + font-size: 16px; +} +.section.icons .content a .icon.larger { + font-size: 18px; +} +@media (min-width: 550px) { + .section.icons { + background-color: transparent; + } + .section.icons .container { + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + -ms-justify-content: flex-start; + justify-content: flex-start; + } + .section.icons .content a { + color: #b7b7b7; + } + .section.icons .content a:hover { + color: #333333; + } +} +.section.main .container { + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + -ms-justify-content: flex-start; + justify-content: flex-start; +} +.section.main .content { + color: #333333; + font-size: 16px; +} +.section.main .content .page-heading { + font-size: 18px; + font-family: 'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif; + letter-spacing: -0.005rem; + text-transform: uppercase; + font-weight: 700; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + color: #333333; + margin-bottom: 16px; +} +.section.main .content .front-matter .page-heading { + margin-bottom: 0; +} +.section.main .content .front-matter .meta { + font-size: 14px; + color: #b7b7b7; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + margin-bottom: 32px; +} +.section.main .content .front-matter .date, +.section.main .content .front-matter .word-count, +.section.main .content .front-matter .reading-time .middot { + display: none; +} +.section.main .content .front-matter .middot { + font-size: 6px; + margin: 0 6px; + display: inline; + vertical-align: middle; +} +.section.main .content .front-matter .middot:before { + content: "•"; +} +@media (min-width: 550px) { + .section.main .content .front-matter .date, + .section.main .content .front-matter .word-count, + .section.main .content .front-matter .reading-time .middot { + display: initial; + } +} +.section.main .container.f04 { + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; +} +.section.main .container.f04 .content { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; +} +.section.main .container.f04 .content .num { + margin: 30px 0px 30px 0; + font-weight: 200; + font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; + font-size: 50px; +} +.section.main .container.f04 .content .detail { + margin-bottom: 40px; +} +@media (min-width: 550px) { + .section.main .container.f04 { + -webkit-justify-content: flex-start; + -moz-justify-content: flex-start; + -ms-justify-content: flex-start; + justify-content: flex-start; + } + .section.main .container.f04 .content { + -webkit-align-items: flex-start; + -moz-align-items: flex-start; + -ms-align-items: flex-start; + align-items: flex-start; + } + .section.main .container.f04 .content .num { + margin: 0 0 10px 0; + font-size: 32px; + } + .section.main .container.f04 .content .detail { + margin-bottom: 30px; + } +} +.section.main .container .content .post-item { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + list-style: none; +} +.section.main .container .content .post-item .meta { + font-size: 14px; + color: #b7b7b7; + min-width: 100px; + text-align: right; + margin-right: 20px; +} +.section { + padding: 0 20px; +} +.section.header { + padding-top: 32px; + padding-bottom: 16px; +} +.section.icons { + padding-top: 0; + padding-bottom: 32px; +} +.section.main { + padding-top: 32px; + padding-bottom: 32px; +} +@media (min-width: 550px) { + .container { + margin: 0 20px; + } + .section.header { + padding-top: 60px; + padding-bottom: 60px; + } + .section.icons { + padding-top: 60px; + padding-bottom: 60px; + } + .section.main { + padding-top: 0; + padding-bottom: 0; + } + .section.main.post { + padding-top: 60px; + padding-bottom: 60px; + } +} +a { + color: #21bb5b; +} +.section.main .content .markdown h1, +.section.main .content .markdown h2, +.section.main .content .markdown h3, +.section.main .content .markdown h4, +.section.main .content .markdown h5, +.section.main .content .markdown h6 { + /* Heading size corresponds on number of #s used */ + font-size: 18px; + font-family: 'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif; + letter-spacing: -0.005rem; + text-transform: uppercase; + font-weight: 700; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + color: #333333; +} +.section.main .content .markdown h1 { + font-size: 1.75rem; + margin-bottom: 2rem; +} +.section.main .content .markdown h2 { + font-size: 1.5rem; + margin-bottom: 1.5rem; +} +.section.main .content .markdown h3 { + font-size: 1em; + margin-bottom: 1rem; +} +.section.main .content .markdown h4, +.section.main .content .markdown h5, +.section.main .content .markdown h6 { + font-size: 1rem; + margin-bottom: 1rem; + letter-spacing: none; + text-transform: none; +} +.section.main .content .markdown code, +.section.main .content .markdown pre { + font-family: 'Ubuntu Mono', 'Menlo', monospace; + font-size: 15px; + background-color: #f9f9f9; +} +.section.main .content .markdown code { + /* enclosed by single backtick (`) */ + padding: .15em .5em; + color: #a10c31; + border-radius: 2px; +} +.section.main .content .markdown pre { + /* Hugo specific: consider using the 'highlight' shortcode */ + display: block; + margin-top: 1rem; + margin-bottom: 2rem; + padding: 1rem; + line-height: 1.5em; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; +} +.section.main .content .markdown pre code { + /* enclosed by 4 backticks (````) */ + padding: 0; + font-size: 15px; +} +.section.main .content .markdown p { + /* Invoked by line break */ + font-size: 1rem; + margin-top: 0; + margin-bottom: 1em; +} +.section.main .content .markdown ul, +.section.main .content .markdown ol, +.section.main .content .markdown dl { + margin-top: 1rem; + margin-bottom: 2rem; +} +.section.main .content .markdown dt { + font-weight: bold; +} +.section.main .content .markdown dd { + margin-bottom: .5rem; +} +.section.main .content .markdown ul { + margin-bottom: 1.25rem; +} +.section.main .content .markdown li { + list-style-type: disc; + list-style-position: inside; +} +.section.main .content .markdown hr { + position: relative; + margin: 1.75rem 0; + border: 0; + border-top: 1px solid #d1d1d1; + border-top: 1px solid #eaeaea; +} +.section.main .content .markdown abbr { + font-size: 0.85rem; + font-weight: bold; + color: #666666; + text-transform: uppercase; +} +.section.main .content .markdown abbr[title] { + cursor: help; + border-bottom: 1px dotted #d1d1d1; +} +.section.main .content .markdown blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; +} +.section.main .content .markdown blockquote p:last-child { + margin-bottom: 0; +} +@media (min-width: 550px) { + .section.main .content .markdown blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} +.section.main .content .markdown img { + display: block; + margin: 0 0 1rem; + max-width: 100%; +} +.section.main .content .markdown table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} +.section.main .content .markdown td, +.section.main .content .markdown th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} +.section.main .content .markdown tbody tr:nth-child(odd) td, +.section.main .content .markdown tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} diff --git a/static/css/navlist.css b/static/css/navlist.css new file mode 100644 index 0000000..b185754 --- /dev/null +++ b/static/css/navlist.css @@ -0,0 +1,9 @@ +.section.header nav ul li[data-switch-original]::after { + content: attr(data-switch-original); +} + +@media (min-width: 550px) { + .section.header nav ul li[data-switch-change]::after { + content: attr(data-switch-change); + } +} diff --git a/static/css/pygments.css b/static/css/pygments.css new file mode 100644 index 0000000..dc60655 --- /dev/null +++ b/static/css/pygments.css @@ -0,0 +1,61 @@ +.hll { background-color: #ffffcc } +.c { color: #999988; font-style: italic } /* Comment */ +.err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.k { color: #000000; font-weight: bold } /* Keyword */ +.o { color: #000000; font-weight: bold } /* Operator */ +.cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.c1 { color: #999988; font-style: italic } /* Comment.Single */ +.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.ge { color: #000000; font-style: italic } /* Generic.Emph */ +.gr { color: #aa0000 } /* Generic.Error */ +.gh { color: #999999 } /* Generic.Heading */ +.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.go { color: #888888 } /* Generic.Output */ +.gp { color: #555555 } /* Generic.Prompt */ +.gs { font-weight: bold } /* Generic.Strong */ +.gu { color: #aaaaaa } /* Generic.Subheading */ +.gt { color: #aa0000 } /* Generic.Traceback */ +.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.m { color: #009999 } /* Literal.Number */ +.s { color: #d01040 } /* Literal.String */ +.na { color: #008080 } /* Name.Attribute */ +.nb { color: #0086B3 } /* Name.Builtin */ +.nc { color: #445588; font-weight: bold } /* Name.Class */ +.no { color: #008080 } /* Name.Constant */ +.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.ni { color: #800080 } /* Name.Entity */ +.ne { color: #990000; font-weight: bold } /* Name.Exception */ +.nf { color: #990000; font-weight: bold } /* Name.Function */ +.nl { color: #990000; font-weight: bold } /* Name.Label */ +.nn { color: #555555 } /* Name.Namespace */ +.nt { color: #000080 } /* Name.Tag */ +.nv { color: #008080 } /* Name.Variable */ +.ow { color: #000000; font-weight: bold } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #009999 } /* Literal.Number.Float */ +.mh { color: #009999 } /* Literal.Number.Hex */ +.mi { color: #009999 } /* Literal.Number.Integer */ +.mo { color: #009999 } /* Literal.Number.Oct */ +.sb { color: #d01040 } /* Literal.String.Backtick */ +.sc { color: #d01040 } /* Literal.String.Char */ +.sd { color: #d01040 } /* Literal.String.Doc */ +.s2 { color: #d01040 } /* Literal.String.Double */ +.se { color: #d01040 } /* Literal.String.Escape */ +.sh { color: #d01040 } /* Literal.String.Heredoc */ +.si { color: #d01040 } /* Literal.String.Interpol */ +.sx { color: #d01040 } /* Literal.String.Other */ +.sr { color: #009926 } /* Literal.String.Regex */ +.s1 { color: #d01040 } /* Literal.String.Single */ +.ss { color: #990073 } /* Literal.String.Symbol */ +.bp { color: #999999 } /* Name.Builtin.Pseudo */ +.vc { color: #008080 } /* Name.Variable.Class */ +.vg { color: #008080 } /* Name.Variable.Global */ +.vi { color: #008080 } /* Name.Variable.Instance */ +.il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/static/css/reset.css b/static/css/reset.css new file mode 100644 index 0000000..87df836 --- /dev/null +++ b/static/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/static/css/skeleton.css b/static/css/skeleton.css new file mode 100644 index 0000000..f28bf6c --- /dev/null +++ b/static/css/skeleton.css @@ -0,0 +1,418 @@ +/* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +*/ + + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } +} + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + + .one.column, + .one.columns { width: 4.66666666667%; } + .two.columns { width: 13.3333333333%; } + .three.columns { width: 22%; } + .four.columns { width: 30.6666666667%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 48%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 65.3333333333%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.3333333333%; } + .twelve.columns { width: 100%; margin-left: 0; } + + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } + + .one-half.column { width: 48%; } + + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } + + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } + +} + + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } +body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } +h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} +h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } +} + +p { + margin-top: 0; } + + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } +a:hover { + color: #0FA0CE; } + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } +fieldset { + padding: 0; + border-width: 0; } +input[type="checkbox"], +input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + padding-left: 0; + margin-top: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } + + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ + + +/* Larger than mobile */ +@media (min-width: 400px) {} + +/* Larger than phablet (also point when grid becomes active) */ +@media (min-width: 550px) {} + +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {} diff --git a/static/img/favicon.ico b/static/img/favicon.ico new file mode 100644 index 0000000..63d51a5 Binary files /dev/null and b/static/img/favicon.ico differ diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..96bd46e --- /dev/null +++ b/theme.toml @@ -0,0 +1,11 @@ +name = "Cocoa" +license = "MIT" +description = "Clear typography and disturbance-free reading" +homepage = "https://github.com/nishanths" +tags = ["proxima-nova", "minimal", "clear"] +features = ["blog", "themes", "responsive", "404"] +min_version = 0.1 + +[author] + name = "Nishanth Shanmugham" + homepage = "https://github.com/nishanths"