Skip to content

Instantly share code, notes, and snippets.

@clanceyp

clanceyp/dabblet.css

Last active August 29, 2015 14:19
Show Gist options
  • Save clanceyp/8e0848dbc264dec83db9 to your computer and use it in GitHub Desktop.
Save clanceyp/8e0848dbc264dec83db9 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
@import url(http://fonts.googleapis.com/css?family=Lato:100);
a { color : black; text-decoration: none}
.hero-panel { background-color: #171717;padding: 0 40px;font-family: "Lato", "Gill Sans", Georgia, Times, serif; }
.hero-panel>.component-content {margin: 0 auto; max-width: 1200px;}
.hero-panel .component-header { border-top: 0 none; font-size: 8.5rem;font-weight:100; line-height: 8rem; margin: 0; padding: 0.5rem 2rem;}
.hero-panel .component-heading { color: #00717b; text-align:center; margin:20px 0; letter-spacing:14px}
@media only screen and (min-width : 860px) {
.hero-panel .list-of-entities__item-image-container { position: relative;}
.hero-panel .list-of-entities__item-image-container img { max-width: 300px;}
.hero-panel.hero-panel-ver_1 .list-of-entities__item-image-container img { max-width: 450px;}
.hero-panel .list-of-entities > .component-content { display: table; width: 100%;}
.hero-panel .list-of-entities__container { display: table-row;}
.hero-panel .list-of-entities__item { display: table-cell; text-align: center; vertical-align: middle; width: 33%; padding: 0 20px}
.hero-panel .list-of-entities__item-link { min-height: 500px; position: relative;}
.hero-panel .list-of-entities__item-body {
overflow: hidden;
position: absolute;
border: 1px solid black;
background-color: #cecece;
padding: 4px 10px;
text-align: left;
max-width: 150px;
z-index: 1;
}
.hero-panel .list-of-entities__item:nth-child(1) {
text-align: right;
}
.hero-panel .list-of-entities__item:nth-child(1) .list-of-entities__item-link {
margin-top: 60px;
}
.hero-panel .list-of-entities__item:nth-child(3) {
text-align: left;
}
.hero-panel .list-of-entities__item:nth-child(1) .list-of-entities__item-body {
bottom: 100px;
left: 0;
}
.hero-panel.hero-panel-ver_1 .list-of-entities__item:nth-child(1) .list-of-entities__item-body {
bottom: 160px;
}
.hero-panel .list-of-entities__item:nth-child(2) .list-of-entities__item-body {
bottom: 40px;
max-width: 240px;
right: -80px;
}
.hero-panel .list-of-entities__item:nth-child(2) .list-of-entities__item-link {
margin-top: -100px;
}
.hero-panel.hero-panel-ver_1 .list-of-entities__item:nth-child(2) .list-of-entities__item-link {
margin-top: 0;
}
.hero-panel .list-of-entities__item:nth-child(2) .list-of-entities__item-image-container {
display: block;
position: absolute;
left: 50%;
}
.hero-panel .list-of-entities__item:nth-child(2) .list-of-entities__item-image {
display: block;
position: relative;
left: -50%;
border: 1px solid white;
}
.hero-panel.hero-panel-ver_1 .list-of-entities__item:nth-child(2) .list-of-entities__item-image {
top: 70px;
}
.hero-panel .list-of-entities__item:nth-child(3) .list-of-entities__item-body {
bottom: 150px;
right: 0;
}
}
@media only screen and (max-width : 860px) {
.hero-panel .component-header { font-size: 5rem; line-height: 5rem; }
.hero-panel .list-of-entities__item { background-color: silver; border-bottom : 1px solid grey; position:relative;}
.hero-panel .list-of-entities__item-body {
background-color: silver;
padding: 15px;
position: absolute;
right: 0;
width: 50%;
top: 0;
}
.hero-panel .list-of-entities__item-image-container {
display:block;
width: 194px;
text-align: right;
}
.hero-panel .list-of-entities__item-image {
max-width: 194px;
max-height: 194px;
display: inline;
}
}
@media only screen and (max-width : 600px) {
.hero-panel .component-heading {text-align:left}
.hero-panel .component-header { font-size: 2rem; line-height: 2rem; margin:0 }
.hero-panel .list-of-entities__item-image-container {
float:left;
text-align: center;
}
.hero-panel .list-of-entities__item {
display:block;
}
.hero-panel .list-of-entities__item-body {
/* background-color: green; */
padding: 15px;
position: static;
width: auto;
}
.hero-panel .list-of-entities__item-image-container {
width: auto;
min-width: 100px;
padding-right:10px;
}
.hero-panel .list-of-entities__item-image { max-width: 100px; max-height: 100px; display: inline; }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> --><div class="hero-panel component " id="boom">
<div class="component-content"> <div class="curatedList section">
<div class="list-of-entities component " data-total-items-visible="3">
<div class="component-header">
<h2 class="component-heading"> Fashion </h2>
</div>
<div class="js-list-of-entities component-content" data-options="{ '': '' }" data-tmg-dtm-nav-area="list">
<ol class="js-list-of-entities__container list-of-entities__container">
<li class="list-of-entities__item" data-option-has-image="1">
<div class="list-of-entities__item-link">
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a>
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/200x360/a1a1a1/fff.png&amp;text=portrate" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a>
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x480/123456/fff.png&amp;text=portrate" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a>
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/240x240/a1a1a1/fff.png&amp;text=square" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true">
</a>
<div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li></ol></div></div></div> </div></div>
<hr />
<div class="hero-panel component ">
<div class="component-content"> <div class="curatedList section"> <div class="list-of-entities component " data-total-items-visible="3"> <div class="component-header"> <h2 class="component-heading"> Fashion </h2> </div> <div class="js-list-of-entities component-content" data-options="{ '': '' }" data-tmg-dtm-nav-area="list"> <ol class="js-list-of-entities__container list-of-entities__container"> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link">
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a>
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/280x280/a1a1a1/fff.png&amp;text=square" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a>
<div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li>
<li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x480/123456/fff.png&amp;text=portrate" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a>
<div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link">
<a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/220x300/a1a1a1/fff.png&amp;text=portrate" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li></ol></div></div></div> </div></div>
<hr />
<hr />
<div class="hero-panel component hero-panel-ver_1"> <div class="component-content"> <div class="curatedList section"> <div class="list-of-entities component " data-total-items-visible="3"> <div class="component-header"> <h2 class="component-heading"> Theatre </h2> </div> <div class="js-list-of-entities component-content" data-options="{ '': '' }" data-tmg-dtm-nav-area="list"> <ol class="js-list-of-entities__container list-of-entities__container"> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x200/a1a1a1/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/480x300/123456/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x200/a1a1a1/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li></ol></div></div></div> </div></div>
<hr />
<div class="hero-panel component hero-panel-ver_1"> <div class="component-content"> <div class="curatedList section"> <div class="list-of-entities component " data-total-items-visible="3"> <div class="component-header"> <h2 class="component-heading"> Theatre </h2> </div> <div class="js-list-of-entities component-content" data-options="{ '': '' }" data-tmg-dtm-nav-area="list"> <ol class="js-list-of-entities__container list-of-entities__container"> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x200/a1a1a1/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/400x400/123456/fff.png&amp;text=square" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x200/a1a1a1/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li></ol></div></div></div> </div></div>
<hr />
<div class="hero-panel component hero-panel-ver_1"> <div class="component-content"> <div class="curatedList section"> <div class="list-of-entities component " data-total-items-visible="3"> <div class="component-header"> <h2 class="component-heading"> Theatre </h2> </div> <div class="js-list-of-entities component-content" data-options="{ '': '' }" data-tmg-dtm-nav-area="list"> <ol class="js-list-of-entities__container list-of-entities__container"> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/240x240/a1a1a1/fff.png&amp;text=square" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li> <li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/480x300/123456/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li><li class="list-of-entities__item" data-option-has-image="1"> <div class="list-of-entities__item-link"> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image"> </a> <a href="http://google.com" class="list-of-entities__item-image-container" data-tmg-dtm-nav="image" data-frz-parent="" >
<img data-frz-persist="true" data-mfp-src=".royalSlider" src="http://dummyimage.com/300x200/a1a1a1/fff.png&amp;text=landscape" data-rstmb="" data-frz-src-array="" class="list-of-entities__item-image" data-lazy-loaded="true"> </a> <div class="list-of-entities__item-body"> <span class="m_meta-property"> <span class="m_meta-property__date">17 Apr 2015</span> <q class="m_meta-property__quote">quote</q> </span> <h3 class="list-of-entities__item-body-headline"> <a href="http://google.com" data-tmg-dtm-nav="body-headline">Edith Bowman and James King sit in with guest Alan Rickman. Plus film reviews</a> </h3> </div> </div> </li></ol></div></div></div> </div></div>
Raw
dabblet.js
// alert( typeof $ )
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment