| <h1>Decepticon Seekers</h1> | |
| <h2>Choose Your Theme</h2> | |
| <nav> | |
| <ul> | |
| <li><a href="#" data-palette="starscream">Starscream</a></li> | |
| <li><a href="#" data-palette="thundercracker">Thundercracker</a></li> | |
| <li><a href="#" data-palette="skywarp">Skywarp</a></li> | |
| <li><a href="#" data-palette="ramjet">Ramjet</a></li> | |
| <li><a href="#" data-palette="thrust">Thrust</a></li> | |
| <li><a href="#" data-palette="dirge">Dirge</a></li> | |
| </ul> | |
| </nav> | |
| <section> | |
| <!-- SVG Logo found here: http://seeklogo.com/decepticon-g1-logo-229304.html --> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="decepticon_logo" x="0px" y="0px" viewBox="0 0 309 309" enable-background="new 0 0 309 309" xml:space="preserve"> | |
| <polygon class="bg" points="155.2,192 193.5,143.5 215,14 172,63.5 138.5,63.5 91.5,14 116.5,143.5"/> | |
| <polygon class="bg" points="0,0 43.5,59.5 96.5,77.5 103.5,112.5 51.8,100.5 51.8,105 103.5,123 108,149.5 54,135 56.5,140.5 118.5,160.5 153.5,202 188.5,160.5 252,143.5 252,138.5 201,152 203.5,125 256,109 256,104 203.5,116 211.5,80 264,62 309,3 292.5,138.5 154.5,301 15,136"/> | |
| <polygon class="eyes" points="154.5,143.5 172,99.5 138.5,99.5"/> | |
| <polygon class="bg" points="39,277 25,168 143,309"/> | |
| <polygon class="bg" points="166,309 269,278.5 284,168"/> | |
| <polygon class="eyes" points="129,243.5 138.5,211.5 86.5,188.5"/> | |
| <polygon class="eyes" points="182.5,243.5 225,188.5 172,210.5"/> | |
| </svg> | |
| <p> | |
| <strong>Seeker</strong> was a term originally coined by fans to describe the Decepticon Jets of the same mode, eventually adopted by Hasbro and various comic continuities. Only Starscream, Skywarp and Thundercracker were named during Season 1 of the animated series. Ramjet, Thrust, and Dirge (introduced in Season 2) essentially used the same mold as their Season 1 counterparts but with small modifications, and because of this, they are also known as the "Coneheads". <a href="http://en.wikipedia.org/wiki/List_of_Decepticons#Decepticon_Jets.2FSeekers">[Source]</a> | |
| </p> | |
| <blockquote cite="http://tfwiki.net/wiki/Seeker_(body-type)"> | |
| The term Seeker refers to Decepticon jet troopers who share Starscream's body-type but with different colors or minor variations in wing and head shapes. This is most clearly and commonly known from Generation 1, but any franchise with a Starscream is almost inevitably going to feature a similar "family" of redecoed jet-formers. | |
| </blockquote> | |
| <p> | |
| In the Generation One cartoon there were large numbers of generic, unnamed Seekers in addition to the named characters. They came in a wide variety of colors, from extra duplicates of Starscream or one of the other named guys, to original and distinct looks all their own. They seem to have formed the bulk of the Decepticon forces on Cybertron, as well as among Megatron's initial troops on Earth. They gradually became less common, perhaps as a result of casualties... or the cartoon's production team becoming more careful, or more-likely having more "actual" Decepticons to work with as the toy line expanded. <a href="http://transformers.wikia.com/wiki/Seeker_(group)#And_all_the_rest">[Source]</a> | |
| </p> | |
| </section> | |
| <footer> | |
| <p> | |
| Transformers is owned and copyrighted by Hasbro, Inc.<br /> | |
| Names and imagery used for fun and learning. | |
| </p> | |
| </footer> |
| $(document).ready(function(){ | |
| paletteSwap.init(); | |
| $('blockquote').on('click', function(){ | |
| window.open($(this).attr('cite')); | |
| }); | |
| }); | |
| /* | |
| ========================= | |
| paletteSwap | |
| -Handles the swapping of classes of each color palette | |
| ========================= | |
| */ | |
| var paletteSwap = { | |
| lastPalette : null, | |
| //-- initial setup: nav link JS and default style (1st option in nav) | |
| init : function(){ | |
| $('nav ul li a').on('click', paletteSwap.click); | |
| var defaultPalette = $('nav ul li a:first-of-type').attr('data-palette'); | |
| this.swap(defaultPalette); | |
| }, | |
| //-- navigation click event: fire palette swap | |
| click : function(e){ | |
| e.preventDefault(); | |
| paletteSwap.swap($(e.currentTarget).attr('data-palette')); | |
| }, | |
| //-- palette swap logic: add class to new palette class to the body and remove old palette class | |
| swap : function(palette){ | |
| $('body').removeClass(this.lastPalette); | |
| $('body').addClass(palette); | |
| $('nav ul li a').removeClass('active'); | |
| $('a[data-palette="'+palette+'"]').addClass('active'); | |
| this.lastPalette = palette; | |
| } | |
| }; |
| @import "compass/css3"; | |
| /* | |
| ========= FONTS ========= | |
| */ | |
| @import url(http://fonts.googleapis.com/css?family=Orbitron:700|Open+Sans:400italic,700italic,400,700); | |
| /* | |
| ========= LAYOUT ========= | |
| */ | |
| body { | |
| font: 16px 'Open Sans', Helvetica, sans-serif; | |
| padding: 2.5em; | |
| min-width: 300px; | |
| @include transition(all 0.3s); | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| a { | |
| text-decoration: none; | |
| display: inline-block; | |
| padding: 0; | |
| @include transition(all 0.3s); | |
| &:hover { | |
| padding: 0 1em; | |
| } | |
| } | |
| section { | |
| padding-top: 1.5em; | |
| clear: both; | |
| } | |
| h1 { | |
| font-family: "Orbitron", sans-serif; | |
| font-size: 2em; | |
| font-weight: bold; | |
| padding: 0.5em 0; | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| @include transition(all 0.3s); | |
| } | |
| h2 { | |
| font-family: "Orbitron", sans-serif; | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| padding: 0.5em 0; | |
| letter-spacing: 0.1em; | |
| @include transition(all 0.3s); | |
| } | |
| p { | |
| font-size: 0.9em; | |
| line-height: 1.5em; | |
| margin-bottom: 0.75em; | |
| text-align: justify; | |
| @include transition(all 0.3s); | |
| @media screen and (min-width: 800px) { | |
| font-size: 1em; | |
| } | |
| } | |
| blockquote { | |
| clear: both; | |
| margin: 1em 2em; | |
| padding: 2em; | |
| font-size: 1em; | |
| cursor: pointer; | |
| text-align: justify; | |
| @include transition(all 0.3s); | |
| @media screen and (min-width: 800px) { | |
| font-size: 1.25em; | |
| } | |
| } | |
| footer { | |
| margin: 4em 0; | |
| font-size: 0.75em; | |
| p { | |
| text-align: center; | |
| } | |
| } | |
| /* | |
| ========= NAVIGATION ========= | |
| */ | |
| nav { | |
| font-size: 0.8em; | |
| ul{ | |
| li { | |
| float: none; | |
| @media screen and (min-width: 800px) { | |
| float: left; | |
| } | |
| a { | |
| display: block; | |
| padding: 0.5em 2em; | |
| text-decoration: none; | |
| @include transition(all 0.3s); | |
| &:hover { | |
| padding: 0.5em 2em; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* | |
| ========= SVG LOGO STYLES ========= | |
| */ | |
| #decepticon_logo { | |
| float: left; | |
| width: 50px; | |
| height: 50px; | |
| margin-right: 10px; | |
| margin-bottom: 5px; | |
| @media screen and (min-width: 800px) { | |
| width: 100px; | |
| height: 100px; | |
| margin-right: 25px; | |
| margin-bottom: 15px; | |
| } | |
| .bg, .eyes { | |
| @include transition(all 0.3s); | |
| } | |
| } | |
| /* | |
| ========= MAP OUT THE PALETTES ========= | |
| */ | |
| $seekers:( | |
| starscream : ( | |
| bg : #e3dddf, color : #060c0c, h1 : #a32800, | |
| link : ( bg : #cfa52d, color : #a32800 ), | |
| quote : ( bg : #a32800, color : #e3dddf ), | |
| nav : ( bg : #2772cd, color : #e3dddf, bg-on : #cfa52d, color-on : #060c0c ) | |
| ), | |
| thundercracker : ( | |
| bg : #4575b7, color : #101221, h1 : #e3dddf, | |
| link : ( bg : #a9030f, color : #e3dddf ), | |
| quote : ( bg : #e3dddf, color : #4575b7 ), | |
| nav : ( bg : #a9030f, color : #e3dddf, bg-on : #ff9429, color-on : #101221 ) | |
| ), | |
| skywarp : ( | |
| bg : #222433, color : #cec5bc, h1 : #7f75aa, | |
| link : ( bg : #7f75aa, color : #f19c1d ), | |
| quote : ( bg : #7f75aa, color : #222433 ), | |
| nav : ( bg : #cec5bc, color : #222433, bg-on : #f19c1d, color-on : #222433 ) | |
| ), | |
| ramjet : ( | |
| bg : #ffeaec, color : #45393d, h1 : #45393d, | |
| link : ( bg : #f9e872, color : #dc4335 ), | |
| quote : ( bg : #45393d, color : #ffeaec ), | |
| nav : ( bg : #dc4335, color : #ffeaec, bg-on : #f9e872, color-on : #45393d ) | |
| ), | |
| thrust : ( | |
| bg : #7e2401, color : #ffe0ff, h1 : #060c0c, | |
| link : ( bg : #8e4e9c, color : #f9e872 ), | |
| quote : ( bg : #ffe0ff, color : #8e4e9c ), | |
| nav : ( bg : #ffe0ff, color : #060c0c, bg-on : #f9e872, color-on : #060c0c ) | |
| ), | |
| dirge : ( | |
| bg : #021f83, color : #f3f1f4, h1 : #f4b71e, | |
| link : ( bg : #392735, color : #f4b71e ), | |
| quote : ( bg : #392735, color : #f4b71e ), | |
| nav : ( bg : #392735, color : #f3f1f4, bg-on : #dc4335, color-on : #f3f1f4 ) | |
| ) | |
| ); | |
| /* | |
| ========= LOOP THROUGH THE PALETTES TO ADD COLORS ========= | |
| */ | |
| @each $which, $palette in $seekers { | |
| body.#{$which} { | |
| background-color: map-get($palette, bg); | |
| color: map-get($palette, color); | |
| h1 { | |
| color: map-get($palette, h1); | |
| } | |
| h2 { | |
| color: map-get($palette, color); | |
| } | |
| #decepticon_logo .bg { | |
| fill: map-get($palette, color); | |
| } | |
| #decepticon_logo .eyes { | |
| fill: map-get($palette, bg); | |
| } | |
| blockquote { | |
| @include background-image(linear-gradient( map-get(map-get($palette, quote), bg) , darken(map-get(map-get($palette, quote), bg), 10%) )); | |
| color: map-get(map-get($palette, quote), color); | |
| } | |
| nav ul li a { | |
| background-color: map-get(map-get($palette, nav), bg); | |
| color: map-get(map-get($palette, nav), color); | |
| &:hover { | |
| background-color: map-get(map-get($palette, nav), bg-on); | |
| color: map-get(map-get($palette, nav), color-on); | |
| } | |
| &.active { | |
| @include box-shadow(inset 5px 0px 0px map-get($palette, h1)); | |
| @media screen and (min-width: 800px) { | |
| @include box-shadow(inset 0px 3px 0px map-get($palette, h1)); | |
| } | |
| } | |
| } | |
| a { | |
| color: map-get(map-get($palette, link), color); | |
| &:hover { | |
| background-color: map-get(map-get($palette, link), bg); | |
| } | |
| } | |
| } | |
| } |
I used SASS maps to create different color palletes that can be swapped out with Javascript by simply switching the body class. The colors used are based off of the famous Decepticons Seekers, such as Starscream, Skywarp, and Thundercracker. Each Seeker has the same body model, but have their own individual color schemes.
A Pen by Jeremy Paris on CodePen.