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