Skip to content

Instantly share code, notes, and snippets.

@rwdaigle
Created January 21, 2013 14:55
Show Gist options
  • Save rwdaigle/4586628 to your computer and use it in GitHub Desktop.
Save rwdaigle/4586628 to your computer and use it in GitHub Desktop.
Heroku Dev Center stylesheet for use in article draft rendering.
/*
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