From ca169135c8b3ec936846befa20f583849b8c1108 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Thu, 18 Dec 2014 18:56:07 -0500 Subject: [PATCH] metaform: use stylus instead of less --- metaform/Makefile | 40 +++++++ metaform/styl.styl | 274 ++++++++++++++++++++++++++++++++++++++++++++++++ metaform/style.less | 130 ----------------------- metaform/template.html | 2 +- 4 files changed, 315 insertions(+), 131 deletions(-) create mode 100644 metaform/Makefile create mode 100644 metaform/styl.styl delete mode 100644 metaform/style.less diff --git a/metaform/Makefile b/metaform/Makefile new file mode 100644 index 0000000..f0d0adb --- /dev/null +++ b/metaform/Makefile @@ -0,0 +1,40 @@ +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 diff --git a/metaform/styl.styl b/metaform/styl.styl new file mode 100644 index 0000000..b95e4f0 --- /dev/null +++ b/metaform/styl.styl @@ -0,0 +1,274 @@ +@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 tag within ckeditor + background: content-bg + width: content-width + margin: 0 auto + &.real_body_tag // revert the above for the 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) diff --git a/metaform/style.less b/metaform/style.less deleted file mode 100644 index a21b367..0000000 --- a/metaform/style.less +++ /dev/null @@ -1,130 +0,0 @@ -// 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; -} diff --git a/metaform/template.html b/metaform/template.html index bdd5a01..9bc4e9a 100644 --- a/metaform/template.html +++ b/metaform/template.html @@ -132,7 +132,7 @@

[Add a new ~singular~]

- +
-- 1.7.10.4
~caption~