--- /dev/null
+svgs=
+generated_images= $(svgs:.svg=.png)
+images=
+images += $(generated_images)
+
+objects= $(generated_images) .image-mtimes.styl style.css tags
+
+all: $(objects)
+
+clean:
+ rm -f $(objects)
+
+style.css: styl.styl .image-mtimes.styl
+ compile-stylus $<
+
+.image-mtimes.styl: $(images)
+ ( \
+ echo -n 'w-mtime = {'; \
+ div=' '; \
+ for x in $^; do \
+ echo -n "$$div '$$x': \"$$x?m=$$(stat -c '%Y' $$x)\""; \
+ div=,; \
+ done; \
+ echo " }"; \
+ ) > $@ || ( \
+ rm -f $@; \
+ exit 1; \
+ )
+%.png: %.svg
+ ( \
+ inkscape -f $< -e $@ --export-area-page --without-gui --export-dpi=360 \
+ && mogrify -alpha off -geometry '25%' $@ \
+ && pngfix $@ \
+ ) || ( \
+ rm -f $@ \
+ ; exit 1 \
+ )
+
+tags: *.php code/*.php code/wfpl/*.php
+ exuberant-ctags *.php code/*.php code/wfpl/*.php
--- /dev/null
+@require 'code/wfpl/stylus-helpers.styl'
+@require '.image-mtimes.styl'
+
+// dimensions
+site-width = 934px // inside the shadow
+site-padding = 30px
+sidebar-width = 220px
+content-width = (site-width - (site-padding * 3) - sidebar-width)
+font-size-normal = 15px
+font-size-small = 13px
+font-size-tiny = 11px
+site-column-gap = 40px
+spritesheet-height = 1050px // for sprites near bottom
+
+// colors
+content-bg = #fff
+content-fg = #000
+window-bg = #e6e7e8
+
+// always show vertical scrollbar, so content doesn't shift around when
+// switching from tall to short pages
+html
+ overflow-y: scroll
+
+header, hgroup, section, footer, aside, nav, article, figure, img
+ display: block
+
+code.html
+ display: block
+ font: 12px monospace
+ border: 1px solid black
+ background: #ccc
+
+* + .caption
+ margin-top: 15px
+ font-weight: bold
+
+.field
+ padding-top: 3px;
+
+div.field_notes
+ font-size: 12px
+ line-height: 16px
+
+fieldset
+ border: 1px dotted black
+ padding: 0 15px 15px 15px
+ margin: 15px 0
+ position: relative
+
+legend
+ padding: 0 6px
+ font-weight: bold
+
+div.error
+ border: 2px solid red
+ padding: 13px
+ margin: 20px
+ background: #fdd
+
+h1
+ font-size: 22px
+ margin: 20px 0 10px
+
+h1 + h4.tagline
+ margin: -10px 0 10px
+
+h2
+ font-size: 19px
+ margin: 30px 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
+ font-size: 14px
+ font-weight: bold
+ padding-bottom: 1px
+ margin: 15px 15px 0 15px
+
+p.quote:before, p.quote:after
+ font-size: 40px
+ line-height: 0
+ color: #777
+ font-weight: bold
+ display: inline-block
+ height: 10px
+ position: relative
+
+p.quote:before
+ content: '“'
+ top: 10px
+
+p.quote:after
+ content: '”'
+ top: 20px
+ width: 0; // make sure it doesn't wrap
+
+p.attrib, p.attribution
+ margin: 0 0 15px 20px
+ margin-top: 1px
+ padding-left: 30px
+ font-size: 12px
+ font-weight: normal
+ &:before
+ content: "— "
+
+body
+ margin: 0
+ padding: 0
+ color: content-fg
+ font: font-size-normal Arimo, Arial, sans-serif
+
+ // Styles for the <body> tag within ckeditor
+ background: content-bg
+ width: content-width
+ margin: 0 auto
+ &.real_body_tag // revert the above for the <body> on the real site
+ background: window-bg
+ width: auto
+ margin: 0
+
+// expand the ckeditor widget so there's space for the content to be exactly
+// the size of the content outside the editor
+#cke_content
+ margin-right: -15px
+ margin-left: -15px
+
+// outermost div for centering, shadow, etc
+#centerer
+ position: relative
+ background: content-bg
+ padding-top: 150px
+ padding-right: site-padding
+ padding-bottom: site-padding
+ padding-left: site-padding
+ width: site-width - @padding-left - @padding-right
+ margin: 10px auto
+
+nav#site-nav
+ padding-bottom: 20px
+ ul
+ li-reset()
+ space-evenly()
+
+footer
+ clear: both
+ padding-top: 40px
+ ul
+ li-reset()
+ li
+ li-reset()
+ display: inline-block
+ margin-right: 10px
+
+#wfpl_messages
+ background: #ffd
+ padding: 5px 12px
+ margin: 0 0 20px 0
+ box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
+ border-radius: 4px
+ p
+ font-size: 120%
+ padding: 5px 0
+ margin: 0px
+
+ hr
+ display: block
+ height: 1px
+ border: 0
+ border-top: 1px dotted #ddc;
+ margin: 0
+ padding: 0
+
+
+#admin_links
+ background: #fdd
+ padding: 3px
+ margin-bottom: 15px
+
+
+
+
+
+// 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
+ margin: 0 10px 2px 0
+
+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 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
+
+
+// hack so that vertical margins are only between siblings for the most part
+td > :first-child,
+th > :first-child,
+legend + *,
+article > :first-child,
+section > :first-child,
+nav > :first-child,
+div > :first-child,
+.first
+ margin-top: 0px
+
+td > :last-child,
+th > :last-child,
+fieldset > :last-child,
+article > :last-child,
+section > :last-child,
+nav > :last-child,
+div > :last-child,
+.last
+ margin-bottom: 0px
+
+table.evenodd
+ > thead, > tbody, &
+ > tr:nth-child(2n+1)
+ > td, > th
+ background: rgba(0,0,0,0.04)
+ &:hover
+ > td, > th
+ background: rgba(0,0,0,0.07)
+ > tr:nth-child(2n+0)
+ > td, > th
+ background: rgba(0,0,0,0.02)
+ &:hover
+ > td, > th
+ background: rgba(0,0,0,0.09)
+++ /dev/null
-// dimensions
-@site-width: 940px;
-@nav-width: 200px;
-@site-gutter-width: 18px;
-@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;
-
-header, hgroup, section, footer, aside, nav, article, figure, img {
- display: block;
-}
-
-body {
- margin: 0;
- padding: 0;
- color: #000;
- background: @site-window-color;
- font: 14px "Verdana", sans-serif;
-}
-
-#centerer {
- position: relative;
- 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: @site-header-color;
-}
-
-@nav-padding: 10px;
-nav {
- float: left;
- width: @nav-width - 2*@nav-padding;
- padding: @nav-padding;
- background: @nav-color;
- a {
- display: block;
- }
-}
-
-#main-body {
- float: left;
- 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: @site-footer-color;
-}
-
-#wfpl_messages {
- border: 2px solid red;
- background: #fbb;
- padding: 5px;
- margin: 20px 0px;
- p {
- font-size: 120%;
- padding: 5px;
- margin: 0px;
- }
- hr {
- height: 1px;
- }
-}
-.caption {
- margin-top: 15px;
- font-weight: bold;
-}
-.field {
- margin-bottom: 15px;
-}
-div.field_notes {
- font-size: 12px;
- line-height: 16px;
-}
-fieldset {
- border: 1px dotted black;
- padding: 0 15px 15px 15px;
- margin: 15px 0;
- position: relative;
-}
-legend {
- padding: 0 6px;
- font-weight: bold;
-}
-div.error {
- border: 2px solid red;
- padding: 13px;
- margin: 20px;
- background: #fdd;
-}
-
-/* hack so that vertical margins are only between siblings for the most part */
-td > :first-child,
-th > :first-child,
-legend + *,
-article > :first-child,
-section > :first-child,
-nav > :first-child,
-div > :first-child,
-.first {
- margin-top: 0px;
-}
-td > :last-child,
-th > :last-child,
-fieldset > :last-child,
-article > :last-child,
-section > :last-child,
-nav > :last-child,
-div > :last-child,
-.last {
- margin-bottom: 0px;
-}
Got questions, comments, patches, etc.? Contact Jason Woofenden