Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added tiles

  • Loading branch information...
commit 5513e2bcade58e2f12f5f88a5d0b3ce079f59980 1 parent a4eb952
aeoth authored
View
36 index.html
@@ -76,6 +76,42 @@ <h2 class="lime">stylesheets and then some</h2>
</div>
</div>
</div>
+
+ <h4>tiles</h3>
+ <div class="tiles" style="width:800px;">
+ <div class="tilerow">
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
+ <div class="tile two-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
+ </div>
+
+ <div class="tilerow">
+ <div class="tile two-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
+ <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile two-v fifthcol limebg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile two-v fourthcol orangebg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one purplebg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ </div>
</div>
</div>
View
15 less/colours.less
@@ -11,4 +11,17 @@
.pink { color: @pink; }
.purple { color: @purple; }
.red { color: @red; }
-.teal { color: @teal; }
+.teal { color: @teal; }
+
+.whitebg { background-color: @white; }
+.blackbg { background-color: @black; }
+.bluebg { background-color: @blue; }
+.brownbg { background-color: @brown; }
+.greenbg { background-color: @green; }
+.limebg { background-color: @lime; }
+.magentabg { background-color: @magenta; }
+.orangebg { background-color: @orange; }
+.pinkbg { background-color: @pink; }
+.purplebg { background-color: @purple; }
+.redbg { background-color: @red; }
+.tealbg { background-color: @teal; }
View
28 less/metro.less
@@ -3,41 +3,19 @@
@import "variables.less";
@import "colours.less";
@import "type.less";
+@import "tiles.less";
+@import "pivot.less";
a {
color: @accent;
text-decoration: none;
}
+
a:hover {
color: @accentDark;
text-decoration: underline;
}
-
-metro-pivot .headers {
- clear: both;
- display: block;
- white-space: nowrap;
-}
-
-.metro-pivot .pivot-item h3,
-.metro-pivot .headers .header {
- #headingstyles;
- cursor: pointer;
- display: inline-block;
- font-size: @h2fontSize;
- margin-right: 24px;
- padding: 0;
- vertical-align: top;
-}
-
-
-.metro-pivot .headers { white-space: nowrap; display: block; clear: both; }
-.metro-pivot .pivot-item h3, .metro-pivot .headers .header { #headingstyles; font-size: @h2fontSize; display: inline-block; vertical-align: top; padding: 0; cursor: pointer; margin-right:24px; }
-.metro-pivot .headers .header.current { }
-.metro-pivot .items { position: relative; }
-.metro-pivot .items .pivotItem { display: block; white-space: normal; text-align: justify; width: 100%; }
-
pre {
padding: 15px;
border: 1px solid @inactive;
View
23 less/pivot.less
@@ -0,0 +1,23 @@
+metro-pivot .headers {
+ clear: both;
+ display: block;
+ white-space: nowrap;
+}
+
+.metro-pivot .pivot-item h3,
+.metro-pivot .headers .header {
+ #headingstyles;
+ cursor: pointer;
+ display: inline-block;
+ font-size: @h2fontSize;
+ margin-right: 24px;
+ padding: 0;
+ vertical-align: top;
+}
+
+
+.metro-pivot .headers { white-space: nowrap; display: block; clear: both; }
+.metro-pivot .pivot-item h3, .metro-pivot .headers .header { #headingstyles; font-size: @h2fontSize; display: inline-block; vertical-align: top; padding: 0; cursor: pointer; margin-right:24px; }
+.metro-pivot .headers .header.current { }
+.metro-pivot .items { position: relative; }
+.metro-pivot .items .pivotItem { display: block; white-space: normal; text-align: justify; width: 100%; }
View
47 less/tiles.less
@@ -0,0 +1,47 @@
+@tilebasewidth : 130;
+@tilepadding: 5;
+@tilemargin: 10;
+@tilesize: (@tilepadding*2) + @tilebasewidth + @tilemargin;
+
+.tile {
+ float: left;
+ margin-right: @tilemargin + 0px;
+ margin-bottom: @tilemargin + 0px;
+ text-align:center;
+ padding: @tilepadding + 0px;
+ opacity:0.75;
+
+ h1, h2, h3, h4, h5, h6 {
+ color: @white;
+ }
+
+ h2 { font-size: 1.75em; margin-top: 0px - @tilemargin; margin-left:0px; }
+
+ a:hover { text-decoration: none; }
+}
+
+
+.tile img { border :0;}
+.tile:hover { opacity:1;}
+.tiles { .clear;}
+.tilerow { float:left; }
+.one {
+ width: @tilebasewidth + 0px;
+ height: @tilebasewidth + 0px;
+}
+.two-h {
+ width: (@tilebasewidth + @tilemargin) *2 + 0px;
+ height: @tilebasewidth + 0px;
+}
+.two-v {
+ width: @tilebasewidth + 0px;
+ height: (@tilebasewidth + @tilemargin)*2 + 0px;
+}
+
+.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol { position: absolute;}
+.firstcol { }
+.secondcol { margin-left: @tilesize*1px; }
+.thirdcol { margin-left: @tilesize*2px; }
+.fourthcol { margin-left: @tilesize*3px; }
+.fifthcol { margin-left: @tilesize*4px; }
+
Please sign in to comment.
Something went wrong with that request. Please try again.