diff options
-rw-r--r-- | .gitignore | 12 | ||||
-rw-r--r-- | css_shadow.php | 151 | ||||
-rw-r--r-- | header.php.patch | 52 | ||||
-rw-r--r-- | img/swoosh.svg | 36 | ||||
-rw-r--r-- | logo-style.scss.php | 50 | ||||
-rw-r--r-- | style.scss | 171 | ||||
-rw-r--r-- | theme.mk | 10 | ||||
-rw-r--r-- | twentyeleven-fix.scss | 3 |
8 files changed, 484 insertions, 1 deletions
@@ -1,7 +1,17 @@ +# DO NOT EDIT, this file is automatically made by `Makefile' +# # ignore everyting * # but these: -!license.txt +!img +img/* +!img/swoosh.svg +!style.scss +!header.php.patch +!logo-style.scss.php +!css_shadow.php !twentyeleven-fix.scss +!license.txt !.gitignore +!theme.mk !Makefile diff --git a/css_shadow.php b/css_shadow.php new file mode 100644 index 0000000..bdd4adb --- /dev/null +++ b/css_shadow.php @@ -0,0 +1,151 @@ +<?php +class css_shadow { + /** Create a point */ + public static function xy($x, $y) { + return array('x'=>$x, 'y'=>$y); + } + + /** Draw a "line" of shadows between two points */ + public static function draw_line($p1, $p2, $steps, $color) { + $x1 = $p1['x']; + $y1 = $p1['y']; + $x2 = $p2['x']; + $y2 = $p2['y']; + + $xstep = ($x2-$x1)/($steps-1); + $ystep = ($y2-$y1)/($steps-1); + + $x = $x1; + $y = $y1; + $str = ''; + for ($i=0; $i<$steps; $i++) { + $str.= sprintf ("\t%fem %fem %s,\n", $x, $y, $color); + $x+=$xstep; + $y+=$ystep; + } + return $str; + } + + /** Connect the dots */ + public static function draw_multiline($points, $steps, $color) { + $str = ''; + foreach ($points as $point) { + if (isset($prev_point)) { + $str.= self::draw_line($prev_point, $point, $steps, $color); + } + $prev_point = $point; + } + return $str; + } + + public static function points_border($args) { + $left = $right = $top = $bottom = $xoffset = $yoffset = 0; + if (isset($args['width'])) { + $left = $right = $top = $bottom = $args['width']; + } + if (isset($args['x'])) { + $left = $right = $args['x']; + } + if (isset($args['y'])) { + $top = $bottom = $args['y']; + } + if (isset($args['left'])) { + $left = $args['left']; + } + if (isset($args['right'])) { + $right = $args['right']; + } + if (isset($args['top'])) { + $top = $args['top']; + } + if (isset($args['bottom'])) { + $bottom = $args['bottom']; + } + if (isset($args['xoffset'])) { + $xoffset = $args['xoffset']; + } + if (isset($args['yoffset'])) { + $yoffset = $args['yoffset']; + } + $p = array('tl'=>self::xy($xoffset-$left , $yoffset-$top ), + 'tr'=>self::xy($xoffset+$right, $yoffset-$top ), + 'bl'=>self::xy($xoffset-$left , $yoffset+$bottom), + 'br'=>self::xy($xoffset+$right, $yoffset+$bottom)); + return $p; + } + public static function points_border_drop($args) { + $xoffset = $yoffset = $xdrop = $ydrop = 0; + if (isset($args['xoffset'])) { + $xoffset = $args['xoffset']; + } + if (isset($args['yoffset'])) { + $yoffset = $args['yoffset']; + } + if (isset($args['drop'])) { + $xdrop = $ydrop = $args['drop']; + } + if (isset($args['xdrop'])) { + $xdrop = $args['xdrop']; + } + if (isset($args['ydrop'])) { + $ydrop = $args['ydrop']; + } + + $base = self::points_border($args); + if ($xdrop==$ydrop && $xdrop==0) { return $base; } + $args['xoffset'] = $xoffset+$xdrop; + $args['yoffset'] = $yoffset+$ydrop; + $drop = self::points_border($args); + + $right = ($xdrop > 0); + $bottom = ($ydrop > 0); + + /* 0|1 + * -+- + * 2|3 + */ + $q = 0; + if ($right) $q+=1; + if ($bottom) $q+=2; + + switch ($q) { + case 0: // top-left (or bottom-right) + // clockwise, start in top-left + $ret = array($drop['tl'], + $drop['tr'], + $base['tr'], + $base['br'], + $base['bl'], + $drop['bl'], + $drop['tl']); + return $ret; + case 1: // top-right (or bottom-left) + // clockwise, start in top-right + $ret = array($drop['tr'], + $drop['br'], + $base['br'], + $base['bl'], + $base['tl'], + $drop['tl'], + $drop['tr']); + return $ret; + case 2: /* TODO */ break; + case 3: // top-left (or bottom-right) + // clockwise, start in top-left + $ret = array($base['tl'], + $base['tr'], + $drop['tr'], + $drop['br'], + $drop['bl'], + $base['bl'], + $base['tl']); + return $ret; + } + } + public static function draw_border($args) { + $steps = 0; $color = '#000000'; + if (isset($args['steps'])) { $steps = $args['steps']; } + if (isset($args['color'])) { $color = $args['color']; } + return self::draw_multiline(self::points_border_drop($args), $steps, $color); + } +} diff --git a/header.php.patch b/header.php.patch new file mode 100644 index 0000000..fbb1e7a --- /dev/null +++ b/header.php.patch @@ -0,0 +1,52 @@ +--- ../twentyeleven/header.php 2011-06-23 16:03:46.000000000 -0700 ++++ header.php 2011-08-18 21:17:57.000000000 -0700 +@@ -71,43 +71,15 @@ + <div id="page" class="hfeed"> + <header id="branding" role="banner"> + <hgroup> +- <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> +- <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> ++ <?php $url = esc_url(home_url('/')); ?> ++ <h1 id="team-number"><a href="<?php echo $url;?>">1024</a></h1> ++ <h1 id="team-name"><a href="<?php echo $url;?>" rel="home">Kil-A-Bytes</a></h1> ++ <h2><a href="<?php echo $url;?>">M<span class="lower">c</span>Kenzie Center for Innovation and Technology</a></h2> + </hgroup> + +- <?php +- // Check to see if the header image has been removed +- $header_image = get_header_image(); +- if ( ! empty( $header_image ) ) : +- ?> +- <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> +- <?php +- // The header image +- // Check if this is a post or page, if it has a thumbnail, and if it's a big one +- if ( is_singular() && +- has_post_thumbnail( $post->ID ) && +- ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) && +- $image[1] >= HEADER_IMAGE_WIDTH ) : +- // Houston, we have a new header image! +- echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); +- else : ?> +- <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> +- <?php endif; // end check for featured image or standard header ?> +- </a> +- <?php endif; // end check for removed header image ?> +- +- <?php +- // Has the text been hidden? +- if ( 'blank' == get_header_textcolor() ) : +- ?> +- <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>"> +- <?php get_search_form(); ?> +- </div> +- <?php +- else : +- ?> ++ <div class="only-search with-image"> + <?php get_search_form(); ?> +- <?php endif; ?> ++ </div> + + <nav id="access" role="navigation"> + <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3> diff --git a/img/swoosh.svg b/img/swoosh.svg new file mode 100644 index 0000000..673d82d --- /dev/null +++ b/img/swoosh.svg @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns="http://www.w3.org/2000/svg" + width="472.22217" + height="200" + id="svg3317" + version="1.1"> + <g + id="layer1" + transform="translate(8.7936,98.031149)"> + <g + id="g2987" + transform="matrix(1.7188591,0,0,1.7188591,6.3213594,-73.301236)"> + <path + d="M 37.90015,-14.3874 4.4389,69.05135 l -13.2325,32.9175 274.73,0 0,-116.35625 -228.03625,0 z" + style="fill:#2210d2;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path2558" /> + <path + d="m 45.0439,68.6826 c 0,-33.42625 52.35375,-61.11375 120.685,-65.99875 2.66375,-0.18875 8.05,-0.10375 8.05,-0.8025 0,-1.7475 -8.5525,-1.49375 -12.89375,-1.49375 -81.06,0 -146.7525,36.7675 -146.7525,80.23625 0,7.3975 1.90625,14.5575 5.46375,21.345 l 44.36875,0 C 51.93015,92.1701 45.0439,80.80385 45.0439,68.6826" + style="fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path2564" /> + <path + d="m 187.33765,7.1126 c -72.5425,0 -131.35,27.59125 -131.35,61.62875 0,12.23625 7.60125,23.64 20.70625,33.2275 l 189.2425,0 0,-82.60875 C 244.02015,11.6676 216.81265,7.1126 187.33765,7.1126" + style="fill:#1e90ff;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path2566" /> + <path + d="m 206.1264,1.6901 c -0.0237,0.885 -15.815,1.165 -20.545,1.0325 -4.73125,-0.13125 -8.54625,-0.955 -8.52125,-1.84 0.025,-0.885 3.88,-1.49625 8.61,-1.365 4.73,0.13125 20.4825,1.2875 20.45625,2.1725" + style="fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path2580" /> + <path + d="m 221.5464,3.79385 c -0.0613,0.45375 -7.78,-0.22 -10.07875,-0.53125 -2.30125,-0.3125 -4.115,-0.93375 -4.05375,-1.38875 0.0613,-0.45375 1.975,-0.56875 4.27625,-0.25625 2.3,0.3125 9.9175,1.7225 9.85625,2.17625" + style="fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path2582" /> + </g> + </g> +</svg> diff --git a/logo-style.scss.php b/logo-style.scss.php new file mode 100644 index 0000000..041a6ca --- /dev/null +++ b/logo-style.scss.php @@ -0,0 +1,50 @@ +<?php +require_once('css_shadow.php'); + +$blue = css_shadow::draw_border(array('width'=>.02, + 'xdrop'=>.03, + 'ydrop'=>.02, + 'steps'=>10, + 'color'=>'#0000FF')); + +$white = css_shadow::draw_border(array('left' =>.04, 'top' =>.04, + 'right'=>.03, 'bottom'=>.03, + 'xdrop'=>.05, + 'ydrop'=>.04, + 'steps'=>10, + 'color'=>'#FFFFFF')); +?> + +@mixin transform($arg) { + transform: $arg; + -webkit-transform: $arg; + -khtml-transform: $arg; + -moz-transform: $arg; + -ms-transform: $arg; + -o-transform: $arg; +} + +// We define these as classes, not mixins because @extend'ing them will result in +// smaller CSS than @include'ing them. + +.logo { + font-family: Anton, sans-serif; + font-style: oblique; + font-variant: small-caps; + font-weight: normal; + color: #FFFF00; + @include transform(skewX(-20deg)); + .lower { + text-transform: none; + } + text-transform: uppercase; + line-height: 1em; +} +.logo-white { + @extend .logo; + text-shadow: <?php echo "\n$blue$white"; ?> 0 0 #000000; +} +.logo-nowhite { + @extend .logo; + text-shadow: <?php echo "\n$blue"; ?> 0 0 #000000; +} 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; +} diff --git a/theme.mk b/theme.mk new file mode 100644 index 0000000..dfc72e8 --- /dev/null +++ b/theme.mk @@ -0,0 +1,10 @@ +srcfiles = \ + img/swoosh.svg \ + style.scss \ + header.php.patch \ + logo-style.scss.php \ + css_shadow.php + +targets = header.php style.css img/swoosh.png + +style.css: logo-style.scss twentyeleven-fix.scss diff --git a/twentyeleven-fix.scss b/twentyeleven-fix.scss index bbfa208..0e3f705 100644 --- a/twentyeleven-fix.scss +++ b/twentyeleven-fix.scss @@ -68,4 +68,7 @@ body { body #page header#branding #searchform { @include searchform_wide(1px); } + * { + text-shadow: none !important; + } } |