X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.less;h=19dcef3eb336eb0e1b45294be20b98f0517891e5;hb=840aed9b567c017dbc2f0b7648890c9084af7eec;hp=52e4c8b357044710609cfac50e5e5a2288254ad9;hpb=a9d7f4f27d60bc9c770758dc6333d72930c748f1;p=wfpl-cms.git diff --git a/style.less b/style.less index 52e4c8b..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,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 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; + } +} + +// 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,24 +56,34 @@ nav { float: left; width: @nav-width - 2*@nav-padding; padding: @nav-padding; - background: @nav-color; - a { - display: block; + h3 { + span { + color: @site-body-color; + } + } + h3.current { + span { + color: inherit; + } + a { + text-decoration: none; + } } } #main-body { float: left; width: @site-main-body-width; - padding: @site-gutter-width @site-gutter-width @site-gutter-width @site-gutter-width; + padding: @site-gutter-width @site-gutter-width 3*@site-gutter-width @site-gutter-width; background: @site-body-color; } footer { clear: both; - width: @site-width; - height: 50px; - background: @site-footer-color; + width: @site-width - 2*@site-gutter-width; + padding: @site-gutter-width; + text-align: center; + font-size: 80%; } #wfpl_messages { @@ -86,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; @@ -114,11 +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; @@ -127,15 +201,19 @@ span.wfpl_ifl { span.wfpl_ifr { display: block; float: right; + clear: right; font-size: 10px; + color: black; + font-weight: normal; text-align: right; background-repeat: no-repeat; background-position: left top; - margin: 0 0 10px 2px; + margin: 0 0 2px 10px; } div.wfpl_ic { margin: 15px auto; font-size: 10px; + font-weight: normal; text-align: right; background-repeat: no-repeat; background-position: center top; @@ -162,3 +240,7 @@ div > :last-child, .last { margin-bottom: 0px; } +.wide_field { + box-sizing: border-box; + width: 100%; +}