]>
njoseph.me Git - hyde.git/blob - static/css/hyde.css
4 \ \ \___ __ __ \_\ \ __
5 \ \ _ `\/\ \/\ \ /'_` \ /'__`\
6 \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
7 \ \_\ \_\/`____ \ \___,_\ \____\
8 \/_/\/_/`/___/> \/__,_ /\/____/
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.
16 Designed, built, and released under MIT license by @mdo.
18 Learn more at http://andhyde.com or https://github.com/mdo/hyde.
41 * Update the foundational and global aspects of the page.
45 -webkit-box-sizing: border-box
;
46 -moz-box-sizing: border-box
;
47 box-sizing: border-box
;
57 font-family: "Open Sans", Helvetica
, Arial
, sans-serif
;
61 background-color: #fff;
63 @media (min-width: 990px) {
69 h1
, h2
, h3
, h4
, h5
, h6
{
73 text-rendering: optimizeLegibility
;
103 border-top: 1px solid
#eee;
104 border-bottom: 1px solid
#fff;
112 background-color: #eee;
113 display: inline-block
;
118 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.5);
119 text-transform: uppercase
;
125 font-family: Menlo
, Monaco
, "Courier New", monospace
;
131 background-color: #f9f9f9;
141 white-space: pre-wrap
;
142 word-break: break-all
;
143 word-wrap: break-word
;
144 background-color: #f9f9f9;
150 background-color: transparent
;
162 padding: 5px 30px 5px 25px;
164 border-left: 5px solid
#eee;
171 blockquote
p:before
{
188 * Extend paragraphs with `.lead` for larger introductory text.
195 @media (min-width: 990px) {
205 * No `:visited` state is required by default (browsers will use `a`). `:focus`
206 * is linked to `:hover` for basic accessibility.
212 text-decoration: none
;
216 text-decoration: underline
;
223 * Sidebar banner for housing site name, intro, and colophon (footer).
226 /* Sidebar masthead */
229 background-color: #2a2a2a;
235 /* Masthead content */
238 font-family: "Abril Fatface";
247 /* Footer area of masthead */
250 color: rgba
(255,255,255,.5);
260 /* Responsive masthead */
261 @media (min-width: 768px) {
266 @media (min-width: 990px) {
267 /* Fix the masthead to the side for impact and awesomeness */
293 * Align the contents of the site above the proper threshold with some margin-fu
294 * with a 25%-wide `.masthead`.
301 /* Center container in available real estate */
302 @media (min-width: 990px) {
317 * Each post is wrapped in `.post`. Used on default and post layouts.
324 @media (min-width: 990px) {
330 /* Meta data line below post title */
333 margin: -10px 0 10px;
340 padding-bottom: 40px;
341 border-top: 1px solid
#eee;
350 .related-posts li small {
354 .related-posts li a:hover {
356 text-decoration: none
;
358 .related-posts li a:hover small {
366 * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
367 * there are no more previous or next posts to show.
371 overflow: hidden
; /* clearfix */
376 border-top: 1px solid
#eee;
378 /* Pagination should float when space is plentiful */
379 @media (min-width: 990px) {
382 border: 1px solid
#eee;
392 .pagination
a:first-child
,
393 .pagination span:first-child {
394 border-right: 1px solid
#eee;
396 .pagination a:hover {
397 text-decoration: none
;
398 background-color: #f5f5f5;
405 * Flip the orientation of the page by placing the `.masthead` on the right.
408 @media (min-width: 990px) {
409 .layout-reverse .masthead {
413 .layout-reverse .container {
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`.
427 /* Base16 (http://chriskempson.github.io/base16/#default) */
430 .theme-base-08 .masthead {
431 background-color: #ac4142;
433 .theme-base-08
.container a
,
434 .theme-base-08 .related-posts li a:hover {
439 .theme-base-09 .masthead {
440 background-color: #d28445;
442 .theme-base-09
.container a
,
443 .theme-base-09 .related-posts li a:hover {
448 .theme-base-0a .masthead {
449 background-color: #f4bf75;
451 .theme-base-0a
.container a
,
452 .theme-base-0a .related-posts li a:hover {
457 .theme-base-0b .masthead {
458 background-color: #90a959;
460 .theme-base-0b
.container a
,
461 .theme-base-0b .related-posts li a:hover {
466 .theme-base-0c .masthead {
467 background-color: #75b5aa;
469 .theme-base-0c
.container a
,
470 .theme-base-0c .related-posts li a:hover {
475 .theme-base-0d .masthead {
476 background-color: #6a9fb5;
478 .theme-base-0d
.container a
,
479 .theme-base-0d .related-posts li a:hover {
484 .theme-base-0e .masthead {
485 background-color: #aa759f;
487 .theme-base-0e
.container a
,
488 .theme-base-0e .related-posts li a:hover {
493 .theme-base-0f .masthead {
494 background-color: #8f5536;
496 .theme-base-0f
.container a
,
497 .theme-base-0f .related-posts li a:hover {