Skip to content

Instantly share code, notes, and snippets.

@yssharma
Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yssharma/7956cdf788a73b6e8af5 to your computer and use it in GitHub Desktop.
Save yssharma/7956cdf788a73b6e8af5 to your computer and use it in GitHub Desktop.
Pinterest type tiles
<style>
/* PINTEREST TYPE TILE STYLES
-------------------------------------------------- */
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
</style>
<!--
HTML Divs for Resources section
-->
<div id="wrapper">
<div id="columns">
<div class="pin"><a href="http://www.apache.org/dyn/closer.cgi/incubator/drill/drill-1.0.0-m1-incubating/" >
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/actions/archive-extract-2.png">
<p>
Drill Alpha/Milestone 1 Source Download.
</p></a>
</div>
<div class="pin"><a href="https://docs.google.com/document/d/1QTL8warUYS2KjldQrGUse7zp8eA72VKtLOHwfXy6c7I/edit#" >
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/categories/applications-office-6.png">
<p>
Logical and Physical Plan Language Design Document (in progress).
</p></a>
</div>
<div class="pin"><a href="https://docs.google.com/document/d/1zaxkcrK9mYyfpGwX1kAV80z0PCi8abefL45zOzb97dI/edit#bookmark=id.iip15ful18mm" >
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/categories/applications-office-6.png">
<p>
Value Vector Design Document.
</p></a>
</div>
<div class="pin"><a href="http://wiki.apache.org/incubator/DrillProposal" >
<img src="https://lh4.googleusercontent.com/-nOORmfGJvXY/AAAAAAAAAAI/AAAAAAAAAGA/956Yk3OhG2Q/photo.jpg">
<p>
Apache Drill Proposal Wiki Page.
</p></a>
</div>
<div class="pin"><a href="http://www.slideshare.net/jasonfrantz/drill-architecture-20120913" >
<img src="http://media.tumblr.com/2c8be5e9b4d2451976ff2211924429d0/tumblr_inline_mwqjb0wfGQ1srg1z9.png">
<p>
Drill Architecture Slides.
</p></a>
</div>
<div class="pin"><a href="http://drill-user.org/">
<img src="http://icons.iconarchive.com/icons/double-j-design/origami/128/discussion-icon.png">
<p>
Drill Users Discussion Blog.
</p></a>
</div>
<div class="pin"><a href="http://research.google.com/pubs/pub36632.html">
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/mimetypes/text-x-changelog.png">
<p>
Google's Dremel Whitepaper.
</p></a>
</div>
<div class="pin"><a href="http://db.csail.mit.edu/projects/cstore/">
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/mimetypes/text-x-changelog.png">
<p>
MIT's C-Store reference link.
</p></a>
</div>
<div class="pin"><a href="https://developers.google.com/bigquery/docs/query-reference">
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/mimetypes/text-x-changelog.png">
<p>
Google's BigQuery reference link.
</p></a>
</div>
<div class="pin"><a href="https://developers.google.com/protocol-buffers/docs/proto">
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/mimetypes/text-x-changelog.png">
<p>
Google's Protobuf reference link.
</p></a>
</div>
<div class="pin"><a href="http://apache.org/licenses/LICENSE-2.0.html">
<img src="https://lh4.googleusercontent.com/-nOORmfGJvXY/AAAAAAAAAAI/AAAAAAAAAGA/956Yk3OhG2Q/photo.jpg">
<p>
Apache Drill License.
</p></a>
</div>
</div>
</div>
<!--
HTML Divs for Get Involved Section
-->
<div id="wrapper">
<div id="columns">
<div class="pin"><a href="https://plus.google.com/hangouts/_/event/ci4rdiju8bv04a64efj5fedd0lc" >
<img src="http://www.droid-life.com/wp-content/uploads/2013/05/Hangouts-Logo.png">
<p>
Weekly Google Hangout - First Tuesday of each month (Next hangout: July 1st) 10:00am PDT.
</p></a>
</div>
<div class="pin"><a href="https://builds.apache.org/job/drill-scm/lastSuccessfulBuild/artifact/distribution/target/apache-drill-1.0.0-m2-incubating-SNAPSHOT-binary-release.tar.gz" >
<img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/128x128/actions/archive-extract-2.png">
<p>
Drill Nightly Build (unstable).
</p></a>
</div>
<div class="pin"><a href="https://twitter.com/ApacheDrill" >
<img src="https://g.twimg.com/Twitter_logo_blue.png">
<p>
Twitter: @ApacheDrill.
</p></a>
</div>
<div class="pin"><a href="https://github.com/apache/incubator-drill" >
<img src="https://raw.githubusercontent.com/github/media/master/octocats/octocat_gems.png">
<p>
Source Code: Github.
</p></a>
</div>
<div class="pin"><a href="https://cwiki.apache.org/confluence/display/DRILL/Contributing" >
<img src="https://lh4.googleusercontent.com/-nOORmfGJvXY/AAAAAAAAAAI/AAAAAAAAAGA/956Yk3OhG2Q/photo.jpg">
<p>
How to contribute to Drill.
</p></a>
</div>
<div class="pin"><a href="https://issues.apache.org/jira/browse/DRILL" >
<img src="http://snaplogic-h.s3.amazonaws.com/uploads/snap/image/55/jira.jpg">
<p>
Issue Tracking: JIRA.
</p></a>
</div>
<div class="pin"><a href="https://cwiki.apache.org/confluence/display/DRILL/Apache+Drill+Wiki" >
<img src="https://lh4.googleusercontent.com/-nOORmfGJvXY/AAAAAAAAAAI/AAAAAAAAAGA/956Yk3OhG2Q/photo.jpg">
<p>
Wiki: Apache Drill Wiki.
</p></a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment