Skip to content
This repository has been archived by the owner on Jan 14, 2018. It is now read-only.

Commit

Permalink
Bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Andy Clarke committed Apr 27, 2012
1 parent 444f38e commit 9fdd87c
Show file tree
Hide file tree
Showing 6 changed files with 312 additions and 0 deletions.
103 changes: 103 additions & 0 deletions 320andup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -75,6 +77,107 @@ <h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h

<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>
Expand Down
94 changes: 94 additions & 0 deletions css/320andup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Binary file added img/h/apple-touch-icon-144x144-precomposed.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
108 changes: 108 additions & 0 deletions less/colour.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ==============================
Expand Down
5 changes: 5 additions & 0 deletions less/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand Down

0 comments on commit 9fdd87c

Please sign in to comment.