mt-site Commit - 9ecc5ebca9fd

Replace hard-coded colors with variables.

darkmorford -

9ecc5ebca9fd

Not Reviewed

Context file:

Add another comment

Collapse all files

0 unresolved 0 Resolved

0 General 0 Inline

styles/_fonts.scss ¶ created 644 +5 0

@@ -0,0 +1,5
	1	@charset "utf-8";
	2
	3	$font-stack: Verdana, Arial, Helvetica, sans-serif;
	4	$banner-font: monospace;
	5	$credits-font: Arial, Helvetica, sans-serif;

styles/_palette.scss ¶ +11 -3

@@ -1,9 +1,17
1	$background: #4C565E;	1	@charset "utf-8";
2	$foreground: #757B81;	2
3	$infobox: #23272B;	3	$background: #4C565E;
		4	$foreground: #757B81;
		5	$infobox: #23272B;
		6
		7	$nl-background: #000000;
		8	$comic-background: #FFFFFF;
		9
		10	$percent-border: #556677;
4		11
5	$text-normal: #B7BFC7;	12	$text-normal: #B7BFC7;
6	$text-accent: #F6B33D;	13	$text-accent: #F6B33D;
		14	$text-credits: #E4E4D6;
7		15
8	$link-normal: #FF6600;	16	$link-normal: #FF6600;
9	$link-hover: #EB5252;	17	$link-hover: #EB5252;

styles/archive.scss ¶ +18 -7

@@ -1,16 +1,27
		1	@charset "utf-8";
		2	@import "palette";
		3
1	.content ol {	4	.content ol {
2	padding: 1ex 3em;	5	padding: 1ex 3em;
3	background-color: ~~#757b81~~;	6	background-color: $foreground;
4	margin: 0px;	7	margin: 0;
5	}	8	}
6		9
7	.content ul {	10	.content ul {
8	list-style-type: none;	11	list-style-type: none;
9	padding: 1ex 2em;	12	padding: 1ex 2em;
10	background-color: ~~#757b81~~;	13	background-color: $foreground;
11	margin: 0px;	14	margin: 0;
		15	}
		16
		17	.content a {
		18	color: $text-accent;
12	}	19	}
13		20
14	.content a { color: #f6b33d; }	21	.content a:visited {
15	.content a:visited { color:#ececa3; }	22	color: $link-visited;
16	.content a:hover { color:#eb5252; }	23	}
		24
		25	.content a:hover {
		26	color: $link-hover;
		27	}

styles/index.scss ¶ +30 -27

+            @charset "utf-8";
+            @import "palette";
             h2,
             h3 a {
             	margin: 0px;
             	padding: 0px;
-            	color: #f6b33d;
+            	color: $text-accent;
             }
             .content .column { width:330px }
             #comic .nl {
             	padding-top: 5px;
             	padding-bottom: 5px;
-            	background-color: black;
+            	background-color: $nl-background;
             	margin: -5em auto 0px;
-            	border-top: solid 5em #b7bfc7;
+            	border-top: solid 5em $text-normal;
             	width: 700px;
             	text-align: center;
             }
             }
             /* Make the archive link stand out */
-            #comic #archivelink { background-color:#b7bfc7 }
+            #comic #archivelink { background-color: $text-normal; }
-            #comic #archivelink a { color:black }
+            #comic #archivelink a { color: $nl-background; }
-            #comic #archivelink a:hover { color:#eb5252 }
+            #comic #archivelink a:hover { color: $link-hover; }
             /* Boxes between the comic and the rants */
             #megagear { text-align:center }
-            #newsbox a { color:#f6b33d }
+            #newsbox a { color: $text-accent; }
             #newsbox ul {
             	margin-left: 3ex;
             	padding-left: 0px;
             #status dd {
             	margin-left: 7em;
-            	color: #f6b33d;
+            	color: $text-accent;
             }
             #status dd div#percentbox {
             	padding: 1px;
             	width: 90%;
-            	border: 1px solid #567;
+            	border: 1px solid $percent-border;
             	margin: 0px;
             }
             	border-bottom:none;
             	margin:0;
             	padding:0;
-            	background: url(../parts/twitter-seperator.png) 6px 0 #23272B;
+            	background: url(../parts/twitter-seperator.png) 6px 0 $infobox;
             }
             /* Fix a bug caused by OpenAds injecting a <div> into the status area which
             .content div#status,
             .content div#fred_twitter { border: none; background: none; }
-            #support { border-bottom: 5px solid black; }
+            #support { border-bottom: 5px solid $nl-background; }
             #status ul, #fred_twitter ul { margin-top:0px }
             	z-index: 1;
             	border: solid 5px black;
             	width: 400px;
-            	background: #4c565e;
+            	background: $background;
             	text-align: left;
             }
             	display: inline-block;
             	margin: 0px;
             	padding: 7.5px 4px;
-            	color: #B7BFC7;
+            	color: $text-normal;
             }
             #blogbits a.rightcol img,
             }
             #newsbox .adinfo a, #support .adinfo a {
-            	color: #f6b33d;
+            	color: $text-accent;
             	font-size: 11px;
             }
             #console h3 {
             	padding: 0.75ex;
-            	background-color: #757b81;
+            	background-color: $foreground;
-            	font-family: monospace;
+            	font-family: $banner-font;
             	font-size: xx-large;
             	text-align: center;
             }
             #feed-list h4 {
             	margin: auto;
-            	color: #F6B33D;
+            	color: $text-accent;
             	text-align: center;
             	font-size: medium;
             	width: 400px;
             	padding: 0.75ex 0px;
             	width: 330px;
-            	background-color: #757b81;
+            	background-color: $foreground;
-            	color: #F6B33D;
+            	color: $text-accent;
             	text-align: center;
             	font-size: medium;
             }
-            #console h4 a {color:#f6b33d}
+            #console h4 a {color: $text-accent;}
             #console .rantbody {
             	margin-top: 0px;
             #console .leftcol {
             	width: 350px;
-            	color: #b7bfc7;
+            	color: $text-normal;
             }
             #console .rightcol {
             	width: 350px;
-            	color: #f6b33D;
+            	color: $text-accent;
             }
             #console .rantimage {
             }
             #console .nameplate {
-            	background-color: #757B81;
+            	background-color: $foreground;
             	width: 350px
             }
             #console .oldrant {
             	margin-top: 1.5em;
-            	border-top: medium solid #B7BFC7;
+            	border-top: medium solid $text-normal;
             	padding-top: 1em;
             	width: 345px;
             }
             	height: 123px;
             }
-            										#console .oldrant .rantimage p,
+            #console .oldrant .rantimage p,
             #console .oldrant .rantimage p img {
             	float: none;
             	width: 150px;
             #console .oldrant .nameplate {
             	margin-top: 43px;
-            	background-color: #757B81;
+            	background-color: $foreground;
             	width: 150px;
             	float: right;
             }
             div#strip {
             	width:700px;
-            	background-color: white;
+            	background-color: $comic-background;
             }
             #strip-tl {

styles/main.scss ¶ +37 -34

+            @charset "utf-8";
+            @import "palette";
             /* Set basic element styles */
-            img { border:none }
+            img { border: none; }
             a {
             	text-decoration: none;
-            	color: #f60;
+            	color: $link-normal;
             }
-            a:visited { color:#ececa3; }
+            a:visited { color: $link-visited; }
-            a:hover { color:#eb5252; }
+            a:hover { color: $link-hover; }
             body {
             	position: relative; /* Make IE not hate positioned elements */
             	margin: auto;
             	padding: 14px;
-            	background-color: #4c565e;
+            	background-color: $background;
             	font-size: 0.8em;
-            	font-family: Verdana, Arial, Helvetica, sans-serif;
+            	font-family: $font-stack;
             }
             /* Set default widths for page boxes */
             	margin: auto;
             	width: 700px;
             }
-            body div div { width:auto }
+            body div div { width: auto; }
             /* Make the headers look nice */
-            h1 { margin:0px }
+            h1 { margin: 0; }
             h2 {
             	text-align: left;
-            	color: #f6b33d;
+            	color: $text-accent;
             }
             /* Create special elements and classes */
             h2, .blackbar {
             	height: 18px; /* Take that, old gecko! */
-            	margin: 0px;
+            	margin: 0;
-            	padding: 0px 1ex;
+            	padding: 0 1ex;
             	overflow: hidden;
             	background-color: black;
             	height: 100%;
             }
-            .clearer { clear:both }
+            .clearer { clear: both; }
-            br.clearer { line-height:0px }
+            br.clearer { line-height: 0; }
-            .leftcol { float:left }
+            .leftcol { float: left }
-            .rightcol { float:right }
+            .rightcol { float: right }
             .nl {
-            	margin: 0px;
+            	margin: 0;
-            	padding: 0px;
+            	padding: 0;
-            	background-color: black;
+            	background-color: $nl-background;
             	text-align: center;
             	list-style-type: none;
             	display: inline;
             	margin: 0px;
             	padding: 0em 0.5ex;
-            	color: #B7BFC7;
+            	color: $text-normal;
             }
-            .nl a { color:#b7bfc7; text-decoration:none }
+            .nl a { color: $text-normal; text-decoration: none; }
-            .nl a:link, .nl a:visited { color:#b7bfc7 }
+            .nl a:link, .nl a:visited { color: $text-normal; }
-            .nl a:hover { color:#eb5252 }
+            .nl a:hover { color: $link-hover; }
             .content {
             	margin-top: 1em;
             	margin-bottom: 1em;
-            	background-color: black;
+            	background-color: $nl-background;
-            	color: #b7bfc7;
+            	color: $text-normal;
             }
             .content div {
             	overflow: hidden;
             	height: 100%;
-            	border: solid 5px black;
+            	border: solid 5px $nl-background;
-            	background-color: #23272b;
+            	background-color: $infobox;
             	padding: 5px;
             }
             	width: 468px;
             	margin-left: -246px;
-            	background-image:url(parts/banner_bg.gif);
+            	background-image: url(../parts/banner_bg.gif);
             	padding: 14px 12px;
             }
             /* Style the top banner */
             #banner {
-            	background-color: black;
+            	background-color: $nl-background;
             	text-align: center;
             }
             #banner h2 {
-            	color: #b7bfc7;
+            	color: $text-normal;
-            	font-family: monospace;
+            	font-family: $banner-font;
             }
             #banner .nl {
             /* Style the footer */
             #credits {
-            	background-color: #757b81;
+            	background-color: $foreground;
-            	color: #e4e4d6;
+            	color: $text-credits;
             	padding-bottom: 0.5ex;
             	margin-top: 1em;
             }
             	margin: 0px;
             	text-align: center;
             	padding: 0.5ex;
-            	font-family: Arial, helvetica, sans-serif;
+            	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 }
  No newline at end of file
+            #credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat }

styles/search.scss ¶ +12 -9

+            @charset "utf-8";
+            @import "palette";
             .search {
             	margin: 10px;
             }
             }
             .results {
-            	margin: 0px;
+            	margin: 0;
             	padding: 1ex 2em;
-            	background-color: #757b81;
+            	background-color: $foreground;
             }
-            .results, .results a { color: #f6b33d; }
+            .results, .results a { color: $text-accent; }
-            .results a:visited { color:#ececa3; }
+            .results a:visited { color: $link-visited; }
-            .results a:hover { color:#eb5252; }
+            .results a:hover { color: $link-hover; }
-            #syntax code { color:#f6b33d }
+            #syntax code { color: $text-accent; }
-            #syntax form { margin:0px }
+            #syntax form { margin: 0; }
             dt {
-            	font-size:larger;
+            	font-size: larger;
             }
             ol {
             }
             /* Overload header texts */
-            #syntax h2 span { background:url(parts/mt-blk_bar-search_syntax.png) no-repeat }
+            #syntax h2 span { background:url(../parts/mt-blk_bar-search_syntax.png) no-repeat }

styles/static.scss ¶ +6 -1

@@ -1,1 +1,6
1	h3, h4, h5, h6 { color:#f6b33d }	1	@charset "utf-8";
		2	@import "palette";
		3
		4	h3, h4, h5, h6 {
		5	color: $text-accent;
		6	}

styles/support.scss ¶ +12 -9

+            @charset "utf-8";
+            @import "palette";
             #inner {
-            	/* Satisfy internal floated elements */
+            	// Satisfy internal floated elements
             	overflow: hidden;
-            	height: 100%;
+            	height:   100%;
-            	border: none;
+            	border:   none;
-            	margin: 0em 1em;
+            	margin:   0 1em;
             }
             #inner img
             {
-                display: block;
+                display:      block;
-                margin-left: auto;
+                margin-left:  auto;
-                margin-right: auto
+                margin-right: auto;
             }
             #inner h3
             {
-            	color:#F6B33D;
+            	color: $text-accent;
-            }
  No newline at end of file

Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings