-style.css:style.less
+style.css:styl.styl
/files
/tags
/style.css
+/.image-mtimes.styl
+svgs=
+generated_images= $(svgs:.svg=.png)
+images=
+images += $(generated_images)
-all: style.css tags
+objects= $(generated_images) .image-mtimes.styl style.css tags
-init: files cms_images all
+all: $(objects)
-files:
- mkdir -m 777 $@
+clean:
+ rm -f $(objects)
-cms_images:
- mkdir -m 777 $@
+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
-
-style.css: style.less
- lessc -x $< $@
<!--~listings once_if {~-->
<p><a href="admin_pages?new=1">[Add a new page]</a></p>
- <table cellspacing="0" cellpadding="4" border="1" summary="">
+ <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
<tr><th>Title</th><th>Filename</th><th> </th></tr>
<!--~listings {~-->
<tr>
-Subproject commit 5dfdf5fa2c160a1223f6872b0219fab8c21dabf5
+Subproject commit 1883204000b0d20d9dc41e025345592166518a8b
--- /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:nth-child(2n)
+ background: rgba(0,0,0,0)
+ > td:nth-child(2n+1)
+ background: rgba(0,0,0,0.05)
+ > tr:nth-child(2n+0)
+ > td:nth-child(2n)
+ background: rgba(0,0,0,0.05)
+ > td:nth-child(2n+1)
+ background: rgba(0,0,0,0.1)
+++ /dev/null
-// dimensions
-@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-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;
-}
-
-body {
- margin: 0;
- padding: 0;
- color: #000;
- 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: @site-body-color;
- margin: 15px 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;
-}
-
-@nav-padding: 10px;
-nav {
- float: left;
- width: @nav-width - 2*@nav-padding;
- padding: @nav-padding;
- 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 3*@site-gutter-width @site-gutter-width;
- background: @site-body-color;
-}
-
-footer {
- clear: both;
- width: @site-width - 2*@site-gutter-width;
- padding: @site-gutter-width;
- text-align: center;
- font-size: 80%;
-}
-
-#wfpl_messages {
- border: 2px solid red;
- background: #fbb;
- padding: 5px;
- margin: 20px 0px;
- p {
- font-size: 120%;
- padding: 5px;
- margin: 0px;
- }
- hr {
- height: 1px;
- }
-}
-
-#admin_links {
- background: #fdd;
- padding: 3px;
- margin-bottom: 15px;
-}
-
-code.html {
- display: block;
- font: 12px monospace;
- border: 1px solid black;
- background: #ccc;
-}
-
-.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;
-}
-
-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;
- 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;
-}
-.wide_field {
- box-sizing: border-box;
- width: 100%;
-}
<header>
header image here
</header>
- <nav><!--~$navbar_items {~-->
- <h3 class="nav_~basename~~current {~ current~}~"><span>• </span><a href="~filename~">~title html~</a></h3><!--~}~-->
+ <nav id="site-nav">
+ <ul><!--~$navbar_items {~-->
+ <li><a href="~filename~">~title html~</a></li><!--~}~-->
+ </ul>
</nav>
<div id="main-body">