X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=metaform%2Fstyle.less;h=a21b3676e63891c5668bc29aa4dae32299b78db6;hb=1883204000b0d20d9dc41e025345592166518a8b;hp=9f41b0fc63fe24c58be8a3e3ec2cf60ff5809795;hpb=4a4d453bf7dad654a6dc988a8a9c36f1ec45a9a8;p=wfpl.git diff --git a/metaform/style.less b/metaform/style.less index 9f41b0f..a21b367 100644 --- a/metaform/style.less +++ b/metaform/style.less @@ -1,40 +1,51 @@ // dimensions @site-width: 940px; @nav-width: 200px; -@gutter-width: 18px; -@main-body-width: @site-width - @gutter-width - @nav-width; +@site-gutter-width: 18px; +@site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width; // colors -@framing-color: #ccf; -@gutter-color: #fff; +@site-header-color: #ddf; +@nav-color: #dff; +@site-body-color: #fff; +@site-window-color: #eee; +@site-footer-color: #ddf; +@site-gutter-color: #fff; + +header, hgroup, section, footer, aside, nav, article, figure, img { + display: block; +} body { margin: 0; padding: 0; color: #000; - background: #fff; + background: @site-window-color; font: 14px "Verdana", sans-serif; } #centerer { position: relative; - margin: 0 auto; + background: @nav-color; + margin: 15 auto; width: @site-width; + -moz-box-shadow: 2px 2px 15px #777; + -webkit-box-shadow: 2px 2px 15px #777; + box-shadow: 2px 2px 13px #777; } header { width: @site-width; height: 100px; - background: @framing-color; - border-bottom: @gutter-width solid @gutter-color; + background: @site-header-color; } +@nav-padding: 10px; nav { float: left; - width: @nav-width - 20px; - padding: 10px; - border-right: @gutter-width solid @gutter-color; - background: @framing-color; + width: @nav-width - 2*@nav-padding; + padding: @nav-padding; + background: @nav-color; a { display: block; } @@ -42,15 +53,16 @@ nav { #main-body { float: left; - width: @main-body-width; + width: @site-main-body-width; + padding: @site-gutter-width @site-gutter-width @site-gutter-width @site-gutter-width; + background: @site-body-color; } footer { clear: both; width: @site-width; height: 50px; - background: @framing-color; - border-top: @gutter-width solid @gutter-color; + background: @site-footer-color; } #wfpl_messages {