From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 11 May 2016 23:54:58 +0000 (-0400)
Subject: example code for scaling spritesheets
X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=commitdiff_plain;h=75ac4ad08bdca7f026d518698ed2a05860016e0d

example code for scaling spritesheets
---

diff --git a/.git-ftp-include b/.git-ftp-include
index be68bcf..a10a1de 100644
--- a/.git-ftp-include
+++ b/.git-ftp-include
@@ -1 +1,3 @@
 css.css:style.styl
+css.css:images/sprites.svg
+images/sprites.min.svg:images/sprites.svg
diff --git a/Makefile b/Makefile
index afd28b1..e6222d1 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-svgs=
+svgs= images/sprites.svg
 minified_svgs= $(svgs:.svg=.min.svg)
 generated_images= $(svgs:.svg=.png)
 images=
@@ -11,8 +11,8 @@ all: $(objects)
 clean:
 	rm -f $(objects)
 
-css.css: style.styl .sha1sums.styl
-	stylus -c -p $< > $@ || rm -f "$@"
+css.css: style.styl .sha1sums.styl inc/wfpl/stylus_helpers.styl
+	stylus -p $< > $@ || rm -f "$@"
 
 .sha1sums.styl: $(images)
 	( \
diff --git a/inc/wfpl b/inc/wfpl
index faffdde..019bb94 160000
--- a/inc/wfpl
+++ b/inc/wfpl
@@ -1 +1 @@
-Subproject commit faffdde4b15b98d545f487f783da89aca8190a4e
+Subproject commit 019bb943365e512132a4a309921c014d3b80a69a
diff --git a/style.styl b/style.styl
index 81159f1..a758cd5 100644
--- a/style.styl
+++ b/style.styl
@@ -89,10 +89,52 @@ content_bg = #fff
 content_fg = #000
 window_bg = #fff
 
+// sprites
+wfpl_spritesheets({
+	main: {
+		image: sha1['images/sprites.min.svg']
+		y_origin: 'bottom' // inkscape rulers are backwards
+		w: 200
+		h: 408
+		sprites: {
+			".icon": {
+				y: 408
+				w: 50
+				h: 50
+				gap: 1
+				hover: 'right'
+				column: 'three' 'four' 'five' 'six' 'seven'
+			}
+			".top_button": {
+				y: 153
+				w: 25
+				h: 25
+				gap: 1
+				row: '0' '1' '2' '3' '4'
+				hover: 'down'
+			}
+			".main_logo": {
+				y: 101
+				w: 200
+				h: 50
+				gap: 1
+				hover: 'down'
+			}
+		}
+	}
+})
+
+
 ////////////////////
 // } END SETTINGS //
 ////////////////////
 
+.icon
+	display: inline-block
+	width: 40%
+.top_button
+	display: inline-block
+	width: 30%
 
 
 // always show vertical scrollbar, so content doesn't shift around when