|  | @@ -1,289 +1,116 @@
 | 
	
		
			
			| 1 | 1 |  /*
 | 
	
		
			
			| 2 |  | - __                  __
 | 
	
		
			
			| 3 |  | -/\ \                /\ \
 | 
	
		
			
			| 4 |  | -\ \ \___   __  __   \_\ \     __
 | 
	
		
			
			| 5 |  | - \ \  _ `\/\ \/\ \  /'_` \  /'__`\
 | 
	
		
			
			| 6 |  | -  \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
 | 
	
		
			
			| 7 |  | -   \ \_\ \_\/`____ \ \___,_\ \____\
 | 
	
		
			
			| 8 |  | -    \/_/\/_/`/___/> \/__,_ /\/____/
 | 
	
		
			
			| 9 |  | -               /\___/
 | 
	
		
			
			| 10 |  | -               \/__/
 | 
	
		
			
			| 11 |  | -
 | 
	
		
			
			| 12 |  | -Hyde is an elegant, open source, mobile first theme for Jekyll.  It includes
 | 
	
		
			
			| 13 |  | -lightweight styles and placeholder content to get you up and running with a
 | 
	
		
			
			| 14 |  | -simple blog in no time.
 | 
	
		
			
			| 15 |  | -
 | 
	
		
			
			| 16 |  | -Designed, built, and released under MIT license by @mdo.
 | 
	
		
			
			| 17 |  | -
 | 
	
		
			
			| 18 |  | -Learn more at http://andhyde.com or https://github.com/mdo/hyde.
 | 
	
		
			
			| 19 |  | -
 | 
	
		
			
			| 20 |  | -*/
 | 
	
		
			
			|  | 2 | + *  __                  __
 | 
	
		
			
			|  | 3 | + * /\ \                /\ \
 | 
	
		
			
			|  | 4 | + * \ \ \___   __  __   \_\ \     __
 | 
	
		
			
			|  | 5 | + *  \ \  _ `\/\ \/\ \  /'_` \  /'__`\
 | 
	
		
			
			|  | 6 | + *   \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
 | 
	
		
			
			|  | 7 | + *    \ \_\ \_\/`____ \ \___,_\ \____\
 | 
	
		
			
			|  | 8 | + *     \/_/\/_/`/___/> \/__,_ /\/____/
 | 
	
		
			
			|  | 9 | + *                /\___/
 | 
	
		
			
			|  | 10 | + *                \/__/
 | 
	
		
			
			|  | 11 | + *
 | 
	
		
			
			|  | 12 | + * Designed, built, and released under MIT license by @mdo. Learn more at
 | 
	
		
			
			|  | 13 | + * https://github.com/poole/hyde.
 | 
	
		
			
			|  | 14 | + */
 | 
	
		
			
			| 21 | 15 |  
 | 
	
		
			
			| 22 | 16 |  
 | 
	
		
			
			| 23 | 17 |  /*
 | 
	
		
			
			| 24 | 18 |   * Contents
 | 
	
		
			
			| 25 | 19 |   *
 | 
	
		
			
			| 26 |  | - * Body resets
 | 
	
		
			
			| 27 |  | - * Custom type
 | 
	
		
			
			| 28 |  | - * Links
 | 
	
		
			
			| 29 |  | - * Masthead
 | 
	
		
			
			|  | 20 | + * Global resets
 | 
	
		
			
			|  | 21 | + * Sidebar
 | 
	
		
			
			| 30 | 22 |   * Container
 | 
	
		
			
			| 31 |  | - * Posts
 | 
	
		
			
			| 32 |  | - * Error page
 | 
	
		
			
			| 33 |  | - * Pagination
 | 
	
		
			
			|  | 23 | + * Reverse layout
 | 
	
		
			
			| 34 | 24 |   * Themes
 | 
	
		
			
			| 35 | 25 |   */
 | 
	
		
			
			| 36 | 26 |  
 | 
	
		
			
			| 37 | 27 |  
 | 
	
		
			
			| 38 | 28 |  /*
 | 
	
		
			
			| 39 |  | - * Body resets
 | 
	
		
			
			|  | 29 | + * Global resets
 | 
	
		
			
			| 40 | 30 |   *
 | 
	
		
			
			| 41 | 31 |   * Update the foundational and global aspects of the page.
 | 
	
		
			
			| 42 | 32 |   */
 | 
	
		
			
			| 43 | 33 |  
 | 
	
		
			
			| 44 |  | -* {
 | 
	
		
			
			| 45 |  | -  -webkit-box-sizing: border-box;
 | 
	
		
			
			| 46 |  | -     -moz-box-sizing: border-box;
 | 
	
		
			
			| 47 |  | -          box-sizing: border-box;
 | 
	
		
			
			| 48 |  | -}
 | 
	
		
			
			| 49 |  | -
 | 
	
		
			
			| 50 |  | -html,
 | 
	
		
			
			| 51 |  | -body {
 | 
	
		
			
			| 52 |  | -  margin: 0;
 | 
	
		
			
			| 53 |  | -  padding: 0;
 | 
	
		
			
			|  | 34 | +html {
 | 
	
		
			
			|  | 35 | +  font-family: "PT Sans", Helvetica, Arial, sans-serif;
 | 
	
		
			
			| 54 | 36 |  }
 | 
	
		
			
			| 55 |  | -
 | 
	
		
			
			| 56 |  | -body {
 | 
	
		
			
			| 57 |  | -  font-family: "Open Sans", Helvetica, Arial, sans-serif;
 | 
	
		
			
			| 58 |  | -  font-size: 16px;
 | 
	
		
			
			| 59 |  | -  line-height: 1.5;
 | 
	
		
			
			| 60 |  | -  color: #454441;
 | 
	
		
			
			| 61 |  | -  background-color: #fff;
 | 
	
		
			
			| 62 |  | -}
 | 
	
		
			
			| 63 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 64 |  | -  body {
 | 
	
		
			
			| 65 |  | -    font-size: 18px;
 | 
	
		
			
			|  | 37 | +@media (min-width: 48rem) {
 | 
	
		
			
			|  | 38 | +  html {
 | 
	
		
			
			|  | 39 | +    font-size: 16px;
 | 
	
		
			
			| 66 | 40 |    }
 | 
	
		
			
			| 67 | 41 |  }
 | 
	
		
			
			| 68 |  | -
 | 
	
		
			
			| 69 |  | -h1, h2, h3, h4, h5, h6 {
 | 
	
		
			
			| 70 |  | -  margin: 0 0 10px;
 | 
	
		
			
			| 71 |  | -  font-weight: 600;
 | 
	
		
			
			| 72 |  | -  line-height: 1.25;
 | 
	
		
			
			| 73 |  | -  text-rendering: optimizeLegibility;
 | 
	
		
			
			| 74 |  | -}
 | 
	
		
			
			| 75 |  | -h1 {
 | 
	
		
			
			| 76 |  | -  font-size: 40px;
 | 
	
		
			
			| 77 |  | -}
 | 
	
		
			
			| 78 |  | -h2 {
 | 
	
		
			
			| 79 |  | -  margin-top: 20px;
 | 
	
		
			
			| 80 |  | -  font-size: 32px;
 | 
	
		
			
			| 81 |  | -}
 | 
	
		
			
			| 82 |  | -h3 {
 | 
	
		
			
			| 83 |  | -  margin-top: 24px;
 | 
	
		
			
			| 84 |  | -  font-size: 24px;
 | 
	
		
			
			| 85 |  | -}
 | 
	
		
			
			| 86 |  | -h4, h5, h6 {
 | 
	
		
			
			| 87 |  | -  margin-top: 16px;
 | 
	
		
			
			| 88 |  | -  font-size: 16px;
 | 
	
		
			
			| 89 |  | -}
 | 
	
		
			
			| 90 |  | -
 | 
	
		
			
			| 91 |  | -p {
 | 
	
		
			
			| 92 |  | -  margin: 0 0 15px;
 | 
	
		
			
			| 93 |  | -}
 | 
	
		
			
			| 94 |  | -
 | 
	
		
			
			| 95 |  | -ul, ol {
 | 
	
		
			
			| 96 |  | -  margin-bottom: 15px;
 | 
	
		
			
			| 97 |  | -}
 | 
	
		
			
			| 98 |  | -
 | 
	
		
			
			| 99 |  | -hr {
 | 
	
		
			
			| 100 |  | -  position: relative;
 | 
	
		
			
			| 101 |  | -  margin: 40px 0;
 | 
	
		
			
			| 102 |  | -  border: 0;
 | 
	
		
			
			| 103 |  | -  border-top: 1px solid #eee;
 | 
	
		
			
			| 104 |  | -  border-bottom: 1px solid #fff;
 | 
	
		
			
			| 105 |  | -}
 | 
	
		
			
			| 106 |  | -
 | 
	
		
			
			| 107 |  | -strong {
 | 
	
		
			
			| 108 |  | -  color: #222;
 | 
	
		
			
			| 109 |  | -}
 | 
	
		
			
			| 110 |  | -
 | 
	
		
			
			| 111 |  | -abbr {
 | 
	
		
			
			| 112 |  | -  background-color: #eee;
 | 
	
		
			
			| 113 |  | -  display: inline-block;
 | 
	
		
			
			| 114 |  | -  padding: 3px;
 | 
	
		
			
			| 115 |  | -  font-size: 13px;
 | 
	
		
			
			| 116 |  | -  font-weight: bold;
 | 
	
		
			
			| 117 |  | -  color: #555;
 | 
	
		
			
			| 118 |  | -  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 | 
	
		
			
			| 119 |  | -  text-transform: uppercase;
 | 
	
		
			
			| 120 |  | -  border-radius: 3px;
 | 
	
		
			
			| 121 |  | -}
 | 
	
		
			
			| 122 |  | -
 | 
	
		
			
			| 123 |  | -code,
 | 
	
		
			
			| 124 |  | -pre {
 | 
	
		
			
			| 125 |  | -  font-family: Menlo, Monaco, "Courier New", monospace;
 | 
	
		
			
			| 126 |  | -}
 | 
	
		
			
			| 127 |  | -code {
 | 
	
		
			
			| 128 |  | -  padding: .25em .5em;
 | 
	
		
			
			| 129 |  | -  font-size: 85%;
 | 
	
		
			
			| 130 |  | -  color: #bf616a;
 | 
	
		
			
			| 131 |  | -  background-color: #f9f9f9;
 | 
	
		
			
			| 132 |  | -  border-radius: 3px;
 | 
	
		
			
			| 133 |  | -}
 | 
	
		
			
			| 134 |  | -pre {
 | 
	
		
			
			| 135 |  | -  display: block;
 | 
	
		
			
			| 136 |  | -  margin: 0 0 14px;
 | 
	
		
			
			| 137 |  | -  padding: 15px 20px;
 | 
	
		
			
			| 138 |  | -  font-size: 16px;
 | 
	
		
			
			| 139 |  | -  line-height: 1.4;
 | 
	
		
			
			| 140 |  | -  white-space: pre;
 | 
	
		
			
			| 141 |  | -  white-space: pre-wrap;
 | 
	
		
			
			| 142 |  | -  word-break: break-all;
 | 
	
		
			
			| 143 |  | -  word-wrap: break-word;
 | 
	
		
			
			| 144 |  | -  background-color: #f9f9f9;
 | 
	
		
			
			| 145 |  | -}
 | 
	
		
			
			| 146 |  | -pre code {
 | 
	
		
			
			| 147 |  | -  padding: 0;
 | 
	
		
			
			| 148 |  | -  font-size: 100%;
 | 
	
		
			
			| 149 |  | -  color: inherit;
 | 
	
		
			
			| 150 |  | -  background-color: transparent;
 | 
	
		
			
			| 151 |  | -}
 | 
	
		
			
			| 152 |  | -.highlight {
 | 
	
		
			
			| 153 |  | -  margin-bottom: 15px;
 | 
	
		
			
			| 154 |  | -  border-radius: 4px;
 | 
	
		
			
			| 155 |  | -}
 | 
	
		
			
			| 156 |  | -.highlight pre {
 | 
	
		
			
			| 157 |  | -  margin-bottom: 0;
 | 
	
		
			
			| 158 |  | -}
 | 
	
		
			
			| 159 |  | -
 | 
	
		
			
			| 160 |  | -/* Quotes */
 | 
	
		
			
			| 161 |  | -blockquote {
 | 
	
		
			
			| 162 |  | -  padding: 5px 30px 5px 25px;
 | 
	
		
			
			| 163 |  | -  margin: 15px 0;
 | 
	
		
			
			| 164 |  | -  border-left: 5px solid #eee;
 | 
	
		
			
			| 165 |  | -}
 | 
	
		
			
			| 166 |  | -blockquote p {
 | 
	
		
			
			| 167 |  | -  margin-bottom: 0;
 | 
	
		
			
			| 168 |  | -  color: #7a7a7a;
 | 
	
		
			
			| 169 |  | -  text-indent: -0.4em;
 | 
	
		
			
			| 170 |  | -}
 | 
	
		
			
			| 171 |  | -blockquote p:before {
 | 
	
		
			
			| 172 |  | -  content: '\201C';
 | 
	
		
			
			| 173 |  | -}
 | 
	
		
			
			| 174 |  | -blockquote p:after {
 | 
	
		
			
			| 175 |  | -  content: '\201D';
 | 
	
		
			
			| 176 |  | -}
 | 
	
		
			
			| 177 |  | -
 | 
	
		
			
			| 178 |  | -img {
 | 
	
		
			
			| 179 |  | -  display: block;
 | 
	
		
			
			| 180 |  | -  margin: 0 0 15px;
 | 
	
		
			
			| 181 |  | -  border-radius: 5px;
 | 
	
		
			
			| 182 |  | -}
 | 
	
		
			
			| 183 |  | -
 | 
	
		
			
			| 184 |  | -
 | 
	
		
			
			| 185 |  | -/*
 | 
	
		
			
			| 186 |  | - * Custom type
 | 
	
		
			
			| 187 |  | - *
 | 
	
		
			
			| 188 |  | - * Extend paragraphs with `.lead` for larger introductory text.
 | 
	
		
			
			| 189 |  | - */
 | 
	
		
			
			| 190 |  | -
 | 
	
		
			
			| 191 |  | -.lead {
 | 
	
		
			
			| 192 |  | -  font-size: 20px;
 | 
	
		
			
			| 193 |  | -  font-weight: 300;
 | 
	
		
			
			| 194 |  | -}
 | 
	
		
			
			| 195 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 196 |  | -  .lead {
 | 
	
		
			
			| 197 |  | -    font-size: 24px;
 | 
	
		
			
			|  | 42 | +@media (min-width: 58rem) {
 | 
	
		
			
			|  | 43 | +  html {
 | 
	
		
			
			|  | 44 | +    font-size: 20px;
 | 
	
		
			
			| 198 | 45 |    }
 | 
	
		
			
			| 199 | 46 |  }
 | 
	
		
			
			| 200 | 47 |  
 | 
	
		
			
			| 201 | 48 |  
 | 
	
		
			
			| 202 | 49 |  /*
 | 
	
		
			
			| 203 |  | - * Links
 | 
	
		
			
			|  | 50 | + * Sidebar
 | 
	
		
			
			| 204 | 51 |   *
 | 
	
		
			
			| 205 |  | - * No `:visited` state is required by default (browsers will use `a`). `:focus`
 | 
	
		
			
			| 206 |  | - * is linked to `:hover` for basic accessibility.
 | 
	
		
			
			|  | 52 | + * Flexible banner for housing site name, intro, and "footer" content. Starts
 | 
	
		
			
			|  | 53 | + * out above content in mobile and later moves to the side with wider viewports.
 | 
	
		
			
			| 207 | 54 |   */
 | 
	
		
			
			| 208 | 55 |  
 | 
	
		
			
			| 209 |  | -a {
 | 
	
		
			
			| 210 |  | -  font-weight: 600;
 | 
	
		
			
			| 211 |  | -  color: #222;
 | 
	
		
			
			| 212 |  | -  text-decoration: none;
 | 
	
		
			
			|  | 56 | +.sidebar {
 | 
	
		
			
			|  | 57 | +  text-align: center;
 | 
	
		
			
			|  | 58 | +  padding: 2rem 1rem;
 | 
	
		
			
			|  | 59 | +  color: rgba(255,255,255,.5);
 | 
	
		
			
			|  | 60 | +  background-color: #202020;
 | 
	
		
			
			| 213 | 61 |  }
 | 
	
		
			
			| 214 |  | -a:hover,
 | 
	
		
			
			| 215 |  | -a:focus {
 | 
	
		
			
			| 216 |  | -  text-decoration: underline;
 | 
	
		
			
			|  | 62 | +@media (min-width: 48rem) {
 | 
	
		
			
			|  | 63 | +  .sidebar {
 | 
	
		
			
			|  | 64 | +    position: fixed;
 | 
	
		
			
			|  | 65 | +    top: 0;
 | 
	
		
			
			|  | 66 | +    left: 0;
 | 
	
		
			
			|  | 67 | +    bottom: 0;
 | 
	
		
			
			|  | 68 | +    width: 18rem;
 | 
	
		
			
			|  | 69 | +    text-align: left;
 | 
	
		
			
			|  | 70 | +  }
 | 
	
		
			
			| 217 | 71 |  }
 | 
	
		
			
			| 218 | 72 |  
 | 
	
		
			
			| 219 |  | -
 | 
	
		
			
			| 220 |  | -/*
 | 
	
		
			
			| 221 |  | - * Masthead
 | 
	
		
			
			| 222 |  | - *
 | 
	
		
			
			| 223 |  | - * Sidebar banner for housing site name, intro, and colophon (footer).
 | 
	
		
			
			| 224 |  | - */
 | 
	
		
			
			| 225 |  | -
 | 
	
		
			
			| 226 |  | -/* Sidebar masthead */
 | 
	
		
			
			| 227 |  | -.masthead {
 | 
	
		
			
			|  | 73 | +/* Sidebar links */
 | 
	
		
			
			|  | 74 | +.sidebar a {
 | 
	
		
			
			| 228 | 75 |    color: #fff;
 | 
	
		
			
			| 229 |  | -  background-color: #2a2a2a;
 | 
	
		
			
			| 230 |  | -}
 | 
	
		
			
			| 231 |  | -.masthead-inner {
 | 
	
		
			
			| 232 |  | -  padding: 20px;
 | 
	
		
			
			| 233 | 76 |  }
 | 
	
		
			
			| 234 | 77 |  
 | 
	
		
			
			| 235 |  | -/* Masthead content */
 | 
	
		
			
			| 236 |  | -.masthead h1 {
 | 
	
		
			
			| 237 |  | -  margin-top: 0;
 | 
	
		
			
			| 238 |  | -  font-family: "Abril Fatface";
 | 
	
		
			
			| 239 |  | -}
 | 
	
		
			
			| 240 |  | -.masthead .lead {
 | 
	
		
			
			| 241 |  | -  margin-bottom: 0;
 | 
	
		
			
			| 242 |  | -}
 | 
	
		
			
			| 243 |  | -.masthead a {
 | 
	
		
			
			|  | 78 | +/* About section */
 | 
	
		
			
			|  | 79 | +.sidebar-about h1 {
 | 
	
		
			
			| 244 | 80 |    color: #fff;
 | 
	
		
			
			|  | 81 | +  margin-top: 0;
 | 
	
		
			
			|  | 82 | +  font-family: "Abril Fatface", serif;
 | 
	
		
			
			|  | 83 | +  font-size: 3.25rem;
 | 
	
		
			
			| 245 | 84 |  }
 | 
	
		
			
			| 246 | 85 |  
 | 
	
		
			
			| 247 |  | -/* Footer area of masthead */
 | 
	
		
			
			| 248 |  | -.colophon {
 | 
	
		
			
			| 249 |  | -  margin-top: 20px;
 | 
	
		
			
			| 250 |  | -  color: rgba(255,255,255,.5);
 | 
	
		
			
			| 251 |  | -}
 | 
	
		
			
			| 252 |  | -.colophon-links {
 | 
	
		
			
			|  | 86 | +/* Sidebar nav */
 | 
	
		
			
			|  | 87 | +.sidebar-nav {
 | 
	
		
			
			| 253 | 88 |    padding-left: 0;
 | 
	
		
			
			| 254 | 89 |    list-style: none;
 | 
	
		
			
			| 255 | 90 |  }
 | 
	
		
			
			| 256 |  | -.colophon-links li {
 | 
	
		
			
			| 257 |  | -  color: inherit;
 | 
	
		
			
			|  | 91 | +.sidebar-nav-item {
 | 
	
		
			
			|  | 92 | +  display: block;
 | 
	
		
			
			| 258 | 93 |  }
 | 
	
		
			
			| 259 |  | -
 | 
	
		
			
			| 260 |  | -/* Responsive masthead */
 | 
	
		
			
			| 261 |  | -@media (min-width: 768px) {
 | 
	
		
			
			| 262 |  | -  .masthead-inner {
 | 
	
		
			
			| 263 |  | -    padding: 40px;
 | 
	
		
			
			| 264 |  | -  }
 | 
	
		
			
			|  | 94 | +a.sidebar-nav-item:hover,
 | 
	
		
			
			|  | 95 | +a.sidebar-nav-item:focus {
 | 
	
		
			
			|  | 96 | +  text-decoration: underline;
 | 
	
		
			
			| 265 | 97 |  }
 | 
	
		
			
			| 266 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 267 |  | -  /* Fix the masthead to the side for impact and awesomeness */
 | 
	
		
			
			| 268 |  | -  .masthead {
 | 
	
		
			
			| 269 |  | -    position: fixed;
 | 
	
		
			
			| 270 |  | -    top: 0;
 | 
	
		
			
			| 271 |  | -    left: 0;
 | 
	
		
			
			| 272 |  | -    bottom: 0;
 | 
	
		
			
			| 273 |  | -    width: 25%;
 | 
	
		
			
			| 274 |  | -    margin-bottom: 0;
 | 
	
		
			
			| 275 |  | -  }
 | 
	
		
			
			| 276 |  | -  .masthead-inner {
 | 
	
		
			
			|  | 98 | +.sidebar-nav-item.active {
 | 
	
		
			
			|  | 99 | +  font-weight: bold;
 | 
	
		
			
			|  | 100 | +}
 | 
	
		
			
			|  | 101 | +
 | 
	
		
			
			|  | 102 | +/* Sticky sidebar
 | 
	
		
			
			|  | 103 | + *
 | 
	
		
			
			|  | 104 | + * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 | 
	
		
			
			|  | 105 | + * contents to the bottom of the sidebar in tablets and up.
 | 
	
		
			
			|  | 106 | + */
 | 
	
		
			
			|  | 107 | +
 | 
	
		
			
			|  | 108 | +@media (min-width: 48rem) {
 | 
	
		
			
			|  | 109 | +  .sidebar-sticky {
 | 
	
		
			
			| 277 | 110 |      position: absolute;
 | 
	
		
			
			| 278 |  | -    bottom: 0;
 | 
	
		
			
			| 279 |  | -    right: 0;
 | 
	
		
			
			| 280 |  | -    left: 0;
 | 
	
		
			
			| 281 |  | -  }
 | 
	
		
			
			| 282 |  | -  .masthead h1 {
 | 
	
		
			
			| 283 |  | -    font-size: 64px;
 | 
	
		
			
			| 284 |  | -  }
 | 
	
		
			
			| 285 |  | -  .colophon {
 | 
	
		
			
			| 286 |  | -    margin-top: 40px;
 | 
	
		
			
			|  | 111 | +    right:  1rem;
 | 
	
		
			
			|  | 112 | +    bottom: 1rem;
 | 
	
		
			
			|  | 113 | +    left:   1rem;
 | 
	
		
			
			| 287 | 114 |    }
 | 
	
		
			
			| 288 | 115 |  }
 | 
	
		
			
			| 289 | 116 |  
 | 
	
	
		
			
			|  | @@ -291,131 +118,55 @@ a:focus {
 | 
	
		
			
			| 291 | 118 |  /* Container
 | 
	
		
			
			| 292 | 119 |   *
 | 
	
		
			
			| 293 | 120 |   * Align the contents of the site above the proper threshold with some margin-fu
 | 
	
		
			
			| 294 |  | - * with a 25%-wide `.masthead`.
 | 
	
		
			
			|  | 121 | + * with a 25%-wide `.sidebar`.
 | 
	
		
			
			| 295 | 122 |   */
 | 
	
		
			
			| 296 | 123 |  
 | 
	
		
			
			| 297 | 124 |  .content {
 | 
	
		
			
			| 298 |  | -  padding: 40px 20px;
 | 
	
		
			
			|  | 125 | +  padding-top:    4rem;
 | 
	
		
			
			|  | 126 | +  padding-bottom: 4rem;
 | 
	
		
			
			| 299 | 127 |  }
 | 
	
		
			
			| 300 | 128 |  
 | 
	
		
			
			| 301 |  | -/* Center container in available real estate */
 | 
	
		
			
			| 302 |  | -@media (min-width: 990px) {
 | 
	
		
			
			|  | 129 | +@media (min-width: 48rem) {
 | 
	
		
			
			| 303 | 130 |    .content {
 | 
	
		
			
			| 304 |  | -    padding: 60px 0;
 | 
	
		
			
			| 305 |  | -  }
 | 
	
		
			
			| 306 |  | -  .container {
 | 
	
		
			
			| 307 |  | -    width: 55%;
 | 
	
		
			
			| 308 |  | -    margin-left: 35%;
 | 
	
		
			
			| 309 |  | -    margin-right: 10%;
 | 
	
		
			
			|  | 131 | +    max-width: 38rem;
 | 
	
		
			
			|  | 132 | +    margin-left: 20rem;
 | 
	
		
			
			|  | 133 | +    margin-right: 2rem;
 | 
	
		
			
			| 310 | 134 |    }
 | 
	
		
			
			| 311 | 135 |  }
 | 
	
		
			
			| 312 | 136 |  
 | 
	
		
			
			| 313 |  | -
 | 
	
		
			
			| 314 |  | -/*
 | 
	
		
			
			| 315 |  | - * Posts
 | 
	
		
			
			| 316 |  | - *
 | 
	
		
			
			| 317 |  | - * Each post is wrapped in `.post`. Used on default and post layouts.
 | 
	
		
			
			| 318 |  | - */
 | 
	
		
			
			| 319 |  | -
 | 
	
		
			
			| 320 |  | -/* Single post */
 | 
	
		
			
			| 321 |  | -.post {
 | 
	
		
			
			| 322 |  | -  margin-bottom: 40px;
 | 
	
		
			
			| 323 |  | -}
 | 
	
		
			
			| 324 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 325 |  | -  .post {
 | 
	
		
			
			| 326 |  | -    margin-bottom: 60px;
 | 
	
		
			
			| 327 |  | -  }
 | 
	
		
			
			| 328 |  | -}
 | 
	
		
			
			| 329 |  | -
 | 
	
		
			
			| 330 |  | -/* Meta data line below post title */
 | 
	
		
			
			| 331 |  | -.post-date {
 | 
	
		
			
			| 332 |  | -  display: block;
 | 
	
		
			
			| 333 |  | -  margin: -10px 0 10px;
 | 
	
		
			
			| 334 |  | -  color: #9a9a9a;
 | 
	
		
			
			| 335 |  | -}
 | 
	
		
			
			| 336 |  | -
 | 
	
		
			
			| 337 |  | -/* Related posts */
 | 
	
		
			
			| 338 |  | -.related {
 | 
	
		
			
			| 339 |  | -  padding-top: 20px;
 | 
	
		
			
			| 340 |  | -  padding-bottom: 40px;
 | 
	
		
			
			| 341 |  | -  border-top: 1px solid #eee;
 | 
	
		
			
			| 342 |  | -}
 | 
	
		
			
			| 343 |  | -.related-posts {
 | 
	
		
			
			| 344 |  | -  padding-left: 0;
 | 
	
		
			
			| 345 |  | -  list-style: none;
 | 
	
		
			
			| 346 |  | -}
 | 
	
		
			
			| 347 |  | -.related-posts h3 {
 | 
	
		
			
			| 348 |  | -  margin-top: 0;
 | 
	
		
			
			| 349 |  | -}
 | 
	
		
			
			| 350 |  | -.related-posts li small {
 | 
	
		
			
			| 351 |  | -  font-size: 75%;
 | 
	
		
			
			| 352 |  | -  color: #999;
 | 
	
		
			
			| 353 |  | -}
 | 
	
		
			
			| 354 |  | -.related-posts li a:hover {
 | 
	
		
			
			| 355 |  | -  color: #000;
 | 
	
		
			
			| 356 |  | -  text-decoration: none;
 | 
	
		
			
			| 357 |  | -}
 | 
	
		
			
			| 358 |  | -.related-posts li a:hover small {
 | 
	
		
			
			| 359 |  | -  color: inherit;
 | 
	
		
			
			| 360 |  | -}
 | 
	
		
			
			| 361 |  | -
 | 
	
		
			
			| 362 |  | -
 | 
	
		
			
			| 363 |  | -/*
 | 
	
		
			
			| 364 |  | - * Pagination
 | 
	
		
			
			| 365 |  | - *
 | 
	
		
			
			| 366 |  | - * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 | 
	
		
			
			| 367 |  | - * there are no more previous or next posts to show.
 | 
	
		
			
			| 368 |  | - */
 | 
	
		
			
			| 369 |  | -
 | 
	
		
			
			| 370 |  | -.pagination {
 | 
	
		
			
			| 371 |  | -  overflow: hidden; /* clearfix */
 | 
	
		
			
			| 372 |  | -  margin-top: 40px;
 | 
	
		
			
			| 373 |  | -  font-weight: bold;
 | 
	
		
			
			| 374 |  | -  color: #ccc;
 | 
	
		
			
			| 375 |  | -  text-align: center;
 | 
	
		
			
			| 376 |  | -  border-top: 1px solid #eee;
 | 
	
		
			
			| 377 |  | -}
 | 
	
		
			
			| 378 |  | -/* Pagination should float when space is plentiful */
 | 
	
		
			
			| 379 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 380 |  | -  .pagination {
 | 
	
		
			
			| 381 |  | -    margin-bottom: 60px;
 | 
	
		
			
			| 382 |  | -    border: 1px solid #eee;
 | 
	
		
			
			|  | 137 | +@media (min-width: 64rem) {
 | 
	
		
			
			|  | 138 | +  .content {
 | 
	
		
			
			|  | 139 | +    margin-left: 22rem;
 | 
	
		
			
			|  | 140 | +    margin-right: 4rem;
 | 
	
		
			
			| 383 | 141 |    }
 | 
	
		
			
			| 384 | 142 |  }
 | 
	
		
			
			| 385 | 143 |  
 | 
	
		
			
			| 386 |  | -.pagination a,
 | 
	
		
			
			| 387 |  | -.pagination span {
 | 
	
		
			
			| 388 |  | -  float: left;
 | 
	
		
			
			| 389 |  | -  width: 50%;
 | 
	
		
			
			| 390 |  | -  padding: 20px;
 | 
	
		
			
			| 391 |  | -}
 | 
	
		
			
			| 392 |  | -.pagination a:first-child,
 | 
	
		
			
			| 393 |  | -.pagination span:first-child {
 | 
	
		
			
			| 394 |  | -  border-right: 1px solid #eee;
 | 
	
		
			
			| 395 |  | -}
 | 
	
		
			
			| 396 |  | -.pagination a:hover {
 | 
	
		
			
			| 397 |  | -  text-decoration: none;
 | 
	
		
			
			| 398 |  | -  background-color: #f5f5f5;
 | 
	
		
			
			| 399 |  | -}
 | 
	
		
			
			| 400 |  | -
 | 
	
		
			
			| 401 | 144 |  
 | 
	
		
			
			| 402 | 145 |  /*
 | 
	
		
			
			| 403 | 146 |   * Reverse layout
 | 
	
		
			
			| 404 | 147 |   *
 | 
	
		
			
			| 405 |  | - * Flip the orientation of the page by placing the `.masthead` on the right.
 | 
	
		
			
			|  | 148 | + * Flip the orientation of the page by placing the `.sidebar` on the right.
 | 
	
		
			
			| 406 | 149 |   */
 | 
	
		
			
			| 407 | 150 |  
 | 
	
		
			
			| 408 |  | -@media (min-width: 990px) {
 | 
	
		
			
			| 409 |  | -  .layout-reverse .masthead {
 | 
	
		
			
			|  | 151 | +@media (min-width: 48rem) {
 | 
	
		
			
			|  | 152 | +  .layout-reverse .sidebar {
 | 
	
		
			
			| 410 | 153 |      left: auto;
 | 
	
		
			
			| 411 | 154 |      right: 0;
 | 
	
		
			
			| 412 | 155 |    }
 | 
	
		
			
			| 413 |  | -  .layout-reverse .container {
 | 
	
		
			
			| 414 |  | -    margin-left: 10%;
 | 
	
		
			
			| 415 |  | -    margin-right: 35%;
 | 
	
		
			
			|  | 156 | +  .layout-reverse .content {
 | 
	
		
			
			|  | 157 | +    margin-left: 2rem;
 | 
	
		
			
			|  | 158 | +    margin-right: 20rem;
 | 
	
		
			
			| 416 | 159 |    }
 | 
	
		
			
			| 417 | 160 |  }
 | 
	
		
			
			| 418 | 161 |  
 | 
	
		
			
			|  | 162 | +@media (min-width: 64rem) {
 | 
	
		
			
			|  | 163 | +  .layout-reverse .content {
 | 
	
		
			
			|  | 164 | +    margin-left: 4rem;
 | 
	
		
			
			|  | 165 | +    margin-right: 22rem;
 | 
	
		
			
			|  | 166 | +  }
 | 
	
		
			
			|  | 167 | +}
 | 
	
		
			
			|  | 168 | +
 | 
	
		
			
			|  | 169 | +
 | 
	
		
			
			| 419 | 170 |  
 | 
	
		
			
			| 420 | 171 |  /*
 | 
	
		
			
			| 421 | 172 |   * Themes
 | 
	
	
		
			
			|  | @@ -427,73 +178,73 @@ a:focus {
 | 
	
		
			
			| 427 | 178 |  /* Base16 (http://chriskempson.github.io/base16/#default) */
 | 
	
		
			
			| 428 | 179 |  
 | 
	
		
			
			| 429 | 180 |  /* Red */
 | 
	
		
			
			| 430 |  | -.theme-base-08 .masthead {
 | 
	
		
			
			|  | 181 | +.theme-base-08 .sidebar {
 | 
	
		
			
			| 431 | 182 |    background-color: #ac4142;
 | 
	
		
			
			| 432 | 183 |  }
 | 
	
		
			
			| 433 |  | -.theme-base-08 .container a,
 | 
	
		
			
			|  | 184 | +.theme-base-08 .content a,
 | 
	
		
			
			| 434 | 185 |  .theme-base-08 .related-posts li a:hover {
 | 
	
		
			
			| 435 | 186 |    color: #ac4142;
 | 
	
		
			
			| 436 | 187 |  }
 | 
	
		
			
			| 437 | 188 |  
 | 
	
		
			
			| 438 | 189 |  /* Orange */
 | 
	
		
			
			| 439 |  | -.theme-base-09 .masthead {
 | 
	
		
			
			|  | 190 | +.theme-base-09 .sidebar {
 | 
	
		
			
			| 440 | 191 |    background-color: #d28445;
 | 
	
		
			
			| 441 | 192 |  }
 | 
	
		
			
			| 442 |  | -.theme-base-09 .container a,
 | 
	
		
			
			|  | 193 | +.theme-base-09 .content a,
 | 
	
		
			
			| 443 | 194 |  .theme-base-09 .related-posts li a:hover {
 | 
	
		
			
			| 444 | 195 |    color: #d28445;
 | 
	
		
			
			| 445 | 196 |  }
 | 
	
		
			
			| 446 | 197 |  
 | 
	
		
			
			| 447 | 198 |  /* Yellow */
 | 
	
		
			
			| 448 |  | -.theme-base-0a .masthead {
 | 
	
		
			
			|  | 199 | +.theme-base-0a .sidebar {
 | 
	
		
			
			| 449 | 200 |    background-color: #f4bf75;
 | 
	
		
			
			| 450 | 201 |  }
 | 
	
		
			
			| 451 |  | -.theme-base-0a .container a,
 | 
	
		
			
			|  | 202 | +.theme-base-0a .content a,
 | 
	
		
			
			| 452 | 203 |  .theme-base-0a .related-posts li a:hover {
 | 
	
		
			
			| 453 | 204 |    color: #f4bf75;
 | 
	
		
			
			| 454 | 205 |  }
 | 
	
		
			
			| 455 | 206 |  
 | 
	
		
			
			| 456 | 207 |  /* Green */
 | 
	
		
			
			| 457 |  | -.theme-base-0b .masthead {
 | 
	
		
			
			|  | 208 | +.theme-base-0b .sidebar {
 | 
	
		
			
			| 458 | 209 |    background-color: #90a959;
 | 
	
		
			
			| 459 | 210 |  }
 | 
	
		
			
			| 460 |  | -.theme-base-0b .container a,
 | 
	
		
			
			|  | 211 | +.theme-base-0b .content a,
 | 
	
		
			
			| 461 | 212 |  .theme-base-0b .related-posts li a:hover {
 | 
	
		
			
			| 462 | 213 |    color: #90a959;
 | 
	
		
			
			| 463 | 214 |  }
 | 
	
		
			
			| 464 | 215 |  
 | 
	
		
			
			| 465 | 216 |  /* Cyan */
 | 
	
		
			
			| 466 |  | -.theme-base-0c .masthead {
 | 
	
		
			
			|  | 217 | +.theme-base-0c .sidebar {
 | 
	
		
			
			| 467 | 218 |    background-color: #75b5aa;
 | 
	
		
			
			| 468 | 219 |  }
 | 
	
		
			
			| 469 |  | -.theme-base-0c .container a,
 | 
	
		
			
			|  | 220 | +.theme-base-0c .content a,
 | 
	
		
			
			| 470 | 221 |  .theme-base-0c .related-posts li a:hover {
 | 
	
		
			
			| 471 | 222 |    color: #75b5aa;
 | 
	
		
			
			| 472 | 223 |  }
 | 
	
		
			
			| 473 | 224 |  
 | 
	
		
			
			| 474 | 225 |  /* Blue */
 | 
	
		
			
			| 475 |  | -.theme-base-0d .masthead {
 | 
	
		
			
			|  | 226 | +.theme-base-0d .sidebar {
 | 
	
		
			
			| 476 | 227 |    background-color: #6a9fb5;
 | 
	
		
			
			| 477 | 228 |  }
 | 
	
		
			
			| 478 |  | -.theme-base-0d .container a,
 | 
	
		
			
			|  | 229 | +.theme-base-0d .content a,
 | 
	
		
			
			| 479 | 230 |  .theme-base-0d .related-posts li a:hover {
 | 
	
		
			
			| 480 | 231 |    color: #6a9fb5;
 | 
	
		
			
			| 481 | 232 |  }
 | 
	
		
			
			| 482 | 233 |  
 | 
	
		
			
			| 483 | 234 |  /* Magenta */
 | 
	
		
			
			| 484 |  | -.theme-base-0e .masthead {
 | 
	
		
			
			|  | 235 | +.theme-base-0e .sidebar {
 | 
	
		
			
			| 485 | 236 |    background-color: #aa759f;
 | 
	
		
			
			| 486 | 237 |  }
 | 
	
		
			
			| 487 |  | -.theme-base-0e .container a,
 | 
	
		
			
			|  | 238 | +.theme-base-0e .content a,
 | 
	
		
			
			| 488 | 239 |  .theme-base-0e .related-posts li a:hover {
 | 
	
		
			
			| 489 | 240 |    color: #aa759f;
 | 
	
		
			
			| 490 | 241 |  }
 | 
	
		
			
			| 491 | 242 |  
 | 
	
		
			
			| 492 | 243 |  /* Brown */
 | 
	
		
			
			| 493 |  | -.theme-base-0f .masthead {
 | 
	
		
			
			|  | 244 | +.theme-base-0f .sidebar {
 | 
	
		
			
			| 494 | 245 |    background-color: #8f5536;
 | 
	
		
			
			| 495 | 246 |  }
 | 
	
		
			
			| 496 |  | -.theme-base-0f .container a,
 | 
	
		
			
			|  | 247 | +.theme-base-0f .content a,
 | 
	
		
			
			| 497 | 248 |  .theme-base-0f .related-posts li a:hover {
 | 
	
		
			
			| 498 | 249 |    color: #8f5536;
 | 
	
		
			
			| 499 | 250 |  }
 |