X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=metaform%2Fstyl.styl;fp=metaform%2Fstyl.styl;h=b95e4f00ab10d9aea119cdcb1b6a2097843b16b0;hb=ca169135c8b3ec936846befa20f583849b8c1108;hp=0000000000000000000000000000000000000000;hpb=1883204000b0d20d9dc41e025345592166518a8b;p=wfpl.git diff --git a/metaform/styl.styl b/metaform/styl.styl new file mode 100644 index 0000000..b95e4f0 --- /dev/null +++ b/metaform/styl.styl @@ -0,0 +1,274 @@ +@require 'code/wfpl/stylus-helpers.styl' +@require '.image-mtimes.styl' + +// dimensions +site-width = 934px // inside the shadow +site-padding = 30px +sidebar-width = 220px +content-width = (site-width - (site-padding * 3) - sidebar-width) +font-size-normal = 15px +font-size-small = 13px +font-size-tiny = 11px +site-column-gap = 40px +spritesheet-height = 1050px // for sprites near bottom + +// colors +content-bg = #fff +content-fg = #000 +window-bg = #e6e7e8 + +// always show vertical scrollbar, so content doesn't shift around when +// switching from tall to short pages +html + overflow-y: scroll + +header, hgroup, section, footer, aside, nav, article, figure, img + display: block + +code.html + display: block + font: 12px monospace + border: 1px solid black + background: #ccc + +* + .caption + margin-top: 15px + font-weight: bold + +.field + padding-top: 3px; + +div.field_notes + font-size: 12px + line-height: 16px + +fieldset + border: 1px dotted black + padding: 0 15px 15px 15px + margin: 15px 0 + position: relative + +legend + padding: 0 6px + font-weight: bold + +div.error + border: 2px solid red + padding: 13px + margin: 20px + background: #fdd + +h1 + font-size: 22px + margin: 20px 0 10px + +h1 + h4.tagline + margin: -10px 0 10px + +h2 + font-size: 19px + margin: 30px 0px 8px + +h2 + h4.tagline + margin: -8px 0 8px + +h3 + font-size: 16px + margin: 12px 0 5px + +h3 + h4.tagline + margin: -5px 0 5px + +h4 + font-size: 12px + margin: 10px 0 3px + +h4 + h4.tagline + margin: -3px 0 3px + + +h1, h2, h3, h4 + font-weight: bold + +h4.tagline + font-weight: normal + + +p.quote + font-size: 14px + font-weight: bold + padding-bottom: 1px + margin: 15px 15px 0 15px + +p.quote:before, p.quote:after + font-size: 40px + line-height: 0 + color: #777 + font-weight: bold + display: inline-block + height: 10px + position: relative + +p.quote:before + content: 'â' + top: 10px + +p.quote:after + content: 'â' + top: 20px + width: 0; // make sure it doesn't wrap + +p.attrib, p.attribution + margin: 0 0 15px 20px + margin-top: 1px + padding-left: 30px + font-size: 12px + font-weight: normal + &:before + content: "â " + +body + margin: 0 + padding: 0 + color: content-fg + font: font-size-normal Arimo, Arial, sans-serif + + // Styles for the tag within ckeditor + background: content-bg + width: content-width + margin: 0 auto + &.real_body_tag // revert the above for the on the real site + background: window-bg + width: auto + margin: 0 + +// expand the ckeditor widget so there's space for the content to be exactly +// the size of the content outside the editor +#cke_content + margin-right: -15px + margin-left: -15px + +// outermost div for centering, shadow, etc +#centerer + position: relative + background: content-bg + padding-top: 150px + padding-right: site-padding + padding-bottom: site-padding + padding-left: site-padding + width: site-width - @padding-left - @padding-right + margin: 10px auto + +nav#site-nav + padding-bottom: 20px + ul + li-reset() + space-evenly() + +footer + clear: both + padding-top: 40px + ul + li-reset() + li + li-reset() + display: inline-block + margin-right: 10px + +#wfpl_messages + background: #ffd + padding: 5px 12px + margin: 0 0 20px 0 + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4) + border-radius: 4px + p + font-size: 120% + padding: 5px 0 + margin: 0px + + hr + display: block + height: 1px + border: 0 + border-top: 1px dotted #ddc; + margin: 0 + padding: 0 + + +#admin_links + background: #fdd + padding: 3px + margin-bottom: 15px + + + + + +// floating images (from pastable example code on admin_images) +span.wfpl_ifl + display: block + float: left + clear: left + font-size: 10px + color: black + text-align: right + background-repeat: no-repeat + background-position: left top + margin: 0 10px 2px 0 + +span.wfpl_ifr + display: block + float: right + clear: right + font-size: 10px + color: black + font-weight: normal + text-align: right + background-repeat: no-repeat + background-position: left top + margin: 0 0 2px 10px + +div.wfpl_ic + margin: 15px auto + font-size: 10px + font-weight: normal + text-align: right + background-repeat: no-repeat + background-position: center top + + +// hack so that vertical margins are only between siblings for the most part +td > :first-child, +th > :first-child, +legend + *, +article > :first-child, +section > :first-child, +nav > :first-child, +div > :first-child, +.first + margin-top: 0px + +td > :last-child, +th > :last-child, +fieldset > :last-child, +article > :last-child, +section > :last-child, +nav > :last-child, +div > :last-child, +.last + margin-bottom: 0px + +table.evenodd + > thead, > tbody, & + > tr:nth-child(2n+1) + > td, > th + background: rgba(0,0,0,0.04) + &:hover + > td, > th + background: rgba(0,0,0,0.07) + > tr:nth-child(2n+0) + > td, > th + background: rgba(0,0,0,0.02) + &:hover + > td, > th + background: rgba(0,0,0,0.09)