main.scss
224 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 */ | |||
| r33 | img { | |||
| border: none; | ||||
| } | ||||
| r2 | ||||
| a { | ||||
| text-decoration: none; | ||||
| r31 | color: $link-normal; | |||
| r2 | ||||
| r33 | &:visited { | |||
| color: $link-visited; | ||||
| } | ||||
| &:hover { | ||||
| color: $link-hover; | ||||
| } | ||||
| } | ||||
| r2 | ||||
| body { | ||||
| r33 | /* Make IE not hate positioned elements */ | |||
| position: relative; | ||||
| r2 | ||||
| margin: auto; | ||||
| padding: 14px; | ||||
| r31 | background-color: $background; | |||
| r2 | ||||
| font-size: 0.8em; | ||||
| r31 | font-family: $font-stack; | |||
| r2 | ||||
| r33 | div { | |||
| /* Set default widths for page boxes */ | ||||
| position: relative; | ||||
| margin: auto; | ||||
| width: 700px; | ||||
| div { | ||||
| width: auto; | ||||
| } | ||||
| } | ||||
| r2 | } | |||
| /* Make the headers look nice */ | ||||
| r33 | h1 { | |||
| margin: 0; | ||||
| } | ||||
| r2 | ||||
| h2 { | ||||
| text-align: left; | ||||
| r31 | color: $text-accent; | |||
| r2 | } | |||
| /* Create special elements and classes */ | ||||
| h2, .blackbar { | ||||
| r33 | /* Take that, old gecko! */ | |||
| height: 18px; | ||||
| r31 | margin: 0; | |||
| padding: 0 1ex; | ||||
| r2 | ||||
| overflow: hidden; | ||||
| r32 | background-color: $nl-background; | |||
| r2 | ||||
| font-size: 16px; | ||||
| r32 | font-weight: 100; | |||
| r33 | font-family: $banner-font; | |||
| r2 | letter-spacing: 0.5ex; | |||
| r33 | ||||
| span { | ||||
| display: block; | ||||
| width: 100%; | ||||
| height: 100%; | ||||
| } | ||||
| } | ||||
| .clearer { | ||||
| clear: both; | ||||
| r2 | } | |||
| r33 | br.clearer { | |||
| line-height: 0; | ||||
| r2 | } | |||
| r33 | .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; | ||||
| r33 | ||||
| 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; | ||||
| } | ||||
| } | ||||
| r2 | } | |||
| .content { | ||||
| margin-top: 1em; | ||||
| margin-bottom: 1em; | ||||
| r31 | background-color: $nl-background; | |||
| color: $text-normal; | ||||
| r33 | ||||
| div { | ||||
| /* Satisfy internal floated elements */ | ||||
| overflow: hidden; | ||||
| height: 100%; | ||||
| border: solid 5px $nl-background; | ||||
| background-color: $infobox; | ||||
| padding: 5px; | ||||
| } | ||||
| .clearer { | ||||
| border: none; | ||||
| padding: 0; | ||||
| } | ||||
| r2 | } | |||
| /* 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; | ||||
| r33 | ||||
| #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; | ||||
| } | ||||
| r29 | } | |||
| r2 | ||||
| /* Style the top banner */ | ||||
| #banner { | ||||
| r31 | background-color: $nl-background; | |||
| r2 | text-align: center; | |||
| r33 | ||||
| h2 { | ||||
| color: $text-normal; | ||||
| font-family: $banner-font; | ||||
| } | ||||
| .nl { | ||||
| padding-bottom: 5px; | ||||
| padding-top: 5px; | ||||
| } | ||||
| r2 | } | |||
| /* Style the footer */ | ||||
| #credits { | ||||
| r31 | background-color: $foreground; | |||
| color: $text-credits; | ||||
| r2 | padding-bottom: 0.5ex; | |||
| margin-top: 1em; | ||||
| r33 | ||||
| p { | ||||
| margin: 0; | ||||
| text-align: center; | ||||
| padding: 0.5ex; | ||||
| font-family: $credits-font; | ||||
| font-size: x-small; | ||||
| } | ||||
| r2 | } | |||
| r33 | /* Overload header texts */ | |||
| #banner .blackbar span { | ||||
| background: url(../parts/mt3-bar-comic.gif) no-repeat | ||||
| r2 | } | |||
| r33 | #credits h2 span { | |||
| background: url(../parts/mt-blk_bar-credits.png) no-repeat | ||||
| } | ||||
