Skip to content
Browse files

Bug fixes

  • Loading branch information...
1 parent 444f38e commit 9fdd87ccaccbf24772b4aaa2571e440f99dcab24 Andy Clarke committed
Showing with 312 additions and 0 deletions.
  1. +103 −0 320andup.html
  2. +94 −0 css/320andup.css
  3. BIN img/h/apple-touch-icon-144x144-precomposed.png
  4. +2 −0 index.html
  5. +108 −0 less/colour.less
  6. +5 −0 less/mixins.less
View
103 320andup.html
@@ -44,6 +44,8 @@
<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
<!-- For iPad 1-->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
+<!-- For the new iPad -->
+<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
<!-- For Nokia -->
@@ -76,6 +78,107 @@
<h1 class="h1">&#8216;320 and Up&#8217; styles</h1>
<section>
+<h1 class="h2">Colour</h1>
+
+<h2 class="h3">Base colour</h2>
+<div class="swatch swatch-base">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Alert</h2>
+<div class="swatch swatch-alert">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Error</h2>
+<div class="swatch swatch-error">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Info</h2>
+<div class="swatch swatch-info">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Success</h2>
+<div class="swatch swatch-success">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Warning</h2>
+<div class="swatch swatch-warning">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+</section>
+
+<section>
<h1 class="h2">Typography</h1>
View
94 css/320andup.css
@@ -368,6 +368,100 @@ a:active {
color: #2d353e;
text-shadow: none;
}
+.swatch {
+ margin: 0 0 1.5em 0;
+ padding: 0;
+}
+.swatch-row {
+ display: block;
+ margin: 0;
+ padding: 0;
+ width: 200px;
+}
+.swatch-row-one {
+ background-color: #000000;
+}
+.swatch-row-two {
+ background-color: #ffffff;
+}
+.swatch-row span {
+ display: block;
+ float: left;
+ width: 50px;
+ height: 50px;
+}
+.swatch-base span:nth-child(1) {
+ background-color: rgba(45, 53, 62, 0.9);
+}
+.swatch-base span:nth-child(2) {
+ background-color: rgba(45, 53, 62, 0.8);
+}
+.swatch-base span:nth-child(3) {
+ background-color: rgba(45, 53, 62, 0.7);
+}
+.swatch-base span:nth-child(4) {
+ background-color: rgba(45, 53, 62, 0.6);
+}
+.swatch-alert span:nth-child(1) {
+ background-color: rgba(252, 248, 227, 0.9);
+}
+.swatch-alert span:nth-child(2) {
+ background-color: rgba(252, 248, 227, 0.8);
+}
+.swatch-alert span:nth-child(3) {
+ background-color: rgba(252, 248, 227, 0.7);
+}
+.swatch-alert span:nth-child(4) {
+ background-color: rgba(252, 248, 227, 0.6);
+}
+.swatch-error span:nth-child(1) {
+ background-color: rgba(218, 78, 73, 0.9);
+}
+.swatch-error span:nth-child(2) {
+ background-color: rgba(218, 78, 73, 0.8);
+}
+.swatch-error span:nth-child(3) {
+ background-color: rgba(218, 78, 73, 0.7);
+}
+.swatch-error span:nth-child(4) {
+ background-color: rgba(218, 78, 73, 0.6);
+}
+.swatch-info span:nth-child(1) {
+ background-color: rgba(217, 237, 247, 0.9);
+}
+.swatch-info span:nth-child(2) {
+ background-color: rgba(217, 237, 247, 0.8);
+}
+.swatch-info span:nth-child(3) {
+ background-color: rgba(217, 237, 247, 0.7);
+}
+.swatch-info span:nth-child(4) {
+ background-color: rgba(217, 237, 247, 0.6);
+}
+.swatch-success span:nth-child(1) {
+ background-color: rgba(92, 183, 92, 0.9);
+}
+.swatch-success span:nth-child(2) {
+ background-color: rgba(92, 183, 92, 0.8);
+}
+.swatch-success span:nth-child(3) {
+ background-color: rgba(92, 183, 92, 0.7);
+}
+.swatch-success span:nth-child(4) {
+ background-color: rgba(92, 183, 92, 0.6);
+}
+.swatch-warning span:nth-child(1) {
+ background-color: rgba(250, 167, 51, 0.9);
+}
+.swatch-warning span:nth-child(2) {
+ background-color: rgba(250, 167, 51, 0.8);
+}
+.swatch-warning span:nth-child(3) {
+ background-color: rgba(250, 167, 51, 0.7);
+}
+.swatch-warning span:nth-child(4) {
+ background-color: rgba(250, 167, 51, 0.6);
+}
/* Texture =================================================== */
.alert {
margin-bottom: 1.5em;
View
BIN img/h/apple-touch-icon-144x144-precomposed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 index.html
@@ -44,6 +44,8 @@
<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
<!-- For iPad 1-->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
+<!-- For the new iPad -->
+<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
<!-- For Nokia -->
View
108 less/colour.less
@@ -43,6 +43,114 @@ background-color : lighten(@basecolor, 65%);
color : @basecolor;
text-shadow : none; }
+// swatches
+
+.swatch {
+margin : 0 0 @baselineheight 0;
+padding : 0; }
+
+.swatch-row {
+display : block;
+margin : 0;
+padding : 0;
+width : 200px; }
+
+.swatch-row-one {
+background-color : @black; }
+
+.swatch-row-two {
+background-color : @white; }
+
+.swatch-row span {
+display : block;
+float : left;
+width : 50px;
+height : 50px; }
+
+// base
+
+.swatch-base span:nth-child(1) {
+.background-alpha(@basecolor, .9); }
+
+.swatch-base span:nth-child(2) {
+.background-alpha(@basecolor, .8); }
+
+.swatch-base span:nth-child(3) {
+.background-alpha(@basecolor, .7); }
+
+.swatch-base span:nth-child(4) {
+.background-alpha(@basecolor, .6); }
+
+// alert
+
+.swatch-alert span:nth-child(1) {
+.background-alpha(@alertcolor, .9); }
+
+.swatch-alert span:nth-child(2) {
+.background-alpha(@alertcolor, .8); }
+
+.swatch-alert span:nth-child(3) {
+.background-alpha(@alertcolor, .7); }
+
+.swatch-alert span:nth-child(4) {
+.background-alpha(@alertcolor, .6); }
+
+// error
+
+.swatch-error span:nth-child(1) {
+.background-alpha(@errorcolor, .9); }
+
+.swatch-error span:nth-child(2) {
+.background-alpha(@errorcolor, .8); }
+
+.swatch-error span:nth-child(3) {
+.background-alpha(@errorcolor, .7); }
+
+.swatch-error span:nth-child(4) {
+.background-alpha(@errorcolor, .6); }
+
+// info
+
+.swatch-info span:nth-child(1) {
+.background-alpha(@infocolor, .9); }
+
+.swatch-info span:nth-child(2) {
+.background-alpha(@infocolor, .8); }
+
+.swatch-info span:nth-child(3) {
+.background-alpha(@infocolor, .7); }
+
+.swatch-info span:nth-child(4) {
+.background-alpha(@infocolor, .6); }
+
+// success
+
+.swatch-success span:nth-child(1) {
+.background-alpha(@successcolor, .9); }
+
+.swatch-success span:nth-child(2) {
+.background-alpha(@successcolor, .8); }
+
+.swatch-success span:nth-child(3) {
+.background-alpha(@successcolor, .7); }
+
+.swatch-success span:nth-child(4) {
+.background-alpha(@successcolor, .6); }
+
+// warning
+
+.swatch-warning span:nth-child(1) {
+.background-alpha(@warningcolor, .9); }
+
+.swatch-warning span:nth-child(2) {
+.background-alpha(@warningcolor, .8); }
+
+.swatch-warning span:nth-child(3) {
+.background-alpha(@warningcolor, .7); }
+
+.swatch-warning span:nth-child(4) {
+.background-alpha(@warningcolor, .6); }
+
// 4. TEXTURE ==============================
// 5. ELEMENTS ==============================
// 6. LAYOUT ==============================
View
5 less/mixins.less
@@ -165,6 +165,11 @@ transform : translate(@x, @y, @z); }
// 5. ELEMENTS ==============================
+// .background-alpha(VALUE VALUE);
+
+.background-alpha(@color: @white, @alpha: 1) {
+background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
+
// .background-size(VALUE VALUE);
.background-size(@size){

0 comments on commit 9fdd87c

Please sign in to comment.
Something went wrong with that request. Please try again.