Created
January 21, 2013 14:55
-
-
Save rwdaigle/4586628 to your computer and use it in GitHub Desktop.
Heroku Dev Center stylesheet for use in article draft rendering.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
title: reset css | |
author: maximilian schoening (@mschoening) | |
*/ | |
html, body, div, span, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
abbr, address, cite, code, | |
del, dfn, em, img, ins, kbd, q, samp, | |
small, strong, sub, sup, var, | |
a, b, i, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, dialog, figure, footer, | |
header, hgroup, menu, nav, section, | |
time, mark, audio, video { | |
background: transparent; | |
border: 0; | |
font-size: 100%; | |
margin: 0; | |
outline: 0; | |
padding: 0; | |
vertical-align: baseline; | |
} | |
article, aside, dialog, figure, footer, header, hgroup, nav, section { | |
display : block; | |
} | |
body { | |
line-height: 1; | |
} | |
blockquote, q { | |
quotes: '' ''; | |
} | |
blockquote:before, blockquote:after, q:before, q:after { | |
content: ''; | |
} | |
table { | |
border-collapse: separate; | |
border-spacing: 0 | |
} | |
table, th, td { | |
vertical-align: middle; | |
} | |
th, td { | |
font-weight: normal; | |
text-align: left; | |
} | |
/* | |
title: library css | |
author: maximilian schoening (@mschoening) | |
*/ | |
/* =floating | |
---------------------------------------------- */ | |
.left { | |
float: left; | |
} | |
.right { | |
float: right; | |
} | |
/* ------------------------------------------- */ | |
/* =clearing | |
---------------------------------------------- */ | |
.clear { | |
clear: both; | |
} | |
.clearfix { | |
overflow: hidden; | |
} | |
.pie-clearfix:after { | |
clear: both; | |
content: "."; | |
display: block; | |
height: 0; | |
visibility: hidden; | |
} | |
.pie-clearfix-ie { | |
display: block; | |
zoom: 1; | |
} | |
/* ------------------------------------------- */ | |
/* =spacing | |
---------------------------------------------- */ | |
.no_border { | |
border: 0 !important; | |
} | |
.no_bottom { | |
margin-bottom: 0 !important; | |
} | |
.no_left { | |
margin-left: 0 !important; | |
} | |
.no_right { | |
margin-right: 0 !important; | |
} | |
.no_top { | |
margin-top: 0 !important; | |
} | |
.reset { | |
margin: 0 !important; | |
padding: 0 !important; | |
} | |
.reset_all { | |
border: 0 !important; | |
margin: 0 !important; | |
padding: 0 !important; | |
} | |
.reset_margin { | |
margin: 0 !important; | |
} | |
.reset_padding { | |
padding: 0 !important; | |
} | |
/* ------------------------------------------- */ | |
/* =alignment | |
---------------------------------------------- */ | |
.align_center { | |
text-align: center !important; | |
} | |
.align_justify { | |
text-align: justify !important; | |
} | |
.align_left { | |
text-align: left !important; | |
} | |
.align_right { | |
text-align: right !important; | |
} | |
/* ------------------------------------------- */ | |
/* =visibility | |
---------------------------------------------- */ | |
.block { | |
display: block !important; | |
} | |
.hide { | |
display: none !important; | |
} | |
.hide-offset { | |
position: absolute; | |
top: -99999px; | |
} | |
.inline { | |
display: inline !important; | |
} | |
/* ------------------------------------------- */ | |
/* | |
Heroku fonts used all over. | |
We can't serve fonts from S3 because of cross domain policies. | |
https://developer.mozilla.org/en/HTTP_access_control | |
*/ | |
@font-face { | |
font-family: 'CorbelBold'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/corbelbold-webfont.eot?') format('eot'), | |
url('/fonts/corbelbold-webfont.woff') format('woff'), | |
url('/fonts/corbelbold-webfont.ttf') format('truetype'), | |
url('/fonts/corbelbold-webfont.svg#webfontlZZPxZYu') format('svg'); | |
} | |
@font-face { | |
font-family: 'CorbelRegular'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/corbel-webfont.eot?') format('eot'), | |
url('/fonts/corbel-webfont.woff') format('woff'), | |
url('/fonts/corbel-webfont.ttf') format('truetype'), | |
url('/fonts/corbel-webfont.svg#webfontO0rfJpd7') format('svg'); | |
} | |
@font-face { | |
font-family: 'HybreaLight'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/hybrealight-webfont.eot?') format('eot'), | |
url('/fonts/hybrealight-webfont.woff') format('woff'), | |
url('/fonts/hybrealight-webfont.ttf') format('truetype'), | |
url('/fonts/hybrealight-webfont.svg#webfontHioEustJ') format('svg'); | |
} | |
@font-face { | |
font-family: 'HybreaRegular'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/hybrea-webfont.eot?') format('eot'), | |
url('/fonts/hybrea-webfont.woff') format('woff'), | |
url('/fonts/hybrea-webfont.ttf') format('truetype'), | |
url('/fonts/hybrea-webfont.svg#webfonto3DdN6lX') format('svg'); | |
} | |
@font-face { | |
font-family: 'InconsolataMedium'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/inconsolata-webfont.eot'); | |
src: url('/fonts/inconsolata-webfont.eot?#iefix') format('embedded-opentype'), | |
url('/fonts/inconsolata-webfont.woff') format('woff'), | |
url('/fonts/inconsolata-webfont.ttf') format('truetype'), | |
url('/fonts/inconsolata-webfont.svg#InconsolataMedium') format('svg'); | |
} | |
@font-face { | |
font-family: 'MesloItalic'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/meslolgs-dz-italic-webfont.eot'); | |
src: url('/fonts/meslolgs-dz-italic-webfont.eot?#iefix') format('embedded-opentype'), | |
url('/fonts/meslolgs-dz-italic-webfont.woff') format('woff'), | |
url('/fonts/meslolgs-dz-italic-webfont.ttf') format('truetype'), | |
url('/fonts/meslolgs-dz-italic-webfont.svg#MesloLGSDZItalic') format('svg'); | |
} | |
@font-face { | |
font-family: 'MesloRegular'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/meslolgs-dz-regular-webfont.eot'); | |
src: url('/fonts/meslolgs-dz-regular-webfont.eot?#iefix') format('embedded-opentype'), | |
url('/fonts/meslolgs-dz-regular-webfont.woff') format('woff'), | |
url('/fonts/meslolgs-dz-regular-webfont.ttf') format('truetype'), | |
url('/fonts/meslolgs-dz-regular-webfont.svg#MesloLGSDZRegular') format('svg'); | |
} | |
@font-face { | |
font-family: 'MesloBold'; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/meslolgs-dz-bold-webfont.eot'); | |
src: url('/fonts/meslolgs-dz-bold-webfont.eot?#iefix') format('embedded-opentype'), | |
url('/fonts/meslolgs-dz-bold-webfont.woff') format('woff'), | |
url('/fonts/meslolgs-dz-bold-webfont.ttf') format('truetype'), | |
url('/fonts/meslolgs-dz-bold-webfont.svg#MesloLGSDZBold') format('svg'); | |
} | |
/* | |
title: base css | |
author: maximilian schoening (@mschoening) | |
*/ | |
body { | |
background: url('https://devcenter.heroku.com/images/dev-center/body_bg.png') repeat #f0f0f0; | |
color: #333; | |
font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif; | |
font-size: 13px; | |
} | |
/* =headings | |
---------------------------------------------- */ | |
h2 { | |
color: #666; | |
font-size: 20px; | |
font-weight: normal; | |
margin: 0 0 18px 0; | |
} | |
h3 { | |
border-bottom: 1px solid #e5e5e5; | |
color: #666; | |
font-size: 16px; | |
font-weight: normal; | |
margin: 0 0 12px 0; | |
padding: 0 0 4px 0; | |
} | |
h4 { | |
color: #666; | |
font-size: 14px; | |
margin: 0 0 8px 0; | |
} | |
/* ------------------------------------------- */ | |
/* =links | |
---------------------------------------------- */ | |
a:link, a:visited { | |
color: #3e588d; | |
text-decoration: none; | |
} | |
a:hover, a:active { | |
} | |
/* ------------------------------------------- */ | |
/* =paragraphs | |
---------------------------------------------- */ | |
p { | |
line-height: 20px; | |
margin: 0 0 22px 0; | |
} | |
p:last-child { | |
margin: 0; | |
} | |
/* ------------------------------------------- */ | |
/* =images | |
---------------------------------------------- */ | |
p img { | |
background: #fff; | |
border: 1px solid #e5e5e5; | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); | |
display: block; | |
padding: 4px; | |
max-width: 460px; | |
} | |
/* ------------------------------------------- */ | |
/* =lists | |
---------------------------------------------- */ | |
ul, ol { | |
margin: 0 0 22px 0; | |
padding: 0 0 0 24px; | |
} | |
ul:last-child, ol:last-child { | |
margin: 0; | |
} | |
ul li, ol li { | |
line-height: 18px; | |
margin: 0 0 8px 0; | |
} | |
ul li:last-child, ol li:last-child { | |
margin: 0; | |
} | |
/* ------------------------------------------- */ | |
/* =code | |
---------------------------------------------- */ | |
code { | |
background: #f0f6fc; | |
border: 1px solid #d2dce6; | |
color: #444; | |
font-family: Monaco, monospace; | |
font-size: 11px; | |
padding: 1px 2px; | |
white-space: nowrap; | |
} | |
pre { | |
background: url('https://devcenter.heroku.com/images/dev-center/wikistyle/pre_code_background.png') repeat #434e56; | |
border: 1px solid #3f464c; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
line-height: 18px; | |
margin: 0 0 22px 0; | |
overflow-y: auto; | |
padding: 12px; | |
} | |
pre::-webkit-scrollbar { | |
height: 7px; | |
width: 7px; | |
} | |
pre::-webkit-scrollbar-button:start:decrement, pre::-webkit-scrollbar-button:end:increment { | |
display: none; | |
} | |
pre::-webkit-scrollbar-track-piece { | |
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .1))); | |
} | |
pre::-webkit-scrollbar-thumb:horizontal { | |
background: -webkit-gradient(linear, left top, left bottom, from(#99a2ab), to(#6a747c)); | |
-webkit-border-radius: 3px; | |
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .66) inset; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .66) inset; | |
width: 25px; | |
} | |
pre code { | |
background: transparent; | |
border: none; | |
color: #f8f8f8; | |
white-space: pre; | |
} | |
/* ------------------------------------------- */ | |
/* =forms | |
---------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =tables | |
---------------------------------------------- */ | |
table { | |
margin: 0 0 22px 0; | |
width: 100%; | |
} | |
table tr th { | |
background: #f1f1f1; | |
border-bottom: 1px solid #e5e5e5; | |
border-left: 1px solid #e5e5e5; | |
border-top: 1px solid #e5e5e5; | |
color: #999; | |
font-size: 11px; | |
padding: 8px; | |
text-align: center; | |
} | |
table tr th:last-child { | |
border-right: 1px solid #e5e5e5; | |
} | |
table tr td { | |
border-bottom: 1px solid #e5e5e5; | |
border-left: 1px solid #e5e5e5; | |
padding: 8px; | |
text-align: center; | |
} | |
table tr td:first-child { | |
text-align: left; | |
} | |
table tr td:last-child { | |
border-right: 1px solid #e5e5e5; | |
} | |
/* ------------------------------------------- */ | |
/* =objects | |
---------------------------------------------- */ | |
object { | |
margin: 0 0 22px 0; | |
max-width: 470px; | |
} | |
/* ------------------------------------------- */ | |
/* =highlights | |
---------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =faqs | |
---------------------------------------------- */ | |
.faqs { | |
margin: 0 0 22px 0; | |
} | |
.faqs:last-child { | |
margin: 0; | |
} | |
.faqs dt { | |
margin: 0 0 12px 0; | |
} | |
.faqs dt a:link, .faqs dl a:visited { | |
background: url('https://devcenter.heroku.com/images/dev-center/icon_sprite_16.png') left -75px no-repeat; | |
font-size: 13px; | |
font-weight: bold; | |
padding: 4px 0 4px 22px; | |
} | |
.faqs dt a.open:link, .faqs dl a.open:visited { | |
background-position: left -115px; | |
} | |
.faqs dt:last-child { | |
margin: 0; | |
} | |
.faqs dd { | |
margin: 0 0 22px 0; | |
padding: 0 0 0 22px; | |
} | |
.faqs dd:last-child { | |
margin: 0; | |
} | |
/* ------------------------------------------- */ | |
/* =results | |
---------------------------------------------- */ | |
.results { | |
list-style: none; | |
padding: 0; | |
} | |
.results li { | |
margin: 0 0 12px 0; | |
} | |
.results li:last-child { | |
margin: 0; | |
} | |
.results li a:link, .results li a:visited { | |
background: url('https://devcenter.heroku.com/images/dev-center/icon_sprite_16.png') no-repeat; | |
font-size: 13px; | |
font-weight: bold; | |
padding: 4px 0 4px 22px; | |
} | |
.results.articles li a:link, .results.articles li a:visited { | |
background-position: left 4px; | |
} | |
.results.community li a:link, .results.community li a:visited { | |
background-position: left -35px; | |
} | |
/* ------------------------------------------- */ | |
/* =layout | |
---------------------------------------------- */ | |
#wrapper { | |
margin: 0 auto; | |
padding: 10px 12px; | |
width: 960px; | |
background-color: white; | |
} | |
/* =header | |
---------------------------------------------- */ | |
/* todo: move header styles here */ | |
/* ------------------------------------------- */ | |
/* =sheet | |
---------------------------------------------- */ | |
#sheet { | |
padding: 32px 0; | |
} | |
/* =sidebar | |
---------------------------------------------- */ | |
#sidebar { | |
float: left; | |
margin: 0 24px 0 0; | |
width: 204px; | |
} | |
/* =search | |
---------------------------------------------- */ | |
#search { | |
margin: 0 0 12px 0; | |
} | |
#search form p input[type='text'] { | |
background-color: #fafafa; | |
background-image: url('https://devcenter.heroku.com/images/dev-center/search_glyph.png'); | |
background-position: left 6px; | |
background-repeat: no-repeat; | |
border: 1px solid #aeb3b8; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, .66), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .66), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
box-shadow: 0 1px 1px rgba(255, 255, 255, .66), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
color: #2275bb; | |
font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif; | |
font-size: 16px; | |
padding: 8px 8px 8px 34px; | |
outline: none; | |
width: 160px; | |
} | |
#search form p input[type='text']:focus { | |
background-position: left -35px; | |
border: 1px solid #74a9de; | |
-moz-box-shadow: 0 0 4px rgba(111, 177, 243, .5), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
-webkit-box-shadow: 0 0 4px rgba(111, 177, 243, .5), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
box-shadow: 0 0 4px rgba(111, 177, 243, .5), 0 1px 4px rgba(0, 0, 0, .1) inset; | |
} | |
#search form p input[type='text']:focus:valid { | |
background-image: url('https://devcenter.heroku.com/images/dev-center/search_glyph.png'), url('https://devcenter.heroku.com/images/dev-center/search_return.png'); | |
background-position: left -35px, right 10px; | |
padding: 8px 29px 8px 34px; | |
width: 139px; | |
} | |
/* ------------------------------------------- */ | |
/* =quicknav | |
---------------------------------------------- */ | |
#quicknav { | |
display: none; | |
} | |
/* ------------------------------------------- */ | |
/* =nav | |
---------------------------------------------- */ | |
#nav { | |
list-style: none; | |
padding: 0; | |
} | |
#nav .category-group { | |
line-height: 18px; | |
margin: 0 0 6px 0; | |
} | |
#nav .category-group .category, #nav .category-group .fake-category { | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_default.png') right center no-repeat, -moz-linear-gradient(top, #f7f7f7, #ededed); | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_default.png') right center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ededed)); | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_default.png') right center no-repeat, linear-gradient(top, #f7f7f7, #ededed); | |
border: 1px solid #acb3b7; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px #fff inset; | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px #fff inset; | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px #fff inset; | |
color: #464951; | |
display: block; | |
-webkit-font-smoothing: antialiased; | |
font-size: 14px; | |
font-weight: bold; | |
padding: 6px 8px; | |
position: relative; | |
text-shadow: 0 1px 1px #fff; | |
z-index: 2; | |
} | |
#nav .category-group .category.ui-state-active { | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_open.png') right center no-repeat, -moz-linear-gradient(top, #f7f7f7, #ededed); | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_open.png') right center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ededed)); | |
background: url('https://devcenter.heroku.com/images/dev-center/aside_accordion_indicator_open.png') right center no-repeat, linear-gradient(top, #f7f7f7, #ededed); | |
} | |
#nav .category-group .tags { | |
background: rgba(59, 68, 88, .1); | |
border: 1px solid #cacaca; | |
-moz-border-radius-bottomleft: 3px; | |
-moz-border-radius-bottomright: 3px; | |
-webkit-border-bottom-left-radius: 3px; | |
-webkit-border-bottom-right-radius: 3px; | |
border-bottom-left-radius: 3px; | |
border-bottom-right-radius: 3px; | |
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, .1); | |
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 1); | |
box-shadow: 0 1px 1px rgba(255, 255, 255, 1); | |
list-style: none; | |
margin: -3px 0 0 0; | |
padding: 2px 0; | |
} | |
#nav .category-group .tags li { | |
font-size: 13px; | |
line-height: 1; | |
margin: 0; | |
padding: 6px 8px; | |
} | |
#nav .category-group .tags li a:link, #nav .category-group .tags li a:visited { | |
color: #5a5e67; | |
-webkit-font-smoothing: antialiased; | |
font-weight: bold; | |
} | |
#nav .category-group .tags li.active a:link, #nav .category-group .tags li.active a:visited { | |
color: #3772ac; | |
} | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =main | |
---------------------------------------------- */ | |
#main { | |
float: left; | |
width: 732px; | |
} | |
/* =page | |
---------------------------------------------- */ | |
#page, .page { | |
background: #fff; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
color: #333; | |
padding: 18px; | |
} | |
#page hgroup, .page hgroup { | |
margin: 0 0 24px 0; | |
} | |
#page hgroup h1, .page hgroup h1 { | |
color: #111; | |
font-size: 24px; | |
font-weight: normal; | |
margin: 0 0 8px 0; | |
} | |
#page hgroup h1:last-child, .page hgroup h1:last-child { | |
margin: 0; | |
} | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =home-page | |
---------------------------------------------- */ | |
/* =intro | |
---------------------------------------------- */ | |
#home-page #intro { | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
margin: 0 0 24px 0; | |
position: relative; | |
} | |
#home-page #intro > h2 { | |
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .2))); | |
background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .2)); | |
background: linear-gradient(top, transparent, rgba(0, 0, 0, .2)); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15); | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .15); | |
color: #fff; | |
font-family: CorbelBold, "Helvetica Neue", Helvetica, Arial Geneva, sans-serif; | |
font-size: 22px; | |
line-height: 42px; | |
padding: 0 0 0 14px; | |
position: absolute; | |
text-shadow: 0 1px 1px rgba(0, 0, 0, .3); | |
width: 946px; | |
z-index: 99999; | |
} | |
#home-page #intro #cycle .pane { | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
padding: 42px 0; | |
width: 960px; | |
} | |
#home-page #intro #cycle .pane .content { | |
background: url('https://devcenter.heroku.com/images/dev-center/intro_bg.png'), -moz-linear-gradient(top, rgba(0, 0, 0, .25), rgba(0, 0, 0, .20) 8%, rgba(0, 0, 0, .15) 25%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .20) 92%, rgba(0, 0, 0, .28)); | |
background: url('https://devcenter.heroku.com/images/dev-center/intro_bg.png'), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .25)), color-stop(.08, rgba(0, 0, 0, .20)), color-stop(.25, rgba(0, 0, 0, .15)), color-stop(.65, rgba(0, 0, 0, 0)), color-stop(.92, rgba(0, 0, 0, .20)), to(rgba(0, 0, 0, .28))); | |
background: url('https://devcenter.heroku.com/images/dev-center/intro_bg.png'), linear-gradient(top, rgba(0, 0, 0, .25), rgba(0, 0, 0, .20) 8%, rgba(0, 0, 0, .15) 25%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .20) 92%, rgba(0, 0, 0, .28)); | |
display: table; | |
width: 100%; | |
} | |
#home-page #intro #cycle .pane .content .td { | |
display: table-cell; | |
padding: 18px 32px; | |
vertical-align: middle; | |
} | |
#home-page #intro #cycle .pane .content .description { | |
color: #fff; | |
-webkit-font-smoothing: antialiased; | |
text-shadow: 0 1px 1px rgba(0, 0, 0, .25); | |
width: 416px; | |
} | |
#home-page #intro #cycle .pane .content .description h1 { | |
font-size: 22px; | |
font-weight: 400; | |
margin: 0 0 12px 0; | |
} | |
#home-page #intro #cycle .pane .content .description p { | |
font-size: 14px; | |
line-height: 22px; | |
} | |
#home-page #intro #cycle .pane .content .image { | |
text-align: right; | |
width: 416px; | |
} | |
#home-page #intro #controls { | |
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .2))); | |
background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .2)); | |
background: linear-gradient(top, transparent, rgba(0, 0, 0, .2)); | |
-moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .1) inset; | |
-webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .1) inset; | |
box-shadow: 0 -1px 1px rgba(0, 0, 0, .15), 0 1px 1px rgba(255, 255, 255, .1) inset; | |
-moz-border-radius-bottomleft: 5px; | |
-moz-border-radius-bottomright: 5px; | |
-webkit-border-bottom-left-radius: 5px; | |
-webkit-border-bottom-right-radius: 5px; | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
margin: -42px 0 0 0; | |
list-style: none; | |
position: relative; | |
text-align: center; | |
z-index: 99999; | |
} | |
#home-page #intro #controls li { | |
display: inline-block; | |
margin: 0; | |
} | |
#home-page #intro #controls li a:link, #home-page #intro #controls li a:visited { | |
color: rgba(0, 0, 0, .5); | |
font-size: 28px; | |
line-height: 42px; | |
-webkit-font-smoothing: antialiased; | |
text-shadow: 0 1px 1px rgba(255, 255, 255, .2); | |
} | |
#home-page #intro #controls li.activeSlide a:link, #home-page #intro #controls li.activeSlide a:visited { | |
color: rgba(255, 255, 255, .5); | |
text-shadow: 0 1px 1px rgba(0, 0, 0, .2); | |
} | |
/* ------------------------------------------- */ | |
/* =featured articles & popular articles | |
---------------------------------------------- */ | |
#home-page #featured-articles, #home-page #popular-articles { | |
background: #fff; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .25); | |
color: #333; | |
} | |
#home-page #featured-articles { | |
margin: 0 0 24px 0; | |
} | |
#home-page #featured-articles h2, #home-page #popular-articles h2 { | |
background: -moz-linear-gradient(top, #f2f2f2, #e2e2e2); | |
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e2e2e2)); | |
background: linear-gradient(top, #f2f2f2, #e2e2e2); | |
border-bottom: 1px solid rgba(172, 179, 183, .5); | |
-webkit-border-top-left-radius: 5px; | |
-webkit-border-top-right-radius: 5px; | |
-moz-border-radius-topleft: 5px; | |
-moz-border-radius-topright: 5px; | |
border-top-left-radius: 5px; | |
border-top-right-radius: 5px; | |
-moz-box-shadow: 0 1px 1px #fff inset; | |
-webkit-box-shadow: 0 1px 1px #fff inset; | |
box-shadow: 0 1px 1px #fff inset; | |
margin: 0; | |
padding: 18px; | |
font-size: 18px; | |
font-weight: bold; | |
-webkit-font-smoothing: antialiased; | |
text-shadow: 0 1px 1px #fff; | |
} | |
#home-page #featured-articles ul, #home-page #popular-articles ul { | |
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#fff)); | |
border-top: 1px solid #fff; | |
-webkit-border-bottom-left-radius: 5px; | |
-webkit-border-bottom-right-radius: 5px; | |
-moz-border-radius-bottomleft: 5px; | |
-moz-border-radius-bottomright: 5px; | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
list-style: none; | |
padding: 18px; | |
} | |
#home-page #featured-articles ul li, #home-page #popular-articles ul li { | |
margin: 0 0 18px 0; | |
} | |
#home-page #featured-articles ul li:last-child, #home-page #popular-articles ul li:last-child { | |
margin: 0; | |
} | |
#home-page #featured-articles ul li a:link, #home-page #featured-articles ul li a:visited, #home-page #popular-articles ul li a:link, #home-page #popular-articles ul li a:visited { | |
background: url('https://devcenter.heroku.com/images/dev-center/article-icon-large.png') left center no-repeat; | |
display: block; | |
font-size: 14px; | |
line-height: 32px; | |
padding: 0 0 0 40px; | |
} | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =article | |
/* ------------------------------------------- */ | |
/* =contribution | |
---------------------------------------------- */ | |
#article #contribution { | |
background: rgba(128, 146, 167, .3); | |
border: 1px solid #acb8c5; | |
-moz-border-radius-topleft: 5px; | |
-moz-border-radius-topright: 5px; | |
-webkit-border-top-left-radius: 5px; | |
-webkit-border-top-right-radius: 5px; | |
border-top-left-radius: 5px; | |
border-top-right-radius: 5px; | |
color: #636a76; | |
-webkit-font-smoothing: antialiased; | |
margin: 0; | |
overflow: hidden; | |
padding: 18px 24px 21px 24px; | |
text-shadow: 0 1px 1px rgba(255, 255, 255, .25); | |
} | |
#article #contribution img { | |
float: left; | |
max-height: 48px; | |
max-width: 128px; | |
margin: 0 24px 0 0; | |
} | |
#article #contribution div h4 { | |
font-size: 14px; | |
font-weight: normal; | |
margin: 0 0 4px 0; | |
} | |
#article #contribution div h4 a:link, #article #contribution div h4 a:visited { | |
color: #636a76; | |
font-weight: bold; | |
} | |
/* ------------------------------------------- */ | |
/* =article | |
---------------------------------------------- */ | |
{ | |
background: #fff; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2); | |
color: #333; | |
padding: 18px 244px 18px 18px; | |
position: relative; | |
} | |
.contributed { | |
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2), 0 0 0 4px rgba(165, 187, 212, .1) inset; | |
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2), 0 0 0 4px rgba(165, 187, 212, .1) inset; | |
box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(113, 123, 149, .2), 0 0 0 4px rgba(165, 187, 212, .1) inset; | |
margin: -3px 0 0 0; | |
} | |
hgroup { | |
margin: 0 0 24px 0; | |
} | |
hgroup h1 { | |
background: url('https://devcenter.heroku.com/images/dev-center/article-icon-large.png') left center no-repeat; | |
color: #111; | |
font-size: 24px; | |
font-weight: normal; | |
line-height: 32px; | |
margin: 0 0 8px 0; | |
padding: 0 0 0 40px; | |
} | |
hgroup h1:last-child { | |
margin: 0; | |
} | |
hgroup .meta { | |
color: #999; | |
font-size: 11px; | |
font-style: italic; | |
margin: 0 0 8px 0; | |
} | |
hgroup .tags a:link, hgroup .tags a:visited { | |
background: -webkit-gradient(linear, left top, left bottom, from(#f0f6fc), to(#cddff1)); | |
background: -moz-linear-gradient(top, #f0f6fc, #cddff1); | |
border: 1px solid #a1b8d6; | |
-moz-border-radius: 32px; | |
-webkit-border-radius: 32px; | |
border-radius: 32px; | |
-moz-box-shadow: 0 1px 1px #fff; | |
-webkit-box-shadow: 0 1px 1px #fff; | |
box-shadow: 0 1px 1px #fff; | |
color: #4d5765; | |
font-size: 12px; | |
font-weight: bold; | |
margin: 0 2px 0 0; | |
padding: 3px 8px; | |
text-shadow: 0 1px 1px rgba(255, 255, 255, .5); | |
} | |
hgroup .tags a:link:last-child, hgroup .tags a:visited:last-child { | |
margin: 0; | |
} | |
/* section: table of contents | |
---------------------------------------------- */ | |
#table-of-contents { | |
border-bottom: 1px solid #e5e5e5; | |
margin: 0 0 22px 0; | |
padding: 0 0 12px 0; | |
} | |
#table-of-contents ul { | |
list-style: none; | |
padding: 0 0 0 4px; | |
} | |
#table-of-contents ul li { | |
background: url("https://devcenter.heroku.com/images/dev-center/wikistyle/index_li_bullet.png") left center no-repeat; | |
padding: 0 0 0 22px; | |
} | |
/* ------------------------------------------- */ | |
/* =callouts | |
---------------------------------------------- */ | |
.callout { | |
background: #e1eaf3; | |
border: 1px solid #d0dbe6; | |
border-right: 1px solid #c3ced9; | |
color: #4f535d; | |
font-size: 12px; | |
padding: 12px; | |
position: absolute; | |
right: -11px; | |
width: 205px; | |
} | |
.callout:after { | |
bottom: -6px; | |
height: 8px; | |
position: absolute; | |
right: 0; | |
width: 9px; | |
} | |
/* ------------------------------------------- */ | |
/* =deprecated | |
---------------------------------------------- */ | |
.deprecated { | |
background: #fff3c5; | |
border: 1px solid #ffe075; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
color: #937f38; | |
margin: 0 0 22px 0; | |
padding: 12px; | |
} | |
.deprecated a:link, .deprecated a:visited { | |
color: #937f38; | |
font-weight: bold; | |
text-decoration: underline; | |
} | |
/* ------------------------------------------- */ | |
/* =discussion (jive) | |
---------------------------------------------- */ | |
#discussion-jive h1 a:link, #discussion-jive h1 a:visited { | |
background-image: url('https://devcenter.heroku.com/images/dev-center/jive_discussion_glyph.png'), url('https://devcenter.heroku.com/images/dev-center/jive_discussion_arrow.png'), -moz-linear-gradient(top, #fff, #efefef); | |
background-image: url('https://devcenter.heroku.com/images/dev-center/jive_discussion_glyph.png'), url('https://devcenter.heroku.com/images/dev-center/jive_discussion_arrow.png'), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#efefef)); | |
background-image: url('https://devcenter.heroku.com/images/dev-center/jive_discussion_glyph.png'), url('https://devcenter.heroku.com/images/dev-center/jive_disccusion_arrow.png'), linear-gradient(top, #fff, #efefef); | |
background-position: left center, right center; | |
background-repeat: no-repeat; | |
border: 1px solid #c0c0c0; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
display: block; | |
color: #717171; | |
font-size: 18px; | |
font-weight: normal; | |
padding: 10px 38px 10px 55px; | |
} | |
#discussion-jive h1 a:hover, #discussion-jive h1 a:active { | |
border: 1px solid #9ac4e4; | |
-moz-box-shadow: 0 0 4px rgba(154, 196, 228, .8); | |
-webkit-box-shadow: 0 0 4px rgba(154, 196, 228, .8); | |
box-shadow: 0 0 4px rgba(154, 196, 228, .8); | |
} | |
/* ------------------------------------------- */ | |
/* =warning | |
---------------------------------------------- */ | |
.warning { | |
background: #fff3c5; | |
border: 1px solid #ffe075; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
color: #937f38; | |
margin: 0 0 22px 0; | |
padding: 12px; | |
} | |
.warning a:link, .warning a:visited { | |
color: #937f38; | |
font-weight: bold; | |
text-decoration: underline; | |
} | |
/* ------------------------------------------- */ | |
/* =note | |
---------------------------------------------- */ | |
.note { | |
background: #E1EAF3; | |
border: 1px solid #D0DBE6; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
color: #4F535D; | |
margin: 0 0 22px 0; | |
padding: 12px; | |
} | |
.note a:link, .note a:visited { | |
color: #4F535D; | |
font-weight: bold; | |
text-decoration: underline; | |
} | |
/* ------------------------------------------- */ | |
/* ------------------------------------------- */ | |
/* =article-pagination | |
---------------------------------------------- */ | |
#main #pagination { | |
margin: 18px 0 0 0; | |
} | |
#main #pagination #next { | |
float: right; | |
} | |
/* ------------------------------------------- */ | |
#article blockquote { | |
font-family: georgia; | |
font-size: 1.1em; | |
font-style: italic; | |
line-height: 1.75em; | |
margin: 1em 0; | |
padding: 0 1em; | |
color: #888; | |
border-left: 2px solid #888; | |
} | |
/* ------------------------------------------- */ | |
/* =tag | |
---------------------------------------------- */ | |
#tag #page hgroup h1 { | |
background: url('https://devcenter.heroku.com/images/dev-center/tag-icon-large.png') left center no-repeat; | |
-webkit-font-smoothing: antialiased; | |
font-weight: bold; | |
line-height: 32px; | |
padding: 0 0 0 40px; | |
} | |
/* ------------------------------------------- */ | |
/* =category | |
---------------------------------------------- */ | |
#category #page { | |
padding: 0; | |
} | |
#category #page hgroup { | |
background: -moz-linear-gradient(top, #f2f2f2, #e2e2e2); | |
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e2e2e2)); | |
background: linear-gradient(top, #f2f2f2, #e2e2e2); | |
border-bottom: 1px solid rgba(172, 179, 183, .5); | |
-webkit-border-top-left-radius: 5px; | |
-webkit-border-top-right-radius: 5px; | |
-moz-border-radius-topleft: 5px; | |
-moz-border-radius-topright: 5px; | |
border-top-left-radius: 5px; | |
border-top-right-radius: 5px; | |
-moz-box-shadow: 0 1px 1px #fff inset; | |
-webkit-box-shadow: 0 1px 1px #fff inset; | |
box-shadow: 0 1px 1px #fff inset; | |
margin: 0; | |
padding: 24px 18px; | |
} | |
#category #page hgroup h1 { | |
color: #464951; | |
font-weight: bold; | |
text-shadow: 0 1px 1px #fff; | |
} | |
#category #page .padder { | |
padding: 18px; | |
} | |
/* ------------------------------------------- */ | |
div.multiplecode hr { | |
display: none; | |
} | |
p.no-results { display: none; } | |
#article-results ul.results, #community-results ul.results { display: none; } | |
#article-results ul{ margin-bottom: 0; } | |
#admin-tabs { | |
right: 10px; | |
top: -23px; | |
position: absolute; | |
} | |
#admin-tabs a { | |
color: white; | |
display: block; | |
float: right; | |
margin-left: 5px; | |
padding: 5px 15px; | |
background-color: #767493; | |
-webkit-border-top-left-radius: 5px; | |
-webkit-border-top-right-radius: 5px; | |
-moz-border-radius-topleft: 5px; | |
-moz-border-radius-topright: 5px; | |
border-top-left-radius: 5px; | |
border-top-right-radius: 5px; | |
} | |
.padder, #page{ | |
position: relative; | |
} | |
ins.differ { | |
background-color: #cfc !important; | |
text-decoration: none; | |
} | |
del.differ, del.differ * { | |
background-color: #fcc !important; | |
} | |
#changelog .page { | |
margin-bottom: 20px !important; | |
} | |
.languagebar { | |
-moz-border-radius: 3px 3px 0 0; | |
-webkit-border-radius: 3px 3px 0 0; | |
background-color: #333; | |
border-bottom: 1px solid #292929; | |
text-align: right; | |
} | |
.languagebar a { | |
color: #777; | |
padding: 2px 3px 2px 5px; | |
} | |
.languagebar a:hover, .languagebar a.current { | |
color: #ddd; | |
} | |
.languagebar ul { | |
margin: 0; | |
padding: 3px 5px 2px 0; | |
list-style-type: none; | |
} | |
.languagebar li { | |
display: inline; | |
} | |
/* | |
title: header css | |
author: maximilian schoening (@mschoening) | |
*/ | |
/* =heroku header | |
---------------------------------------------- */ | |
#heroku-header { | |
background: #3b4458; | |
border-bottom: 4px solid #5d6c90; | |
} | |
#heroku-header #heroku-header-hgroup h1 a:link, #heroku-header #heroku-header-hgroup h1 a:visited { | |
background: url('https://devcenter.heroku.com/images/dev-center/heroku-header-logo.png') no-repeat; | |
} | |
#heroku-header #heroku-header-nav ul.group { | |
background: rgba(46, 54, 70, .5); | |
} | |
#heroku-header #heroku-header-nav ul li { | |
border-right: 2px solid rgba(46, 54, 70, .9); | |
} | |
#heroku-header #heroku-header-nav ul li.last { | |
border: none; | |
} | |
#heroku-header #heroku-header-nav ul li a:link, #heroku-header #heroku-header-nav ul li a:visited { | |
color: #9daac5; | |
} | |
#heroku-header #heroku-header-nav ul li a:hover, #heroku-header #heroku-header-nav ul li a:active { | |
color: #fff; | |
} | |
#heroku-header #heroku-header-nav #heroku-header-aid li a:link, #heroku-header #heroku-header-nav #heroku-header-aid li a:visited { | |
color: #92badb; | |
} | |
#heroku-header #heroku-header-nav #heroku-header-aid li a:hover, #heroku-header #heroku-header-nav #heroku-header-aid li a:active { | |
color: #74d0f4; | |
} | |
#heroku-header #heroku-header-nav #heroku-header-my-heroku li a:link, #heroku-header #heroku-header-nav #heroku-header-my-heroku li a:visited { | |
color: #92badb; | |
} | |
#heroku-header #heroku-header-nav #heroku-header-my-heroku li a:hover, #heroku-header #heroku-header-nav #heroku-header-my-heroku li a:active { | |
color: #74d0f4; | |
} | |
#heroku-header #heroku-header-nav ul li.active a:link, #heroku-header #heroku-header-nav ul li.active a:visited { | |
color: #bff740 !important; | |
} | |
@media only screen and (max-width: 1020px) { | |
#heroku-header #heroku-header-nav ul li { | |
border: none; | |
} | |
} | |
@media only screen and (max-width: 600px) { | |
#heroku-header { | |
border-bottom: 3px solid #5d6c90; | |
} | |
#heroku-header #heroku-header-quicknav { | |
background: url('https://devcenter.heroku.com/images/dev-center/heroku-header-logo-mobile.png') no-repeat left center; | |
} | |
} | |
/* ------------------------------------------- */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment