static/css/hyde.css

   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 */
  21
  22
  23 /*
  24  * Contents
  25  *
  26  * Body resets
  27  * Custom type
  28  * Links
  29  * Masthead
  30  * Container
  31  * Posts
  32  * Error page
  33  * Pagination
  34  * Themes
  35  */
  36
  37
  38 /*
  39  * Body resets
  40  *
  41  * Update the foundational and global aspects of the page.
  42  */
  43
  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;
  54 }
  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;
  66   }
  67 }
  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;
 198   }
 199 }
 200
 201
 202 /*
 203  * Links
 204  *
 205  * No `:visited` state is required by default (browsers will use `a`). `:focus`
 206  * is linked to `:hover` for basic accessibility.
 207  */
 208
 209 a {
 210   font-weight: 600;
 211   color: #222;
 212   text-decoration: none;
 213 }
 214 a:hover,
 215 a:focus {
 216   text-decoration: underline;
 217 }
 218
 219
 220 /*
 221  * Masthead
 222  *
 223  * Sidebar banner for housing site name, intro, and colophon (footer).
 224  */
 225
 226 /* Sidebar masthead */
 227 .masthead {
 228   color: #fff;
 229   background-color: #2a2a2a;
 230 }
 231 .masthead-inner {
 232   padding: 20px;
 233 }
 234
 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 {
 244   color: #fff;
 245 }
 246
 247 /* Footer area of masthead */
 248 .colophon {
 249   margin-top: 20px;
 250   color: rgba(255,255,255,.5);
 251 }
 252 .colophon-links {
 253   padding-left: 0;
 254   list-style: none;
 255 }
 256 .colophon-links li {
 257   color: inherit;
 258 }
 259
 260 /* Responsive masthead */
 261 @media (min-width: 768px) {
 262   .masthead-inner {
 263     padding: 40px;
 264   }
 265 }
 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 {
 277     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;
 287   }
 288 }
 289
 290
 291 /* Container
 292  *
 293  * Align the contents of the site above the proper threshold with some margin-fu
 294  * with a 25%-wide `.masthead`.
 295  */
 296
 297 .content {
 298   padding: 40px 20px;
 299 }
 300
 301 /* Center container in available real estate */
 302 @media (min-width: 990px) {
 303   .content {
 304     padding: 60px 0;
 305   }
 306   .container {
 307     width: 55%;
 308     margin-left: 35%;
 309     margin-right: 10%;
 310   }
 311 }
 312
 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;
 383   }
 384 }
 385
 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
 402 /*
 403  * Reverse layout
 404  *
 405  * Flip the orientation of the page by placing the `.masthead` on the right.
 406  */
 407
 408 @media (min-width: 990px) {
 409   .layout-reverse .masthead {
 410     left: auto;
 411     right: 0;
 412   }
 413   .layout-reverse .container {
 414     margin-left: 10%;
 415     margin-right: 35%;
 416   }
 417 }
 418
 419
 420 /*
 421  * Themes
 422  *
 423  * As of v1.1, Hyde includes optional themes to color the sidebar and links
 424  * within blog posts. To use, add the class of your choosing to the `body`.
 425  */
 426
 427 /* Base16 (http://chriskempson.github.io/base16/#default) */
 428
 429 /* Red */
 430 .theme-base-08 .masthead {
 431   background-color: #ac4142;
 432 }
 433 .theme-base-08 .container a,
 434 .theme-base-08 .related-posts li a:hover {
 435   color: #ac4142;
 436 }
 437
 438 /* Orange */
 439 .theme-base-09 .masthead {
 440   background-color: #d28445;
 441 }
 442 .theme-base-09 .container a,
 443 .theme-base-09 .related-posts li a:hover {
 444   color: #d28445;
 445 }
 446
 447 /* Yellow */
 448 .theme-base-0a .masthead {
 449   background-color: #f4bf75;
 450 }
 451 .theme-base-0a .container a,
 452 .theme-base-0a .related-posts li a:hover {
 453   color: #f4bf75;
 454 }
 455
 456 /* Green */
 457 .theme-base-0b .masthead {
 458   background-color: #90a959;
 459 }
 460 .theme-base-0b .container a,
 461 .theme-base-0b .related-posts li a:hover {
 462   color: #90a959;
 463 }
 464
 465 /* Cyan */
 466 .theme-base-0c .masthead {
 467   background-color: #75b5aa;
 468 }
 469 .theme-base-0c .container a,
 470 .theme-base-0c .related-posts li a:hover {
 471   color: #75b5aa;
 472 }
 473
 474 /* Blue */
 475 .theme-base-0d .masthead {
 476   background-color: #6a9fb5;
 477 }
 478 .theme-base-0d .container a,
 479 .theme-base-0d .related-posts li a:hover {
 480   color: #6a9fb5;
 481 }
 482
 483 /* Magenta */
 484 .theme-base-0e .masthead {
 485   background-color: #aa759f;
 486 }
 487 .theme-base-0e .container a,
 488 .theme-base-0e .related-posts li a:hover {
 489   color: #aa759f;
 490 }
 491
 492 /* Brown */
 493 .theme-base-0f .masthead {
 494   background-color: #8f5536;
 495 }
 496 .theme-base-0f .container a,
 497 .theme-base-0f .related-posts li a:hover {
 498   color: #8f5536;
 499 }