middleman-pagegroups 1.0.0

data/documentation_project/source/stylesheets/_middlemac_minimal.scss

@@ -0,0 +1,668 @@
+//*****************************************************************************
+//	Styles that bring an Apple-like look to your applications' help	files.
+//
+//	* Used in conjunction with normalize.css to establish sane defaults.
+//	* We have *structural* containers and *styling* containers.
+//	* There's no such thing as padding and margins on anything unless they're
+//	  part of a styling container, or inside of a styling container that
+//	  sets them for them.
+//	* Structural containers only have size and position and visibility.
+//	* Styling containers set styles for elements inside of them.
+//  * This is a "minimal" version of this file intended for very basic
+//    support of Gem documentation.
+//*****************************************************************************
+
+
+@import "font-awesome";
+
+
+//*************************************
+//  Mixins
+//*************************************
+
+// Easily include font-awesome icons
+@mixin icon( $type: $fa-var-bug )
+{
+	content: $type;
+	font-family: 'Fontawesome';
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+// Easily include backgrounds for multiple browsers, just in case.
+// You might require Compass in your own projects, instead.
+@mixin background( $property )
+{
+	background: -o-#{$property};
+	background: -moz-#{$property};
+	background: -webkit-#{$property};
+	background: #{$property};
+}
+
+
+//*************************************
+//  GENERAL STYLES
+//*************************************
+
+$interMargins: 1.5ex;
+$linkColor: rgb(99,136,193);
+$strongColor: rgb(75,75,75);
+$standard_border: 1px solid #bfbfbf;
+
+*
+{
+	margin: 0;
+	padding: 0;
+}
+
+html
+{
+	font-size: 11pt;
+	height: 100%;
+}
+
+body
+{
+    font-family: -apple-system-font, -webkit-system-font, "HelveticaNeue", "Helvetica Neue", "Helvetica", sans-serif;
+	height: 100%;
+	min-width: 600px;
+}
+
+h1
+{
+	font-size: 1.7em;
+	font-weight: normal;
+}
+h2
+{
+	font-size: 1.5em;
+	font-weight: normal;
+}
+h3
+{
+	font-size: 1.3em;
+	font-weight: normal;
+}
+
+
+p
+{
+	font-size: 1.0em;
+	line-height: 1.6em;
+}
+
+
+a
+{
+	text-decoration: none;
+	font-size: 1.05em;
+	color: $linkColor;
+
+	&:visited
+	{
+		color: $linkColor;
+	}
+
+	&:hover
+	{
+		text-decoration: underline;
+	}
+}
+
+strong
+{
+    color: $strongColor;
+}
+
+hr
+{
+	text-decoration: none;
+	border: none;
+	border-bottom: $standard_border;
+	margin: ($interMargins * 2) 10% ($interMargins * 2) 10%;
+}
+
+//	"standard" img should always be a block and centered
+//	and assume 100% width. Can set max-width to prevent
+//	oversized images in another class.
+img
+{
+	display: block;
+	//width: 100%;
+	margin: 0 auto 0 auto;
+}
+
+
+//	"standard" dl only spaces the items. Set the <dl> in
+//	a styling container if you want padding or margins.
+dl
+{
+	dt code
+	{
+		font-weight: bold;
+	}
+
+	dd
+	{
+		margin: 0.8ex 0 0.8ex 3em;
+	}
+}
+
+
+//  "standard" ul has no margins or padding, except left margin.
+ul
+{
+	list-style: square outside;
+	margin-left: 2em;
+}
+
+
+//	"standard" li only spaces the items. Set the <ul> or <ol>
+//	in a styling container if you want padding or margins.
+//	The default aligns the left of the text with the body
+//	left text, meaning the bullets or counters will stick out
+//	to the left.
+li
+{
+	margin: 0.8ex 0 0.8ex 0;
+}
+
+
+/* fix for FireFox, apparently */
+li p { display: inline; }
+
+
+//*************************************
+//  tidyoptions dt
+//*************************************
+body.tidyoptions
+{
+	dt
+	{
+		margin-top: $interMargins * 2;
+	}
+}
+
+
+//*************************************
+//	related_topics
+//*************************************
+div.related_topics
+{
+	ul
+	{
+		list-style: none;
+		margin-left: 1em;
+	}
+}
+
+
+//*************************************
+//	table_contents
+//*************************************
+div.table_contents
+{
+	dl
+	{
+		margin: 1em;
+	}
+	dt
+	{
+		margin-top: $interMargins * 2;
+	}
+}
+
+//*************************************
+//	yield-content settings
+//*************************************
+div.yield-content
+{
+	h1
+	{
+		margin-bottom: $interMargins;
+	}
+
+	h2,
+	h3
+	{
+		margin-top: ($interMargins / 1);
+		margin-bottom: ($interMargins / 2);
+	}
+	p
+	{
+		margin-top: ($interMargins / 2);
+		margin-bottom: ($interMargins / 2);
+	}
+}
+
+
+//*************************************
+//	help_map settings
+//*************************************
+.help_map
+{
+}
+
+
+//*************************************
+//	Breadcrumbs
+//*************************************
+nav#breadcrumbs
+{
+	height: 22px;
+	width: 100%;
+	overflow: hidden;
+	position: fixed;
+	top: 0;
+	border-bottom: 1pt solid #7E7E7E;
+	@include background(linear-gradient(top, rgba(224,224,224,1) 0%,rgba(201,201,202,1) 100%));
+	z-index: 10;
+
+	// target the main content div for additional margin.
+	& + div
+	{
+		margin-top: 2em;
+	}
+
+	ul,
+	ul li,
+	ul li a
+	{
+		font-size: 11px;
+		line-height: 22px;
+		height: 22px;
+		font-weight: 100;
+		margin: 0;
+		padding: 0;
+	}
+
+	ul li
+	{
+		list-style-type: none;
+		float: left;
+		padding: 0 0 0 10px;
+		margin: 0;
+
+		a
+		{
+			display: block;
+			background: url('breadcrumb-separator-light.png') no-repeat right;
+			padding-right: 15px;
+			text-decoration: none;
+			color: #353535;
+		}
+
+		&:last-child
+		{
+			color: #555555;
+
+			a
+			{
+				background: none;
+				cursor: default;
+			}
+		}
+	}
+}
+
+
+//*************************************
+//	Navigation Buttons
+//*************************************
+div.navigate_prev_next
+{
+	display: block;
+	width: auto;
+	margin: $interMargins auto $interMargins auto;
+	text-align: center;
+	$height: 2.5em;
+
+	a,
+	span
+	{
+		display: inline-block;
+		color: #353535;
+		@include background(linear-gradient(top, rgba(224,224,224,1) 0%,rgba(201,201,202,1) 100%));
+		border-radius: 2px;
+		font-size: 0.8em;
+		text-decoration: none;
+		font-weight: bold;
+		width: 10em;
+		height: $height;
+		line-height: $height;
+
+		// space between buttons.
+		&:first-child
+		{
+			margin-right: 1em;
+		}
+
+		&:first-child:before
+		{
+			@include icon($fa-var-chevron-left);
+			font-size: 1.5em;
+			margin: 0 0 0 10px;
+			float: left;
+			color: whitesmoke;
+		}
+
+		&:first-child + a:after,
+		&:first-child + span:after
+		{
+			@include icon($fa-var-chevron-right);
+			font-size: 1.5em;
+			margin-right: 10px;
+			float: right;
+			color: whitesmoke;
+		}
+	}
+
+	a:hover
+	{
+		@include background(linear-gradient(top, rgba(211,211,211,1) 0%,rgba(191,191,191,1) 100%));
+
+		&:before,
+		&:after
+		{
+			color: $linkColor !important; // specificity
+		}
+	}
+
+	// override span color, as it's disabled.
+	span
+	{
+		color: #888888;
+		@include background(linear-gradient(top, rgba(234,234,234,1) 0%,rgba(244,244,244,1) 100%));
+		&:before,
+		&:after
+		{
+			color: #aaaaaa;
+		}
+	}
+
+
+}
+
+
+//*************************************
+//	layout-logo-large layout styles
+//*************************************
+div.container-logo-large
+{
+	$logo-width: 200pt;
+
+	position: relative;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+
+	// left block, template content area.
+	> div:first-child
+	{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: $logo-width;
+		text-align: center;
+		font-size: 0.8em;
+
+		//  top of left block, where image,
+		//  headline, and link all live.
+		> div:first-child
+		{
+			margin-top: 1em;
+
+			> img
+			{
+				display: block;
+				//width: 80%;
+				margin: 0 auto 1em auto;
+			}
+		}
+
+		// bottom of left block, for related topics
+		> div:first-child + div
+		{
+			font-size: 0.9em;
+			margin: 2em 1em 0 3em;
+			text-align: left;
+
+			h1
+			{
+				font-size: 1.3em;
+			}
+		}
+	}
+
+
+	//  right block, the structure block. We will
+	//  perform divider styling here, despite my no-styling rule,
+	//  so that we can ensure it extends to the whole content.
+	> div:first-child + div
+	{
+		margin-left: $logo-width;
+		border-left: $standard_border;
+		min-height: 100%;
+
+		// finally the user's block with a nice padding
+		> div:first-child
+		{
+			padding: 2em;
+		}
+	}
+}
+
+
+//*************************************
+//	layout-logo-medium styles
+//*************************************
+div.container-logo-medium
+{
+	$logo-width: 130pt;
+
+	position: relative;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+
+	//  left block, the structure block. We will
+	//  perform divider styling here, despite my no-styling rule,
+	//  so that we can ensure it extends to the whole content.
+	> div:first-child
+	{
+		margin-right: $logo-width;
+		border-right: $standard_border;
+		min-height: 100%;
+
+		/* other images in the div, after the first-child */
+		img
+		{
+			margin: $interMargins auto $interMargins auto;
+			//width: 100%;
+		}
+
+		/* finally the user's block with a nice padding */
+		> div:first-child
+		{
+			padding: 2em;
+		}
+	}
+
+	//  right block, template content area.
+	> div:first-child + div
+	{
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: $logo-width;
+
+		//  top of right block, where image lives
+		> div:first-child
+		{
+			padding-top: 1em;
+
+			> img
+			{
+				display: block;
+				width: 80%;
+				margin: 0 auto 1em auto;
+			}
+		}
+
+		//  bottom of left block, for related topics
+		> div:first-child + div
+		{
+			font-size: 0.8em;
+			margin: 2em 1em 0 1em;
+			text-align: left;
+
+			h1
+			{
+				font-size: 1.3em;
+			}
+		}
+	}
+}
+
+
+//*************************************
+//	layout-logo-small styles
+//*************************************
+div.container-logo-small
+{
+	$bannerHeight: 36pt;
+	padding: 1em 2em 1em 2em;
+
+	//  banner AND body text
+	> div:first-child
+	{
+		> img:first-child
+		{
+			height: $bannerHeight;
+			width: auto;
+			padding: 0 1em 0 0;
+			float: left;
+
+			+ h1
+			{
+				line-height: $bannerHeight;
+				margin-bottom: 1ex;
+			}
+		}
+	}
+
+	//  This will be the related topics div
+	> div:first-child ~ div
+	{
+		font-size: 0.8em;
+		padding-bottom: 1em;
+
+		h1
+		{
+			font-size: 1.3em;
+		}
+	}
+}
+
+
+//*************************************
+//	Other Block Level Elements
+//*************************************
+
+//  for displaying source code
+pre
+{
+	background-color: #eeeeee;
+	display: block;
+	margin: 2ex 2em 2ex 2em;
+	padding: 1em;
+	font-family: Menlo, Courier, monospace;
+	white-space: pre; //pre-line;
+	word-wrap: normal;
+	overflow: auto;
+}
+
+code
+{
+	white-space: pre;
+	word-wrap: normal;
+}
+
+
+// for highlighting important information
+.note
+{
+	margin: 1em;
+	padding: 1em;
+	background-color: #e6edff;
+	border: 1px solid #eaeaea;
+}
+
+
+//  a container for showing things that are done step by step
+div.steps
+{
+	margin:  0 0 ($interMargins * 2) 0;
+	padding: 1em 2em 1em 2em;
+	border: $standard_border;
+	border-radius: 10px;
+
+	ul,
+	ol
+	{
+		margin-left: 2em;
+	}
+
+	ul:first-child,
+	ol:first-child
+	{
+		margin-left: 1em;
+	}
+}
+
+//  indented left and right version of the container
+div.steps.narrow
+{
+	margin-left: 3em;
+	margin-right: 3em;
+}
+
+
+//  image_article
+div.image_article
+{
+	margin-top: $interMargins;
+
+	> div:first-child
+	{
+		float: left;
+		width:  45%;
+		margin: 0 1em 0 0;
+
+		> img
+		{
+			margin-top: 0 !important;
+		}
+	}
+
+	&.narrow > div:first-child
+	{
+		width: 10%;
+	}
+
+
+	ul,
+	ol
+	{
+		list-style-position:inside;
+	}
+}
+
+div.image_article:after
+{
+	content: "";
+	display: table;
+	clear: both;
+}