mt-site
RSS
Add SASS artifacts to gitignore.
Add SASS artifacts to gitignore.
darkmorford - - Load All Authors

File last commit:

c97617beef9e
ac875651fde1
Show More
index.scss
614 lines | 10.2 KiB | text/x-scss | ScssLexer
/ styles / index.scss
History | Source | Raw |Copy content
darkmorford
Add root-directory files.
 r2 h2,
h3 a {
margin: 0px;
padding: 0px;
color: #f6b33d;
}
.content .column { width:330px }
/* Dress up the comic */
#comic {
margin-top: 0px;
height: 1%; /* Give IE hasLayout to fix a neg margin bug */
width: auto;
}
#comic .nl {
padding-top: 5px;
padding-bottom: 5px;
background-color: black;
margin: -5em auto 0px;
border-top: solid 5em #b7bfc7;
width: 700px;
text-align: center;
}
#comic .navpanel {
position: relative;
margin: auto;
}
#comic div.navpanel {
position: relative; /* Make IE draw panel above glow border */
z-index: 1;
height: 33px;
padding: 0px;
width: 650px;
}
#comic form.navpanel {
margin-top: -28px;
padding: 0px;
width: 625px;
}
/* Need to gank the button out of the document flow somehow */
#comic .search-field { position:relative }
#comic .search-field a { position:absolute }
#comic .search-filter {
padding:0px 25px;
margin-bottom: 15px;
}
#comic .navpanel .navcontrols {
position: absolute;
z-index: 1;
}
#comic div.navpanel .navcontrols { right:25px }
#comic form.navpanel .navcontrols { right:0px }
#comic .navpanel .navcontrols ul {
width: 124px; height: 33px;
margin: 0px;
padding: 0px;
clear: both;
}
#comic .navpanel .navcontrols ul li {
display: block;
float: left;
}
#comic .navpanel .navcontrols ul li a,
#comic .navpanel .navcontrols ul li span {
display: block;
padding-top: 33px;
width: 62px;
height: 0px;
overflow: hidden;
}
/* Top Nav */
#comic .navpanel .navcontrols.top li.prev {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-top-prev.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.top li.next {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-top-next.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.top li.prevoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-top-prevoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.top li.nextoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-top-nextoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
/* Bottom Nav */
#comic .navpanel .navcontrols.bottom li.prev {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-bottom-prev.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.bottom li.next {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-bottom-next.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.bottom li.prevoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-bottom-prevoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols.bottom li.nextoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-bottom-nextoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
/* Form Nav only for disable */
#comic .navpanel .navcontrols li.findprevoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-prevfindoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols li.findnextoff {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/nav2-nextfindoff.png) no-repeat;
darkmorford
Add root-directory files.
 r2 }
#comic .navpanel .navcontrols ul#searchprevnext li {
height: 33px;
}
#comic div.navpanel #title {
padding: 1ex;
}
#comic .navpanel .search-filter {
margin-bottom: 15px;
}
#comic .navpanel #q {
width: 350px;
}
#comic .navpanel #go,
#comic .navpanel #iego {
vertical-align: middle;
padding-bottom: 2px;
}
#comic .transcript {
list-style-type:none;
padding: 66px 50px;
margin: 0px;
}
#comic .transcript .panelhead {
font-size: larger;
font-weight: bold;
}
#comic .transcript dl { padding-left:50px }
#comic .transcript dt {
float: left;
padding-right: 1em;
font-weight: bold;
}
#comic .transcript dd {
margin-left: 5.5em;
padding-left: 0px;
padding-bottom: 0.5ex;
}
/* Make the archive link stand out */
#comic #archivelink { background-color:#b7bfc7 }
#comic #archivelink a { color:black }
#comic #archivelink a:hover { color:#eb5252 }
/* Boxes between the comic and the rants */
#megagear { text-align:center }
#newsbox a { color:#f6b33d }
#newsbox ul {
margin-left: 3ex;
padding-left: 0px;
}
#newsbox h3 {
text-align: center;
}
#support { font-size: 80%; }
#status dl {
margin: 1em;
}
#status dt {
float: left;
}
#status dd {
margin-left: 7em;
color: #f6b33d;
}
#status dd div#percentbox {
padding: 1px;
width: 90%;
border: 1px solid #567;
margin: 0px;
}
#newsbox div.thewrap,
#support div.thewrap {
border-bottom:none;
margin:0;
padding:0;
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/twitter-seperator.png) 6px 0 #23272B;
darkmorford
Add root-directory files.
 r2 }
/* Fix a bug caused by OpenAds injecting a <div> 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 <pre> 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 {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-mainrant-vert.png) repeat-y;
darkmorford
Add root-directory files.
 r2 width: 350px;
height: 285px;
}
#console .ri-top {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-mainrant-top.png) top no-repeat;
darkmorford
Add root-directory files.
 r2 width: 350px;
height: 245px;
}
#console .ri-bottom {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat;
darkmorford
Add root-directory files.
 r2 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;
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-oldrant-vert.png) repeat-y;
darkmorford
Add root-directory files.
 r2 width: 176px;
height: 141px;
}
#console .oldrant .ri-top {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-oldrant-top.png) top no-repeat;
darkmorford
Add root-directory files.
 r2 width: 178px;
height: 123px;
}
#console .oldrant .ri-bottom {
darkmorford
Fix CSS paths to use the new directory structure.
 r26 background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat;
darkmorford
Add root-directory files.
 r2 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 <span> like <div> */
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 {
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 }
#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 */
darkmorford
Fix CSS paths to use the new directory structure.
 r26 #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 }