X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;ds=sidebyside;f=style.less;h=19dcef3eb336eb0e1b45294be20b98f0517891e5;hb=840aed9b567c017dbc2f0b7648890c9084af7eec;hp=9caf7626fd4322567bb70ba29ce6e61cfb68df5e;hpb=facbee3229f3cb534bd63c2fc10d09dd419c5c33;p=wfpl-cms.git diff --git a/style.less b/style.less index 9caf762..19dcef3 100644 --- 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,16 +16,29 @@ body { margin: 0; padding: 0; color: #000; - background: @site-body-color; // overruled below except in wysiywyg - font: 14px "Verdana", sans-serif; + font: 14px "Liberation Sans", Arimo, Arial, sans-serif; + + // Styles for the tag within ckeditor + background: @site-body-color; + width: @site-main-body-width; + margin: 0 auto; + &.real_body_tag { // revert the above for the on the real site + background: @site-window-color; + width: auto; + margin: 0; + } } -body.real_body_tag { // not the wysiwyg body - background: @site-window-color; + +// 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; @@ -40,7 +49,6 @@ body.real_body_tag { // not the wysiwyg body header { width: @site-width; height: 100px; - background: @site-header-color; } @nav-padding: 10px; @@ -48,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 { @@ -76,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%; } @@ -136,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; @@ -152,6 +203,7 @@ span.wfpl_ifr { float: right; clear: right; font-size: 10px; + color: black; font-weight: normal; text-align: right; background-repeat: no-repeat; @@ -188,3 +240,7 @@ div > :last-child, .last { margin-bottom: 0px; } +.wide_field { + box-sizing: border-box; + width: 100%; +}