X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.styl;h=81159f152a8ec357f39005eb805b26b037e59775;hb=5178504c5d9b4c824cc1082391d01e726f7eb9e2;hp=22fccb6502a9125b8801d9f20c6be455a75774d7;hpb=a4d3bf06e886c8d0bd4f973ffd03adddf42e1647;p=wfpl-cms.git

diff --git a/style.styl b/style.styl
index 22fccb6..81159f1 100644
--- a/style.styl
+++ b/style.styl
@@ -25,7 +25,6 @@ columns = wfpl_columns({
 	name: 'centerer'
 	margin: 15px
 	width: centerer_width
-	position: relative
 	child: {
 		type: 'alternatives'
 		full: {
@@ -39,29 +38,38 @@ columns = wfpl_columns({
 				float: left
 				width: centerer_width - sidebar_width - sidebar_gap
 			},
+			gap: {
+				type: 'node'
+				width: sidebar_gap
+			}
 			sidebar: {
 				type: 'alternatives'
 				plain: {
 					type: 'node'
-					margin-left: sidebar_gap
-					width: sidebar_width
-					float: left
+					outer_width: sidebar_width
+					float: right
 				},
 				bordered: {
 					type: 'node'
-					margin-left: sidebar_gap
 					border-width: 1px
 					border-style: solid
 					border-color: red
 					padding: 15px
-					width: sidebar_width - 2px - 30px
-					float: left
+					outer_width: sidebar_width
+					float: right
 				}
 			}
 		}
 	}
 })
 
+// the gap is used for checking the width calculations, but has no dom element.
+// This space is left blank (by floating main to the left and sidebar to the
+// right) and might save the layout if there are borders (which don't scale) or
+// rounding errors
+remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap')
+remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap')
+
 biggest_content_width = columns['widths']['.centerer.full > .main']
 
 hide_in_one_column_mode = {
@@ -70,6 +78,7 @@ hide_in_one_column_mode = {
 }
 
 // fonts
+line_height = 1.2
 font_size_large = 18px
 font_size_normal = 15px
 font_size_small = 13px
@@ -206,6 +215,7 @@ body
 	background: window_bg
 	color: content_fg
 	font: font_size_normal Arimo, Arial, sans-serif
+	line-height: line_height
 
 // call this for each ckeditor on each page
 ckeditor_elements_already = {}
@@ -233,21 +243,22 @@ ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths'
 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
 
+body > .centerer
+	position: relative
+
+header#site_header
+	margin-bottom: 15px
+
 body > .centerer > .nav
-	padding-bottom: 20px
+	margin-bottom: 15px
 	ul
 		li_reset()
-		space_evenly()
+		space_evenly(line_height)
 
-footer
+footer#site_footer
 	clear: both
 	padding-top: 40px
-	ul
-		li_reset()
-		li
-			li_reset()
-			display: inline-block
-			margin-right: 10px
+	font-size: font_size_small
 
 #wfpl_messages
 	background: #ffd
@@ -270,13 +281,13 @@ footer
 
 
 #admin_links
-	background: #fdd
+	font-size: font_size_small
+	background: rgba(255, 244, 244, 0.5)
+	border: 1px dotted #000
 	padding: 3px
-	margin-bottom: 15px
-
-
-
-
+	position: absolute
+	top: 0
+	right: 0
 
 // obsolete floating images (from pastable example code on admin_images)
 span.wfpl_ifl
@@ -424,13 +435,6 @@ body > .centerer
 	body > .centerer
 		width: auto
 
-	// make sure that borders (which won't scale) and rounding errors don't
-	// break the layout
-	body > .centerer.full > .main,
-	body > .centerer.with_sidebar > .sidebar.plain,
-	body > .centerer.with_sidebar > .sidebar.bordered
-		margin-right: -10px
-
 	// big left/right images
 	for selector, css in columns.css
 		if columns['widths'][selector] > runaround_max
@@ -452,15 +456,17 @@ body
 	for selector, css in columns.css
 		body > {selector}
 			if selector == '.centerer'
-				margin-top: 0
+				// margin-top: 0
 			else if selector in hide_in_one_column_mode
 				display: none
 			else
 				border: none
 				float: none
 				width: auto
-				margin: 0
-				padding: 0
+				margin-left: 0
+				margin-right: 0
+				padding-left: 0
+				padding-right: 0
 				margin-top: columns['responsive_css']['.centerer']['margin']
 
 				// make image sizing act like it's the "full"/only column
@@ -480,7 +486,7 @@ wfpl_li_ri_to_ci(selector, width)
 			margin-right: auto
 			margin-left: auto
 
-// convert left/right to centered when columns width <= runaround_max
+// convert left/right images to centered when columns width <= runaround_max
 for selector, css in columns.css
 	if columns['widths'][selector] > runaround_max
 		// calculate screen width when column width is runaround_max
@@ -493,6 +499,8 @@ for selector, css in columns.css
 #mobile_menu_check
 	display: none;
 @media screen and (max-width: (mobile_menu_width))
+	body nav.nav > form
+		margin-top: 0
 	#mobile_menu_check:not(:checked) + div
 		display: none
 	#mobile_menu_check:checked + div
@@ -532,9 +540,9 @@ for selector, css in columns.css
 
 	body > .centerer > .nav ul > li, #mobile_menu_button
 		display: block
-		padding: 3px 10px 4px 17px
+		padding: 0px 10px 0px 17px
 		font-size: font_size_large
 #admin_images_body .th_toggle_buttons
 	font-weight: normal
 	color: #777
-	space_evenly()
+	space_evenly(line_height)