Paste styling from bynu.HEADmaster

1 files changed, 543 insertions, 0 deletions

diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..224fdf1
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,543 @@
+@import "partials/base";
+@import "h5bp";
+@import "compass";
+@import "../shared/themes/default/ikiwiki";
+
+// site defaults
+@include h5bp-normalize;
+@include h5bp-main;
+@include ikiwiki-images;
+@include ikiwiki-pre;
+// generic styles
+@include ikiwiki-lists;
+@include ikiwiki-feedbutton;
+@include ikiwiki-forms;
+@include ikiwiki-alignment;
+@include ikiwiki-debug;
+@include ikiwiki-plugin-highlight;
+@include ikiwiki-plugin-color;
+// based on ikiwiki-plugin-img
+// - img.img styling
+// + left-aligned
+// + vertical margin
+// + line-height
+.img caption {
+	margin: -1em 0 1.5em;
+	line-height: 175%;
+	font-size: 80%;
+	caption-side: bottom;
+	text-align: left;
+}
+// shell
+// layout
+@include ikiwiki-site;
+@include ikiwiki-site-print;
+// modulars
+@include ikiwiki-infobox;
+@include ikiwiki-notebook;
+@include ikiwiki-popup;
+@include ikiwiki-plugin-calendar;
+@include ikiwiki-plugin-progress;
+@include ikiwiki-plugin-map;
+@include ikiwiki-plugin-poll;
+@include ikiwiki-plugin-pagestats;
+@include ikiwiki-plugin-flattr;
+@include ikiwiki-blogform;
+// section/page specific
+@include ikiwiki-archivepage;
+@include ikiwiki-plugin-recentchanges;
+@include ikiwiki-plugin-editpage;
+@include ikiwiki-plugin-attachment;
+@include ikiwiki-plugin-openid;
+
+h1 {
+	font-weight: normal;
+	color: DarkRed;
+	margin-bottom: 0.1em;
+	line-height: 1.4em;
+}
+
+
+h4,
+h5,
+h6 {
+	text-decoration: blink;
+}
+
+h2 {
+	font-weight: normal;
+	font-size: 1.5em;
+}
+
+h3 {
+	font-size: 1.25em;
+	font-weight: bold;
+}
+
+h2,
+h3 {
+	margin-top: 0;
+	margin-bottom: 0.1em;
+}
+
+a {
+	@include hover-link;
+	color: darkblue;
+	font-weight: normal;
+}
+
+p {
+	margin-top: 0.2em;
+	margin-bottom: 1.2em;
+}
+
+i {
+	@include h5bp-hidden;
+}
+
+
+ul {
+	margin-bottom: 1.2em;
+}
+
+blockquote {
+	font-style: italic;
+	margin: 1em;
+}
+
+body {
+	margin: 0;
+	background-color: white;
+	font-family: sans-serif;
+}
+
+.pageheader .title {
+	@include h5bp-hidden;
+}
+
+.parentlinks {
+	@include h5bp-hidden;
+}
+
+#searchform {
+	margin: 20px;
+}
+
+.pageheader .actions {
+	position: absolute;
+	top: 0;
+	right: 2em;
+	background-color: transparent;
+	ul {
+		@include inline-block-list;
+		height: 2em; // TODO: figure out if this can be eliminated
+	}
+	a {
+		color: transparent;
+		&:hover {
+			color: lightblue;
+			text-decoration: none;
+		}
+	}
+}
+
+.author {
+	font-size: 1em;
+	line-height: 1.8em;
+}
+
+.archivepage {
+	margin-left: 0.5em;
+	margin-bottom: 0.5em;
+	a {
+		color: black;
+		&:hover {
+			color: DarkBlue;
+		}
+	}
+}
+
+.archivepagedate {
+	@include h5bp-hidden;
+}
+
+.topbar {
+	height: 13em;
+	margin: 0;
+	padding: 0;
+	background-color: #336699;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+//	position: absolute;
+	top: 0;
+//	right: 0;
+}
+
+
+//styling of background image.//
+/*
+  Example use (in topbar.mdwn file!):
+
+  <div class="imgframe" style="background-image:url('../tjeneren.jpg')"></div>
+*/
+.topbar .imgframe {
+	@extend  .topbar;
+	top: 0;
+	width: 100%;
+	background-position: center;
+}
+
+.topbar p {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+// main menu
+.topbar ul {
+	@include inline-block-list;
+	position: absolute;
+	top: 6.25em;
+	height: 4em;
+	width: 100%;
+	font-size: 1.25em;
+	line-height: 2em;
+	text-align: center;
+	li {
+		a,
+		.selflink {
+			@include inline-block;
+			width: 8em;
+			padding: 1em .5em;
+			background-color: #6699cc;
+			color: white;
+			font-weight: bold;
+			&:hover {
+				background-color: lightblue;
+				color: #336699;
+				text-decoration: none;
+			}
+		}
+	}
+	@media screen and (max-width: 480px) {
+		top: 9em;
+		font-size: inherit;
+	}
+	@media screen and (min-width: 701px) {
+		right: 6em;
+		width: auto;
+		li {
+			padding-left: .2em;
+			padding-right: .2em;
+			text-align: center;
+			a,
+			.selflink {
+				width: 10em;
+				padding: 1em;
+			}
+		}
+	}
+}
+
+.topbar img {
+	margin: 1.5em 20px;
+	background-color: transparent;
+}
+
+#wrapper,
+#pagebody {
+	float: left;
+	width: 100%;
+}
+
+#content {
+	min-height: 480px;
+//	width: (100% - $blockMid-marginBoth - $blockLeft-fullwidth - $blockRight-fullwidth);
+	width: 68%;
+	max-width: 72em;
+//	margin: 2% ($blockMid-marginRight + $blockRight-fullwidth) 2% ($blockMid-marginLeft + $blockLeft-fullwidth);
+	margin: 0;
+	padding: 2em 2%;
+	text-align: left;
+	background-color: none;
+}
+
+.notebox {
+	float: none;
+	display: block;
+//Overwrite ikiwiki default width:
+	width: inherit;
+	max-width: 48em;
+	margin-right: 2em;
+//
+	color: gray !important;
+	background-color: none;
+	margin-left: 0;
+	text-align: center;
+}
+
+img {
+	float: left;
+	vertical-align: top;
+	margin: 0 1em 1em 0;
+	padding: 0;
+	max-width: 100%;
+	height: auto;
+}
+
+#content img.deco {
+	display: block;
+	clear: both;
+	float: right;
+	width: 30%;
+	max-width: 200px;
+	margin: 0;
+	padding: 0 0 1em 4%;
+	background-color: none;
+}
+
+#content img.flex {
+	max-height: 80px;
+	width: auto;
+	display: block;
+	float: none;
+}
+
+#content img.solo {
+	float: none;
+	display: block;
+	padding: 0;
+}
+#content img.x2470x3783 {
+	height:3783px;
+	width: 2470px;
+	max-width: 2470px;
+}
+#content img.x1000x750 {
+	height: 750px;
+	width: 1000px;
+	max-width: 1000px;
+}
+#content img.x108x132 {
+	height: 132px;
+	width: 108px;
+	max-width: 108px;
+}
+
+td,
+th {
+	padding: 0 1em 0 0;
+}
+
+.inlinepage {
+	border: 0;
+	padding: 1em 5%;
+	margin: 0;
+	background-color: lightyellow;
+}
+
+.inlineheader a {
+	font-weight: normal;
+	color: DarkRed;
+	line-height: 1.5em;
+}
+
+.inlinefooter {
+	@include h5bp-hidden;
+}
+
+.inlineheader .author {
+	@include h5bp-hidden;
+}
+
+.sidebar {
+//temporarily hidden
+	@include h5bp-hidden;
+//	float: left;
+//	min-height: 480px;
+//	width: $blockLeft-width;
+//	padding: $blockLeft-paddingAny;
+//	margin-top: 2%;
+//	margin-left: -(100% - $blockLeft-marginLeft);
+//	margin-bottom: 2%;
+//	border: none;
+//	background-color: LightBlue;
+//	text-align: left;
+}
+
+.sidebar ul {
+	padding-left: 0.5em;
+	p {
+		margin: 1em 0;
+	}
+}
+
+.sidebar ul li {
+	@include no-bullets;
+	padding: 0;
+}
+
+.sidebar ul li,
+.sidebar ul li p {
+	line-height: 1.5em;
+}
+
+.sidebar ul li a {
+	font-weight: normal;
+}
+
+.sidebar p {
+	color: DarkBlue;
+}
+.sidebar ul li .selflink {
+	font-weight: bold;
+}
+
+.farbar {
+	float: left;
+	min-height: 480px;
+//	width: $blockRight-width;
+	width: 23%;
+	margin-top: 0;
+//	margin-left: -($blockRight-fullwidth - $blockRight-marginLeft);
+	margin-left: -27%;
+	margin-bottom: 0;
+//	padding: $blockRight-paddingAny;
+	padding: 2em 2%;
+	background-color: LightBlue;
+	text-align: left;
+	img {
+		height: auto;
+		width: 100%;
+	}
+	#mc_embed_signup {
+	background-color: inherit;
+	font: inherit;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	#content {
+		width: 96%;
+		margin: 0;
+		padding: 0 2%;
+	}
+	.columns {
+		@include column-count(1);
+	}
+	.inlinepage {
+		margin: 0;
+	}
+	.farbar {
+		width: 96%;
+		margin-left: 0;
+	}
+	.sidebar {
+		float: none;
+		width: 96%;
+		margin-left: 0;
+	}
+}
+
+.farbar p i {
+	font-size: 0.8em;
+	line-height: 1em;
+}
+
+.farbar .inlinepage img {
+	@include h5bp-hidden;
+}
+
+.farbar h3 a {
+	color: black;
+	font-weight: bold;
+}
+
+.tags {
+	@include h5bp-hidden;
+}
+
+#backlinks {
+	@include h5bp-hidden;
+}
+
+#footer {
+	clear: left;
+	width: 100%;
+	margin: 2% 0 0;
+	ul {
+		@include no-bullets;
+		padding: 0;
+	}
+// to secure readability with current colors.
+	img {
+		height: auto;
+		float: none;
+		display: block;
+		padding: 0;
+	}
+	#mc_embed_signup {
+		background-color: inherit;
+		font: inherit;
+		input {
+			color: Black;
+		}
+		.button {
+			color: DarkBlue;
+			background-color: LightBlue;
+		}
+	}
+}
+
+#footer #mc_embed_signup form {
+	padding: 0;
+}
+
+#footer #mc_embed_signup label {
+	font-size: inherit;
+}
+
+#pageinfo {
+	margin: 0;
+	border-top: 0;
+	padding:1em 1em 1em 20px;
+	background-color: #336699;
+	color: LightBlue;
+	a {
+		color: LightBlue;
+		&:hover {
+		color: white;
+		}
+	}
+}
+
+.pagedate {
+	margin-top: 0;
+}
+
+.pagecopyright,
+.pagecopyright P {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+//Responsive design
+@media screen and (max-width: 480px) {
+	.columns {
+		@include column-count(1);
+	}
+	.inlinepage {
+		margin: 0;
+	}
+}
+
+@media screen and (min-width: 480px) and (max-width: 700px) {
+	.columns {
+		@include column-count(2);
+	}
+}
+
+@media screen and (min-width: 701px) {
+	.columns {
+		@include column-count(3);
+	}
+}