X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=88d0420cc5d58aa20bc3e8ebca2a83106a0a39e7;hp=e8c5d3d182dbb041216088c9cd111386e5fc5eba;hb=e7424acd48ed670f1b8bd8d7c1ff69b37ce6334b;hpb=c5e948d7d2af9b5e052a7173ebbd8c907e3d6fab

diff --git a/style.styl b/style.styl
index e8c5d3d..88d0420 100644
--- a/style.styl
+++ b/style.styl
@@ -9,6 +9,7 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
 ////////////////
 
 // dimensions (max. these will scale down for smaller screens except in ie8)
+// if you change these, update config.php too
 site_width = 900px
 site_padding = 15px
 sidebar_padding = 20px
@@ -237,7 +238,7 @@ footer
 
 
 
-// floating images (from pastable example code on admin_images)
+// obsolete floating images (from pastable example code on admin_images)
 span.wfpl_ifl
 	display: block
 	float: left
@@ -319,36 +320,60 @@ table.evenodd
 	& + &
 		margin-left: 10px
 
-.wfpl_fr
+.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
 	display: block
+	margin-bottom: 1%
+	clear: both
+	font-size: 80%
+	text-align: right
+	.wfpl_i
+		display: block
+		width: 100%
+		background-size: 100% auto
+		background-repeat: no-repeat
+		background-position: 50% top
+		margin-bottom: 3px // padding above caption
+		// clip line with   (which is there so ckeditor doesn't delete this)
+		height: 0
+		overflow: hidden
+.wfpl_li, .wfpl_ci, .wfpl_ri
+	width: sidebar_width // when window is large
+.wfpl_li
+	float: left
+	margin-right: sidebar_padding
+.wfpl_ci
+	margin-left: auto
+	margin-right: auto
+.wfpl_ri
 	float: right
 	margin-left: sidebar_padding
-	margin-bottom: 1%
-	width: sidebar_width // simple when big, and for ie8 (which ignores media queries)
 
 @media screen and (max-width: (content_width / vw_to_content_width))
 	#centerer
 		width: auto
 		margin: 0
 		padding: unit(site_padding_pct * 100, '%')
-	.wfpl_fr
+	.wfpl_li, .wfpl_ri
 		width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
+	.wfpl_ri
 		margin-left: unit(sidebar_padding_pct * 100, '%')
+	.wfpl_li
+		margin-right: unit(sidebar_padding_pct * 100, '%')
 @media screen and (max-width: (sidebar_width / vw_to_content_width))
-	.wfpl_fr
+	.wfpl_li, .wfpl_ci, .wfpl_ri
 		float: none
 		margin-left: 0
-		margin-bottom: 0
+		margin-right: 0
 		width: 100%
-.wfpl_fr > .wfpl_i
-	display: block
-	width: 100%
-	height: auto
+
+// does not contain a .wfpl_i
+.wfpl_thumb
+	display: inline-block
+	width: 70px
+	height: 70px;
 	background-size: contain
+	background-position: 50% 50%
 	background-repeat: no-repeat
-	background-position: 50% top
-	font-size: 80%
-	text-align: right
 
 #mobile_menu_button
 	display: none;