MegaTokyo - <?php echo $title ?>

*/ - display: inline-block; /* Shrinkwrap blocks for IE */ -} - -/* hasLayout */ -* html #strip, * html #strip span { height: 1%; } - -#strip { - display: table; /* Shrinkwrap blocks for everyone else */ - position: relative; - margin: -33px auto 0px; - min-width: 650px; -} - -div#strip { - width:700px; - background-color: white; -} - -#strip-tl { - background: url(parts/mt-corner-UL.png) no-repeat left top; -} - -#strip-tr { - background: url(parts/mt-corner-UR.png) no-repeat right top; -} - -#strip-t { - background: url(parts/mt-slice-vert-top.png) repeat-x top; -} - -#strip-bl { - background: url(parts/mt-corner-LL.png) no-repeat left bottom; -} - -#strip-br { - background: url(parts/mt-corner-LR.png) no-repeat right bottom; -} - -#strip-b { - background: url(parts/mt-slice-vert-bottom.png) repeat-x bottom; -} - -#strip-l { - background: url(parts/mt-shadow-vert-left.png) repeat-y left; -} - -#strip-r { - background: url(parts/mt-shadow-vert-right.png) repeat-y right; -} - -#strip img { - margin: 33px 25px; -} - -#strip iframe { - border: none; - margin: 33px 25px; - width: 1024px; - height: 576px; -} - -#strip-transcript { - padding: 10px 10px 10px 10px; -} - -/* Center the comic */ -#comic { text-align:center } -#comic * { text-align:left } - -/* Overload header texts */ -#metabox h2 span { background: url(parts/mt-blk_bar-metabox.png) no-repeat } -#support h2 span { background: url(parts/mt-blk_bar-support.png) no-repeat } -#console h2 span { background: url(parts/mt-blk_bar-console.png) no-repeat } diff --git a/main.css b/main.css deleted file mode 100644 index 56b5bd9..0000000 --- a/main.css +++ /dev/null @@ -1,182 +0,0 @@ -/* Set basic element styles */ -img { border:none } - -a { - text-decoration: none; - color: #f60; -} - -a:visited { color:#ececa3; } -a:hover { color:#eb5252; } - -body { - position: relative; /* Make IE not hate positioned elements */ - - margin: auto; - padding: 14px; - - background-color: #4c565e; - - font-size: 0.8em; - font-family: Verdana, Arial, Helvetica, sans-serif; -} - -/* Set default widths for page boxes */ -body div { - position: relative; - margin: auto; - width: 700px; -} -body div div { width:auto } - -/* Make the headers look nice */ -h1 { margin:0px } - -h2 { - text-align: left; - color: #f6b33d; -} - -/* Create special elements and classes */ -h2, .blackbar { - height: 18px; /* Take that, old gecko! */ - margin: 0px; - padding: 0px 1ex; - - overflow: hidden; - background-color: black; - - font-size: 16px; - font-weight: 150; - font-family: monospace; - letter-spacing: 0.5ex; -} - -h2 span, .blackbar span { - display: block; - width: 100%; - height: 100%; -} - -.clearer { clear:both } -br.clearer { line-height:0px } -.leftcol { float:left } -.rightcol { float:right } - -.nl { - margin: 0px; - padding: 0px; - - background-color: black; - text-align: center; - - list-style-type: none; -} - -.nl li { - display: inline; - margin: 0px; - padding: 0em 0.5ex; - color: #B7BFC7; -} - -.nl a { color:#b7bfc7; text-decoration:none } -.nl a:link, .nl a:visited { color:#b7bfc7 } -.nl a:hover { color:#eb5252 } - -.content { - margin-top: 1em; - margin-bottom: 1em; - background-color: black; - color: #b7bfc7; -} - -.content div { - /* Satisfy internal floated elements */ - overflow: hidden; - height: 100%; - - border: solid 5px black; - background-color: #23272b; - padding: 5px; -} - -.content .clearer { - border: none; - padding: 0px; -} - -/* Correct a word wrapping bug in the ad bar */ -#adbar { - position: relative; - height: 90px; - text-align: center; - font-size: 1px; - letter-spacing: 500px; -} - -#adbar #megagear-ad { - position: absolute; - top: 14px; - left: 0px; -} - -#adbar #kickstarter-ad { - position: absolute; - top: 14px; - left: 115px; -} - -#adbar #cologuys-ad { - position: absolute; - top: 14px; - right: 0px; -} - -#adbar .glowwrap { - position: absolute; - display: block; - top: 0px; - left: 50%; - width: 468px; - margin-left: -246px; - - background-image:url(parts/banner_bg.gif); - padding: 14px 12px; -} - -/* Style the top banner */ -#banner { - background-color: black; - text-align: center; -} - -#banner h2 { - color: #b7bfc7; - font-family: monospace; -} - -#banner .nl { - padding-bottom: 5px; - padding-top: 5px; -} - -/* Style the footer */ -#credits { - background-color: #757b81; - color: #e4e4d6; - padding-bottom: 0.5ex; - margin-top: 1em; -} - -#credits p { - margin: 0px; - text-align: center; - padding: 0.5ex; - font-family: Arial, helvetica, sans-serif; - font-size: x-small; -} - -/* Overload header texts */ -#banner .blackbar span { background: url(parts/mt3-bar-comic.gif) no-repeat } -#credits h2 span { background: url(parts/mt-blk_bar-credits.png) no-repeat } \ No newline at end of file diff --git a/search.css b/search.css deleted file mode 100644 index fc3206a..0000000 --- a/search.css +++ /dev/null @@ -1,31 +0,0 @@ -.search { - margin: 10px; -} - -.search #q { - width: 45%; -} - -.results { - margin: 0px; - padding: 1ex 2em; - background-color: #757b81; -} - -.results, .results a { color: #f6b33d; } -.results a:visited { color:#ececa3; } -.results a:hover { color:#eb5252; } - -#syntax code { color:#f6b33d } -#syntax form { margin:0px } - -dt { - font-size:larger; -} - -ol { - list-style-type: none; -} - -/* Overload header texts */ -#syntax h2 span { background:url(parts/mt-blk_bar-search_syntax.png) no-repeat } diff --git a/static.css b/static.css deleted file mode 100644 index 70e2e71..0000000 --- a/static.css +++ /dev/null @@ -1 +0,0 @@ -h3, h4, h5, h6 { color:#f6b33d } diff --git a/styles/_fonts.scss b/styles/_fonts.scss new file mode 100644 index 0000000..811801e --- /dev/null +++ b/styles/_fonts.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +$font-stack: Verdana, Arial, Helvetica, sans-serif; +$banner-font: monospace; +$credits-font: Arial, Helvetica, sans-serif; diff --git a/styles/_palette.scss b/styles/_palette.scss new file mode 100644 index 0000000..c4ae91b --- /dev/null +++ b/styles/_palette.scss @@ -0,0 +1,18 @@ +@charset "utf-8"; + +$background: #4C565E; +$foreground: #757B81; +$infobox: #23272B; + +$nl-background: #000000; +$comic-background: #FFFFFF; + +$percent-border: #556677; + +$text-normal: #B7BFC7; +$text-accent: #F6B33D; +$text-credits: #E4E4D6; + +$link-normal: #FF6600; +$link-hover: #EB5252; +$link-visited: #ECECA3; diff --git a/styles/archive.scss b/styles/archive.scss new file mode 100644 index 0000000..9a892b2 --- /dev/null +++ b/styles/archive.scss @@ -0,0 +1,30 @@ +@charset "utf-8"; +@import "palette"; + +.content { + ol, ul { + background-color: $foreground; + margin: 0; + } + + ol { + padding: 1ex 3em; + } + + ul { + list-style-type: none; + padding: 1ex 2em; + } + + a { + color: $text-accent; + + &:visited { + color: $link-visited; + } + + &:hover { + color: $link-hover; + } + } +} diff --git a/characters.css b/styles/characters.scss similarity index 100% rename from characters.css rename to styles/characters.scss diff --git a/community.css b/styles/community.scss similarity index 100% rename from community.css rename to styles/community.scss diff --git a/faq.css b/styles/faq.scss similarity index 100% rename from faq.css rename to styles/faq.scss diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..aabce48 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,692 @@ +@charset "utf-8"; +@import "fonts"; +@import "palette"; + +h2, h3 a { + margin: 0; + padding: 0; + color: $text-accent; +} + +/* Dress up the comic */ +#comic { + /* Give IE hasLayout to fix a neg margin bug */ + height: 1%; + margin-top: 0; + width: auto; + + .nl { + padding-top: 5px; + padding-bottom: 5px; + background-color: $nl-background; + margin: -5em auto 0; + border-top: solid 5em $text-normal; + width: 700px; + text-align: center; + } + + .navpanel { + position: relative; + margin: auto; + + .navcontrols { + position: absolute; + z-index: 1; + + ul { + width: 124px; + height: 33px; + margin: 0; + padding: 0; + clear: both; + + li { + display: block; + float: left; + + a, span { + display: block; + padding-top: 33px; + width: 62px; + height: 0; + overflow: hidden; + } + } + } + } + + .search-filter { + margin-bottom: 15px; + } + + #q { + width: 350px; + } + + #go, #iego { + vertical-align: middle; + padding-bottom: 2px; + } + } + + div.navpanel { + /* Make IE draw panel above glow border */ + position: relative; + z-index: 1; + height: 33px; + padding: 0; + width: 650px; + + .navcontrols { + right: 25px; + } + + #title { + padding: 1ex; + } + } + + form.navpanel { + margin-top: -28px; + padding: 0; + width: 625px; + + .navcontrols { + right: 0; + } + } + + /* Need to gank the button out of the document flow somehow */ + .search-field { + position: relative; + + a { + position: absolute; + } + } + + .search-filter { + padding: 0 25px; + margin-bottom: 15px; + } +} + + +/* Top Nav */ +#comic .navpanel .navcontrols.top { + li.prev { + background: url(../parts/nav2-top-prev.png) no-repeat; + } + + li.next { + background: url(../parts/nav2-top-next.png) no-repeat; + } + + li.prevoff { + background: url(../parts/nav2-top-prevoff.png) no-repeat; + } + + li.nextoff { + background: url(../parts/nav2-top-nextoff.png) no-repeat; + } +} + +/* Bottom Nav */ +#comic .navpanel .navcontrols.bottom { + li.prev { + background: url(../parts/nav2-bottom-prev.png) no-repeat; + } + + li.next { + background: url(../parts/nav2-bottom-next.png) no-repeat; + } + + li.prevoff { + background: url(../parts/nav2-bottom-prevoff.png) no-repeat; + } + + li.nextoff { + background: url(../parts/nav2-bottom-nextoff.png) no-repeat; + } +} + +/* Form Nav only for disable */ +#comic .navpanel .navcontrols { + li.findprevoff { + background: url(../parts/nav2-prevfindoff.png) no-repeat; + } + + li.findnextoff { + background: url(../parts/nav2-nextfindoff.png) no-repeat; + } + + ul#searchprevnext { + li { + height: 33px; + } + } +} + +#comic .transcript { + list-style-type: none; + padding: 66px 50px; + margin: 0; + + .panelhead { + font-size: larger; + font-weight: bold; + } + + dl { + padding-left: 50px; + } + + dt { + float: left; + padding-right: 1em; + font-weight: bold; + } + + dd { + margin-left: 5.5em; + padding-left: 0; + padding-bottom: 0.5ex; + } +} + +/* Make the archive link stand out */ +#comic #archivelink { + background-color: $text-normal; + + a { + color: $nl-background; + + &:hover { + color: $link-hover; + } + } +} + +/* Boxes between the comic and the rants */ +#megagear { + text-align: center; +} + +#newsbox { + overflow: visible; + height: 60px; + + .leftcol { +// left: 5px; + } + + .rightcol { +// right: 5px; + } + + div { + border: none; + overflow: visible; + } + + a { + color: $text-accent; + } + + ul { + margin-left: 3ex; + padding-left: 0; + } + + h3 { + text-align: center; + } +} + +#support { + font-size: 80%; + border-bottom: 5px solid $nl-background; + + div.thewrap { + div { + // Fix a bug caused by OpenAds injecting a

into the status area which + // partially obscures the 'support' heading + background-color: transparent; + } + } +} + +#newsbox div.thewrap, #support div.thewrap { + border-bottom: none; + margin: 0; + padding: 0; + background: url(../parts/twitter-seperator.png) 6px 0 $infobox; +} + +#status { + dl { + margin: 1em; + } + + dt { + float: left; + } + + dd { + margin-left: 7em; + color: $text-accent; + + div#percentbox { + padding: 1px; + width: 90%; + border: 1px solid $percent-border; + margin: 0; + } + } +} + +.content .column { + width: 330px; +} + +.content div.column.leftcol, .content div.column.rightcol { + border: none; +} + +.content div#status, .content div#fred_twitter { + border: none; + background: none; +} + +#status ul, #fred_twitter ul { + margin-top: 0; +} + +#status li, #fred_twitter li { + padding-top: 4px; + padding-right: 1em; +} + +#blogbits { + padding: 0; + width: 370px; + + ul { + margin: 0; + padding: 0; + text-align: center; + list-style-type: none; + } + + ul#blogbitslist { + margin-left: 250px; + } + + ul#feed-list { + margin: auto; + + li { + display: inline-block; + margin: 0; + padding: 7.5px 4px; + color: $text-normal; + } + } + + #feed-list { + ul { + display: none; + position: absolute; + z-index: 1; + border: solid 5px $nl-background; + width: 400px; + background: $background; + text-align: left; + } + } + + a.rightcol, a.leftcol { + img { + width: 180px; + } + } + + a.rightcol { + img { + padding-left: 5px; + } + } + + a.leftcol { + img { + padding-right: 5px; + } + } +} + +#feed-list h4 { + margin: auto; + color: $text-accent; + text-align: center; + font-size: medium; + width: 400px; +} + +#facebook { + border: none; + padding: 0; + + img { + width: 300px; + height: 60px; + } +} + +#support { + position: relative; +} + +#support .thewrap .column .glowwrap, +#support .thewrap .column .glowwrap a { + display: block; + width: 100%; +} + +#support .thewrap .column .glowwrap img, +#support .thewrap .column .glowwrap embed { + display: block; + margin: auto; +} + +#support .glowwrap div { + border: none; +} + +#newsbox .adinfo, #support .adinfo { + position: absolute; + top: 2px; + right: 10px; + height: 16px; + + margin: 0; + border: 0; + padding: 0; + + background-color: transparent; + + a { + color: $text-accent; + font-size: 11px; + } + + p { + margin: 0 10px 0 0; + } +} + +/* Rant Columns */ +#console { + overflow: hidden; + + h3 { + padding: 0.75ex; + background-color: $foreground; + + font-family: $banner-font; + font-size: xx-large; + text-align: center; + } + + h4 { + margin: auto; + padding: 0.75ex 0; + width: 330px; + + background-color: $foreground; + color: $text-accent; + + text-align: center; + font-size: medium; + + a { + color: $text-accent; + } + } + + .date, .rantbody { + margin: 5px; + padding: 5px; + width: 330px; + } + + .rantbody { + margin-top: 0; + padding-top: 0; + + pre { + /* force

 to not break our boxes */
+			white-space: pre-wrap;
+			white-space: -moz-pre-wrap;
+			word-wrap: break-word;
+		}
+	}
+
+	.leftcol, .rightcol {
+		width: 350px;
+	}
+
+	.leftcol {
+		color: $text-normal;
+	}
+
+	.rightcol {
+		color: $text-accent;
+	}
+
+	.rantimage {
+		background: url(../parts/mt-glow-mainrant-vert.png) repeat-y;
+		width: 350px;
+		height: 285px;
+
+		p, p img {
+			float: none;
+			width: 300px;
+			height: 245px;
+			text-align: left;
+			padding: 0;
+			margin: 0;
+		}
+	}
+
+	.ri-top, .ri-bottom {
+		width: 350px;
+	}
+
+	.ri-top {
+		background: url(../parts/mt-glow-mainrant-top.png) top no-repeat;
+		height: 245px;
+	}
+
+	.ri-bottom {
+		background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat;
+	}
+
+	.ri-matte {
+		padding: 20px 0 20px 0;
+		margin: 0 25px;
+		width: 300px;
+		height: 245px;
+	}
+
+	.rantnav {
+		margin: 2em 0;
+		text-align: center;
+	}
+
+	.nameplate {
+		background-color: $foreground;
+		width: 350px;
+
+		span {
+			display: block;
+			height: 48px;
+			background-repeat: no-repeat;
+			background-position: top center;
+		}
+
+		h3 {
+			display: none;
+		}
+	}
+
+	.oldrant {
+		margin-top: 1.5em;
+		border-top: medium solid $text-normal;
+		padding-top: 1em;
+		width: 345px;
+
+		.rantimage {
+			float: left;
+			background: url(../parts/mt-glow-oldrant-vert.png) repeat-y;
+			width: 176px;
+			height: 141px;
+
+			p, p img {
+				float: none;
+				width: 150px;
+				height: 123px;
+				text-align: left;
+				padding: 0;
+				margin: 0;
+			}
+		}
+
+		.ri-top, .ri-bottom {
+			width: 178px;
+		}
+
+		.ri-top {
+			background: url(../parts/mt-glow-oldrant-top.png) top no-repeat;
+			height: 123px;
+		}
+
+		.ri-bottom {
+			background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat;
+		}
+
+		.ri-matte {
+			padding: 9px 0 9px 0;
+			margin: 0 13px;
+			width: 150px;
+			height: 123px;
+		}
+
+		.nameplate {
+			margin-top: 43px;
+			background-color: $foreground;
+			width: 150px;
+			float: right;
+		}
+
+		h4 {
+			float: right;
+			margin:5px 0 5px 5px;
+		}
+	}
+}
+
+/* Shaded borders around images */
+#strip, #strip span {
+	/* Everyone treat  like  */
+	display: block;
+
+	/* Shrinkwrap blocks for IE */
+	display: inline-block;
+}
+
+/* hasLayout */
+* html #strip, * html #strip span {
+	height: 1%;
+}
+
+#strip {
+	/* Shrinkwrap blocks for everyone else */
+	display: table;
+	position: relative;
+	margin: -33px auto 0px;
+	min-width: 650px;
+
+	img {
+		margin: 33px 25px;
+	}
+
+	iframe {
+		border: none;
+		margin: 33px 25px;
+		width: 1024px;
+		height: 576px;
+	}
+}
+
+div#strip {
+	width: 700px;
+	background-color: $comic-background;
+}
+
+#strip-tl {
+	background: url(../parts/mt-corner-UL.png) no-repeat left top;
+}
+
+#strip-tr {
+	background: url(../parts/mt-corner-UR.png) no-repeat right top;
+}
+
+#strip-t {
+	background: url(../parts/mt-slice-vert-top.png) repeat-x top;
+}
+
+#strip-bl {
+	background: url(../parts/mt-corner-LL.png) no-repeat left bottom;
+}
+
+#strip-br {
+	background: url(../parts/mt-corner-LR.png) no-repeat right bottom;
+}
+
+#strip-b {
+	background: url(../parts/mt-slice-vert-bottom.png) repeat-x bottom;
+}
+
+#strip-l {
+	background: url(../parts/mt-shadow-vert-left.png) repeat-y left;
+}
+
+#strip-r {
+	background: url(../parts/mt-shadow-vert-right.png) repeat-y right;
+}
+
+#strip-transcript {
+	padding: 10px;
+}
+
+/* Center the comic */
+#comic {
+	text-align: center;
+
+	* {
+		text-align: left;
+	}
+}
+
+/* Overload header texts */
+#metabox h2 span {
+	background: url(../parts/mt-blk_bar-metabox.png) no-repeat;
+}
+
+#support h2 span {
+	background: url(../parts/mt-blk_bar-support.png) no-repeat;
+}
+
+#console h2 span {
+	background: url(../parts/mt-blk_bar-console.png) no-repeat;
+}
diff --git a/styles/main.scss b/styles/main.scss
new file mode 100644
index 0000000..7644020
--- /dev/null
+++ b/styles/main.scss
@@ -0,0 +1,224 @@
+@charset "utf-8";
+@import "fonts";
+@import "palette";
+
+/* Set basic element styles */
+img {
+	border: none;
+}
+
+a {
+	text-decoration: none;
+	color: $link-normal;
+
+	&:visited {
+		color: $link-visited;
+	}
+
+	&:hover {
+		color: $link-hover;
+	}
+}
+
+body {
+	/* Make IE not hate positioned elements */
+	position: relative;
+
+	margin: auto;
+	padding: 14px;
+
+	background-color: $background;
+
+	font-size: 0.8em;
+	font-family: $font-stack;
+
+	div {
+		/* Set default widths for page boxes */
+		position: relative;
+		margin: auto;
+		width: 700px;
+
+		div {
+			width: auto;
+		}
+	}
+}
+
+/* Make the headers look nice */
+h1 {
+	margin: 0;
+}
+
+h2 {
+	text-align: left;
+	color: $text-accent;
+}
+
+/* Create special elements and classes */
+h2, .blackbar {
+	/* Take that, old gecko! */
+	height: 18px;
+	margin: 0;
+	padding: 0 1ex;
+
+	overflow: hidden;
+	background-color: $nl-background;
+
+	font-size: 16px;
+	font-weight: 100;
+	font-family: $banner-font;
+	letter-spacing: 0.5ex;
+
+	span {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.clearer {
+	clear: both;
+}
+
+br.clearer {
+	line-height: 0;
+}
+
+.leftcol {
+	float: left;
+}
+
+.rightcol {
+	float: right;
+}
+
+.nl {
+	margin: 0;
+	padding: 0;
+
+	background-color: $nl-background;
+	text-align: center;
+
+	list-style-type: none;
+	
+	li {
+		display: inline;
+		margin: 0;
+		padding: 0 0.5ex;
+		color: $text-normal;
+	}
+	
+	a {
+		color: $text-normal;
+		text-decoration: none;
+		
+		&:link, &:visited {
+			color: $text-normal;
+		}
+		
+		&:hover {
+			color: $link-hover;
+		}
+	}
+}
+
+.content {
+	margin-top: 1em;
+	margin-bottom: 1em;
+	background-color: $nl-background;
+	color: $text-normal;
+	
+	div {
+		/* Satisfy internal floated elements */
+		overflow: hidden;
+		height: 100%;
+
+		border: solid 5px $nl-background;
+		background-color: $infobox;
+		padding: 5px;
+	}
+	
+	.clearer {
+		border: none;
+		padding: 0;
+	}
+}
+
+/* Correct a word wrapping bug in the ad bar */
+#adbar {
+	position: relative;
+	height: 90px;
+	text-align: center;
+	font-size: 1px;
+	letter-spacing: 500px;
+	
+	#megagear-ad, #kickstarter-ad, #cologuys-ad {
+		position: absolute;
+		top: 14px;
+	}
+	
+	#megagear-ad {
+		left: 0;
+	}
+	
+	#kickstarter-ad {
+		left: 115px;
+	}
+	
+	#cologuys-ad {
+		right: 0;
+	}
+	
+	.glowwrap {
+		position: absolute;
+		display: block;
+		top: 0;
+		left: 50%;
+		width: 468px;
+		margin-left: -246px;
+
+		background-image: url(../parts/banner_bg.gif);
+		padding: 14px 12px;
+	}
+}
+
+/* Style the top banner */
+#banner {
+	background-color: $nl-background;
+	text-align: center;
+	
+	h2 {
+		color: $text-normal;
+		font-family: $banner-font;
+	}
+	
+	.nl {
+		padding-bottom: 5px;
+		padding-top: 5px;
+	}
+}
+
+/* Style the footer */
+#credits {
+	background-color: $foreground;
+	color: $text-credits;
+	padding-bottom: 0.5ex;
+	margin-top: 1em;
+	
+	p {
+		margin: 0;
+		text-align: center;
+		padding: 0.5ex;
+		font-family: $credits-font;
+		font-size: x-small;
+	}
+}
+
+/* Overload header texts */
+#banner .blackbar span {
+	background: url(../parts/mt3-bar-comic.gif) no-repeat
+}
+
+#credits h2 span {
+	background: url(../parts/mt-blk_bar-credits.png) no-repeat
+}
diff --git a/search-help.css b/styles/search-help.scss
similarity index 100%
rename from search-help.css
rename to styles/search-help.scss
diff --git a/styles/search.scss b/styles/search.scss
new file mode 100644
index 0000000..0ba2bef
--- /dev/null
+++ b/styles/search.scss
@@ -0,0 +1,47 @@
+@charset "utf-8";
+@import "palette";
+
+.search {
+	margin: 10px;
+	
+	#q {
+		width: 45%;
+	}
+}
+
+.results {
+	margin: 0;
+	padding: 1ex 2em;
+	background-color: $foreground;
+	color: $text-accent;
+	a {
+		color: $text-accent;
+	
+		&:visited {
+			color: $link-visited;
+		}
+		
+		&:hover {
+			color: $link-hover;
+		}
+	}
+}
+
+#syntax {
+	code { color: $text-accent; }
+	form { margin: 0; }
+	h2 {
+		span {
+			// Overload header texts
+			background: url(../parts/mt-blk_bar-search_syntax.png) no-repeat;
+		}
+	}
+}
+
+dt {
+	font-size: larger;
+}
+
+ol {
+	list-style-type: none;
+}
diff --git a/styles/static.scss b/styles/static.scss
new file mode 100644
index 0000000..8ca7ba0
--- /dev/null
+++ b/styles/static.scss
@@ -0,0 +1,6 @@
+@charset "utf-8";
+@import "palette";
+
+h3, h4, h5, h6 {
+	color: $text-accent;
+}
diff --git a/story.css b/styles/story.scss
similarity index 100%
rename from story.css
rename to styles/story.scss
diff --git a/styles/support.scss b/styles/support.scss
new file mode 100644
index 0000000..9aa555b
--- /dev/null
+++ b/styles/support.scss
@@ -0,0 +1,22 @@
+@charset "utf-8";
+@import "palette";
+
+#inner {
+	// Satisfy internal floated elements
+	overflow: hidden;
+	height:   100%;
+	border:   none;
+	margin:   0 1em;
+	
+	img {
+		display: block;
+		margin: {
+			left:  auto;
+			right: auto;
+		}
+	}
+	
+	h3 {
+		color: $text-accent;
+	}
+}
diff --git a/support.css b/support.css
deleted file mode 100644
index 0784fc4..0000000
--- a/support.css
+++ /dev/null
@@ -1,19 +0,0 @@
-#inner {
-	/* Satisfy internal floated elements */
-	overflow: hidden;
-	height: 100%;
-	border: none;
-	margin: 0em 1em;
-}
-
-#inner img
-{
-    display: block;
-    margin-left: auto;
-    margin-right: auto
-}
-
-#inner h3
-{
-	color:#F6B33D;
-}
\ No newline at end of file