explain "none" admin role, bump wfpl

[wfpl-cms.git] / style.less
diff --git a/style.less b/style.less

index c0e5e63..19dcef3 100644 (file)
--- a/style.less
+++ b/style.less
@@ -1,16 +1,12 @@
  // dimensions
-@site-width: 940px;
-@nav-width: 200px;
-@site-gutter-width: 18px;
+@site-width: 940px; // inside the shadow
+@nav-width: 200px; // inner
+@site-gutter-width: 18px; // padding around nav and main columns
  @site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width;
  
  // colors
-@site-header-color: #ddf;
-@nav-color:    #dff;
-@site-body-color:   #fff;
-@site-window-color: #eee;
-@site-footer-color: #ddf;
-@site-gutter-color: #fff;
+@site-body-color:   #fff; // the centered area with the site in it
+@site-window-color: #f4f4f4; // outside that, filling the rest of the browser window
  
  header, hgroup, section, footer, aside, nav, article, figure, img {
         display: block;
@@ -20,13 +16,29 @@ body {
         margin: 0;
         padding: 0;
         color: #000;
-       background: @site-window-color;
-       font: 14px "Verdana", sans-serif;
+       font: 14px "Liberation Sans", Arimo, Arial, sans-serif;
+
+       // Styles for the <body> tag within ckeditor
+       background: @site-body-color;
+       width: @site-main-body-width;
+       margin: 0 auto;
+       &.real_body_tag { // revert the above for the <body> on the real site
+               background: @site-window-color;
+               width: auto;
+               margin: 0;
+       }
+}
+
+// try to make the content of the editor widget approximately the same size as
+// the content will be displayed
+#cke_content {
+       margin-right: -15px;
+       margin-left: -15px;
  }
  
  #centerer {
         position: relative;
-       background: @nav-color;
+       background: @site-body-color;
         margin: 15px auto;
         width: @site-width;
         -moz-box-shadow: 2px 2px 15px #777;
@@ -37,7 +49,6 @@ body {
  header {
         width: @site-width;
         height: 100px;
-       background: @site-header-color;
  }
  
  @nav-padding: 10px;
@@ -45,10 +56,9 @@ nav {
         float: left;
         width: @nav-width - 2*@nav-padding;
         padding: @nav-padding;
-       background: @nav-color;
         h3 {
                 span {
-                       color: @nav-color;
+                       color: @site-body-color;
                 }
         }
         h3.current {
@@ -73,7 +83,6 @@ footer {
         width: @site-width - 2*@site-gutter-width;
         padding: @site-gutter-width;
         text-align: center;
-       background: @site-footer-color;
         font-size: 80%;
  }
  
@@ -98,6 +107,13 @@ footer {
         margin-bottom: 15px;
  }
  
+code.html {
+       display: block;
+       font: 12px monospace;
+       border: 1px solid black;
+       background: #ccc;
+}
+
  .caption {
         margin-top: 15px;
         font-weight: bold;
@@ -126,12 +142,57 @@ div.error {
         background: #fdd;
  }
  
+h1 {
+       font-size: 22px;
+       margin: 20px 0 10px;
+}
+h1 + h4.tagline {
+       margin: -10px 0 10px;
+}
+h2 {
+       font-size: 19px;
+       margin: 16px 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 {
+       margin: 15px 35px;
+}
+p.attrib {
+       margin: -15px 0 15px 100px;
+}
+
+
  // 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;
@@ -142,6 +203,8 @@ span.wfpl_ifr {
         float: right;
         clear: right;
         font-size: 10px;
+       color: black;
+       font-weight: normal;
         text-align: right;
         background-repeat: no-repeat;
         background-position: left top;
@@ -150,6 +213,7 @@ span.wfpl_ifr {
  div.wfpl_ic {
         margin: 15px auto;
         font-size: 10px;
+       font-weight: normal;
         text-align: right;
         background-repeat: no-repeat;
         background-position: center top;
@@ -176,3 +240,7 @@ div > :last-child,
  .last {
         margin-bottom: 0px;
  }
+.wide_field {
+       box-sizing: border-box;
+       width: 100%;
+}