X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=3e4645c38834bea53f7abcd23dd73fd122975558;hp=003da09ab2e5c537bc50137ced154d9d90207ef7;hb=3ed0f0b53ff1b3ea3e30292bf39eb6e30935e9eb;hpb=f2f0ae126ce56ba2eb42fee9a44afe848c74cab8

diff --git a/style.styl b/style.styl
index 003da09..3e4645c 100644
--- a/style.styl
+++ b/style.styl
@@ -1,19 +1,42 @@
 @require 'inc/wfpl/stylus_helpers.styl'
 @require '.sha1sums.styl'
 
-// dimensions
-site_width = 934px // inside the shadow
-site_padding = 30px
-content_width = (site_width - (site_padding * 2))
+// constants
+golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
+
+////////////////
+// SETTINGS { //
+////////////////
+
+// 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
+sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
+mobile_menu_width = 600px // switch to mobile menu when screen gets this small
+
+// fonts
+font_size_large = 18px
 font_size_normal = 15px
 font_size_small = 13px
 font_size_tiny = 11px
-site_column_gap = 40px
 
 // colors
 content_bg = #fff
 content_fg = #000
-window_bg = #e6e7e8
+window_bg = #fff
+
+////////////////////
+// } END SETTINGS //
+////////////////////
+
+// the auto-calculated bits
+content_width = site_width
+// some math for responsive mode (when the above dimensions don't fit)
+site_padding_pct = site_padding / (site_width + 2 * site_padding)
+sidebar_padding_pct = sidebar_padding / content_width
+vw_to_content_width = 1 - 2 * site_padding_pct
 
 // always show vertical scrollbar, so content doesn't shift around when
 // switching from tall to short pages
@@ -166,12 +189,9 @@ ckeditor('admin_pages', 'content', content_width)
 #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
+	padding: site_padding
+	max-width: content_width
+	margin: 0 auto
 
 nav#site-nav
 	padding-bottom: 20px
@@ -218,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
@@ -299,3 +319,109 @@ table.evenodd
 .password_suggestion
 	& + &
 		margin-left: 10px
+
+.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, .wfpl_fi
+	margin-left: auto
+	margin-right: auto
+.wfpl_ri
+	float: right
+	margin-left: sidebar_padding
+
+@media screen and (max-width: (content_width / vw_to_content_width))
+	#centerer
+		width: auto
+		margin: 0
+		padding: unit(site_padding_pct * 100, '%')
+	.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_li, .wfpl_ci, .wfpl_ri
+		float: none
+		margin-left: 0
+		margin-right: 0
+		width: 100%
+
+// 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
+
+#mobile_menu_button
+	display: none;
+#mobile_menu_check
+	display: none;
+@media screen and (max-width: (mobile_menu_width))
+	#mobile_menu_check:not(:checked) + div
+		display: none
+	#mobile_menu_check:checked + div
+		display: block
+		position: relative
+		> ul
+			z-index: 1000
+			background: white
+			background: rgba(255, 255, 255, 0.95)
+			display: block
+			position: absolute
+			top: 100%
+			width: 96%
+			left: 2%
+			margin: 0
+			padding: 0
+			border-bottom-left-radius: 4px
+			border-bottom-right-radius: 4px
+			box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
+			li
+				padding: 15px
+				& + li
+					padding-top: 0
+				a
+					font-size: 18px
+				white-space: nowrap
+
+			// undo space_evenly stuff:
+			&:before, &:after
+				display: none
+				content: none
+				margin: 0
+				padding: 0
+			> *
+				position: static
+				top: 0
+
+	nav#site-nav ul > li, #mobile_menu_button
+		display: block
+		padding: 3px 10px 4px 17px
+		font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+	font-weight: normal
+	color: #777
+	space_evenly()