mt-site
RSS
Update admin to include the edit-page changes.
Update admin to include the edit-page changes.
darkmorford - - Load All Authors

File last commit:

3e13274f606b
e03e4dc6b780
Show More
index.scss
692 lines | 9.6 KiB | text/x-scss | ScssLexer
/ styles / index.scss
History | Source | Raw |Copy content
darkmorford
Replace hard-coded colors with variables.
 r31 @charset "utf-8";
darkmorford
Import fonts sheet, fix a couple validation errors.
 r32 @import "fonts";
darkmorford
Replace hard-coded colors with variables.
 r31 @import "palette";
darkmorford
SASS-ify style sheets.
 r33 h2, h3 a {
margin: 0;
padding: 0;
darkmorford
Replace hard-coded colors with variables.
 r31 color: $text-accent;
darkmorford
Add root-directory files.
 r2 }
/* Dress up the comic */
#comic {
darkmorford
SASS-ify style sheets.
 r33 /* Give IE hasLayout to fix a neg margin bug */
height: 1%;
margin-top: 0;
darkmorford
Add root-directory files.
 r2 width: auto;
darkmorford
SASS-ify style sheets.
 r33 .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;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Top Nav */
#comic .navpanel .navcontrols.top {
li.prev {
background: url(../parts/nav2-top-prev.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.next {
background: url(../parts/nav2-top-next.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.prevoff {
background: url(../parts/nav2-top-prevoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.nextoff {
background: url(../parts/nav2-top-nextoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Bottom Nav */
#comic .navpanel .navcontrols.bottom {
li.prev {
background: url(../parts/nav2-bottom-prev.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.next {
background: url(../parts/nav2-bottom-next.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.prevoff {
background: url(../parts/nav2-bottom-prevoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.nextoff {
background: url(../parts/nav2-bottom-nextoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Form Nav only for disable */
#comic .navpanel .navcontrols {
li.findprevoff {
background: url(../parts/nav2-prevfindoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 li.findnextoff {
background: url(../parts/nav2-nextfindoff.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 ul#searchprevnext {
li {
height: 33px;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #comic .transcript {
list-style-type: none;
padding: 66px 50px;
margin: 0;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 .panelhead {
font-size: larger;
font-weight: bold;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 dl {
padding-left: 50px;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 dt {
float: left;
padding-right: 1em;
font-weight: bold;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 dd {
margin-left: 5.5em;
padding-left: 0;
padding-bottom: 0.5ex;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Make the archive link stand out */
#comic #archivelink {
background-color: $text-normal;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 a {
color: $nl-background;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 &:hover {
color: $link-hover;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Boxes between the comic and the rants */
#megagear {
text-align: center;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #newsbox {
overflow: visible;
height: 60px;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 .leftcol {
// left: 5px;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 .rightcol {
// right: 5px;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 div {
border: none;
overflow: visible;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 a {
color: $text-accent;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 ul {
margin-left: 3ex;
padding-left: 0;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 h3 {
text-align: center;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #support {
font-size: 80%;
border-bottom: 5px solid $nl-background;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 div.thewrap {
div {
// Fix a bug caused by OpenAds injecting a <div> into the status area which
// partially obscures the 'support' heading
background-color: transparent;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #newsbox div.thewrap, #support div.thewrap {
border-bottom: none;
margin: 0;
padding: 0;
background: url(../parts/twitter-seperator.png) 6px 0 $infobox;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #status {
dl {
margin: 1em;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 dt {
float: left;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 dd {
margin-left: 7em;
color: $text-accent;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 div#percentbox {
padding: 1px;
width: 90%;
border: 1px solid $percent-border;
margin: 0;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 .content .column {
width: 330px;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 .content div.column.leftcol, .content div.column.rightcol {
border: none;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 .content div#status, .content div#fred_twitter {
border: none;
background: none;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #status ul, #fred_twitter ul {
margin-top: 0;
darkmorford
Add root-directory files.
 r2 }
#status li, #fred_twitter li {
padding-top: 4px;
padding-right: 1em;
}
#blogbits {
darkmorford
SASS-ify style sheets.
 r33 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;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #feed-list h4 {
darkmorford
Add root-directory files.
 r2 margin: auto;
darkmorford
SASS-ify style sheets.
 r33 color: $text-accent;
text-align: center;
font-size: medium;
darkmorford
Add root-directory files.
 r2 width: 400px;
}
darkmorford
SASS-ify style sheets.
 r33 #facebook {
border: none;
padding: 0;
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 img {
width: 300px;
height: 60px;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #support {
position: relative;
darkmorford
Add root-directory files.
 r2 }
#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;
darkmorford
SASS-ify style sheets.
 r33 margin: 0;
border: 0;
padding: 0;
darkmorford
Add root-directory files.
 r2
background-color: transparent;
darkmorford
SASS-ify style sheets.
 r33 a {
color: $text-accent;
font-size: 11px;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 p {
margin: 0 10px 0 0;
}
darkmorford
Add root-directory files.
 r2 }
/* Rant Columns */
#console {
overflow: hidden;
darkmorford
SASS-ify style sheets.
 r33 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 <pre> 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;
}
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Shaded borders around images */
#strip, #strip span {
/* Everyone treat <span> like <div> */
darkmorford
Add root-directory files.
 r2 display: block;
darkmorford
SASS-ify style sheets.
 r33 /* Shrinkwrap blocks for IE */
display: inline-block;
darkmorford
Add root-directory files.
 r2 }
/* hasLayout */
darkmorford
SASS-ify style sheets.
 r33 * html #strip, * html #strip span {
height: 1%;
}
darkmorford
Add root-directory files.
 r2
#strip {
darkmorford
SASS-ify style sheets.
 r33 /* Shrinkwrap blocks for everyone else */
display: table;
darkmorford
Add root-directory files.
 r2 position: relative;
margin: -33px auto 0px;
min-width: 650px;
darkmorford
SASS-ify style sheets.
 r33
img {
margin: 33px 25px;
}
iframe {
border: none;
margin: 33px 25px;
width: 1024px;
height: 576px;
}
darkmorford
Add root-directory files.
 r2 }
div#strip {
darkmorford
SASS-ify style sheets.
 r33 width: 700px;
darkmorford
Replace hard-coded colors with variables.
 r31 background-color: $comic-background;
darkmorford
Add root-directory files.
 r2 }
#strip-tl {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-corner-UL.png) no-repeat left top;
darkmorford
Add root-directory files.
 r2 }
#strip-tr {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-corner-UR.png) no-repeat right top;
darkmorford
Add root-directory files.
 r2 }
#strip-t {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-slice-vert-top.png) repeat-x top;
darkmorford
Add root-directory files.
 r2 }
#strip-bl {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-corner-LL.png) no-repeat left bottom;
darkmorford
Add root-directory files.
 r2 }
#strip-br {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-corner-LR.png) no-repeat right bottom;
darkmorford
Add root-directory files.
 r2 }
#strip-b {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-slice-vert-bottom.png) repeat-x bottom;
darkmorford
Add root-directory files.
 r2 }
#strip-l {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-shadow-vert-left.png) repeat-y left;
darkmorford
Add root-directory files.
 r2 }
#strip-r {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-shadow-vert-right.png) repeat-y right;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #strip-transcript {
padding: 10px;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Center the comic */
#comic {
text-align: center;
* {
text-align: left;
}
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 /* Overload header texts */
#metabox h2 span {
background: url(../parts/mt-blk_bar-metabox.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
darkmorford
SASS-ify style sheets.
 r33 #support h2 span {
background: url(../parts/mt-blk_bar-support.png) no-repeat;
}
darkmorford
Add root-directory files.
 r2
darkmorford
SASS-ify style sheets.
 r33 #console h2 span {
background: url(../parts/mt-blk_bar-console.png) no-repeat;
}