main.scss
186 lines
| 2.9 KiB
| text/x-scss
|
ScssLexer
/ styles / main.scss
| r31 | @charset "utf-8"; | |||
| r32 | @import "fonts"; | |||
| r31 | @import "palette"; | |||
| r2 | /* Set basic element styles */ | |||
| r31 | img { border: none; } | |||
| r2 | ||||
| a { | ||||
| text-decoration: none; | ||||
| r31 | color: $link-normal; | |||
| r2 | } | |||
| r31 | a:visited { color: $link-visited; } | |||
| a:hover { color: $link-hover; } | ||||
| r2 | ||||
| body { | ||||
| position: relative; /* Make IE not hate positioned elements */ | ||||
| margin: auto; | ||||
| padding: 14px; | ||||
| r31 | background-color: $background; | |||
| r2 | ||||
| font-size: 0.8em; | ||||
| r31 | font-family: $font-stack; | |||
| r2 | } | |||
| /* Set default widths for page boxes */ | ||||
| body div { | ||||
| position: relative; | ||||
| margin: auto; | ||||
| width: 700px; | ||||
| } | ||||
| r31 | body div div { width: auto; } | |||
| r2 | ||||
| /* Make the headers look nice */ | ||||
| r31 | h1 { margin: 0; } | |||
| r2 | ||||
| h2 { | ||||
| text-align: left; | ||||
| r31 | color: $text-accent; | |||
| r2 | } | |||
| /* Create special elements and classes */ | ||||
| h2, .blackbar { | ||||
| height: 18px; /* Take that, old gecko! */ | ||||
| r31 | margin: 0; | |||
| padding: 0 1ex; | ||||
| r2 | ||||
| overflow: hidden; | ||||
| r32 | background-color: $nl-background; | |||
| r2 | ||||
| font-size: 16px; | ||||
| r32 | font-weight: 100; | |||
| r2 | font-family: monospace; | |||
| letter-spacing: 0.5ex; | ||||
| } | ||||
| h2 span, .blackbar span { | ||||
| display: block; | ||||
| width: 100%; | ||||
| height: 100%; | ||||
| } | ||||
| r31 | .clearer { clear: both; } | |||
| br.clearer { line-height: 0; } | ||||
| .leftcol { float: left } | ||||
| .rightcol { float: right } | ||||
| r2 | ||||
| .nl { | ||||
| r31 | margin: 0; | |||
| padding: 0; | ||||
| r2 | ||||
| r31 | background-color: $nl-background; | |||
| r2 | text-align: center; | |||
| list-style-type: none; | ||||
| } | ||||
| .nl li { | ||||
| display: inline; | ||||
| margin: 0px; | ||||
| padding: 0em 0.5ex; | ||||
| r31 | color: $text-normal; | |||
| r2 | } | |||
| r31 | .nl a { color: $text-normal; text-decoration: none; } | |||
| .nl a:link, .nl a:visited { color: $text-normal; } | ||||
| .nl a:hover { color: $link-hover; } | ||||
| r2 | ||||
| .content { | ||||
| margin-top: 1em; | ||||
| margin-bottom: 1em; | ||||
| r31 | background-color: $nl-background; | |||
| color: $text-normal; | ||||
| r2 | } | |||
| .content div { | ||||
| /* Satisfy internal floated elements */ | ||||
| overflow: hidden; | ||||
| height: 100%; | ||||
| r31 | border: solid 5px $nl-background; | |||
| background-color: $infobox; | ||||
| r2 | padding: 5px; | |||
| } | ||||
| .content .clearer { | ||||
| border: none; | ||||
| padding: 0px; | ||||
| } | ||||
| /* Correct a word wrapping bug in the ad bar */ | ||||
| #adbar { | ||||
| position: relative; | ||||
| height: 90px; | ||||
| r29 | text-align: center; | |||
| r2 | font-size: 1px; | |||
| letter-spacing: 500px; | ||||
| r29 | } | |||
| r2 | ||||
| #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; | ||||
| r29 | margin-left: -246px; | |||
| r2 | ||||
| r31 | background-image: url(../parts/banner_bg.gif); | |||
| r2 | padding: 14px 12px; | |||
| r29 | } | |||
| r2 | ||||
| /* Style the top banner */ | ||||
| #banner { | ||||
| r31 | background-color: $nl-background; | |||
| r2 | text-align: center; | |||
| } | ||||
| #banner h2 { | ||||
| r31 | color: $text-normal; | |||
| font-family: $banner-font; | ||||
| r2 | } | |||
| #banner .nl { | ||||
| padding-bottom: 5px; | ||||
| padding-top: 5px; | ||||
| } | ||||
| /* Style the footer */ | ||||
| #credits { | ||||
| r31 | background-color: $foreground; | |||
| color: $text-credits; | ||||
| r2 | padding-bottom: 0.5ex; | |||
| margin-top: 1em; | ||||
| } | ||||
| #credits p { | ||||
| margin: 0px; | ||||
| text-align: center; | ||||
| padding: 0.5ex; | ||||
| r31 | font-family: $credits-font; | |||
| r2 | font-size: x-small; | |||
| } | ||||
| /* Overload header texts */ | ||||
| r26 | #banner .blackbar span { background: url(../parts/mt3-bar-comic.gif) no-repeat } | |||
| r31 | #credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat } | |||
