Skip to content

Commit

Permalink
Updated styling of example index page
Browse files Browse the repository at this point in the history
Few visual tweaks to the overview page of the examples.
  • Loading branch information
GBKS committed Dec 4, 2013
1 parent 8fdc990 commit 9940dd5
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 33 deletions.
20 changes: 12 additions & 8 deletions css/main.css
@@ -1,7 +1,7 @@

/** General page styling **/
html {
background-color: #e9e9e9;
background-color: #e5e5e5;
font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}

Expand All @@ -12,16 +12,17 @@ html {

header h1 {
text-align: center;
font-size: 24px;
font-weight: normal;
margin: 30px 0 3px 0;
font-size: 30px;
font-weight: 200;
margin: 30px 0 10px 0;
}

header p {
text-align: center;
font-size: 13px;
color: #777;
font-size: 14px;
color: #666666;
margin: 0;
font-weight: 200;
}

/**
Expand Down Expand Up @@ -63,8 +64,11 @@ header p {
*/
#tiles li p {
color: #666;
font-size: 12px;
margin: 7px 0 0 7px;
font-size: 13px;
line-height: 20px;
text-align: center;
font-weight: 200;
margin: 7px 0 2px 7px;
}

footer {
Expand Down
75 changes: 75 additions & 0 deletions css/overview.css
@@ -0,0 +1,75 @@
#main {
overflow: hidden;
}

header p {
max-width: 600px;
margin: 0 auto;
line-height: 22px;
}

header p a,
header p a:visited {
text-decoration: none;
color: #4281f5;
}

#main li {
height: 200px;
background-color: #ffffff;
border: 1px solid #dddddd;
}

#main li a {
font-weight: 200;
text-align: left;
box-shadow: none;
color: #000000;
font-size: 12px;
line-height: 16px;
height: auto;
background-color: transparent;
border: 0px;
display: block;
width: 200px;
position: relative;
height: 100%;
display: block;
text-transform: uppercase;
}

#main li a:hover {
color: #4281f5;
}

#main li a span {
position: absolute;
bottom: 20px;
left: 15px;
right: 15px;
display: block;
color: #666666;
}

#main li a b {
font-size: 20px;
line-height: 30px;
color: #000000;
}

/**
* Grid items animation
*/
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.wookmark-placeholder {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
5 changes: 3 additions & 2 deletions example-filter/css/style.css
Expand Up @@ -45,10 +45,11 @@
}

#filters li:hover {
background: #dedede;
background: #4281f5;
color: #ffffff;
}

#filters li.active {
background: #333333;
background: #4281f5;
color: #ffffff;
}
39 changes: 16 additions & 23 deletions index.html
Expand Up @@ -15,45 +15,38 @@

<!-- Global CSS for the page and tiles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/overview.css">

</head>
<body>
<div id="container">
<header>
<h1>jQuery Wookmark Plug-in Examples</h1>
<p>Click a tile to view the example</p>
<p>Click a tile to view the example. Created by <a href="mailto:chri@sto.ph" title="Send a mail to Christoph">Christoph Ono</a> (<a href="http://twitter.com/gbks" title="Christoph on Twitter">@gbks</a>)
for <a href="http://www.wookmark.com" title="Checkout wookmark.com">wookmark.com</a>
and maintained by <a href="mailto:sebastian@helzle.net" title="Send a mail to Sebastian">Sebastian Helzle</a> (<a href="http://twitter.com/sebobo" title="Sebastian on Twitter">@sebobo</a>). Get the code on <a href="https://github.com/GBKS/Wookmark-jQuery" title="Wookmark plugin on Github">Github</a>!</p>
</header>
<div id="main" role="main">
<ul class="example-tiles">
<li><a href="example-amd/">Loading Wookmark via AMD</a></li>
<li><a href="example-api/">Displaying images from an remote API</a></li>
<li><a href="example-endless-scroll/">Endless scrolling</a></li>
<li><a href="example-filter/">Filtering tiles</a></li>
<li><a href="example-flexible/">Tiles with flexible width</a></li>
<li><a href="example-lightbox/">Showing a lightbox when clicking tiles</a></li>
<li><a href="example-load-images/">Load the plugin after all images have loaded</a></li>
<li><a href="example-placeholder/">Displaying placeholders at the bottom</a></li>
<li><a href="example-sort">Sorting tiles</a></li>
<li><a href="example-stamp">Stamping tiles to a certain position</a></li>
<li><a href="example-amd/"><span><b>AMD</b><br/>Dynamically loading Wookmark via AMD.</span></a></li>
<li><a href="example-api/"><span><b>Remote API</b><br/>Displaying images from a remote API.</span></a></li>
<li><a href="example-endless-scroll/"><span><b>Endless scroll</b><br/>Automatically load new content when scrolling down.</span></a></li>
<li><a href="example-filter/"><span><b>Filtering</b><br/>Showing and hiding tiles based on user-controlled filters.</span></a></li>
<li><a href="example-flexible/"><span><b>Flexible width</b><br/>Automatically adjusting tiles to always fill the container width.</b></span></a></li>
<li><a href="example-lightbox/"><span><b>Lightbox</b><br/>Showing a lightbox when users click tiles.</span></a></li>
<li><a href="example-load-images/"><span><b>Load it all</b><br/>Load the plugin after all images have loaded.</span></a></li>
<li><a href="example-placeholder/"><span><b>Placeholders</b><br/>Displaying placeholders at the bottom to create even-sized columns.</span></a></li>
<li><a href="example-sort"><span><b>Sorting</b><br/>Let users change the sort order of your tiles.</a></li>
<li><a href="example-stamp"><span><b>Stamping</b><br/>Stamping tiles to specific positions in the layout.</a></li>
</ul>
</div>
<footer>
Created by <a href="mailto:chri@sto.ph" title="Send a mail to Christoph">Christoph Ono</a> (<a href="http://twitter.com/gbks" title="Christoph on Twitter">@gbks</a>)
for <a href="http://www.wookmark.com" title="Checkout wookmark.com">wookmark.com</a>
and maintained by <a href="mailto:sebastian@helzle.net" title="Send a mail to Sebastian">Sebastian Helzle</a> (<a href="http://twitter.com/sebobo" title="Sebastian on Twitter">@sebobo</a>)
<br/>
<br/>
<b>
Get the code on <a href="https://github.com/GBKS/Wookmark-jQuery" title="Wookmark plugin on Github">Github</a>!
</b>
</footer>
</div>

<!-- include jQuery -->
<script src="../libs/jquery.min.js"></script>
<script src="libs/jquery.min.js"></script>

<!-- Include the plug-in -->
<script src="../jquery.wookmark.js"></script>
<script src="jquery.wookmark.js"></script>

<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
Expand Down

0 comments on commit 9940dd5

Please sign in to comment.