├── _sass ├── _tables.scss ├── _buttons.scss ├── _pagination.scss ├── _placeholders.scss ├── _forms.scss ├── _images.scss ├── _colors.scss ├── _skins.scss ├── _spacing.scss ├── _vars.scss ├── _grid.scss ├── i.scss ├── _links.scss ├── _code.scss ├── _lists.scss ├── _nav.scss ├── _type.scss ├── _syntax.scss └── _normalize.scss ├── CNAME ├── img ├── city.jpg ├── jkl.jpg └── photo.jpg ├── archives └── index.html ├── _layouts ├── default.html └── post.html ├── README.md ├── _includes ├── _navigation.html ├── _archives.html ├── _google_analytics.html ├── _related_posts.html ├── _head.html ├── _footer.html └── _navigation_social.html ├── about └── index.html ├── Rakefile ├── .htaccess ├── index.html ├── _config.yml ├── _posts ├── 2015-01-01-unicode.html ├── 2013-05-06-design-tools.md ├── css ├── 2013-05-20-front-end-vim-commands.md ├── 2013-05-01-essential-vim-plugins.md ├── 2015-manage-vim-2.html └── 2015-01-01-managing-vim.md └── css └── i.css /_sass/_tables.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_sass/_buttons.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_sass/_pagination.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | http://xn--h4hg.ws 2 | -------------------------------------------------------------------------------- /_sass/_placeholders.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_sass/_forms.scss: -------------------------------------------------------------------------------- 1 | // None here. 2 | -------------------------------------------------------------------------------- /_sass/_images.scss: -------------------------------------------------------------------------------- 1 | img { 2 | width:100%; 3 | margin:1em 0; 4 | } 5 | -------------------------------------------------------------------------------- /img/city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/x--x/master/img/city.jpg -------------------------------------------------------------------------------- /img/jkl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/x--x/master/img/jkl.jpg -------------------------------------------------------------------------------- /img/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/x--x/master/img/photo.jpg -------------------------------------------------------------------------------- /_sass/_colors.scss: -------------------------------------------------------------------------------- 1 | $grey-dark:#222; 2 | $grey-medium:#777; 3 | $grey-light:#eee; 4 | 5 | $orange:#FF5335; 6 | -------------------------------------------------------------------------------- /_sass/_skins.scss: -------------------------------------------------------------------------------- 1 | .bb { 2 | border-bottom:1px dotted $grey-light; 3 | } 4 | 5 | .bg-dark { 6 | color:#222; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /archives/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | {% include _archives.html %} 7 |
8 | -------------------------------------------------------------------------------- /_sass/_spacing.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | padding:2em 0; 3 | } 4 | 5 | .mt-1 { 6 | margin-top:1em; 7 | } 8 | 9 | .mt-2 { 10 | margin-top:2em; 11 | } 12 | 13 | .mt-4 { 14 | margin-top:8em; 15 | } 16 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | {% include _head.html %} 2 | 3 | {% include _google_analytics.html %} 4 |
5 | {{content}} 6 |
7 | {% include _footer.html %} 8 | 9 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ☠☣.ws 2 | 3 | Thoughts from a front-end developer on vim, design, and software development. 4 | 5 | Built on top of http://jk-l.cc - a light-weight scaffolding for building 6 | a responsive and highly readable jekyll blog. 7 | -------------------------------------------------------------------------------- /_sass/_vars.scss: -------------------------------------------------------------------------------- 1 | /* 2 | $secondary-color:; 3 | $tertiary-color:; 4 | 5 | $padding:; 6 | $margin:; 7 | 8 | */ 9 | 10 | $primary-color: #eee; 11 | $type-1:84px; 12 | $type-2:42px; 13 | $type-3:32px; 14 | $type-4:24px; 15 | $type-5:20px; 16 | $type-5:16px; 17 | 18 | $copy:24px; 19 | 20 | $copy-line-height:1.5; 21 | -------------------------------------------------------------------------------- /_sass/_grid.scss: -------------------------------------------------------------------------------- 1 | .single-column { 2 | margin:0 auto; 3 | padding:1em; 4 | width:100%; 5 | max-width:768px!important; 6 | } 7 | 8 | @mixin breakpoint($viewport-width) { 9 | @if $viewport-width == one-hand { 10 | @media screen and (min-width:100px) and (max-width: 479px) { 11 | @content; 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /_includes/_navigation.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /_sass/i.scss: -------------------------------------------------------------------------------- 1 | // Include all the partials you want compiled into i.css 2 | 3 | @import "normalize"; 4 | 5 | @import "vars"; 6 | @import "colors"; 7 | @import "grid"; 8 | @import "type"; 9 | @import "skins"; 10 | @import "lists"; 11 | @import "buttons"; 12 | @import "links"; 13 | @import "nav"; 14 | @import "spacing"; 15 | @import "images"; 16 | @import "syntax"; 17 | @import "code"; 18 | -------------------------------------------------------------------------------- /_includes/_archives.html: -------------------------------------------------------------------------------- 1 |
2 |

Archives

3 | 11 |
12 | -------------------------------------------------------------------------------- /_includes/_google_analytics.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /_includes/_related_posts.html: -------------------------------------------------------------------------------- 1 |
2 |

Similar

3 | 14 |
15 | -------------------------------------------------------------------------------- /_sass/_links.scss: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration:none; 3 | &:hover {cursor:pointer;} 4 | } 5 | 6 | .site-logo { 7 | position:relative; 8 | top:20px; 9 | text-align:center; 10 | margin:0 auto; 11 | display:block; 12 | vertical-align:text-top; 13 | border-radius:9999px; 14 | height:48px; 15 | width:48px; 16 | background:#eee; 17 | color:#ccc; 18 | line-height:64px; 19 | font-size:100px; 20 | overflow:hidden; 21 | @include breakpoint(one-hand) {display:none;} 22 | } 23 | -------------------------------------------------------------------------------- /_includes/_head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ site.title }} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /_includes/_footer.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /about/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |

7 | Thoughts on vim, css, grid systems, design, typing code, & faster prototyping. 8 |

9 |

10 | Source for the blog can be found here. 11 | Open a github issue to comment or ask a question. 12 |

13 |

Written by Mrmrs

14 |
15 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "rubygems" 2 | require 'rake' 3 | 4 | desc "Automatically generate site at :4000 for local dev" 5 | task :dev do 6 | system "jekyll serve --watch" 7 | end # task :dev 8 | 9 | desc "Start Sass so that is compiles to css upon file save" 10 | task :sass do 11 | system "sass --watch _sass:css" 12 | end # task :sass 13 | 14 | desc "Start Sass so that is compiles to css upon file save" 15 | task :minify do 16 | system "sass --watch _sass:css --style compress" 17 | end # task :minify 18 | 19 | desc "Remove _site from directory before committing" 20 | task :clean do 21 | system "rm -rf _site" 22 | end # task :clean 23 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | # GZIP the assets that should be gzipped. This file goes in your root directory 2 | # if you're serving up your site via APACHE. http://httpd.apache.org/docs/2.2/mod/mod_deflate.html 3 | 4 | AddOutputFilterByType DEFLATE text/plain 5 | AddOutputFilterByType DEFLATE text/html 6 | AddOutputFilterByType DEFLATE text/xml 7 | AddOutputFilterByType DEFLATE text/css 8 | AddOutputFilterByType DEFLATE application/xml 9 | AddOutputFilterByType DEFLATE application/xhtml+xml 10 | AddOutputFilterByType DEFLATE application/rss+xml 11 | AddOutputFilterByType DEFLATE application/javascript 12 | AddOutputFilterByType DEFLATE application/x-javascript 13 | -------------------------------------------------------------------------------- /_sass/_code.scss: -------------------------------------------------------------------------------- 1 | code { 2 | background:#eee; 3 | color:#222; 4 | -webkit-border-radius:3px; 5 | -moz-border-radius:3px; 6 | border-radius:3px; 7 | display:block; 8 | font-family: 9 | Consolas, 10 | "Andale Mono WT", 11 | "Andale Mono", 12 | "Lucida Console", 13 | "Lucida Sans Typewriter", 14 | "DejaVu Sans Mono", 15 | "Bitstream Vera Sans Mono", 16 | "Liberation Mono", 17 | "Nimbus Mono L", 18 | Monaco, 19 | "Courier New", 20 | Courier, 21 | monospace; 22 | font-size:14px; 23 | line-height:1.4; 24 | letter-spacing:0.1em; 25 | margin:1em 0; 26 | overflow:scroll; 27 | padding:1em; 28 | @include breakpoint(one-hand) { 29 | padding:1em 1em; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | 10 | 11 |
12 |
13 | 27 |
28 |
29 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | {% include _head.html %} 2 | 3 | {% include _google_analytics.html %} 4 |
5 |
6 |
7 |
8 |
9 |

10 | {{page.title}} 11 |

12 | {% if page.subtitle %} 13 |

14 | {{page.subtitle}} 15 |

16 | {% endif %} 17 |
18 | 19 | {{content}} 20 | 21 | 27 |
28 | {% include _related_posts.html %} 29 |
30 |
31 | {% include _footer.html %} 32 | 33 | 34 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # This will be the first part of the title tag for your site site.name + page.title 2 | name: "JKL" 3 | # Populates the meta description for the site. Should be under 150 characters for best SEO purposes. 4 | descripiton: "Light-weight scaffolding for a Jekyll project" 5 | 6 | # Owner (organization or individual) of site content 7 | author: "mrmrs" 8 | 9 | #url: "[http:// ]" 10 | url: "http://localhost:4000" 11 | 12 | # Your UA tracking number (i.e 35858753-1) for Google Analytics. 13 | # If you comment this out, or don't fill out this parameter - Google analytics won't be included. 14 | googleID: "samples" 15 | 16 | # Pagination variable for how many posts to show in a list 17 | paginate: 5 18 | 19 | # Style of permalinks 20 | permalink: pretty 21 | 22 | # Variable format options for URL styles below 23 | # pretty => /2009/04/29/slap-chop/index.html 24 | # /:month-month:day-:year/:title.html/ => 04-29-2009/slap-chop.html 25 | # /blog/:yearr/:month/:day/:title => /blog/2009/04/29/slap-chop/index.html 26 | 27 | # UnComment once you have pygments installed. Used for code syntax highlighting. 28 | #pygments: true 29 | # 30 | 31 | future: false 32 | -------------------------------------------------------------------------------- /_sass/_lists.scss: -------------------------------------------------------------------------------- 1 | .large-list { 2 | font-size:$type-4; 3 | li { 4 | border-top:1px solid #eee; 5 | } 6 | a { 7 | display:block; 8 | padding:1em 0; 9 | color:$grey-dark; 10 | line-height:1.5; 11 | text-decoration:none; 12 | &:hover, 13 | &:active { 14 | color:$orange; 15 | .meta {color:$orange;} 16 | } 17 | .meta { 18 | display:block; 19 | } 20 | } 21 | } 22 | 23 | .post { 24 | ul,dl { 25 | line-height:1.618; 26 | font-size:$type-4; 27 | margin-bottom:1em; 28 | } 29 | dt { 30 | font-weight:bold; 31 | } 32 | dd { 33 | margin-bottom:.5em; 34 | color:$grey-medium; 35 | } 36 | ul { 37 | list-style-type:disc; 38 | margin-left:1em; 39 | } 40 | } 41 | 42 | .post ol { 43 | margin-left:-1.75em; 44 | li { 45 | margin-bottom: .5em; 46 | line-height:$copy-line-height; 47 | } 48 | } 49 | 50 | .list-full { 51 | width: 100%; 52 | margin:0; 53 | } 54 | 55 | .list-full--item-link { 56 | display:block; 57 | padding:40px 20px; 58 | border-bottom:1px solid #fff; 59 | font-size:$type-3; 60 | @include breakpoint(one-hand) { 61 | font-size:$type-4; 62 | line-height:1.5; 63 | } 64 | color:#222; 65 | &:hover { 66 | background:#ffcc33; 67 | color:#fff; 68 | .meta {color:#fff;} 69 | } 70 | } 71 | 72 | 73 | .flush-right {position:absolute;right:20px;} 74 | -------------------------------------------------------------------------------- /_posts/2015-01-01-unicode.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Unicode Domain on Github Pages" 3 | layout: posts 4 | --- 5 | 6 |

7 | I recently set out to set up a site I have hosted on github pages with a unicode domain name. Why? Because I view a unicode skull in my domain as being better than NOT having a unicode skull in my domain. 8 | Dave Copeland wrote up a great post how to set up a unicode domain - but his instructions require the ability to manipulate your apache config. Github pages does not allow for this at all - but luckily this is not an issue. 9 |

10 | 11 |

Steps

12 | 13 |
    14 |
  1. 15 | Find a unicode domain you like. This is the hardest part, I swear. The sheer amount of options is stifling to say the least. There are many domain registers that will not sell you a domain name with unicode characters. Per Copeland's suggestion I went 16 | ahead and used Dyna Dot. 17 |
    2. 18 |
  2. 19 | Each unicode domain comes with an asciification of the url. Something that looks like xn--h4hg.ws - copy this. 20 |
    3. 21 |
  3. 22 | You'll need to change your Name Server settings from your Dynadot account page. Set your "A" Record Type to 204.232.175.78 (This will point it at Github pages). Save your settings, you're all down with Dynadot. 23 |
    4. 24 |
  4. 25 | On the gh-pages branch of the project you want to host add a CNAME file 26 |
    5. 27 |
28 | -------------------------------------------------------------------------------- /_includes/_navigation_social.html: -------------------------------------------------------------------------------- 1 | 47 | -------------------------------------------------------------------------------- /_posts/2013-05-06-design-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Why Vim is my primary design tool" 3 | layout: post 4 | --- 5 | 6 | > Design is Redesign 7 | > - Jan Michl 8 | 9 | When I'm designing for the web, I design in the browser. There are a variety of 10 | reasons for doing this, but it really comes down to two things: 11 | 12 | 1. It allows me to more accurately understand the constraints of the platform I am designing for. 13 | 2. I can edit code faster than I can edit visual assets. 14 | 15 | I do not have a history of getting something I'm designing perfect on the first 16 | try. If I did, I probably wouldn't care about being able to iterate through 17 | design ideas quickly. But I do care about it greatly - because I'm never right on the first try. And 18 | I don't think that will be changing any time soon. 19 | 20 | There are times in which typing is not the bottle-neck. There are times when it is wise to sit and stare. 21 | Digesting what has already been created is an essential part of any design process. 22 | But I'm not here to talk about those times. It's hard to speed up thinking about design in many cases. So 23 | I won't try to talk about that problem today. 24 | 25 | The speed in which you can iterate through designs in the browser is directly 26 | linked to how quickly you can edit text. 27 | 28 | I'm probably going to be expressing my ideas through typing for many years to come. Whether it's 29 | writing an email to a colleague, or editing code to visualize an idea - 30 | 31 | Vim is the most powerful tool I have ever used in speeding this process up. 32 | 33 | The faster we can all iterate through designs - the more quickly we can move the web forward. 34 | And that's something I'm pretty interested in. 35 | -------------------------------------------------------------------------------- /_posts/css: -------------------------------------------------------------------------------- 1 | /* 2 | Errno::ENOENT: No such file or directory - sass 3 | 4 | Backtrace: 5 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:339:in `read' 6 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:339:in `update_stylesheet' 7 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:203:in `block in update_stylesheets' 8 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:201:in `each' 9 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:201:in `update_stylesheets' 10 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin/compiler.rb:235:in `watch' 11 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/plugin.rb:107:in `method_missing' 12 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/exec.rb:445:in `watch_or_update' 13 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/exec.rb:307:in `process_result' 14 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/exec.rb:41:in `parse' 15 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/lib/sass/exec.rb:21:in `parse!' 16 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/gems/sass-3.2.7/bin/sass:9:in `' 17 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/bin/sass:19:in `load' 18 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/bin/sass:19:in `
' 19 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `eval' 20 | /Users/mrmrs/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `
' 21 | */ 22 | body:before { 23 | white-space: pre; 24 | font-family: monospace; 25 | content: "Errno::ENOENT: No such file or directory - sass"; } 26 | -------------------------------------------------------------------------------- /_posts/2013-05-20-front-end-vim-commands.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Vim commands for HTML and CSS vol.1" 3 | layout: post 4 | --- 5 | 6 |

None of these commands require any vim plugins. They should work in all stock versions of vim.

7 | 8 | 1. Deleting an attribute and its values 9 | i.e class="site-nav footer" or title="Sample title for an image" 10 | 11 | 2df" 12 | 13 | 14 | 2. Delete from cursor up to and including the last line on the screen 15 | 16 | dL 17 | 18 | 19 | 3. Copy entire file to buffer 20 | 21 | ggyG 22 | 23 | 24 | 4. Change all instances of a class name in both html files and css 25 | From terminal you'll need to put all html and css files you wish to edit into buffers 26 | 27 | vi *.html css/* 28 | 29 |

Then in vim

30 | 31 | :bufdo %s/sampleClassName/newClassName/ge | update 32 | 33 | 34 | 5. Delete from cursor to end of css property value pair 35 | Especially helpful if editing several property values on one line i.e .class { text-align: center; font-size: 24px; } 36 | 37 | df; 38 | 39 | 40 | 6. Remove all classes from markup in a file 41 | 42 | :%s/\ class=".*"//g 43 | 44 | 45 | 7. Remove all ids from markup in a file 46 | 47 | :%s/\ id=".*"//g 48 | 49 | 50 | 8. Remove all classes from markup in all files in buffer 51 | 52 | :bufdo %s/\ class=".*"//ge | update 53 | 54 | 55 | 9. Remove all ids from markup in all files in buffer 56 | 57 | :bufdo %s/\ id=".*"//ge | update 58 | 59 | 60 | 10. Swapping two letters to correct a typo 61 | For example if you type http:s//someurl.com/login 62 | 63 | With your cursor on : type xp 64 | 65 | 66 | -------------------------------------------------------------------------------- /_sass/_nav.scss: -------------------------------------------------------------------------------- 1 | nav[role="navigation"] li, 2 | ul.social li { 3 | display:inline-block; 4 | font-size:$type-4; 5 | //border-right: 1px solid #ddd; 6 | 7 | &:last-child { 8 | border-right: none; 9 | } 10 | a { 11 | font-weight:100; 12 | color:$grey-medium; 13 | display:block; 14 | padding-right:1em; 15 | text-decoration: none; 16 | &:hover, 17 | &:focus { 18 | color:$orange; 19 | } 20 | &:active { 21 | color: #666; 22 | } 23 | } 24 | } 25 | 26 | .horizontal { 27 | li {display:inline-block;} 28 | li a { 29 | padding:.5em 1em; 30 | border-radius:4px; 31 | background:#eee; 32 | outline:1px solid #e3e3e3; 33 | text-decoration:none; 34 | } 35 | } 36 | 37 | .site-footer { 38 | border-top:1px solid #ccc; 39 | margin:0; 40 | bottom:0; 41 | font-size:$type-5; 42 | 43 | li { 44 | display:inline-block; 45 | line-height:3; 46 | margin-right:20px; 47 | margin-bottom:10px; 48 | } 49 | 50 | li a { 51 | padding:16px; 52 | border-radius:3px; 53 | color:#ababab; 54 | letter-spacing:.2em; 55 | font-weight:100; 56 | -webkit-transition:border ease-out .6s, background ease-out .6s; 57 | border:1px solid transparent; 58 | &:hover { 59 | /* 60 | background-color:rgba(255,255,255,0.7); 61 | -webkit-transition:background-color, .6s; 62 | transition:background-color, .6s; 63 | */ 64 | cursor: pointer; 65 | border:1px solid darken($primary-color, 10%); 66 | background: rgba(255,255,255,0.7); 67 | -webkit-transition: border ease-out .6s, 68 | background ease-out .6s; 69 | } 70 | } 71 | .footer-link { 72 | letter-spacing:.2em; 73 | margin-top:20px; 74 | border-top:1px solid #fff; 75 | text-align:center; 76 | display:block; 77 | width:100%; 78 | color:#999; 79 | padding-top:20px; 80 | padding-bottom:20px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /_posts/2013-05-01-essential-vim-plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Essential Vim plugins for front-end developers" 3 | layout: post 4 | --- 5 | 6 | As a front-end developer I've found these plug-ins to be quite wonderful. While 7 | I'm comfortable running stock vim - I prefer to have these as a part of my 8 | setup. 9 | 10 | [pathogen](https://github.com/tpope/vim-pathogen/ "Pathogen - Manage your vim plugins") 11 | Manage your vim plugins. Some of the new hipster kids use vundle or something - 12 | but pathogen has always handled anything I've needed from a vim package manager. 13 | 14 | [gundo](https://github.com/sjl/gundo.vim/ "Gundo - Visualize your history") 15 | Visualize your undo tree with ease. Vims undo tree is much more verbose then people realize. 16 | As a result it's incredibly powerful. Visualizing it is incredibly helpful in 17 | fully utilizing the full power of vims history. I'd also recommend setting your 18 | .vimrc to have a history greater than the default 20. I like to keep a long 19 | paper trail so I have this in my .vimrc 20 | 21 | set history=1024 22 | 23 | 24 | Why 1024 you ask? It's just a large, nice round number I like that has served me 25 | quite well. I don't know about you but I generally need way more than 20 undo 26 | states. 27 | 28 | [ctrlp](https://github.com/kien/ctrlp.vim/ "ctrlp - fuzzy finder") 29 | Full path fuzzy file, buffer, mru, tag, ... finder for Vim. The quickest way to 30 | get around if you know what you're kind of looking for. 31 | I have this mapped to 'ff' in my .vimrc like so 32 | 33 | nnoremap ff :CtrlP 34 | 35 | ff is right on my homerow and for some reason ff means "fuzzy find" in my mind 36 | so it's easy to remember. But you could map it to anything you fancy. 37 | 38 | Often times people want a directory tree to navigate for files. 39 | This seems like a silly way to find files if you ask me. It involves a lot of cognitive load. 40 | If you are browsing an unknown file structure though and that is what you want, I'd 41 | suggest using something like 42 | 43 | :e . 44 | 45 | as opposed to a plugin like nerdtree. 46 | 47 | [Fugitive](https://github.com/tpope/vim-fugitive, "Fugitive - a Git wrapper for Vim") 48 | If you use Vim for source control - I'd suggest installing this. :Gbrowse alone 49 | is worth the price of admission. :Gbrowse will open that file on github in your 50 | default browser. 51 | 52 | [Snipmate](https://github.com/garbas/vim-snipmate, "Snippets for Vim") 53 | I fell in love with snippets when I first started to use textmate forever ago. 54 | This is basically snippet syntax support for vim. 55 | 56 | [Zencoding](https://github.com/mattn/zencoding-vim, "Vim port of Emmet") 57 | While Emmet isn't officially available on vim - it does have a zen-coding fork 58 | that strives for feature parity with Emmet. It's a great way to edit/generate 59 | large blocks of css and html. 60 | 61 | [Multiple Cursors](https://github.com/terryma/vim-multiple-cursors, "Multiple 62 | Cursors") 63 | Have you ever wanted to edit more than one of line of text at the same time? 64 | This is helpful for that. The repo has some great demos. I'd also suggest 65 | learning regex. But that's a much longer post. 66 | -------------------------------------------------------------------------------- /_sass/_type.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | TYPOGRAPHY 3 | ========================================================================== */ 4 | 5 | body { 6 | font-family:baskerville; 7 | border-top:4px solid #111; 8 | position:relative; 9 | background:$primary-color; 10 | } 11 | .sans-serif {font-family:"proxima-nova",helvetica,arial;} 12 | 13 | .content-wrapper { 14 | top:0; 15 | min-height:680px; 16 | background:#fff; 17 | height:100%; 18 | overflow:hidden; 19 | } 20 | 21 | h1,h2,h3,h4,h5,h6 { 22 | font-weight:100; 23 | font-family:baskerville; 24 | text-transform:uppercase; 25 | } 26 | 27 | // I mean it's not that big. 28 | 29 | h1,.h2,.h3,.h4,.h5,.h6 { 30 | margin-bottom:.25em; 31 | } 32 | 33 | h1,.h1 { 34 | font-size:$type-4; 35 | } 36 | 37 | h2,.h2 { 38 | font-size:$type-2; 39 | } 40 | 41 | h3,.h3 { 42 | font-size:$type-3; 43 | } 44 | 45 | h4,.h4 { 46 | font-size:$type-4; 47 | font-weight:900; 48 | } 49 | 50 | h5,.h5 { 51 | font-size:$type-4; 52 | font-style:italic; 53 | } 54 | 55 | h6,.h6 { 56 | font-size:$type-5; 57 | } 58 | 59 | p { 60 | font-size:$copy; 61 | line-height:$copy-line-height; 62 | + p { 63 | margin-top:1em; 64 | } 65 | } 66 | 67 | .intro { 68 | font-size:$type-3; 69 | } 70 | 71 | .article-header { 72 | border-bottom:1px solid #ccc; 73 | padding-bottom:2em; 74 | padding-top:1em; 75 | } 76 | 77 | .post { 78 | h1 { 79 | letter-spacing:.1em; 80 | padding:0; 81 | margin:0; 82 | line-height:1.5; 83 | @include breakpoint(one-hand) { 84 | font-size:$type-3; 85 | } 86 | h2 {margin:0;} 87 | } 88 | footer { 89 | color:$grey-light; 90 | } 91 | } 92 | 93 | .h1-r { 94 | @include breakpoint(one-hand) { 95 | font-size:$type-2; 96 | } 97 | } 98 | 99 | // Uh you don't need to read this stuff. Let's make it small. 100 | .meta { 101 | font-size:$type-5; 102 | } 103 | 104 | .ct { 105 | text-align:center; 106 | @include breakpoint(one-hand) { 107 | text-align:left; 108 | } 109 | } 110 | 111 | blockquote { 112 | margin:0; 113 | padding:0 0 1em 0; 114 | font-style:italic; 115 | @include breakpoint(one-hand) { 116 | padding:0; 117 | } 118 | p { 119 | font-size:$type-2; 120 | @include breakpoint(one-hand) { 121 | font-size:$type-3; 122 | } 123 | } 124 | footer,footer a { 125 | font-size:$type-4; 126 | line-height:2; 127 | text-decoration:none; 128 | color:#999; 129 | } 130 | } 131 | 132 | em { 133 | font-style:italic; 134 | } 135 | 136 | .bump-it { 137 | font-size:$type-3; 138 | margin-bottom:1em; 139 | } 140 | 141 | .author { 142 | text-transform:uppercase; 143 | } 144 | 145 | date { 146 | color:$grey-medium; 147 | } 148 | 149 | ol { 150 | font-size:$copy; 151 | } 152 | 153 | strong { 154 | font-weight:600; 155 | } 156 | 157 | .title-spacing { 158 | letter-spacing:.1em; 159 | } 160 | 161 | .tracking-supreme {letter-spacing:2em;} 162 | .lh-2 {line-height:2;} 163 | .caps {text-transform:uppercase;} 164 | .db {display:block;} 165 | .dbf {width:100%;display:block;} 166 | .page-time {display:block;vertical-align:bottom;float:right;margin-right:20px;height:48px;margin-top:24px;} 167 | .center {text-align:center;} 168 | .section-padding {padding:40px 20px;} 169 | .fr {float:right;} 170 | -------------------------------------------------------------------------------- /_posts/2015-manage-vim-2.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "File management in Vim. An introduction." 3 | layout: posts 4 | --- 5 | 6 | # Square One 7 | 8 | There are many different ways to open files and set up your working environment. 9 | This is not a comprehensive list of ways to open and manage files in vim. It IS 10 | a comprehensive list of the way in which I open and manage files in vim. 11 | 12 | I use terminal vim, so all instructions are, for terminal vim. I also personally 13 | alias vi to vim, but for clarity I will reference Vi Improved on the command 14 | line. Just know that I'm not typing three characters every time. That would be 15 | the worst. Also, until later in the post when I explicitly declare it, I will be 16 | using this as my .vimrc and nothing more (no plugins). 17 | 18 | ``` 19 | set nocompatible " Uses vim vs vi settings must be set first 20 | syntax on " Turn on syntax highlighting for recognized filetypes 21 | set history=1000 " Default is 20, I'd rather set this to ∞ 22 | ``` 23 | 24 | We must walk before we can run, so let's get going. 25 | 26 | ### 1. Opening a single file 27 | ``` 28 | vim filename 29 | ``` 30 | 31 | Awesome that is easy enough but not very powerful. 32 | 33 | ### 2. Opening more than one file 34 | ``` 35 | vim filename1 filename2 filenameN 36 | ``` 37 | 38 | What this does is open up multiple files. But gasp, you can only see one? Why is 39 | that? Well the other files are in hidden buffers. Okay, let's try to navigate 40 | around a little bit with three files open shall we? 41 | 42 | ### 2a. What the fuck did I just open? 43 | I can't remember, seriously, what list of documents I just had vim open in 44 | separate buffers. Ok, run this mindblowing command. 45 | 46 | ``` 47 | :buffers 48 | ``` 49 | 50 | This will output a list of buffers (with assigned numbers! oh how useful). 51 | So now we can run something like this 52 | 53 | ``` 54 | :buffer 3 55 | ``` 56 | 57 | This will, wait for it, switch the window to display the file stored in "buffer 58 | 3." Okay, so you went to buffer 3. But you didn't want buffer 3, you totally 59 | meant to go to buffer 2. Now, currently we are only dealing with three buffers right now, but 60 | if you're like me you often have many files in buffer at any given point in 61 | time. So instead of navigating to buffer 2 by using :buffer 2 - we're going to 62 | do something even crazier. 63 | 64 | ``` 65 | :bp 66 | ``` 67 | 68 | Wait, what the fuck does that do? It brings you to the previous buffer. Note, 69 | that it's not the previously VIEWED buffer. It's the previous buffer in the list 70 | of buffers. :bp stands for :bufferprevious, which is also a valid command but is 71 | SO many characters to type and I'm lazy. Note, vim commands will tab complete so 72 | you can write :bu. Doing this you might notice :buffernext or :bn for 73 | short. This will, crazy I know, switch to the next buffer. 74 | 75 | So now we can make the window display a single file in buffer at a time. And 76 | hopefully we can switch between those buffers with some amount of ease. 77 | 78 | Now I don't know about everyone else but I generally like to look at more than 79 | one file at a time. Or I like to look at the same file but it's a super long 80 | file and I want to look at the top and bottom at the same time. 81 | 82 | Just so we are on the same page let's all switch to first file in our list of 83 | buffers by running yet ANOTHER command. 84 | 85 | ``` 86 | :bfirst 87 | ``` 88 | 89 | 90 | -------------------------------------------------------------------------------- /_sass/_syntax.scss: -------------------------------------------------------------------------------- 1 | .hll { background-color: #333333 } 2 | .c { color: #008800; font-style: italic; background-color: #0f140f } /* Comment */ 3 | .err { color: #ffffff } /* Error */ 4 | .g { color: #ffffff } /* Generic */ 5 | .k { color: #fb660a; font-weight: bold } /* Keyword */ 6 | .l { color: #ffffff } /* Literal */ 7 | .n { color: #ffffff } /* Name */ 8 | .o { color: #ffffff } /* Operator */ 9 | .x { color: #ffffff } /* Other */ 10 | .p { color: #ffffff } /* Punctuation */ 11 | .cm { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Multiline */ 12 | .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */ 13 | .c1 { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Single */ 14 | .cs { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Special */ 15 | .gd { color: #ffffff } /* Generic.Deleted */ 16 | .ge { color: #ffffff } /* Generic.Emph */ 17 | .gr { color: #ffffff } /* Generic.Error */ 18 | .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */ 19 | .gi { color: #ffffff } /* Generic.Inserted */ 20 | .go { color: #444444; background-color: #222222 } /* Generic.Output */ 21 | .gp { color: #ffffff } /* Generic.Prompt */ 22 | .gs { color: #ffffff } /* Generic.Strong */ 23 | .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */ 24 | .gt { color: #ffffff } /* Generic.Traceback */ 25 | .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */ 26 | .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */ 27 | .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */ 28 | .kp { color: #fb660a } /* Keyword.Pseudo */ 29 | .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */ 30 | .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */ 31 | .ld { color: #ffffff } /* Literal.Date */ 32 | .m { color: #0086f7; font-weight: bold } /* Literal.Number */ 33 | .s { color: #0086d2 } /* Literal.String */ 34 | .na { color: #ff0086; font-weight: bold } /* Name.Attribute */ 35 | .nb { color: #ffffff } /* Name.Builtin */ 36 | .nc { color: #ffffff } /* Name.Class */ 37 | .no { color: #0086d2 } /* Name.Constant */ 38 | .nd { color: #ffffff } /* Name.Decorator */ 39 | .ni { color: #ffffff } /* Name.Entity */ 40 | .ne { color: #ffffff } /* Name.Exception */ 41 | .nf { color: #ff0086; font-weight: bold } /* Name.Function */ 42 | .nl { color: #ffffff } /* Name.Label */ 43 | .nn { color: #ffffff } /* Name.Namespace */ 44 | .nx { color: #ffffff } /* Name.Other */ 45 | .py { color: #ffffff } /* Name.Property */ 46 | .nt { color: #fb660a; font-weight: bold } /* Name.Tag */ 47 | .nv { color: #fb660a } /* Name.Variable */ 48 | .ow { color: #ffffff } /* Operator.Word */ 49 | .w { color: #888888 } /* Text.Whitespace */ 50 | .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */ 51 | .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */ 52 | .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */ 53 | .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */ 54 | .sb { color: #0086d2 } /* Literal.String.Backtick */ 55 | .sc { color: #0086d2 } /* Literal.String.Char */ 56 | .sd { color: #0086d2 } /* Literal.String.Doc */ 57 | .s2 { color: #0086d2 } /* Literal.String.Double */ 58 | .se { color: #0086d2 } /* Literal.String.Escape */ 59 | .sh { color: #0086d2 } /* Literal.String.Heredoc */ 60 | .si { color: #0086d2 } /* Literal.String.Interpol */ 61 | .sx { color: #0086d2 } /* Literal.String.Other */ 62 | .sr { color: #0086d2 } /* Literal.String.Regex */ 63 | .s1 { color: #0086d2 } /* Literal.String.Single */ 64 | .ss { color: #0086d2 } /* Literal.String.Symbol */ 65 | .bp { color: #ffffff } /* Name.Builtin.Pseudo */ 66 | .vc { color: #fb660a } /* Name.Variable.Class */ 67 | .vg { color: #fb660a } /* Name.Variable.Global */ 68 | .vi { color: #fb660a } /* Name.Variable.Instance */ 69 | .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */ 70 | -------------------------------------------------------------------------------- /_posts/2015-01-01-managing-vim.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "File management in Vim. An introduction." 3 | layout: posts 4 | --- 5 | 6 | # Square One 7 | 8 | There are many different ways to open files and set up your working environment. 9 | This is not a comprehensive list of ways to open and manage files in vim. It IS 10 | a comprehensive list of the way in which I open and manage files in vim. 11 | 12 | I use terminal vim, so all instructions are, for terminal vim. I also personally 13 | alias vi to vim, but for clarity I will reference Vi Improved on the command 14 | line. Just know that I'm not typing three characters every time. That would be 15 | the worst. Also, until later in the post when I explicitly declare it, I will be 16 | using this as my .vimrc and nothing more (no plugins). 17 | 18 | ``` 19 | set nocompatible " Uses vim vs vi settings must be set first 20 | syntax on " Turn on syntax highlighting for recognized filetypes 21 | set history=1000 " Default is 20, I'd rather set this to ∞ 22 | ``` 23 | 24 | We must walk before we can run, so let's get going. 25 | 26 | ### 1. Opening a single file 27 | ``` 28 | vim filename 29 | ``` 30 | 31 | Awesome that is easy enough but not very powerful. 32 | 33 | ### 2. Opening more than one file 34 | ``` 35 | vim filename1 filename2 filenameN 36 | ``` 37 | 38 | What this does is open up multiple files. But gasp, you can only see one? Why is 39 | that? Well the other files are in hidden buffers. Okay, let's try to navigate 40 | around a little bit with three files open shall we? 41 | 42 | ### 2a. What the fuck did I just open? 43 | I can't remember, seriously, what list of documents I just had vim open in 44 | separate buffers. Ok, run this mindblowing command. 45 | 46 | ``` 47 | :buffers 48 | ``` 49 | 50 | This will output a list of buffers (with assigned numbers! oh how useful). 51 | So now we can run something like this 52 | 53 | ``` 54 | :buffer 3 55 | ``` 56 | 57 | This will, wait for it, switch the window to display the file stored in "buffer 58 | 3." But that is A LOT of characters to type. So maybe instead we should use the 59 | short-hand command. 60 | 61 | ``` 62 | :b 3 63 | ``` 64 | 65 | Ahh that feels better. 66 | 67 | Okay, so you went to buffer 3. But you didn't want buffer 3, you totally 68 | meant to go to buffer 2. Now, currently we are only dealing with three buffers right now, but 69 | if you're like me you often have many files in buffer at any given point in 70 | time. So instead of navigating to buffer 2 by using :buffer 2 - we're going to 71 | do something even crazier. 72 | 73 | ``` 74 | :bp 75 | ``` 76 | 77 | Wait, what the fuck does that do? It brings you to the previous buffer. Note, 78 | that it's not the previously VIEWED buffer. It's the previous buffer in the list 79 | of buffers. :bp stands for :bufferprevious, which is also a valid command but is 80 | SO many characters to type and I'm lazy. Note, vim commands will tab complete so 81 | you can write :bu. Doing this you might notice :buffernext or :bn for 82 | short. This will, crazy I know, switch to the next buffer. But wait what if you 83 | do want to open up the last file you just looked at? I got you, just do this: 84 | 85 | ``` 86 | :e# 87 | ``` 88 | 89 | So now we can make the window display a single file in buffer at a time. And 90 | hopefully we can switch between those buffers with some amount of ease. 91 | 92 | Now I don't know about everyone else but I generally like to look at more than 93 | one file at a time. Or I like to look at the same file but it's a super long 94 | file and I want to look at the top and bottom at the same time. 95 | 96 | Just so we are on the same page let's all switch to first file in our list of 97 | buffers by running either 98 | 99 | ``` 100 | :bfirst 101 | ``` 102 | 103 | or 104 | 105 | ``` 106 | :brewind 107 | ``` 108 | 109 | Okay so now we are looking at buffer 1. Sometimes files get long. Really long. 110 | And computer screens are only so tall. Welcome to the world of splits. This, as 111 | they say is where the plot thickens. 112 | 113 | Let's keep it simple at first and just split the file that is currently 114 | displayed in our window. 115 | 116 | ``` 117 | :sp 118 | ``` 119 | 120 | I'm guessing sp stands for something like "split." This will cause the current file to split horizontally across the window. 121 | This is generally how I split html/templating files because, depending on the 122 | content those can tend to be wider in text length than css/scss files. 123 | 124 | Now you probably want to know - how do I get to that other split man. THAT is a 125 | good question. I know we haven't covered it yet but I'm assuming you know how to 126 | navigate left/up/down/right using the corresponding h/j/k/l keys. To switch your 127 | active split just type control and w at the same time - then press one of the 128 | hjkl keys. The other thing to do is +w w - that will just go to the next 129 | split. So if you aren't lazy and don't want to do it efficiently then you can 130 | just keep pressing +w w over and over again to cycle through splits. 131 | 132 | ``` 133 | +w [hjklw] 134 | ``` 135 | 136 | Okay so now we can cycle through the two splits we have. But this is still ONLY 137 | ONE FILE. Just stick with me for one more minute before we get into lots of 138 | files. 139 | 140 | Okay so when I'm splitting css files I normally like don't like to split them 141 | horizontally. I like to split them vertically. The content is narrow and I can 142 | generally get several vertical splits going without truncating/wrapping lines of 143 | code. 144 | 145 | Now try typing this 146 | 147 | ``` 148 | :vsp 149 | ``` 150 | 151 | Yeah nice right? Do it AGAIN 152 | 153 | ``` 154 | :vsp 155 | ``` 156 | 157 | You can do this pretty much forever. 158 | Okay - now let's close a few of these splits. Because now I'm looking at the 159 | same file in four different splits and I don't want to do that anymore. 160 | 161 | ``` 162 | :q 163 | ``` 164 | 165 | That will close the split. Quit doesn't quit out of vim, it just quits showing 166 | you that buffer. Now if you want to save before you quit out of that file just 167 | do 168 | 169 | ``` 170 | :wq 171 | ``` 172 | 173 | Okay now run quit again on that split to get us back to having two horizontal 174 | splits of the same file. Oh man - that kind of sucked. It's like I had all these 175 | splits open and closing them one by one is cool functionality but you know what 176 | else would be cool? Only leaving open the split I'm currently on. Of course 177 | there is a way to quickly do that 178 | 179 | ``` 180 | :only 181 | ``` 182 | 183 | Okay if you just ran that hit :sp again. Because we want two splits of the same 184 | file. 185 | 186 | It's time to level up. Let's show two different files in these two splits we 187 | currently have. So what we are going to do is - replace the content of one of 188 | the splits so to speak. There are SO many ways to do this. And guess what the 189 | best part is? You already know how to do a bunch of them. Like this 190 | 191 | ``` 192 | :bn 193 | ``` 194 | 195 | Okay so we just loaded the "next buffer" into our window split. Awesome. Hmm 196 | what else can we do here? Well unix and vim are pretty great. They tab complete 197 | a lot of available options. If I launched vim from the root of a project I might 198 | try to do something like 199 | 200 | ``` 201 | :sp 202 | ``` 203 | 204 | Woah! It's a list of options. Go ahead tab through to the option you want and 205 | hit enter. If this still doesn't sound exciting and powerful don't worry we are 206 | just getting warmed up. 207 | 208 | :sp and :vsp can be passed a file name OR a path - which then puts you in the 209 | context of navigating a file structure but with vim commands. Your typical hjkl 210 | movment commands work as well as search using /. Hitting enter will open a file 211 | or folder. So maybe if I know the name of the file I want to work on with the 212 | path I'd run something like: 213 | 214 | ``` 215 | :sp css/styles.css 216 | ``` 217 | 218 | This would open a horizontal split with the given filename. Now you can only do 219 | one file at a time this way which in my opinion kind of blows but we'll deal 220 | with that later. 221 | 222 | But what about all that buffer stuff we learned earlier? What if you want to 223 | create a split with the number of a buffer? Doing :sp buffer 1 won't help you. I 224 | learned that the hard way. No instead you can do 225 | 226 | ``` 227 | :sbuffer 3 (or whatever number you are looking for) 228 | ``` 229 | 230 | Wait, sbuffer seems too long. Fuck. Hmmmm let's grock this together. So :b works 231 | in place of :buffer ...maybe :sb will work insteab of :sbuffer. 232 | 233 | ``` 234 | :sb 3 235 | ``` 236 | 237 | It did work! 238 | 239 | Okay now we have two splits open of different files. 240 | 241 | -------------------------------------------------------------------------------- /_sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Prevent iOS text size adjust after orientation change, without disabling 60 | * user zoom. 61 | */ 62 | 63 | html { 64 | font-family: serif; 65 | -webkit-text-size-adjust: 100%; /* 1 */ 66 | -ms-text-size-adjust: 100%; /* 1 */ 67 | } 68 | 69 | /** 70 | * Remove default margin. 71 | */ 72 | 73 | body { 74 | margin: 0; 75 | } 76 | 77 | /* ========================================================================== 78 | Links 79 | ========================================================================== */ 80 | 81 | /** 82 | * Address `outline` inconsistency between Chrome and other browsers. 83 | */ 84 | 85 | a:focus { 86 | outline: thin dotted; 87 | } 88 | 89 | /** 90 | * Improve readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* ========================================================================== 99 | Typography 100 | ========================================================================== */ 101 | 102 | /** 103 | * Address variable `h1` font-size and margin within `section` and `article` 104 | * contexts in Firefox 4+, Safari 5, and Chrome. 105 | */ 106 | 107 | h1 { 108 | font-size: 2em; 109 | margin: 0.67em 0; 110 | } 111 | 112 | /** 113 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 114 | */ 115 | 116 | abbr[title] { 117 | border-bottom: 1px dotted; 118 | } 119 | 120 | /** 121 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 122 | */ 123 | 124 | b, 125 | strong { 126 | font-weight: bold; 127 | } 128 | 129 | /** 130 | * Address styling not present in Safari 5 and Chrome. 131 | */ 132 | 133 | dfn { 134 | font-style: italic; 135 | } 136 | 137 | /** 138 | * Address differences between Firefox and other browsers. 139 | */ 140 | 141 | hr { 142 | -moz-box-sizing: content-box; 143 | box-sizing: content-box; 144 | height: 0; 145 | } 146 | 147 | /** 148 | * Address styling not present in IE 8/9. 149 | */ 150 | 151 | mark { 152 | background: #ff0; 153 | color: #000; 154 | } 155 | 156 | /** 157 | * Correct font family set oddly in Safari 5 and Chrome. 158 | */ 159 | 160 | code, 161 | kbd, 162 | pre, 163 | samp { 164 | font-family: monospace, serif; 165 | font-size: 1em; 166 | } 167 | 168 | /** 169 | * Improve readability of pre-formatted text in all browsers. 170 | */ 171 | 172 | pre { 173 | white-space: pre-wrap; 174 | } 175 | 176 | /** 177 | * Set consistent quote types. 178 | */ 179 | 180 | q { 181 | quotes: "\201C" "\201D" "\2018" "\2019"; 182 | } 183 | 184 | /** 185 | * Address inconsistent and variable font size in all browsers. 186 | */ 187 | 188 | small { 189 | font-size: 80%; 190 | } 191 | 192 | /** 193 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 194 | */ 195 | 196 | sub, 197 | sup { 198 | font-size: 75%; 199 | line-height: 0; 200 | position: relative; 201 | vertical-align: baseline; 202 | } 203 | 204 | sup { 205 | top: -0.5em; 206 | } 207 | 208 | sub { 209 | bottom: -0.25em; 210 | } 211 | 212 | /* ========================================================================== 213 | Embedded content 214 | ========================================================================== */ 215 | 216 | /** 217 | * Remove border when inside `a` element in IE 8/9. 218 | */ 219 | 220 | img { 221 | border: 0; 222 | } 223 | 224 | /** 225 | * Correct overflow displayed oddly in IE 9. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* ========================================================================== 233 | Figures 234 | ========================================================================== */ 235 | 236 | /** 237 | * Address margin not present in IE 8/9 and Safari 5. 238 | */ 239 | 240 | figure { 241 | margin: 0; 242 | } 243 | 244 | /* ========================================================================== 245 | Forms 246 | ========================================================================== */ 247 | 248 | /** 249 | * Define consistent border, margin, and padding. 250 | */ 251 | 252 | fieldset { 253 | border: 1px solid #c0c0c0; 254 | margin: 0 2px; 255 | padding: 0.35em 0.625em 0.75em; 256 | } 257 | 258 | /** 259 | * 1. Correct `color` not being inherited in IE 8/9. 260 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 261 | */ 262 | 263 | legend { 264 | border: 0; /* 1 */ 265 | padding: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * 1. Correct font family not being inherited in all browsers. 270 | * 2. Correct font size not being inherited in all browsers. 271 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 272 | */ 273 | 274 | button, 275 | input, 276 | select, 277 | textarea { 278 | font-family: inherit; /* 1 */ 279 | font-size: 100%; /* 2 */ 280 | margin: 0; /* 3 */ 281 | } 282 | 283 | /** 284 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 285 | * the UA stylesheet. 286 | */ 287 | 288 | button, 289 | input { 290 | line-height: normal; 291 | } 292 | 293 | /** 294 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 295 | * All other form control elements do not inherit `text-transform` values. 296 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 297 | * Correct `select` style inheritance in Firefox 4+ and Opera. 298 | */ 299 | 300 | button, 301 | select { 302 | text-transform: none; 303 | } 304 | 305 | /** 306 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 307 | * and `video` controls. 308 | * 2. Correct inability to style clickable `input` types in iOS. 309 | * 3. Improve usability and consistency of cursor style between image-type 310 | * `input` and others. 311 | */ 312 | 313 | button, 314 | html input[type="button"], /* 1 */ 315 | input[type="reset"], 316 | input[type="submit"] { 317 | -webkit-appearance: button; /* 2 */ 318 | cursor: pointer; /* 3 */ 319 | } 320 | 321 | /** 322 | * Re-set default cursor for disabled elements. 323 | */ 324 | 325 | button[disabled], 326 | html input[disabled] { 327 | cursor: default; 328 | } 329 | 330 | /** 331 | * 1. Address box sizing set to `content-box` in IE 8/9. 332 | * 2. Remove excess padding in IE 8/9. 333 | */ 334 | 335 | input[type="checkbox"], 336 | input[type="radio"] { 337 | box-sizing: border-box; /* 1 */ 338 | padding: 0; /* 2 */ 339 | } 340 | 341 | /** 342 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 343 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 344 | * (include `-moz` to future-proof). 345 | */ 346 | 347 | input[type="search"] { 348 | -webkit-appearance: textfield; /* 1 */ 349 | -moz-box-sizing: content-box; 350 | -webkit-box-sizing: content-box; /* 2 */ 351 | box-sizing: content-box; 352 | } 353 | 354 | /** 355 | * Remove inner padding and search cancel button in Safari 5 and Chrome 356 | * on OS X. 357 | */ 358 | 359 | input[type="search"]::-webkit-search-cancel-button, 360 | input[type="search"]::-webkit-search-decoration { 361 | -webkit-appearance: none; 362 | } 363 | 364 | /** 365 | * Remove inner padding and border in Firefox 4+. 366 | */ 367 | 368 | button::-moz-focus-inner, 369 | input::-moz-focus-inner { 370 | border: 0; 371 | padding: 0; 372 | } 373 | 374 | /** 375 | * 1. Remove default vertical scrollbar in IE 8/9. 376 | * 2. Improve readability and alignment in all browsers. 377 | */ 378 | 379 | textarea { 380 | overflow: auto; /* 1 */ 381 | vertical-align: top; /* 2 */ 382 | } 383 | 384 | /* ========================================================================== 385 | Tables 386 | ========================================================================== */ 387 | 388 | /** 389 | * Remove most spacing between table cells. 390 | */ 391 | 392 | table { 393 | border-collapse: collapse; 394 | border-spacing: 0; 395 | } 396 | 397 | /* ========================================================================== 398 | More Reset than Normalize 399 | ========================================================================== */ 400 | 401 | ul { 402 | list-style-type:none; 403 | margin:1em 0; 404 | padding:0; 405 | } 406 | 407 | /* ========================================================================== 408 | Better Box Model 409 | ========================================================================== */ 410 | 411 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 412 | -------------------------------------------------------------------------------- /css/i.css: -------------------------------------------------------------------------------- 1 | /* normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | /* ========================================================================== 3 | HTML5 display definitions 4 | ========================================================================== */ 5 | /** 6 | * Correct `block` display not defined in IE 8/9. 7 | */ 8 | article, 9 | aside, 10 | details, 11 | figcaption, 12 | figure, 13 | footer, 14 | header, 15 | hgroup, 16 | main, 17 | nav, 18 | section, 19 | summary { 20 | display: block; } 21 | 22 | /** 23 | * Correct `inline-block` display not defined in IE 8/9. 24 | */ 25 | audio, 26 | canvas, 27 | video { 28 | display: inline-block; } 29 | 30 | /** 31 | * Prevent modern browsers from displaying `audio` without controls. 32 | * Remove excess height in iOS 5 devices. 33 | */ 34 | audio:not([controls]) { 35 | display: none; 36 | height: 0; } 37 | 38 | /** 39 | * Address styling not present in IE 8/9. 40 | */ 41 | [hidden] { 42 | display: none; } 43 | 44 | /* ========================================================================== 45 | Base 46 | ========================================================================== */ 47 | /** 48 | * 1. Prevent iOS text size adjust after orientation change, without disabling 49 | * user zoom. 50 | */ 51 | html { 52 | font-family: serif; 53 | -webkit-text-size-adjust: 100%; 54 | /* 1 */ 55 | -ms-text-size-adjust: 100%; 56 | /* 1 */ } 57 | 58 | /** 59 | * Remove default margin. 60 | */ 61 | body { 62 | margin: 0; } 63 | 64 | /* ========================================================================== 65 | Links 66 | ========================================================================== */ 67 | /** 68 | * Address `outline` inconsistency between Chrome and other browsers. 69 | */ 70 | a:focus { 71 | outline: thin dotted; } 72 | 73 | /** 74 | * Improve readability when focused and also mouse hovered in all browsers. 75 | */ 76 | a:active, 77 | a:hover { 78 | outline: 0; } 79 | 80 | /* ========================================================================== 81 | Typography 82 | ========================================================================== */ 83 | /** 84 | * Address variable `h1` font-size and margin within `section` and `article` 85 | * contexts in Firefox 4+, Safari 5, and Chrome. 86 | */ 87 | h1 { 88 | font-size: 2em; 89 | margin: 0.67em 0; } 90 | 91 | /** 92 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 93 | */ 94 | abbr[title] { 95 | border-bottom: 1px dotted; } 96 | 97 | /** 98 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 99 | */ 100 | b, 101 | strong { 102 | font-weight: bold; } 103 | 104 | /** 105 | * Address styling not present in Safari 5 and Chrome. 106 | */ 107 | dfn { 108 | font-style: italic; } 109 | 110 | /** 111 | * Address differences between Firefox and other browsers. 112 | */ 113 | hr { 114 | -moz-box-sizing: content-box; 115 | box-sizing: content-box; 116 | height: 0; } 117 | 118 | /** 119 | * Address styling not present in IE 8/9. 120 | */ 121 | mark { 122 | background: #ff0; 123 | color: #000; } 124 | 125 | /** 126 | * Correct font family set oddly in Safari 5 and Chrome. 127 | */ 128 | code, 129 | kbd, 130 | pre, 131 | samp { 132 | font-family: monospace, serif; 133 | font-size: 1em; } 134 | 135 | /** 136 | * Improve readability of pre-formatted text in all browsers. 137 | */ 138 | pre { 139 | white-space: pre-wrap; } 140 | 141 | /** 142 | * Set consistent quote types. 143 | */ 144 | q { 145 | quotes: "\201C" "\201D" "\2018" "\2019"; } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | small { 151 | font-size: 80%; } 152 | 153 | /** 154 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 155 | */ 156 | sub, 157 | sup { 158 | font-size: 75%; 159 | line-height: 0; 160 | position: relative; 161 | vertical-align: baseline; } 162 | 163 | sup { 164 | top: -0.5em; } 165 | 166 | sub { 167 | bottom: -0.25em; } 168 | 169 | /* ========================================================================== 170 | Embedded content 171 | ========================================================================== */ 172 | /** 173 | * Remove border when inside `a` element in IE 8/9. 174 | */ 175 | img { 176 | border: 0; } 177 | 178 | /** 179 | * Correct overflow displayed oddly in IE 9. 180 | */ 181 | svg:not(:root) { 182 | overflow: hidden; } 183 | 184 | /* ========================================================================== 185 | Figures 186 | ========================================================================== */ 187 | /** 188 | * Address margin not present in IE 8/9 and Safari 5. 189 | */ 190 | figure { 191 | margin: 0; } 192 | 193 | /* ========================================================================== 194 | Forms 195 | ========================================================================== */ 196 | /** 197 | * Define consistent border, margin, and padding. 198 | */ 199 | fieldset { 200 | border: 1px solid #c0c0c0; 201 | margin: 0 2px; 202 | padding: 0.35em 0.625em 0.75em; } 203 | 204 | /** 205 | * 1. Correct `color` not being inherited in IE 8/9. 206 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 207 | */ 208 | legend { 209 | border: 0; 210 | /* 1 */ 211 | padding: 0; 212 | /* 2 */ } 213 | 214 | /** 215 | * 1. Correct font family not being inherited in all browsers. 216 | * 2. Correct font size not being inherited in all browsers. 217 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 218 | */ 219 | button, 220 | input, 221 | select, 222 | textarea { 223 | font-family: inherit; 224 | /* 1 */ 225 | font-size: 100%; 226 | /* 2 */ 227 | margin: 0; 228 | /* 3 */ } 229 | 230 | /** 231 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 232 | * the UA stylesheet. 233 | */ 234 | button, 235 | input { 236 | line-height: normal; } 237 | 238 | /** 239 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 240 | * All other form control elements do not inherit `text-transform` values. 241 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 242 | * Correct `select` style inheritance in Firefox 4+ and Opera. 243 | */ 244 | button, 245 | select { 246 | text-transform: none; } 247 | 248 | /** 249 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 250 | * and `video` controls. 251 | * 2. Correct inability to style clickable `input` types in iOS. 252 | * 3. Improve usability and consistency of cursor style between image-type 253 | * `input` and others. 254 | */ 255 | button, 256 | html input[type="button"], 257 | input[type="reset"], 258 | input[type="submit"] { 259 | -webkit-appearance: button; 260 | /* 2 */ 261 | cursor: pointer; 262 | /* 3 */ } 263 | 264 | /** 265 | * Re-set default cursor for disabled elements. 266 | */ 267 | button[disabled], 268 | html input[disabled] { 269 | cursor: default; } 270 | 271 | /** 272 | * 1. Address box sizing set to `content-box` in IE 8/9. 273 | * 2. Remove excess padding in IE 8/9. 274 | */ 275 | input[type="checkbox"], 276 | input[type="radio"] { 277 | box-sizing: border-box; 278 | /* 1 */ 279 | padding: 0; 280 | /* 2 */ } 281 | 282 | /** 283 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 284 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 285 | * (include `-moz` to future-proof). 286 | */ 287 | input[type="search"] { 288 | -webkit-appearance: textfield; 289 | /* 1 */ 290 | -moz-box-sizing: content-box; 291 | -webkit-box-sizing: content-box; 292 | /* 2 */ 293 | box-sizing: content-box; } 294 | 295 | /** 296 | * Remove inner padding and search cancel button in Safari 5 and Chrome 297 | * on OS X. 298 | */ 299 | input[type="search"]::-webkit-search-cancel-button, 300 | input[type="search"]::-webkit-search-decoration { 301 | -webkit-appearance: none; } 302 | 303 | /** 304 | * Remove inner padding and border in Firefox 4+. 305 | */ 306 | button::-moz-focus-inner, 307 | input::-moz-focus-inner { 308 | border: 0; 309 | padding: 0; } 310 | 311 | /** 312 | * 1. Remove default vertical scrollbar in IE 8/9. 313 | * 2. Improve readability and alignment in all browsers. 314 | */ 315 | textarea { 316 | overflow: auto; 317 | /* 1 */ 318 | vertical-align: top; 319 | /* 2 */ } 320 | 321 | /* ========================================================================== 322 | Tables 323 | ========================================================================== */ 324 | /** 325 | * Remove most spacing between table cells. 326 | */ 327 | table { 328 | border-collapse: collapse; 329 | border-spacing: 0; } 330 | 331 | /* ========================================================================== 332 | More Reset than Normalize 333 | ========================================================================== */ 334 | ul { 335 | list-style-type: none; 336 | margin: 1em 0; 337 | padding: 0; } 338 | 339 | /* ========================================================================== 340 | Better Box Model 341 | ========================================================================== */ 342 | * { 343 | -moz-box-sizing: border-box; 344 | -webkit-box-sizing: border-box; 345 | box-sizing: border-box; } 346 | 347 | /* 348 | $secondary-color:; 349 | $tertiary-color:; 350 | 351 | $padding:; 352 | $margin:; 353 | 354 | */ 355 | .single-column { 356 | margin: 0 auto; 357 | padding: 1em; 358 | width: 100%; 359 | max-width: 768px !important; } 360 | 361 | /* ========================================================================== 362 | TYPOGRAPHY 363 | ========================================================================== */ 364 | body { 365 | font-family: baskerville; 366 | border-top: 4px solid #111; 367 | position: relative; 368 | background: #eeeeee; } 369 | 370 | .sans-serif { 371 | font-family: "proxima-nova",helvetica,arial; } 372 | 373 | .content-wrapper { 374 | top: 0; 375 | min-height: 680px; 376 | background: #fff; 377 | height: 100%; 378 | overflow: hidden; } 379 | 380 | h1, h2, h3, h4, h5, h6 { 381 | font-weight: 100; 382 | font-family: baskerville; 383 | text-transform: uppercase; } 384 | 385 | h1, .h2, .h3, .h4, .h5, .h6 { 386 | margin-bottom: .25em; } 387 | 388 | h1, .h1 { 389 | font-size: 24px; } 390 | 391 | h2, .h2 { 392 | font-size: 42px; } 393 | 394 | h3, .h3 { 395 | font-size: 32px; } 396 | 397 | h4, .h4 { 398 | font-size: 24px; 399 | font-weight: 900; } 400 | 401 | h5, .h5 { 402 | font-size: 24px; 403 | font-style: italic; } 404 | 405 | h6, .h6 { 406 | font-size: 16px; } 407 | 408 | p { 409 | font-size: 24px; 410 | line-height: 1.5; } 411 | p + p { 412 | margin-top: 1em; } 413 | 414 | .intro { 415 | font-size: 32px; } 416 | 417 | .article-header { 418 | border-bottom: 1px solid #ccc; 419 | padding-bottom: 2em; 420 | padding-top: 1em; } 421 | 422 | .post h1 { 423 | letter-spacing: .1em; 424 | padding: 0; 425 | margin: 0; 426 | line-height: 1.5; } 427 | @media screen and (min-width: 100px) and (max-width: 479px) { 428 | .post h1 { 429 | font-size: 32px; } } 430 | .post h1 h2 { 431 | margin: 0; } 432 | .post footer { 433 | color: #eeeeee; } 434 | 435 | @media screen and (min-width: 100px) and (max-width: 479px) { 436 | .h1-r { 437 | font-size: 42px; } } 438 | 439 | .meta { 440 | font-size: 16px; } 441 | 442 | .ct { 443 | text-align: center; } 444 | @media screen and (min-width: 100px) and (max-width: 479px) { 445 | .ct { 446 | text-align: left; } } 447 | 448 | blockquote { 449 | margin: 0; 450 | padding: 0 0 1em 0; 451 | font-style: italic; } 452 | @media screen and (min-width: 100px) and (max-width: 479px) { 453 | blockquote { 454 | padding: 0; } } 455 | blockquote p { 456 | font-size: 42px; } 457 | @media screen and (min-width: 100px) and (max-width: 479px) { 458 | blockquote p { 459 | font-size: 32px; } } 460 | blockquote footer, blockquote footer a { 461 | font-size: 24px; 462 | line-height: 2; 463 | text-decoration: none; 464 | color: #999; } 465 | 466 | em { 467 | font-style: italic; } 468 | 469 | .bump-it { 470 | font-size: 32px; 471 | margin-bottom: 1em; } 472 | 473 | .author { 474 | text-transform: uppercase; } 475 | 476 | date { 477 | color: #777777; } 478 | 479 | ol { 480 | font-size: 24px; } 481 | 482 | strong { 483 | font-weight: 600; } 484 | 485 | .title-spacing { 486 | letter-spacing: .1em; } 487 | 488 | .tracking-supreme { 489 | letter-spacing: 2em; } 490 | 491 | .lh-2 { 492 | line-height: 2; } 493 | 494 | .caps { 495 | text-transform: uppercase; } 496 | 497 | .db { 498 | display: block; } 499 | 500 | .dbf { 501 | width: 100%; 502 | display: block; } 503 | 504 | .page-time { 505 | display: block; 506 | vertical-align: bottom; 507 | float: right; 508 | margin-right: 20px; 509 | height: 48px; 510 | margin-top: 24px; } 511 | 512 | .center { 513 | text-align: center; } 514 | 515 | .section-padding { 516 | padding: 40px 20px; } 517 | 518 | .fr { 519 | float: right; } 520 | 521 | .bb { 522 | border-bottom: 1px dotted #eeeeee; } 523 | 524 | .bg-dark { 525 | color: #222; } 526 | 527 | .large-list { 528 | font-size: 24px; } 529 | .large-list li { 530 | border-top: 1px solid #eee; } 531 | .large-list a { 532 | display: block; 533 | padding: 1em 0; 534 | color: #222222; 535 | line-height: 1.5; 536 | text-decoration: none; } 537 | .large-list a:hover, .large-list a:active { 538 | color: #ff5335; } 539 | .large-list a:hover .meta, .large-list a:active .meta { 540 | color: #ff5335; } 541 | .large-list a .meta { 542 | display: block; } 543 | 544 | .post ul, .post dl { 545 | line-height: 1.618; 546 | font-size: 24px; 547 | margin-bottom: 1em; } 548 | .post dt { 549 | font-weight: bold; } 550 | .post dd { 551 | margin-bottom: .5em; 552 | color: #777777; } 553 | .post ul { 554 | list-style-type: disc; 555 | margin-left: 1em; } 556 | 557 | .post ol { 558 | margin-left: -1.75em; } 559 | .post ol li { 560 | margin-bottom: .5em; 561 | line-height: 1.5; } 562 | 563 | .list-full { 564 | width: 100%; 565 | margin: 0; } 566 | 567 | .list-full--item-link { 568 | display: block; 569 | padding: 40px 20px; 570 | border-bottom: 1px solid #fff; 571 | font-size: 32px; 572 | color: #222; } 573 | @media screen and (min-width: 100px) and (max-width: 479px) { 574 | .list-full--item-link { 575 | font-size: 24px; 576 | line-height: 1.5; } } 577 | .list-full--item-link:hover { 578 | background: #ffcc33; 579 | color: #fff; } 580 | .list-full--item-link:hover .meta { 581 | color: #fff; } 582 | 583 | .flush-right { 584 | position: absolute; 585 | right: 20px; } 586 | 587 | a { 588 | text-decoration: none; } 589 | a:hover { 590 | cursor: pointer; } 591 | 592 | .site-logo { 593 | position: relative; 594 | top: 20px; 595 | text-align: center; 596 | margin: 0 auto; 597 | display: block; 598 | vertical-align: text-top; 599 | border-radius: 9999px; 600 | height: 48px; 601 | width: 48px; 602 | background: #eee; 603 | color: #ccc; 604 | line-height: 64px; 605 | font-size: 100px; 606 | overflow: hidden; } 607 | @media screen and (min-width: 100px) and (max-width: 479px) { 608 | .site-logo { 609 | display: none; } } 610 | 611 | nav[role="navigation"] li, 612 | ul.social li { 613 | display: inline-block; 614 | font-size: 24px; } 615 | nav[role="navigation"] li:last-child, 616 | ul.social li:last-child { 617 | border-right: none; } 618 | nav[role="navigation"] li a, 619 | ul.social li a { 620 | font-weight: 100; 621 | color: #777777; 622 | display: block; 623 | padding-right: 1em; 624 | text-decoration: none; } 625 | nav[role="navigation"] li a:hover, nav[role="navigation"] li a:focus, 626 | ul.social li a:hover, 627 | ul.social li a:focus { 628 | color: #ff5335; } 629 | nav[role="navigation"] li a:active, 630 | ul.social li a:active { 631 | color: #666; } 632 | 633 | .horizontal li { 634 | display: inline-block; } 635 | .horizontal li a { 636 | padding: .5em 1em; 637 | border-radius: 4px; 638 | background: #eee; 639 | outline: 1px solid #e3e3e3; 640 | text-decoration: none; } 641 | 642 | .site-footer { 643 | border-top: 1px solid #ccc; 644 | margin: 0; 645 | bottom: 0; 646 | font-size: 16px; } 647 | .site-footer li { 648 | display: inline-block; 649 | line-height: 3; 650 | margin-right: 20px; 651 | margin-bottom: 10px; } 652 | .site-footer li a { 653 | padding: 16px; 654 | border-radius: 3px; 655 | color: #ababab; 656 | letter-spacing: .2em; 657 | font-weight: 100; 658 | -webkit-transition: border ease-out .6s, background ease-out .6s; 659 | border: 1px solid transparent; } 660 | .site-footer li a:hover { 661 | /* 662 | background-color:rgba(255,255,255,0.7); 663 | -webkit-transition:background-color, .6s; 664 | transition:background-color, .6s; 665 | */ 666 | cursor: pointer; 667 | border: 1px solid #d4d4d4; 668 | background: rgba(255, 255, 255, 0.7); 669 | -webkit-transition: border ease-out .6s, background ease-out .6s; } 670 | .site-footer .footer-link { 671 | letter-spacing: .2em; 672 | margin-top: 20px; 673 | border-top: 1px solid #fff; 674 | text-align: center; 675 | display: block; 676 | width: 100%; 677 | color: #999; 678 | padding-top: 20px; 679 | padding-bottom: 20px; } 680 | 681 | .row { 682 | padding: 2em 0; } 683 | 684 | .mt-1 { 685 | margin-top: 1em; } 686 | 687 | .mt-2 { 688 | margin-top: 2em; } 689 | 690 | .mt-4 { 691 | margin-top: 8em; } 692 | 693 | img { 694 | width: 100%; 695 | margin: 1em 0; } 696 | 697 | .hll { 698 | background-color: #333333; } 699 | 700 | .c { 701 | color: #008800; 702 | font-style: italic; 703 | background-color: #0f140f; } 704 | 705 | /* Comment */ 706 | .err { 707 | color: white; } 708 | 709 | /* Error */ 710 | .g { 711 | color: white; } 712 | 713 | /* Generic */ 714 | .k { 715 | color: #fb660a; 716 | font-weight: bold; } 717 | 718 | /* Keyword */ 719 | .l { 720 | color: white; } 721 | 722 | /* Literal */ 723 | .n { 724 | color: white; } 725 | 726 | /* Name */ 727 | .o { 728 | color: white; } 729 | 730 | /* Operator */ 731 | .x { 732 | color: white; } 733 | 734 | /* Other */ 735 | .p { 736 | color: white; } 737 | 738 | /* Punctuation */ 739 | .cm { 740 | color: #008800; 741 | font-style: italic; 742 | background-color: #0f140f; } 743 | 744 | /* Comment.Multiline */ 745 | .cp { 746 | color: #ff0007; 747 | font-weight: bold; 748 | font-style: italic; 749 | background-color: #0f140f; } 750 | 751 | /* Comment.Preproc */ 752 | .c1 { 753 | color: #008800; 754 | font-style: italic; 755 | background-color: #0f140f; } 756 | 757 | /* Comment.Single */ 758 | .cs { 759 | color: #008800; 760 | font-style: italic; 761 | background-color: #0f140f; } 762 | 763 | /* Comment.Special */ 764 | .gd { 765 | color: white; } 766 | 767 | /* Generic.Deleted */ 768 | .ge { 769 | color: white; } 770 | 771 | /* Generic.Emph */ 772 | .gr { 773 | color: white; } 774 | 775 | /* Generic.Error */ 776 | .gh { 777 | color: #ffffff; 778 | font-weight: bold; } 779 | 780 | /* Generic.Heading */ 781 | .gi { 782 | color: white; } 783 | 784 | /* Generic.Inserted */ 785 | .go { 786 | color: #444444; 787 | background-color: #222222; } 788 | 789 | /* Generic.Output */ 790 | .gp { 791 | color: white; } 792 | 793 | /* Generic.Prompt */ 794 | .gs { 795 | color: white; } 796 | 797 | /* Generic.Strong */ 798 | .gu { 799 | color: #ffffff; 800 | font-weight: bold; } 801 | 802 | /* Generic.Subheading */ 803 | .gt { 804 | color: white; } 805 | 806 | /* Generic.Traceback */ 807 | .kc { 808 | color: #fb660a; 809 | font-weight: bold; } 810 | 811 | /* Keyword.Constant */ 812 | .kd { 813 | color: #fb660a; 814 | font-weight: bold; } 815 | 816 | /* Keyword.Declaration */ 817 | .kn { 818 | color: #fb660a; 819 | font-weight: bold; } 820 | 821 | /* Keyword.Namespace */ 822 | .kp { 823 | color: #fb660a; } 824 | 825 | /* Keyword.Pseudo */ 826 | .kr { 827 | color: #fb660a; 828 | font-weight: bold; } 829 | 830 | /* Keyword.Reserved */ 831 | .kt { 832 | color: #cdcaa9; 833 | font-weight: bold; } 834 | 835 | /* Keyword.Type */ 836 | .ld { 837 | color: white; } 838 | 839 | /* Literal.Date */ 840 | .m { 841 | color: #0086f7; 842 | font-weight: bold; } 843 | 844 | /* Literal.Number */ 845 | .s { 846 | color: #0086d2; } 847 | 848 | /* Literal.String */ 849 | .na { 850 | color: #ff0086; 851 | font-weight: bold; } 852 | 853 | /* Name.Attribute */ 854 | .nb { 855 | color: white; } 856 | 857 | /* Name.Builtin */ 858 | .nc { 859 | color: white; } 860 | 861 | /* Name.Class */ 862 | .no { 863 | color: #0086d2; } 864 | 865 | /* Name.Constant */ 866 | .nd { 867 | color: white; } 868 | 869 | /* Name.Decorator */ 870 | .ni { 871 | color: white; } 872 | 873 | /* Name.Entity */ 874 | .ne { 875 | color: white; } 876 | 877 | /* Name.Exception */ 878 | .nf { 879 | color: #ff0086; 880 | font-weight: bold; } 881 | 882 | /* Name.Function */ 883 | .nl { 884 | color: white; } 885 | 886 | /* Name.Label */ 887 | .nn { 888 | color: white; } 889 | 890 | /* Name.Namespace */ 891 | .nx { 892 | color: white; } 893 | 894 | /* Name.Other */ 895 | .py { 896 | color: white; } 897 | 898 | /* Name.Property */ 899 | .nt { 900 | color: #fb660a; 901 | font-weight: bold; } 902 | 903 | /* Name.Tag */ 904 | .nv { 905 | color: #fb660a; } 906 | 907 | /* Name.Variable */ 908 | .ow { 909 | color: white; } 910 | 911 | /* Operator.Word */ 912 | .w { 913 | color: #888888; } 914 | 915 | /* Text.Whitespace */ 916 | .mf { 917 | color: #0086f7; 918 | font-weight: bold; } 919 | 920 | /* Literal.Number.Float */ 921 | .mh { 922 | color: #0086f7; 923 | font-weight: bold; } 924 | 925 | /* Literal.Number.Hex */ 926 | .mi { 927 | color: #0086f7; 928 | font-weight: bold; } 929 | 930 | /* Literal.Number.Integer */ 931 | .mo { 932 | color: #0086f7; 933 | font-weight: bold; } 934 | 935 | /* Literal.Number.Oct */ 936 | .sb { 937 | color: #0086d2; } 938 | 939 | /* Literal.String.Backtick */ 940 | .sc { 941 | color: #0086d2; } 942 | 943 | /* Literal.String.Char */ 944 | .sd { 945 | color: #0086d2; } 946 | 947 | /* Literal.String.Doc */ 948 | .s2 { 949 | color: #0086d2; } 950 | 951 | /* Literal.String.Double */ 952 | .se { 953 | color: #0086d2; } 954 | 955 | /* Literal.String.Escape */ 956 | .sh { 957 | color: #0086d2; } 958 | 959 | /* Literal.String.Heredoc */ 960 | .si { 961 | color: #0086d2; } 962 | 963 | /* Literal.String.Interpol */ 964 | .sx { 965 | color: #0086d2; } 966 | 967 | /* Literal.String.Other */ 968 | .sr { 969 | color: #0086d2; } 970 | 971 | /* Literal.String.Regex */ 972 | .s1 { 973 | color: #0086d2; } 974 | 975 | /* Literal.String.Single */ 976 | .ss { 977 | color: #0086d2; } 978 | 979 | /* Literal.String.Symbol */ 980 | .bp { 981 | color: white; } 982 | 983 | /* Name.Builtin.Pseudo */ 984 | .vc { 985 | color: #fb660a; } 986 | 987 | /* Name.Variable.Class */ 988 | .vg { 989 | color: #fb660a; } 990 | 991 | /* Name.Variable.Global */ 992 | .vi { 993 | color: #fb660a; } 994 | 995 | /* Name.Variable.Instance */ 996 | .il { 997 | color: #0086f7; 998 | font-weight: bold; } 999 | 1000 | /* Literal.Number.Integer.Long */ 1001 | code { 1002 | background: #eee; 1003 | color: #222; 1004 | -webkit-border-radius: 3px; 1005 | -moz-border-radius: 3px; 1006 | border-radius: 3px; 1007 | display: block; 1008 | font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 1009 | font-size: 14px; 1010 | line-height: 1.4; 1011 | letter-spacing: 0.1em; 1012 | margin: 1em 0; 1013 | overflow: scroll; 1014 | padding: 1em; } 1015 | @media screen and (min-width: 100px) and (max-width: 479px) { 1016 | code { 1017 | padding: 1em 1em; } } 1018 | --------------------------------------------------------------------------------