From 43c8d2942eaf364b2ecde47d36b7a8518c35e612 Mon Sep 17 00:00:00 2001 From: cool-mist Date: Tue, 8 Dec 2020 10:41:41 +0000 Subject: [PATCH] Getting Ready --- .editorconfig | 15 + .gitignore | 47 ++- 404.html | 10 + 404.md | 8 + Gemfile | 6 + Gemfile.lock | 81 +++++ README.md | 2 +- _config.yml | 25 ++ _includes/head.html | 35 ++ _includes/sidebar.html | 34 ++ _layouts/default.html | 31 ++ _layouts/page.html | 8 + _layouts/post.html | 27 ++ _posts/2020-12-08-getting-ready.md | 49 +++ _sass/_base.scss | 70 ++++ _sass/_code.scss | 58 +++ _sass/_layout.scss | 16 + _sass/_masthead.scss | 23 ++ _sass/_message.scss | 12 + _sass/_pagination.scss | 52 +++ _sass/_posts.scss | 67 ++++ _sass/_syntax.scss | 65 ++++ _sass/_toc.scss | 16 + _sass/_type.scss | 115 ++++++ _sass/_variables.scss | 66 ++++ about.md | 19 + archive.md | 16 + atom.xml | 28 ++ index.html | 37 ++ public/css/lanyon.css | 558 +++++++++++++++++++++++++++++ public/css/poole.css | 430 ++++++++++++++++++++++ public/css/syntax.css | 65 ++++ public/favicon.png | Bin 0 -> 1909 bytes public/js/script.js | 15 + styles.scss | 47 +++ 35 files changed, 2148 insertions(+), 5 deletions(-) create mode 100644 .editorconfig create mode 100644 404.html create mode 100644 404.md create mode 100644 Gemfile create mode 100644 Gemfile.lock create mode 100644 _config.yml create mode 100644 _includes/head.html create mode 100644 _includes/sidebar.html create mode 100644 _layouts/default.html create mode 100644 _layouts/page.html create mode 100644 _layouts/post.html create mode 100644 _posts/2020-12-08-getting-ready.md create mode 100644 _sass/_base.scss create mode 100644 _sass/_code.scss create mode 100644 _sass/_layout.scss create mode 100644 _sass/_masthead.scss create mode 100644 _sass/_message.scss create mode 100644 _sass/_pagination.scss create mode 100644 _sass/_posts.scss create mode 100644 _sass/_syntax.scss create mode 100644 _sass/_toc.scss create mode 100644 _sass/_type.scss create mode 100644 _sass/_variables.scss create mode 100644 about.md create mode 100644 archive.md create mode 100644 atom.xml create mode 100644 index.html create mode 100644 public/css/lanyon.css create mode 100644 public/css/poole.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/js/script.js create mode 100644 styles.scss diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0b008c9 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.py] +indent_style = space +indent_size = 4 diff --git a/.gitignore b/.gitignore index 2ca8682..46d6e5c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,43 @@ -_site/ -.sass-cache/ -.jekyll-cache/ -.jekyll-metadata +# Ignore docs files +_gh_pages +_site +.ruby-version +.jekyll-cache + +# Numerous always-ignore extensions +*.diff +*.err +*.orig +*.log +*.rej +*.swo +*.swp +*.zip +*.vi +*~ + +# OS or Editor folders +.DS_Store +._* +Thumbs.db +.cache +.project +.settings +.tmproj +*.esproj +nbproject +*.sublime-project +*.sublime-workspace +.idea + +# Komodo +*.komodoproject +.komodotools + +# grunt-html-validation +validation-status.json +validation-report.json + +# Folders to ignore +node_modules +bower_components diff --git a/404.html b/404.html new file mode 100644 index 0000000..4bf3f7d --- /dev/null +++ b/404.html @@ -0,0 +1,10 @@ +--- +layout: default +title: "404: Page not found" +permalink: 404.html +--- + +
+

404: Page not found

+

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

+
diff --git a/404.md b/404.md new file mode 100644 index 0000000..d27f591 --- /dev/null +++ b/404.md @@ -0,0 +1,8 @@ +--- +layout: default +title: "404: Page not found" +permalink: 404.html +--- + +# 404: Page not found +Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. [Head back home]({{ site.url }}) to try finding it again. \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..c802e0d --- /dev/null +++ b/Gemfile @@ -0,0 +1,6 @@ +source "https://rubygems.org" + +gem "jekyll" +gem "jekyll-gist" +gem "jekyll-paginate" +gem "jekyll-seo-tag" diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..e86212d --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,81 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.7.0) + public_suffix (>= 2.0.2, < 5.0) + colorator (1.1.0) + concurrent-ruby (1.1.5) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.7) + faraday (0.17.1) + multipart-post (>= 1.2, < 3) + ffi (1.11.3) + forwardable-extended (2.6.0) + http_parser.rb (0.6.0) + i18n (1.7.0) + concurrent-ruby (~> 1.0) + jekyll (4.0.0) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (>= 0.9.5, < 2) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 3.0) + safe_yaml (~> 1.0) + terminal-table (~> 1.8) + jekyll-gist (1.5.0) + octokit (~> 4.2) + jekyll-paginate (1.1.0) + jekyll-sass-converter (2.0.1) + sassc (> 2.0.1, < 3.0) + jekyll-seo-tag (2.6.1) + jekyll (>= 3.3, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.1.0) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.2.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.3.6) + multipart-post (2.1.1) + octokit (4.14.0) + sawyer (~> 0.8.0, >= 0.5.3) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (4.0.1) + rb-fsevent (0.10.3) + rb-inotify (0.10.0) + ffi (~> 1.0) + rouge (3.14.0) + safe_yaml (1.0.5) + sassc (2.2.1) + ffi (~> 1.9) + sawyer (0.8.2) + addressable (>= 2.3.5) + faraday (> 0.8, < 2.0) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.6.0) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll + jekyll-gist + jekyll-paginate + jekyll-seo-tag + +BUNDLED WITH + 2.0.2 diff --git a/README.md b/README.md index 02c6057..964fd2c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # Bionic Beanie's Blog - Using [Lanyon](https://github.com/poole/lanyon) -- Site at https://blog.bionicbeanie.me +- Site at https://bionicbeanie.me diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..999169e --- /dev/null +++ b/_config.yml @@ -0,0 +1,25 @@ +# Setup +title: Bionic Beanie +tagline: 'Blog' +description: 'I would expect that I write about video games, music, chess and tech for the most part' +url: https://bionicbeanie.me +baseurl: '' +paginate: 5 +permalink: pretty + +# About/contact +author: + name: Surya + email: n.suryap@gmail.com + +# Gems +plugins: + - jekyll-paginate + +# Serving +host: bionicbeanie.me +port: 4000 + +# Custom vars +version: 1.1.0 +google_analytics_id: #UA-XXXX-Y diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..652a79b --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,35 @@ + + + + + + + + {% if page.title == "Home" %} + {{ site.title }} · {{ site.tagline }} + {% else %} + {{ page.title }} · {{ site.title }} + {% endif %} + + + {% if page.url and site.baseurl %} + + {% endif %} + + + + + + + + {% if site.google_analytics_id %} + + {% endif %} + diff --git a/_includes/sidebar.html b/_includes/sidebar.html new file mode 100644 index 0000000..cd3d785 --- /dev/null +++ b/_includes/sidebar.html @@ -0,0 +1,34 @@ + + + + + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..3dfa838 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,31 @@ + + + + {% include head.html %} + + + + {% include sidebar.html %} + + +
+
+
+

+ {{ site.title }} + {{ site.tagline }} +

+
+
+ +
+ {{ content }} +
+
+ + + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..4e0d4eb --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,8 @@ +--- +layout: default +--- + +
+

{{ page.title }}

+ {{ content }} +
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..c4bc253 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,27 @@ +--- +layout: default +--- + +
+

{{ page.title }}

+ {{ page.date | date_to_string }} + {{ content }} +
+ +{% if site.related_posts.size >= 1 %} +
+

Related posts

+ +
+{% endif %} diff --git a/_posts/2020-12-08-getting-ready.md b/_posts/2020-12-08-getting-ready.md new file mode 100644 index 0000000..f94367c --- /dev/null +++ b/_posts/2020-12-08-getting-ready.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Getting Ready +--- + +After contemplating about different options for DNS, hosting, and the bloggging technology for more than a week, I have settled on the following configurations to start blogging! (for now! ) + +### DNS + +[Bionic Beanie](https://theportalwiki.com/wiki/Bionic_Beanie) is a head wear from [Portal 2](https://en.wikipedia.org/wiki/Portal_2) co-op. Portal series is one of my favourite PC games and Bionic Beanic Blog scores 10/10 on alliteration consonance (in my opinion :P) + +Bought it right away from [Go Daddy](https://in.godaddy.com/). The package included DNS hosting as well. + +### Blog + +I wanted to use a static site generator as opposed to any CMS. In my experience, CMSes typically get bloated with more plugins and addons and tend to get slower. [Jekyll](https://jekyllrb.com/) is what I settled with - mainly because I recognise the name Jekyll from my childhood with [**The Strange Case of Dr Jekyll and Mr Hyde**](https://en.wikipedia.org/wiki/Strange_Case_of_Dr_Jekyll_and_Mr_Hyde). Also, Jekyll is highly configurable and blazing fast!! + +To start things off, this site is powered by [Lanyon](https://github.com/poole/lanyon#readme) which is an extension of [Poole](https://getpoole.com/) - the Jekyll butler (name derived from the afore mentioned book). + +### Hosting + +Bought the cheapest VPS from [Vultr](https://www.vultr.com/) for $5 a month - 1GB RAM and a single core shared server. This is good enough for hosting my static files. + +### The Setup + +The server will run behind an [nginx](https://www.nginx.com/) instance serving static files from `_site` folder that are built as part of jekyll build process. This way, to publish new changes, I just have to clone and build the files. The blog itself will be in a private git repository. + +[LetsEncrypt](https://letsencrypt.org/) helped issuing free ssl cert for my domain. + +The below nginx conf concludes the setup of the blog. + +``` +server { + location / { + root /var/www/html/site; # synlink to _site + } + listen 443 ssl; + ssl_certificate ; + ssl_certificate_key ; +} +``` + +I can make new changes on the repo and push them in. + +And publish new changes with `JEKYLL_ENV="production" bundle exec jekyll build` from inside the VPS. + +It should be possible to do this with a git hook, but I'm not too worried about it right now. + +**Let's Go** diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..05e71db --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,70 @@ +// Body resets +// +// Update the foundational and global aspects of the page. + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--body-font); + font-size: var(--body-font-size); + line-height: var(--body-line-height); + color: var(--body-color); + background-color: var(--body-bg); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// No `:visited` state is required by default (browsers will use `a`) +a { + color: var(--link-color); + + // `:focus` is linked to `:hover` for basic accessibility + &:hover, + &:focus { + color: var(--link-hover-color); + } + + strong { + color: inherit; + } +} + +img { + display: block; + max-width: 100%; + margin-bottom: var(--spacer); + border-radius: var(--border-radius); +} + +table { + margin-bottom: 1rem; + width: 100%; + border: 0 solid var(--border-color); + border-collapse: collapse; +} + +td, +th { + padding: .25rem .5rem; + border-color: inherit; + border-style: solid; + border-width: 0; + border-bottom-width: 1px; +} + +th { + text-align: left; +} + +thead th { + border-bottom-color: currentColor; +} + +mark { + padding: .15rem; + background-color: var(--yellow-100); + border-radius: .125rem; +} diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 0000000..edb007d --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,58 @@ +// Code +// +// Inline and block-level code snippets. Includes tweaks to syntax highlighted +// snippets from Pygments/Rouge and Gist embeds. + +code, +pre { + font-family: var(--code-font); +} + +code { + font-size: 85%; +} + +pre { + display: block; + margin-top: 0; + margin-bottom: var(--spacer-3); + overflow: auto; +} + +.highlight { + padding: var(--spacer); + margin-bottom: var(--spacer); + background-color: var(--code-bg); + border-radius: var(--border-radius); + + pre { + margin-bottom: 0; + } + + // Triple backticks (code fencing) doubles the .highlight elements + .highlight { + padding: 0; + } +} + +.rouge-table { + margin-bottom: 0; + font-size: 100%; + + &, + td, + th { + border: 0; + } + + .gutter { + vertical-align: top; + user-select: none; + opacity: .25; + } +} + +// Gist via GitHub Pages +.gist .markdown-body { + padding: 15px !important; +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..8e74c0e --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,16 @@ +// Layout +// +// Styles for managing the structural hierarchy of the site. + +.container { + max-width: 45rem; + padding-left: var(--spacer-2); + padding-right: var(--spacer-2); + margin-left: auto; + margin-right: auto; +} + +footer { + margin-top: var(--spacer-3); + margin-bottom: var(--spacer-3); +} diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss new file mode 100644 index 0000000..096abb7 --- /dev/null +++ b/_sass/_masthead.scss @@ -0,0 +1,23 @@ +// Masthead +// +// Super small header above the content for site name and short description. + +.masthead { + padding-top: var(--spacer); + padding-bottom: var(--spacer); + margin-bottom: var(--spacer-3); +} + +.masthead-title { + margin-bottom: 0; + + a { + color: inherit; + text-decoration: none; + } + + small { + font-weight: 400; + opacity: .5; + } +} diff --git a/_sass/_message.scss b/_sass/_message.scss new file mode 100644 index 0000000..ac1d93b --- /dev/null +++ b/_sass/_message.scss @@ -0,0 +1,12 @@ +// Messages +// +// Show alert messages to users. You may add it to single elements like a `

`, +// or to a parent if there are multiple elements to show. + +.message { + padding: var(--spacer); + margin-bottom: var(--spacer); + color: var(--gray-900); + background-color: var(--yellow-100); + border-radius: var(--border-radius); +} diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss new file mode 100644 index 0000000..6ef79b3 --- /dev/null +++ b/_sass/_pagination.scss @@ -0,0 +1,52 @@ +// Pagination +// +// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when +// there are no more previous or next posts to show. + +.pagination { + display: flex; + margin: 0 -1.5rem var(--spacer); + color: var(--gray-500); + text-align: center; +} + +// Pagination items can be `span`s or `a`s +.pagination-item { + display: block; + padding: var(--spacer); + text-decoration: none; + border: solid var(--border-color); + border-width: 1px 0; + + &:first-child { + margin-bottom: -1px; + } +} + +// Only provide a hover state for linked pagination items +a.pagination-item:hover { + background-color: var(--border-color); +} + +@media (min-width: 30em) { + .pagination { + margin: var(--spacer-3) 0; + } + + .pagination-item { + float: left; + width: 50%; + border-width: 1px; + + &:first-child { + margin-bottom: 0; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + &:last-child { + margin-left: -1px; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + } +} diff --git a/_sass/_posts.scss b/_sass/_posts.scss new file mode 100644 index 0000000..1ef5201 --- /dev/null +++ b/_sass/_posts.scss @@ -0,0 +1,67 @@ +// Posts and pages +// +// Each post is wrapped in `.post` and is used on default and post layouts. Each +// page is wrapped in `.page` and is only used on the page layout. + +.page, +.post { + margin-bottom: 4em; + + li + li { + margin-top: .25rem; + } +} + +// Blog post or page title +.page-title, +.post-title { + color: var(--heading-color); +} +.page-title, +.post-title { + margin-top: 0; +} +.post-title a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } +} + +// Meta data line below post title +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: var(--spacer); + color: var(--gray-600); +} + + +// Related posts +.related { + padding-top: var(--spacer-2); + padding-bottom: var(--spacer-2); + margin-bottom: var(--spacer-2); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +.related-posts { + padding-left: 0; + list-style: none; + + h3 { + margin-top: 0; + } + + a { + text-decoration: none; + + small { + color: var(--gray-600); + } + } +} diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/_sass/_syntax.scss @@ -0,0 +1,65 @@ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/_sass/_toc.scss b/_sass/_toc.scss new file mode 100644 index 0000000..f004db7 --- /dev/null +++ b/_sass/_toc.scss @@ -0,0 +1,16 @@ +// Table of Contents + +#markdown-toc { + padding: var(--spacer-2) var(--spacer-3); + margin-bottom: var(--spacer-2); + border: solid var(--border-color); + border-width: 1px 0; + + &::before { + display: block; + margin-left: calc(var(--spacer-3) * -1); + content: "Contents"; + font-size: 85%; + font-weight: 500; + } +} diff --git a/_sass/_type.scss b/_sass/_type.scss new file mode 100644 index 0000000..a26964f --- /dev/null +++ b/_sass/_type.scss @@ -0,0 +1,115 @@ +// Typography +// +// Headings, body text, lists, and other misc typographic elements. + +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: 600; + line-height: 1.25; + color: var(--heading-color); +} + +h1 { + font-size: 2rem; +} + +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} + +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} + +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; +} + +hr { + position: relative; + margin: var(--spacer-2) 0; + border: 0; + border-top: 1px solid var(--border-color); +} + +abbr { + font-size: 85%; + font-weight: bold; + color: var(--gray-600); + text-transform: uppercase; + + &[title] { + cursor: help; + border-bottom: 1px dotted var(--border-color); + } +} + +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: var(--gray-500); + border-left: .25rem solid var(--border-color); + + p:last-child { + margin-bottom: 0; + } + + @media (min-width: 30em) { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +figure { + margin: 0; +} + + +// Markdown footnotes +// +// See the example content post for an example. + +// Footnote number within body text +a[href^="#fn:"], +// Back to footnote link +a[href^="#fnref:"] { + display: inline-block; + margin-left: .1rem; + font-weight: bold; +} + +// List of footnotes +.footnotes { + margin-top: 2rem; + font-size: 85%; +} + +// Custom type +// +// Extend paragraphs with `.lead` for larger introductory text. + +.lead { + font-size: 1.25rem; + font-weight: 300; +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..4fa181f --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,66 @@ +:root { + --gray-000: #f8f9fa; + --gray-100: #f1f3f5; + --gray-200: #e9ecef; + --gray-300: #dee2e6; + --gray-400: #ced4da; + --gray-500: #adb5bd; + --gray-600: #868e96; + --gray-700: #495057; + --gray-800: #343a40; + --gray-900: #212529; + + --red: #fa5252; + --pink: #e64980; + --grape: #be4bdb; + --purple: #7950f2; + --indigo: #4c6ef5; + --blue: #228be6; + --cyan: #15aabf; + --teal: #12b886; + --green: #40c057; + --yellow: #fab005; + --orange: #fd7e14; + + --blue-300: #74c0fc; + --blue-400: #4dabf7; + --yellow-100: #fff3bf; + + --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --body-font-size: 16px; + --body-line-height: 1.5; + --body-color: var(--gray-700); + --body-bg: #fff; + + --link-color: var(--blue); + --link-hover-color: #1c7ed6; + + --heading-color: var(--gray-900); + + --border-color: var(--gray-300); + --border-radius: .25rem; + + --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --code-color: var(--grape); + --code-bg: var(--gray-000); + + --spacer: 1rem; + --spacer-2: calc(var(--spacer) * 1.5); + --spacer-3: calc(var(--spacer) * 3); +} + +@media (prefers-color-scheme: dark) { + :root { + --body-color: var(--gray-300); + --body-bg: var(--gray-800); + + --heading-color: #fff; + + --link-color: var(--blue-300); + --link-hover-color: var(--blue-400); + + --border-color: rgba(255,255,255,.15); + + --code-bg: var(--gray-900); + } +} diff --git a/about.md b/about.md new file mode 100644 index 0000000..91f6292 --- /dev/null +++ b/about.md @@ -0,0 +1,19 @@ +--- +layout: page +title: About +--- + +I'm a software developer working in Bangalore. When I'm not working, I might be doing any one of the following activities in addition to blogging. + +* Eat +* Sleep +* Play Chess +* Read a book +* Play my keyboard +* Play video games + +# Connect + +* [Email](mailto:n.suryap@gmail.com) +* [Github](https://github.com/cool-mist) +* [Steam](https://www.dotabuff.com/players/137192269) diff --git a/archive.md b/archive.md new file mode 100644 index 0000000..78bb3be --- /dev/null +++ b/archive.md @@ -0,0 +1,16 @@ +--- +layout: page +title: Archive +--- + +Browse all posts by month and year. + +{% assign postsByYearMonth = site.posts | group_by_exp: "post", "post.date | date: '%B %Y'" %} +{% for yearMonth in postsByYearMonth %} +

{{ yearMonth.name }}

+ +{% endfor %} diff --git a/atom.xml b/atom.xml new file mode 100644 index 0000000..15eed6c --- /dev/null +++ b/atom.xml @@ -0,0 +1,28 @@ +--- +layout: null +--- + + + + + {{ site.title }} + + + {{ site.time | date_to_xmlschema }} + {{ site.url }} + + {{ site.author.name }} + {{ site.author.email }} + + + {% for post in site.posts %} + + {{ post.title }} + + {{ post.date | date_to_xmlschema }} + {{ site.url }}{{ site.baseurl }}{{ post.id }} + {{ post.content | xml_escape }} + + {% endfor %} + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..732d9f1 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ +--- +layout: default +title: Home +--- + +
+ {% for post in paginator.posts %} +
+

+ + {{ post.title }} + +

+ + {{ post.date | date_to_string }} + + {{ post.content }} +
+ {% endfor %} +
+ + diff --git a/public/css/lanyon.css b/public/css/lanyon.css new file mode 100644 index 0000000..b0b42b8 --- /dev/null +++ b/public/css/lanyon.css @@ -0,0 +1,558 @@ +/* + * ___ + * /\_ \ + * \//\ \ __ ___ __ __ ___ ___ + * \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\ + * \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \ + * /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\ + * \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/ + * /\___/ + * \/__/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/lanyon. + */ + + +/* + * Contents + * + * Global resets + * Masthead + * Sidebar + * Slide effect + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + + +/* + * Global resets + * + * Update the foundational and global aspects of the page. + */ + +/* Prevent scroll on narrow devices */ +html, +body { + overflow-x: hidden; +} + +html { + font-family: "PT Serif", Georgia, "Times New Roman", serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-weight: 400; + color: #313131; + letter-spacing: -.025rem; +} + + +/* + * Wrapper + * + * The wrapper is used to position site content when the sidebar is toggled. We + * use an outter wrap to position the sidebar without interferring with the + * regular page content. + */ + +.wrap { + position: relative; + width: 100%; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 28rem; +} +@media (min-width: 38em) { + .container { + max-width: 32rem; + } +} +@media (min-width: 56em) { + .container { + max-width: 38rem; + } +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; + border-bottom: 1px solid #eee; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title a { + color: #505050; +} +.masthead-title small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; +} + +@media (max-width: 48em) { + .masthead-title { + text-align: center; + } + .masthead-title small { + display: none; + } +} + + +/* + * Sidebar + * + * The sidebar is the drawer, the item we are toggling with our handy hamburger + * button in the corner of the page. + * + * This particular sidebar implementation was inspired by Chris Coyier's + * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the + * comments by a reader. It modifies both implementations to continue using the + * checkbox (no change in URL means no polluted browser history), but this uses + * `position` for the menu to avoid some potential content reflow issues. + * + * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 + */ + +/* Style and "hide" the sidebar */ +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: -14rem; + width: 14rem; + visibility: hidden; + overflow-y: auto; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-size: .875rem; /* 15px */ + color: rgba(255,255,255,.6); + background-color: #202020; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} +@media (min-width: 30em) { + .sidebar { + font-size: .75rem; /* 14px */ + } +} + +/* Sidebar content */ +.sidebar a { + font-weight: normal; + color: #fff; +} +.sidebar-item { + padding: 1rem; +} +.sidebar-item p:last-child { + margin-bottom: 0; +} + +/* Sidebar nav */ +.sidebar-nav { + border-bottom: 1px solid rgba(255,255,255,.1); +} +.sidebar-nav-item { + display: block; + padding: .5rem 1rem; + border-top: 1px solid rgba(255,255,255,.1); +} +.sidebar-nav-item.active, +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: none; + background-color: rgba(255,255,255,.1); + border-color: transparent; +} + +@media (min-width: 48em) { + .sidebar-item { + padding: 1.5rem; + } + .sidebar-nav-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */ +.sidebar-checkbox { + position: absolute; + opacity: 0; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +/* Style the `label` that we use to target the `.sidebar-checkbox` */ +.sidebar-toggle { + position: absolute; + top: .8rem; + left: 1rem; + display: flex; + align-items: center; + padding: .25rem .75rem; + color: #505050; + background-color: #fff; + border-radius: .25rem; + cursor: pointer; +} + +.sidebar-toggle::before { + display: inline-block; + width: 32px; + height: 32px; + content: ""; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23555' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat; +} + +.sidebar-toggle:active, +#sidebar-checkbox:focus ~ .sidebar-toggle, +#sidebar-checkbox:checked ~ .sidebar-toggle { + color: #fff; + background-color: #555; +} + +.sidebar-toggle:active:before, +#sidebar-checkbox:focus ~ .sidebar-toggle::before, +#sidebar-checkbox:checked ~ .sidebar-toggle::before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat; +} + +@media (min-width: 30.1em) { + .sidebar-toggle { + position: fixed; + } +} + +@media print { + .sidebar-toggle { + display: none; + } +} + +/* Slide effect + * + * Handle the sliding effects of the sidebar and content in one spot, seperate + * from the default styles. + * + * As an a heads up, we don't use `transform: translate3d()` here because when + * mixed with `position: fixed;` for the sidebar toggle, it creates a new + * containing block. Put simply, the fixed sidebar toggle behaves like + * `position: absolute;` when transformed. + * + * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. + */ + +.wrap, +.sidebar, +.sidebar-toggle { + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +.wrap, +.sidebar-toggle { + -webkit-transition: -webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out; +} + +#sidebar-checkbox:checked + .sidebar { + z-index: 10; + visibility: visible; +} +#sidebar-checkbox:checked ~ .sidebar, +#sidebar-checkbox:checked ~ .wrap, +#sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(14rem); + -ms-transform: translateX(14rem); + transform: translateX(14rem); +} + + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page, +.post { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30em) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} + + +/* + * Reverse layout + * + * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle + * on the right side. + */ + +.layout-reverse .sidebar { + left: auto; + right: -14rem; +} +.layout-reverse .sidebar-toggle { + left: auto; + right: 1rem; +} + +.layout-reverse #sidebar-checkbox:checked ~ .sidebar, +.layout-reverse #sidebar-checkbox:checked ~ .wrap, +.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(-14rem); + -ms-transform: translateX(-14rem); + transform: translateX(-14rem); +} + + +/* + * Themes + * + * Apply custom color schemes by adding the appropriate class to the `body`. + * Based on colors from Base16: http://chriskempson.github.io/base16/#default. + */ + +/* Red */ +.theme-base-08 .sidebar, +.theme-base-08 .sidebar-toggle:active, +.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #ac4142; +} +.theme-base-08 .container a, +.theme-base-08 .sidebar-toggle, +.theme-base-08 .related-posts li a:hover { + color: #ac4142; +} + +/* Orange */ +.theme-base-09 .sidebar, +.theme-base-09 .sidebar-toggle:active, +.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #d28445; +} +.theme-base-09 .container a, +.theme-base-09 .sidebar-toggle, +.theme-base-09 .related-posts li a:hover { + color: #d28445; +} + +/* Yellow */ +.theme-base-0a .sidebar, +.theme-base-0a .sidebar-toggle:active, +.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #f4bf75; +} +.theme-base-0a .container a, +.theme-base-0a .sidebar-toggle, +.theme-base-0a .related-posts li a:hover { + color: #f4bf75; +} + +/* Green */ +.theme-base-0b .sidebar, +.theme-base-0b .sidebar-toggle:active, +.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #90a959; +} +.theme-base-0b .container a, +.theme-base-0b .sidebar-toggle, +.theme-base-0b .related-posts li a:hover { + color: #90a959; +} + +/* Cyan */ +.theme-base-0c .sidebar, +.theme-base-0c .sidebar-toggle:active, +.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #75b5aa; +} +.theme-base-0c .container a, +.theme-base-0c .sidebar-toggle, +.theme-base-0c .related-posts li a:hover { + color: #75b5aa; +} + +/* Blue */ +.theme-base-0d .sidebar, +.theme-base-0d .sidebar-toggle:active, +.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #6a9fb5; +} +.theme-base-0d .container a, +.theme-base-0d .sidebar-toggle, +.theme-base-0d .related-posts li a:hover { + color: #6a9fb5; +} + +/* Magenta */ +.theme-base-0e .sidebar, +.theme-base-0e .sidebar-toggle:active, +.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #aa759f; +} +.theme-base-0e .container a, +.theme-base-0e .sidebar-toggle, +.theme-base-0e .related-posts li a:hover { + color: #aa759f; +} + +/* Brown */ +.theme-base-0f .sidebar, +.theme-base-0f .sidebar-toggle:active, +.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #8f5536; +} +.theme-base-0f .container a, +.theme-base-0f .sidebar-toggle, +.theme-base-0f .related-posts li a:hover { + color: #8f5536; +} + + +/* + * Overlay sidebar + * + * Make the sidebar content overlay the viewport content instead of pushing it + * aside when toggled. + */ + +.sidebar-overlay #sidebar-checkbox:checked ~ .wrap { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); +} +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle { + box-shadow: 0 0 0 .25rem #fff; +} +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: .25rem 0 .5rem rgba(0,0,0,.1); +} + +/* Only one tweak for a reverse layout */ +.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1); +} diff --git a/public/css/poole.css b/public/css/poole.css new file mode 100644 index 0000000..8ec27e7 --- /dev/null +++ b/public/css/poole.css @@ -0,0 +1,430 @@ +/* + * ___ + * /\_ \ + * _____ ___ ___\//\ \ __ + * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ + * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ + * \ \ ,__/\ \____/\ \____//\____\ \____\ + * \ \ \/ \/___/ \/___/ \/____/\/____/ + * \ \_\ + * \/_/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/poole. + */ + + +/* + * Contents + * + * Body resets + * Custom type + * Messages + * Container + * Masthead + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + + +/* + * Body resets + * + * Update the foundational and global aspects of the page. + */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; +} +@media (min-width: 38em) { + html { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* No `:visited` state is required by default (browsers will use `a`) */ +a { + color: #268bd2; + text-decoration: none; +} +a strong { + color: inherit; +} +/* `:focus` is linked to `:hover` for basic accessibility */ +a:hover, +a:focus { + text-decoration: underline; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: bold; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: #303030; +} + + +/* Lists */ +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} +dd { + margin-bottom: .5rem; +} + +/* Misc */ +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +/* Code */ +code, +pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + background-color: #f9f9f9; +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} + +/* Pygments via Jekyll */ +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Gist via GitHub Pages */ +.gist .gist-file { + font-family: Menlo, Monaco, "Courier New", monospace !important; +} +.gist .markdown-body { + padding: 15px; +} +.gist pre { + padding: 0; + background-color: transparent; +} +.gist .gist-file .gist-data { + font-size: .8rem !important; + line-height: 1.4; +} +.gist code { + padding: 0; + color: inherit; + background-color: transparent; + border-radius: 0; +} + +/* 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: 30em) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +img { + display: block; + max-width: 100%; + margin: 0 0 1rem; + border-radius: 5px; +} + +/* Tables */ +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: #f9f9f9; +} + + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 1.25rem; + font-weight: 300; +} + + +/* + * Messages + * + * Show alert messages to users. You may add it to single elements like a `

`, + * or to a parent if there are multiple elements to show. + */ + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 38rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title a { + color: #505050; +} +.masthead-title small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; +} + + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page, +.post { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30em) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} diff --git a/public/css/syntax.css b/public/css/syntax.css new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/public/css/syntax.css @@ -0,0 +1,65 @@ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..08c0cfdc5042adcca843686492b3de9265415e9d GIT binary patch literal 1909 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4rT@h2A3sW#~2tGSkfJR9T^xl_H+M9WMyDr zU@Q)DcVbv~PUa;@WwJ+*F9SoB8UsT^3j@P11_p+P7Yq!g1`G_Z5*Qe)W-u^_7tGle zXv4t3^fACE#P$FG|NpC>hDral7X6%l;m7Uw|GxbE`~Sr9|M^`1 zvswR_2>!~d0qPe1*YTky|n z#SfOL{}?9zZ$A0&|FK2?^Em&lsrq|)$G>j7|2ZuGvzY$x?tSv*zt*z<)~kN+y7e)9 z%Xj9f|Cp!zn||^4|23um*Hrzxd+Oix(EmBC{|ov4U*5Lv?mzySe-pNTdh+_?+)F=% zX8qxx`Tx+3>uf{PN!TTY1r6&4oX% zy#Dk5$o&7g9RH>V{=2y8|DT@^KK|2K@=t8`@6=sC4nO+&|K#$2%X9yKdCNTYf9uI# zKYsuHw|CONdbNM6OaA};b?)VF`2~MXmjCWQ_xs!na6J6^^?yOazXpw|7ymI${>wM> zAKSElOjG_DEcto;&7c3Pi~pBO{##x4zt#AEHq-wif&bTbuetq?Z^qyFU4Oez|BBu9 zS7zQ{fm#2LKL7v!=%W9%I)5Kt{=c>3f05w-T=xGbmOTFYUu)_A%A?H;rstT zzyB{v`B$azf0F0FJ^lYbJ)e2`56hIl<|}`v?fvuS>!1I>zW<*U{=bO--{RDN_fP-- z{PzF9fBonGOV0USb@=mIdkWb(6R%kq%`yykC<&M`_{&HOs!AN!PM`Z-Z~Cep}cpu z6q0Rh_R941?yaqH^!oE>Ar}+V)-BCV&Q6V5hYl$#_4Y1al$_M4_2`k}CpJ!@s9T+$ zCp8^dS7yGHR8yN7dDGH?b!Vjj>rYmP-`w3@jh}9*E=_%^rY1Ty)InHeb@qa=E7u%l zR!)t&f8oZJoSdW_o-dx>*|QBo9IY>iD+JuRc=7%5$zM=BO}eskMS%(vt&YTnl3a%1ObalN=*JX4r|efczX_08)FTD_XLdz+u@_r&k3`uj{bsA=cF zcYoXa=cg>(b3T4w-S56h3mO`J9xq{e{(ODrmy?{%oD2-Rl$Hj&v40I`U|>)!ag8WR zNi0dVN-j!GEJB&Q>tfGuN}wwNx-NFf`FMFx53QQV29O zQ^+VODX`MlFE20G%LJ*;1*_J}FG|1D_LhNxfk6UfVn{}5ZjzOiOMY@`ZfahMl~q7u zdTKF);qw2x_0iOT?XFVdQ&MBb@ E0ITM`Hvj+t literal 0 HcmV?d00001 diff --git a/public/js/script.js b/public/js/script.js new file mode 100644 index 0000000..b47910a --- /dev/null +++ b/public/js/script.js @@ -0,0 +1,15 @@ +(function(document) { + var toggle = document.querySelector('.sidebar-toggle'); + var sidebar = document.querySelector('#sidebar'); + var checkbox = document.querySelector('#sidebar-checkbox'); + + document.addEventListener('click', function(e) { + var target = e.target; + + if(!checkbox.checked || + sidebar.contains(target) || + (target === checkbox || target === toggle)) return; + + checkbox.checked = false; + }, false); +})(document); diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..e02d902 --- /dev/null +++ b/styles.scss @@ -0,0 +1,47 @@ +--- +# Use a comment to ensure Jekyll reads the file to be transformed into CSS later +# only main files contain this front matter, not partials. +--- + +// +// ___ +// /\_ \ +// _____ ___ ___\//\ \ __ +// /\ '__`\ / __`\ / __`\\ \ \ /'__`\ +// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ +// \ \ ,__/\ \____/\ \____//\____\ \____\ +// \ \ \/ \/___/ \/___/ \/____/\/____/ +// \ \_\ +// \/_/ +// +// Designed, built, and released under MIT license by @mdo. Learn more at +// https://github.com/poole/poole. + +@import "variables"; +@import "base"; +@import "type"; +@import "syntax"; +@import "code"; +@import "layout"; +@import "masthead"; +@import "posts"; +@import "pagination"; +@import "message"; +@import "toc"; + +// Sass for creating the swatches +.colors { + display: grid; + grid-template-columns: max-content 1fr; + + dt { + width: 3rem; + height: 3rem; + border-radius: var(--border-radius); + box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); + } + + dd { + margin-left: var(--spacer); + } +}