Browse files

updated EVERYTHINGS KIDDOS!!

  • Loading branch information...
1 parent bc41574 commit 020bd0fc4e5f0d9ac91ab5dc587509fe932faae6 @brandonjp committed Mar 2, 2011
Showing with 161 additions and 61 deletions.
  1. +145 −46 css/screen.css
  2. +14 −13 index.html
  3. +2 −2 js/main.js
View
191 css/screen.css
@@ -1,34 +1,41 @@
-8F4521 {
+/* @group Colorset: Anzac */
+
+8F4521 Cumin {
background: #8F4521;
}
-DB6B32 {
+DB6B32 Flame Pea {
background: #DB6B32;
}
-8F7C21 {
+8F7C21 Hacienda {
background: #8F7C21;
}
-DBBF32 {
+DBBF32 Anzac {
background: rgba(219,191,050,0.5);
background: #DBBF32;
}
-707070 {
+707070 Dove Gray {
background: #707070;
}
-8F8F8F {
+8F8F8F Gray {
background: #8F8F8F;
}
+/* @end Colorset: Anzac */
+
+devnote {
+ display: none;
+}
html {
overflow: scroll;
}
-body {
+sbody {
background-color: #fff;
background-image: -moz-linear-gradient(top, #DBBF32, #000); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,
@@ -40,6 +47,8 @@ body {
background-image: linear-gradient(top, #DBBF32, #DBBF32);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DBBF32', EndColorStr='#DBBF32'); /* IE6–IE9 */
background-repeat: no-repeat;
+
+ color: #454545;
}
html, body, div, section, span, p,
@@ -51,9 +60,14 @@ table, tbody, thead, th, tr, td {
}
h1, h2, h3, h4, h5, h6 {
- font: medium/1.6 Neuton, sans-serif;
+ font: medium/1.6 Neuton, sans-serif;
+ display: inline-block;
margin: 0;
padding: 0;
+}
+
+a, a:focus, a:active, a:visited {
+ text-decoration: none;
color: #DB6B32;
}
div#body {
@@ -62,6 +76,83 @@ div#body {
margin: auto;
}
+div#header {
+ margin: 1em;
+ padding: 1em;
+ text-align: center;
+}
+
+ul#logo li {
+ display: inline-block;
+}
+
+ul#logo li:first-child {
+ text-align: center;
+ padding: 0.85em;
+ text-transform: uppercase;
+
+ -webkit-border-radius: 12px;
+ -khtml-border-radius: 12px;
+ -moz-border-radius: 12px;
+ -o-border-radius: 12px;
+ border-radius: 12px;
+
+ border: 3px solid #454545;
+
+ margin-right: 1em;
+
+ background: #fff;
+}
+
+ul#logo li:first-child h1 span {
+ display: block;
+ font-size: 300%;
+ line-height: 1em;
+}
+
+ul#logo li:first-child h1 sub {
+ display: block;
+ font-weight: normal;
+ font-size: 11px;
+ line-height: 1em;
+}
+
+ul#logo li:last-child {
+ text-align: center;
+ width: 70%;
+}
+
+ul#logo li:last-child h1 {
+ font-size: 1.3em;
+ font-weight: bold;
+ line-height: 1em;
+ text-shadow: 0px 1px 0px rgba(255,255,255, 0.4);
+}
+
+ul#siteInfo {
+ text-shadow: 0px 1px 0px rgba(255,255,255, 0.4);
+ margin: 1em auto;
+}
+
+ul#siteInfo h2 {
+ font-size: 1.2em;
+}
+
+ul#siteInfo h3 {
+ font-size: 0.8em;
+ width: 70%;
+}
+
+ul#siteLinks {
+ float: right;
+ line-height: 1em;
+ font-size: 0.8em;
+}
+
+ul#siteLinks li {
+ display: inline-block;
+ margin: 0 0.5em;
+
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
@@ -74,72 +165,79 @@ input[type=text] {
}
input[type=text] {
-
-div.thisIsOneEntry div {
- overflow: hidden;
- display: inline-block;
-}
width: 480px;
height: 30px;
text-align: left;
- display: block;
+ padding: 0 2%;
font-size: 1.2em;
-
- margin: 16px auto;
- padding: 16px;
-
- border: 2px solid aqua;
-
+}
+
+/* @group This Is One Entry */
div.thisIsOneEntry {
overflow: hidden;
- border-radius: 8px;
-}
-
-div.thisIsOneEntry div {
+ display: block;
+ position: relative;
+
width: 90%;
margin: 0 auto;
padding: 0.5em;
}
+
div.thisIsOneEntry div {
position: relative;
-div.thisIsOneEntry div input {
+ overflow: hidden;
+ display: inline-block;
}
+
div.thisIsOneEntry div input {
display: block;
-div.thisIsOneEntry div.modKeys ul li {
- display: inline-block;
-}
-
-div.thisIsOneEntry div.modKeys ul li img {
+ height: 30px;
+}
+
+div.thisIsOneEntry ul.modKeys li {
+ float: left;
+ display: inline-block;
+ margin-right: .35em;
}
-
- -webkit-border-radius: 10px;
+div.thisIsOneEntry ul.modKeys li img {
+ height: 60px;
background-color: #fff;
-webkit-border-radius: 10px;
- border-radius: 10px;
-}
+ -khtml-border-radius: 10px;
+ -moz-border-radius: 10px;
border-radius: 14px;
- background-color: greenyellow;
-}
+ border: 2px solid #454545;
+
}
div.thisIsOneEntry ul.modKeys li:hover img {
-}
-
+ background-color: #DBBF32;
+}
div.thisIsOneEntry ul.modKeys li.selected img {
background-color: #DB6B32;
-
+}
+
+div.thisIsOneEntry ul.modKeys li:nth-child(2) {
+ clear: both;
+}
+
div.thisIsOneEntry ul.modKeys {
-}
-
+}
+
+div.thisIsOneEntry div.extraKeys {
margin-right: .35em;
width: 120px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: right;
+}
div.thisIsOneEntry div.extraKeys input {
display: inline-block;
@@ -177,20 +275,21 @@ div.thisIsOneEntry div.appName input {
div.thisIsOneEntry div.subtitleNotes {
-}
+}
+
+div.thisIsOneEntry div.subtitleNotes input {
}
-}
-
+div.thisIsOneEntry div.appName {
clear: both;
}
-
+div.thisIsOneEntry div.appName input {
width: 180px;
}
-}
+div.thisIsOneEntry div.actionButtons {
position: absolute;
top: 0;
right: 0;
View
27 index.html
@@ -18,17 +18,20 @@
<div id="header">
<devnote>this is YOPKS div#header - it will have a logo and site description as well as control buttons to view your shortcuts list in printable view, save as PDF, etc. (maybe eventually a Mac .prefs file of your shortcuts and/or an AutoHotKey .akh script of your shortcuts for download)</devnote>
<ul id="logo">
- <li><h1>LOGO HERE</h1></li>
- <li><h1>YOUR OWN PERSONAL KEYBOARD SHORTCUTS CHEAT SHEET GENERATOR</h1></li>
+ <li><h1>
+ <span>YOPKS</span>
+ <sub>Cheat Sheet Generator</sub>
+ </h1></li>
+ <li><h1>YOUR OWN PERSONAL KEYBOARD SHORTCUTS<br>CHEAT SHEET GENERATOR</h1></li>
</ul>
<ul id="siteInfo">
- <li><h2>SHORT SITE INFO HERE</h2></li>
- <li><h3>LONGER SITE INFO HERE</h3></li>
+ <li><h2>This is a simple site to generate your own personal keyboard shortcuts cheat sheet.</h2></li>
+ <li><h3>I frequently forget some of my seldom used keyboard shortcuts, so I created this simple app to help me generate a quick reference sheet. <em>Instructions:</em> Click on the shortcut keys you want to assign, describe it, then add it to your shortcut list.</h3></li>
</ul>
<ul id="siteLinks" class="toolbar">
- <li>LOGIN/REGISTER</li>
- <li>HELP</li>
- <li>CONTACT</li>
+ <li><a href="#">LOGIN/REGISTER</a></li>
+ <li><a href="#">HELP</a></li>
+ <li><a href="#">CONTACT</a></li>
</ul>
</div><!-- /div#header -->
@@ -39,20 +42,18 @@
<div class="thisIsOneEntry">
- <div class="modKeys">
- <span>modifier keys (select the modifier icons used)</span>
- <ul>
+ <div class="shortKeys">
+ <ul class="modKeys">
<li><img src="img/key-shift.png" alt="shift" /></li>
<li><img src="img/key-ctrl.png" alt="control" /></li>
<li><img src="img/key-alt.png" alt="alt/option" /></li>
<li><img src="img/key-cmd.png" alt="command/cmd" /></li>
</ul>
- </div>
-
<div class="extraKeys">
- <span>additional keys (select any additional keys)</span>
<input type="text" value="additional keys" />
</div>
+ </div>
+
<div class="actionButtons">
<button class="addButton">
View
4 js/main.js
@@ -1,6 +1,6 @@
jQuery(document).ready(function($) {
- $('div#addNewSelector').find('div.thisIsOneEntry').not('cloned').find('div.modKeys ul li').click(function() {
+ $('div#addNewSelector').find('div.thisIsOneEntry').not('cloned').find('ul.modKeys li').click(function() {
// toggle the class & set a var for the alt value
$(this).toggleClass('selected');
@@ -29,7 +29,7 @@ jQuery(document).ready(function($) {
var modKeysText = '';
- $('div#addNewSelector').find('div.modKeys ul li.selected').each(function() {
+ $('div#addNewSelector').find('ul.modKeys li.selected').each(function() {
var thisModKeyAlt = $(this).find('img').attr('alt') + ' ';
modKeysText = modKeysText + thisModKeyAlt;
});

0 comments on commit 020bd0f

Please sign in to comment.