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