diff --git a/.gitattributes b/.gitattributes
index c54001e..2b07102 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -3,6 +3,7 @@
# Code files
*.php text
+*.scss text
*.css text
*.js text
*.html text
diff --git a/.gitignore b/.gitignore
index e01346c..ef51d32 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,8 @@ extra
naishou
promotions
scr33n
+
+# SASS conversion artifacts
+*.css
+*.css.map
+.sass-cache
diff --git a/archive.css b/archive.css
deleted file mode 100644
index c1237a7..0000000
--- a/archive.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.content ol {
- padding: 1ex 3em;
- background-color: #757b81;
- margin: 0px;
-}
-
-.content ul {
- list-style-type: none;
- padding: 1ex 2em;
- background-color: #757b81;
- margin: 0px;
-}
-
-.content a { color: #f6b33d; }
-.content a:visited { color:#ececa3; }
-.content a:hover { color:#eb5252; }
diff --git a/frontend.inc.php b/frontend.inc.php
index bb7336d..6bce86d 100644
--- a/frontend.inc.php
+++ b/frontend.inc.php
@@ -241,7 +241,6 @@ function mtdie($errno, $errstr, $errfile, $errline, $errcontext) {
#logo {
margin-bottom: 2em;
}
- -->
@@ -298,8 +297,8 @@ function pagehead($caller, $title = 'relax, we understand j00', $style='')
MegaTokyo - <?php echo $title ?>
-
-
+
+
into the status area which
- * partially obscures the 'support' heading
- */
-#support div.thewrap div {
- background-color: transparent;
-}
-
-.content div.column.leftcol,
-.content div.column.rightcol { border: none; }
-
-.content div#status,
-.content div#fred_twitter { border: none; background: none; }
-
-#support { border-bottom: 5px solid black; }
-
-#status ul, #fred_twitter ul { margin-top:0px }
-
-#status li, #fred_twitter li {
- padding-top: 4px;
- padding-right: 1em;
-}
-
-#newsbox {
- overflow: visible;
- height: 60px;
-}
-
-/*
-#newsbox .leftcol {
- left: 5px;
-}
-
-#newsbox .rightcol {
- right: 5px;
-}
-*/
-
-#newsbox div {
- border:none;
- overflow:visible;
-}
-
-#blogbits {
- padding: 0px;
- width: 370px;
-}
-
-#blogbits ul
-{
- margin: 0px;
- padding: 0px;
- text-align: center;
- list-style-type: none;
-}
-
-#blogbits ul#blogbitslist { margin-left:250px }
-#blogbits ul#feed-list {
- margin: auto;
-}
-
-#blogbits #feed-list ul {
- display: none;
- position: absolute;
- z-index: 1;
- border: solid 5px black;
- width: 400px;
- background: #4c565e;
- text-align: left;
-}
-
-#blogbits ul#feed-list li {
- display: inline-block;
- margin: 0px;
- padding: 7.5px 4px;
- color: #B7BFC7;
-}
-
-#blogbits a.rightcol img,
-#blogbits a.leftcol img {
- width: 180px;
-}
-
-#blogbits a.rightcol img {
- padding-left: 5px;
-}
-
-#blogbits a.leftcol img {
- padding-right: 5px;
-}
-
-#facebook img {
- width: 300px;
- height: 60px;
-}
-
-#facebook {
- border: none;
- padding: 0px;
-}
-
-#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: 0px;
- border: 0px;
- padding: 0px;
-
- background-color: transparent;
-}
-
-#newsbox .adinfo a, #support .adinfo a {
- color: #f6b33d;
- font-size: 11px;
-}
-
-#newsbox .adinfo p, #support .adinfo p {
- margin: 0px 10px 0px 0px;
-}
-
-/* Rant Columns */
-#console {
- overflow: hidden;
-}
-
-#console h3 {
- padding: 0.75ex;
- background-color: #757b81;
-
- font-family: monospace;
- font-size: xx-large;
- text-align: center;
-}
-
-#console .date,
-#console .rantbody {
- margin: 5px;
- padding: 5px;
- width: 330px;
-}
-
-#feed-list h4 {
- margin: auto;
- color: #F6B33D;
- text-align: center;
- font-size: medium;
- width: 400px;
-}
-
-#console h4 {
- margin: auto;
- padding: 0.75ex 0px;
- width: 330px;
-
- background-color: #757b81;
- color: #F6B33D;
-
- text-align: center;
- font-size: medium;
-}
-
-#console h4 a {color:#f6b33d}
-
-#console .rantbody {
- margin-top: 0px;
- padding-top: 0px;
-}
-
-/* force to not break our boxes */
-#console .rantbody pre {
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- word-wrap: break-word;
-}
-
-#console .leftcol {
- width: 350px;
- color: #b7bfc7;
-}
-
-#console .rightcol {
- width: 350px;
- color: #f6b33D;
-}
-
-#console .rantimage {
- background: url(parts/mt-glow-mainrant-vert.png) repeat-y;
- width: 350px;
- height: 285px;
-}
-
-#console .ri-top {
- background: url(parts/mt-glow-mainrant-top.png) top no-repeat;
- width: 350px;
- height: 245px;
-}
-
-#console .ri-bottom {
- background: url(parts/mt-glow-mainrant-bottom.png) bottom no-repeat;
- width: 350px;
-}
-
-#console .ri-matte {
- padding: 20px 0px 20px 0px;
- margin: 0px 25px;
- width: 300px;
- height: 245px;
-}
-
-#console .rantimage p,
-#console .rantimage p img {
- float: none;
- width: 300px;
- height: 245px;
- text-align: left;
- padding: 0px;
- margin: 0px;
-}
-
-#console .rantnav {
- margin: 2em 0px;
- text-align: center;
-}
-
-#console .nameplate {
- background-color: #757B81;
- width: 350px
-}
-
-#console .nameplate span {
- display: block;
- height: 48px;
- background-repeat: no-repeat;
- background-position: top center;
-}
-
-#console .nameplate h3 {
- display: none;
-}
-
-#console .oldrant {
- margin-top: 1.5em;
- border-top: medium solid #B7BFC7;
- padding-top: 1em;
- width: 345px;
-}
-
-#console .oldrant .rantimage {
- float:left;
- background: url(parts/mt-glow-oldrant-vert.png) repeat-y;
- width: 176px;
- height: 141px;
-}
-
-#console .oldrant .ri-top {
- background: url(parts/mt-glow-oldrant-top.png) top no-repeat;
- width: 178px;
- height: 123px;
-}
-
-#console .oldrant .ri-bottom {
- background: url(parts/mt-glow-oldrant-bottom.png) bottom no-repeat;
- width: 178px;
-}
-
-#console .oldrant .ri-matte {
- padding: 9px 0px 9px 0px;
- margin: 0px 13px;
- width: 150px;
- height: 123px;
-}
-
- #console .oldrant .rantimage p,
-#console .oldrant .rantimage p img {
- float: none;
- width: 150px;
- height: 123px;
- text-align: left;
- padding: 0px;
- margin: 0px;
-}
-
-#console .oldrant .nameplate {
- margin-top: 43px;
- background-color: #757B81;
- width: 150px;
- float: right;
-}
-
-#console .oldrant h4 {
- float: right;
- margin:5px 0pt 5px 5px;
-}
-
-/* Shaded borders around images */
-#strip,
-#strip span {
- display: block; /* Everyone treat like */
- 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