diff options
Diffstat (limited to 'style.scss')
| -rw-r--r-- | style.scss | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..ef9e08d --- /dev/null +++ b/style.scss @@ -0,0 +1,171 @@ +/* +Theme Name: Kil-a-Bytes +Theme URI: http://mckenzierobotics.org + +Author: Luke Shumaker +Author URI: http://lukeshu.ath.cx + +License: GNU General Public License +License URI: license.txt + +Description: HTML5 Theme for FRC team 1024, a child theme of Twenty-Eleven +Version: 0.1 + +Template: twentyeleven +*/ + +@import url('http://fonts.googleapis.com/css?family=Anton'); +@import "../twentyeleven/style.css"; +@import "twentyeleven-fix.scss"; +@import "logo-style.scss"; + + + +$yellow : #FFFF00; +$background-blue: #2210D2; +$highlight-blue : #0000FF; //<-lighter than background, darker than light +$light-blue : #1E90FF; + +@mixin gradient($color1, $color2) { + background-color: $color1; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2}); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2)); // older syntax + background-image: -webkit-linear-gradient($color1, $color2); + background-image: -moz-linear-gradient($color1, $color2); + background-image: -o-linear-gradient($color1, $color2); + background-image: linear-gradient($color1, $color2); +} + +body { + background-color: $background-blue; + #page { + //I wouldn't use px, but we get roundoff errors otherwise + $border-width: 1px; + border: { + style: solid; + width: $border-width; + color: black; + radius: 2em 2em 0 0; + } + header#branding { + border: none;/* override inherit from twentyeleven */ + hgroup { + margin: -$border-width; + margin-bottom: 0; + border: { + style: solid; + width: $border-width; + color: #000099; + radius: 2em 2em 0 0; + bottom: none + } + + overflow: hidden; + box-shadow: 0 .15em 0 #AAAAFF inset; + $bg-width: 472px; + $bg-height: 200px; + $padding-top: 25px; + height: $bg-height - $padding-top; + padding: $padding-top $bg-width 0 3em; + background: { + color: $light-blue; + image: url('img/swoosh.png'); + repeat: no-repeat; + position: right bottom; + } + a { + text-decoration: inherit; + color: inherit; + } + #team-name { + @extend .logo-nowhite; + font-size: 80px; + } + h2 { + @extend .logo-nowhite; + font-size: 40px; + } + #team-number { + @extend .logo-white; + position: absolute; + bottom: 0.2em; + right: 0.4em; + font-size: 130px; + line-height: 1em; + } + } + } + #access { + box-shadow: none; + border-top: solid 0.3em $yellow; + @include gradient($light-blue, $highlight-blue); + li:hover > a, a:focus { + @include gradient($yellow, darken($yellow, 10%)); + } + } + } +} + +@mixin small_branding { + body #page header#branding hgroup { + #team-name { + font-size: 60px; + } + h2 { + font-size: 30px; + } + } +} + +@mixin mobile_branding { + body #page header#branding { + hgroup { + height: auto; + background-image: none; + padding: 2em; + + h1, h2 { + clear:none; + } + #team-name{ + font-size: 3em; + float: left + } + h2 { + font-size: 2em; + float: left; + } + #team-number { + font-size: 5em; + float: right; + + position: relative; + right: auto; + &:before { + text-shadow: none; + transform: none; + content: "FRC"; + color: white; + font-family: serif; + font-size: 0.2em; + vertical-align: text-top; + } + } + } + } +} + +#ie7, #ie8 { + @include small_branding; +} + +#ie6 { + @include mobile_branding; +} + +@media (max-width: 1050px) { + @include small_branding; +} +@media (max-width: 800px) { + @include mobile_branding; +} |