style.less

   1 // dimensions
   2 @site-width: 940px; // inside the shadow
   3 @nav-width: 200px; // inner
   4 @site-gutter-width: 18px; // padding around nav and main columns
   5 @site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width;
   6
   7 // colors
   8 @site-body-color:   #fff; // the centered area with the site in it
   9 @site-window-color: #f4f4f4; // outside that, filling the rest of the browser window
  10
  11 header, hgroup, section, footer, aside, nav, article, figure, img {
  12         display: block;
  13 }
  14
  15 body {
  16         margin: 0;
  17         padding: 0;
  18         color: #000;
  19         background: @site-body-color; // overruled below except in wysiywyg
  20         font: 14px "Liberation Sans", Arimo, Arial, sans-serif;
  21 }
  22 body.real_body_tag { // not the wysiwyg body
  23         background: @site-window-color;
  24 }
  25
  26 // try to make the content of the editor widget approximately the same size as
  27 // the content will be displayed
  28 #cke_content {
  29         margin-right: -30px;
  30 }
  31
  32 #centerer {
  33         position: relative;
  34         background: @site-body-color;
  35         margin: 15px auto;
  36         width: @site-width;
  37         -moz-box-shadow: 2px 2px 15px #777;
  38         -webkit-box-shadow: 2px 2px 15px #777;
  39         box-shadow: 2px 2px 13px #777;
  40 }
  41
  42 header {
  43         width: @site-width;
  44         height: 100px;
  45 }
  46
  47 @nav-padding: 10px;
  48 nav {
  49         float: left;
  50         width: @nav-width - 2*@nav-padding;
  51         padding: @nav-padding;
  52         h3 {
  53                 span {
  54                         color: @site-body-color;
  55                 }
  56         }
  57         h3.current {
  58                 span {
  59                         color: inherit;
  60                 }
  61                 a {
  62                         text-decoration: none;
  63                 }
  64         }
  65 }
  66
  67 #main-body {
  68         float: left;
  69         width: @site-main-body-width;
  70         padding: @site-gutter-width @site-gutter-width 3*@site-gutter-width @site-gutter-width;
  71         background: @site-body-color;
  72 }
  73
  74 footer {
  75         clear: both;
  76         width: @site-width - 2*@site-gutter-width;
  77         padding: @site-gutter-width;
  78         text-align: center;
  79         font-size: 80%;
  80 }
  81
  82 #wfpl_messages {
  83         border: 2px solid red;
  84         background: #fbb;
  85         padding: 5px;
  86         margin: 20px 0px;
  87         p {
  88                 font-size: 120%;
  89                 padding: 5px;
  90                 margin: 0px;
  91         }
  92         hr {
  93                 height: 1px;
  94         }
  95 }
  96
  97 #admin_links {
  98         background: #fdd;
  99         padding: 3px;
 100         margin-bottom: 15px;
 101 }
 102
 103 code.html {
 104         display: block;
 105         font: 12px monospace;
 106         border: 1px solid black;
 107         background: #ccc;
 108 }
 109
 110 .caption {
 111         margin-top: 15px;
 112         font-weight: bold;
 113 }
 114 .field {
 115         margin-bottom: 15px;
 116 }
 117 div.field_notes {
 118         font-size: 12px;
 119         line-height: 16px;
 120 }
 121 fieldset {
 122         border: 1px dotted black;
 123         padding: 0 15px 15px 15px;
 124         margin: 15px 0;
 125         position: relative;
 126 }
 127 legend {
 128         padding: 0 6px;
 129         font-weight: bold;
 130 }
 131 div.error {
 132         border: 2px solid red;
 133         padding: 13px;
 134         margin: 20px;
 135         background: #fdd;
 136 }
 137
 138 h1 {
 139         font-size: 22px;
 140         margin: 20px 0 10px;
 141 }
 142 h1 + h4.tagline {
 143         margin: -10px 0 10px;
 144 }
 145 h2 {
 146         font-size: 19px;
 147         margin: 16px 0px 8px;
 148 }
 149 h2 + h4.tagline {
 150         margin: -8px 0 8px;
 151 }
 152 h3 {
 153         font-size: 16px;
 154         margin: 12px 0 5px;
 155 }
 156 h3 + h4.tagline {
 157         margin: -5px 0 5px;
 158 }
 159 h4 {
 160         font-size: 12px;
 161         margin: 10px 0 3px;
 162 }
 163 h4 + h4.tagline {
 164         margin: -3px 0 3px;
 165 }
 166
 167 h1, h2, h3, h4 {
 168         font-weight: bold;
 169 }
 170 h4.tagline {
 171         font-weight: normal
 172 }
 173
 174 p.quote {
 175         margin: 15px 35px;
 176 }
 177 p.attrib {
 178         margin: -15px 0 15px 100px;
 179 }
 180
 181
 182 // floating images (from pastable example code on admin_images)
 183 span.wfpl_ifl {
 184         display: block;
 185         float: left;
 186         clear: left;
 187         font-size: 10px;
 188         color: black;
 189         text-align: right;
 190         background-repeat: no-repeat;
 191         background-position: left top;
 192         margin: 0 10px 2px 0;
 193 }
 194 span.wfpl_ifr {
 195         display: block;
 196         float: right;
 197         clear: right;
 198         font-size: 10px;
 199         color: black;
 200         font-weight: normal;
 201         text-align: right;
 202         background-repeat: no-repeat;
 203         background-position: left top;
 204         margin: 0 0 2px 10px;
 205 }
 206 div.wfpl_ic {
 207         margin: 15px auto;
 208         font-size: 10px;
 209         font-weight: normal;
 210         text-align: right;
 211         background-repeat: no-repeat;
 212         background-position: center top;
 213 }
 214
 215 // hack so that vertical margins are only between siblings for the most part
 216 td > :first-child,
 217 th > :first-child,
 218 legend + *,
 219 article > :first-child,
 220 section > :first-child,
 221 nav > :first-child,
 222 div > :first-child,
 223 .first {
 224         margin-top: 0px;
 225 }
 226 td > :last-child,
 227 th > :last-child,
 228 fieldset > :last-child,
 229 article > :last-child,
 230 section > :last-child,
 231 nav > :last-child,
 232 div > :last-child,
 233 .last {
 234         margin-bottom: 0px;
 235 }