Skip to content

Instantly share code, notes, and snippets.

@FingerFeat

FingerFeat/dabblet.css

Created April 23, 2012 12:49
Show Gist options
  • Save FingerFeat/2470722 to your computer and use it in GitHub Desktop.
Save FingerFeat/2470722 to your computer and use it in GitHub Desktop.
Download ZIP
Random Curiosity
Raw
dabblet.css
/* Random Curiosity
========================================================================
≈ { Random Curiosity } ≈
========================================================================
==================================================================
Flipped Table of Contents (╯°□°）╯◠ ┻━┻)
==================================================================
1.0 - Project Details
2.0 - Imports
↳ 2.1 - Le' Gallagher's Normalize.css
↳ 2.2 - My Homebrewed Helpers
3.0 - Superhuman Rules
4.0 - Color Swatch
5.0 - The Fun Starts Here
↳ 5.1 - Base
↳ 5.1.1 - Images
↳ 5.2 - Typography
↳ 5.2.1 - Headlines
↳ 5.2.2 - Paragraphs & Body Copy
↳ 5.2.3 - Links & Navigations
↳ 5.2.4 - Various Elements
↳ 5.3 - Layout
↳ 5.3.1 - Columns
↳ 5.4 - Modules
↳ 5.5 - States
↳ 5.6 - Themes
*//*
==================================================================
1.0 - Project Details （╯°□°）╯◠ 69
==================================================================
*//*
Author: Anders Schmidt Hansen
Author URL: http://andersschmidt.com
Date: 05-04-2012
Project URL: http://randomc.net
Comments: This is the master file as the site
structure is not that complex. All needed
styles are to be found within here.
*//*
==================================================================
2.0 - Imports （ ._.） 69
==================================================================
*/
/* 2.1 - Le' Gallagher's Normalize.css */
@import "http://fingerfeathq.appspot.com/css/normalize.css";
/* 2.2 - Custom font imports */
@import url(http://fonts.googleapis.com/css?family=PT+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/*
==================================================================
3.0 - Superhuman Rules （╯°益°）╯◠ 69
==================================================================
*/
*, *:after, *:before, ul, li {
box-sizing: border-box;
background-repeat: no-repeat;
margin: 0;
padding: 0;
position: relative;
list-style: none;
transition: /.28s ease-in-out;
transition-property: opacity, background, color, border;
vertical-align: baseline;
z-index: 1;
}
[r-src] {
background: url(http://randomc.net/image/Fate%20Zero/Fate%20Zero%20-%2016%20-%20Large%2026.jpg) center center;
height: 0;
width: 100%;
padding-bottom: 100%;
}
img { max-width: 100%; width: 100%; z-index: -1; }
.group:before,.group:after{content:"";display:table}.group:after{clear:both}.group{zoom:1}
.has-grouped-children > *:before,.has-grouped-children > *:after{content:"";display:table}.has-grouped-children >*:after{clear:both}.has-grouped-children > *{zoom:1}
/*
==================================================================
4.0 - Color Swatch ヽ(ｏ`皿′ｏ)ﾉ 69
==================================================================
*//*
Palette: "I demand a pancake"
Palette URL: http://www.colourlovers.com/palette/443995/i_demand_a_pancake
Headers: #45ADA8 (Teal)
Body Text: #594F4F (Burl / Dark)
Undefined: #547980 (Denim / Dark Blue)
Hover, Visited: #9DE0AD (Light Green)
Links: #E5FCC2 (Very light green)
a (standard): #FD8D32 (light orange)
a (visited): #D7621A (matte orange)
a (active): #D7621A (matte orange)
a (hover): #D7621A (matte orange)
*//*
==================================================================
5.0 - The Fun Starts Here щ(ﾟДﾟщ) 69
==================================================================
*/
/* 5.1 - Base */
html {
background: url(http://subtlepatterns.com/patterns/gplaypattern.png);
font-size: 62.5%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling : touch;
-webkit-text-size-adjust : 100%;
-ms-text-size-adjust : 100%;
}
body {
background: white;
box-shadow: 0 0 7px 0 rgba(0,0,0,.18);
margin: 0 auto;
width: 100%;
max-width: 90rem;
}
button,input,
select,textarea {
font-family: sans-serif;
}
/* 5.1.1 - Images */
[r-src] { /* To use with "Responsio" script */
background-size: cover;
height: 0;
width: 100%;
padding-bottom: 100%;
}​
/* 5.2 - Typography */
/* 5.2.1 - Headlines -------------- */
h1, .h-headline { font-size: 3.4rem; }
h2, .h-subhead { font-size: 3.0rem; }
h3, .h-byline { font-size: 2.618rem; }
h4, .h-standfirst { font-size: 2.492rem; }
h5, .h-related { font-size: 1.618rem; }
h6, .h-promo { font-size: 1.416rem; }
small, .smallest { font-size: 1rem; }
[class*="h-"]:nth-of-type(1n+2) { margin-top: 4.236rem; }
h1, h2, h3, h4, h5, h6, [class*=h-], [data-subheadline]:before {
color: #7A6A53;
font-family: 'PT Sans';
-webkit-font-smoothing: antialiased;
margin-bottom: 1rem;
text-rendering: optimizeLegibility;
text-transform: uppercase;
}
/* 5.2.2 - Paragraphs & Body Copy -------------- */
p, .copy {
font: normal 1.536rem/1.7 'Open Sans', serif;
}
.single-entry p:nth-child(1n+2) { margin-top: 2.618rem; }
p:last-of-type, .copy:last-of-type { margin-bottom: 1.618rem; }
/* 5.2.3 - Links & Navigations -------------- */
a:visited, a:active { color: #333; }
a:focus, a:hover, a:visited, a:active { outline: 0; }
a[href] {
color: #99B2B7;
border-bottom: 1px solid;
text-decoration: none;
} a[href]:hover {
background: #7A6A53;
color: white;
}
/* Post Navigation*/
.post-nav { margin-bottom: 2.618rem; }
.post-nav > a[class*="h-"] { border: 0; display: block; margin: 0 0 1rem 0; }
/* 5.2.4 - Various Elements -------------- */
::selection { background: black; color: white; }
::-moz-selection { background: black; color: white; }
.copyright { margin: 1rem 0; }
.copyright:before { content: "©" " " attr(data-copyright-year) " "; }
.amp:before { content: "&"; font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; }
/* 5.3 - Layout */
/* 5.3.1 - Columns -------------- */
[class$="col"] > * { float: left; }
.l-two-col > *, .has-l-two-col-children > * > * { width: 50%; }
.l-three-col > *, .has-l-three-col-children > * > * { width: 33.3%; }
.l-four-col > *, .has-l-four-col-children > * > * { width: 25%; }
/* 5.3.2 - Abstract Columns -------------- */
.l-25-75-col > *:first-child, .has-l-25-75-col-children > * > *:first-child { float: left; width: 25%; }
.l-25-75-col > *:last-child, .has-l-25-75-col-children > * > *:last-child { float: left; width: 75%; padding: 0 1.618rem; }
.l-75-25-col > *:first-child, .has-l-75-25-col-children > * > *:first-child { float: left; width: 75%; }
.l-75-25-col > *:last-child, .has-l-75-25-col-children > * > *:last-child { float: left; width: 25%; }
/* 5.4 - Modules */
/* 5.5 - States */
.is-submenu-toggle:hover ~ .submenu {
top: 75px;
opacity: 1;
}
/* 5.6 - Themes */
/* X.X - Playground */
.-rc { }
.-rc header[role="banner"] {
background: rgba(153,178,183,1);
height: 7.5rem;
} .-rc header[role="banner"] a[href] { border: 0; }
.-rc header[role="banner"] a[href]:hover {
background: rgba(0, 0, 0, .10);
}
.-rc .brand {
color: white;
font: 700 2rem/1.77 'PT Sans';
height: 100%;
overflow: hidden;
padding: 1.618rem 2.618rem;
position: absolute;
width: 100%;
text-transform: uppercase;
text-shadow: -.2rem .2rem 0 rgba(0,0,0,.10);
}
.-rc nav[role="navigation"] {
text-align: right;
font-size: 0;
float: right;
height: 100%;
} .-rc nav[role="navigation"] a[href] {
color: white;
display: inline-block;
font: bold 1.618rem/1.65 'PT Sans';
letter-spacing: .1rem;
padding: 2rem 1.618rem 0 1.618rem;
height: 100%;
text-shadow: -.2rem .2rem 0 rgba(0,0,0,.10);
} .-rc nav[role="navigation"] > a[href]:hover {
background: rgba(0, 0, 0, .10);
}
.-rc nav[role="navigation"] [type=search] {
font: 400 1.416rem/1.55 'Open Sans';
margin: 0 2rem;
padding: .7rem 1rem;
}
/* Submenu */
.-rc .submenu {
background: rgba(123,158,163,1);
display: block;
height: auto;
opacity: 0;
position: absolute;
top: -9999px;
right: 0;
} .-rc nav[role="navigation"] .submenu > a[href] {
border: 0;
display: block;
padding: 1rem 1.416rem;
}
/* RC Slideshow */
.-rc .slideshow {
z-index: 0;
}
.-rc .slideshow img {
}
.-rc .slideshow .episode-title {
background: rgba(153,178,183,1);
color: white;
font: 700 1.416rem/1.75 'PT Sans';
padding: 1rem 1.416rem;
text-shadow: -.2rem .2rem 0 rgba(0,0,0,.10);
}
.-rc .slideshow .episode-caption {
background: rgba(0,0,0,.25);
color: white;
font: 700 1.618rem/1.75 'PT Sans';
width: 100%;
padding: 1rem 1.416rem;
position: absolute;
bottom: 2.75em;
text-shadow: -2px 2px 0 #333;
}
/* RC Content Container */
.-rc .cnt {
padding: 2.618rem;
}
/* RC Series List */
.-rc .series-list li {
margin: 0 0 2.618rem 0;
} .-rc .series-list li:hover { background: rgba(0,0,0,.02) }
/* RC Section Slider */
.-rc .section-slider-controls {
float: right;
} .-rc .section-slider-controls > [href] {
background: rgba(0,0,0,.15);
color: rgba(255,255,255,1);
margin-right: .2rem;
padding: 0 1.2rem;
} .-rc .section-slider-controls > [href]:hover {
background: rgba(0,0,0,.45);
} .-rc .section-slider-controls > [href*="#back"]:before {
content: "⤆";
} .-rc .section-slider-controls > [href*="#next"]:before {
content: "⤇";
}
/* RC Single Entry */
.-rc .single-entry {
} .-rc .single-entry p {
max-width: 35em;
white-space: pre-wrap;
} .-rc .single-entry .image-column > img, .-rc .single-entry .entry-meta {
margin-bottom: 1.618rem;
}
/* Entry Meta */
.-rc .single-entry .entry-meta li { margin-bottom: .5rem; }
/* Data Subheader */
[data-subheadline]:before {
content: attr(data-subheadline);
border-bottom: .2rem solid;
display: block;
font-size: 1.6rem;
margin-bottom: 1rem;
padding-bottom: .3rem;
}
/* RC Footer */
footer {
background: rgba(153,178,183,1);
color: white;
margin: 3rem 0;
min-height: 48.6em;
padding: 2.618rem;
}
.-rc footer [data-subheadline]:before { color: white; }
.-rc footer a[href] { color: white; font-size: 1.418rem; border-bottom: 1px dotted ghostwhite;}
.-rc footer > * { padding-right: 4.618rem; }
.-rc footer ul li a { display: block; padding: .3rem 0; }
.-rc footer a[href]:hover { background: rgba(0,0,0,.10); }
.-rc .pop-out-girl:after {
content: "";
background: url(http://i610.photobucket.com/albums/tt190/xXchrisskyXx/Cat-Girl.png) no-repeat;
background-position: -160px 50px;
display: block;
width: 375px;
height: 680px;
top: -22em;
position: absolute;
}
/* {✖} */
Raw
dabblet.html
<section class="-rc has-grouped-children">
<!-- Begin Main Header-->
<header role="banner" class="has-grouped-children l-25-75-col">
<a href="#" class="brand">
Random Curiousity
</a>
<nav role="navigation">
<input type="search" placeholder="Search the site..."/>
<a href="#" class="is-submenu-toggle" title="Hover to fold out the main menu">MENU</a>
<ul class="submenu">
<a href="#" title="Hover to fold out the main menu">Current Series</a>
<a href="#" title="Hover to fold out the main menu">Popular Series</a>
<a href="#" title="Hover to fold out the main menu">Meet Our Writers</a>
<a href="#" title="Hover to fold out the main menu">Best of Anime</a>
<a href="#" title="Hover to fold out the main menu">Schedules</a>
<a href="#" title="Hover to fold out the main menu">Categories</a>
<a href="#" title="Hover to fold out the main menu">Polls</a>
</ul>
</nav>
</header>
<!-- End Header -->
<!-- Begin Slideshow -->
<section class="slideshow">
<article class="slide">
<figure>
<img src="http://randomc.net/image/Fate%20Zero/Fate%20Zero%20-%2016%20-%20Large%2026.jpg"/>
</figure>
<figcaption class="episode-caption">Fate/Zero – 16' by <a href="#">VERDANT</a> | <a href="#">215 COMMENTS</a> | 9,658 VIEWS</figcaption>
<div class="episode-title">「栄誉の果て」 (Eiyo no Hate) - “The End of Honor”</div>
</article>
</section>
<!-- End Slideshow -->
<!-- Begin Current Series -->
<section class="cnt has-grouped-children">
<h2 class="h-headline">Current Series</h2>
<ul class="series-list has-l-25-75-col-children has-grouped-children">
<li>
<img src="http://randomc.net/image/Jormungand/Jormungand%20-%2003%20-%2023.jpg" />
<section>
<h3 class="h-standfirst">Jormungand</h3>
<p>The series follows Koko Hekmatyar, a young arms dealer who sells weapons under HCLI, an international shipping corporation that secretly deals in the arms trade.</p>
</section>
</li>
<li>
<img src="http://randomc.net/image/Aquarion%20EVOL/Aquarion%20EVOL%20-%2017%20-%2006.jpg" />
<section>
<h3 class="h-standfirst">Aquarion EVOL</h3>
<p>Twelve thousand years after the events of Genesis of Aquarion, mankind living on the planet Vega is threatened by a new enemy from the planet Altair whose female population was wiped out by a mysterious disease.</p>
</section>
</li>
<li>
<img src="http://placehold.it/250x150" />
<section>
<h3 class="h-standfirst">Entry Title</h3>
<p>First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth.</p>
</section>
</li>
<li>
<img src="http://placehold.it/250x150" />
<section>
<h3 class="h-standfirst">Entry Title</h3>
<p>First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth.</p>
</section>
</li>
<li>
<img src="http://placehold.it/250x150" />
<section>
<h3 class="h-standfirst">Entry Title</h3>
<p>First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth.</p>
</section>
</li>
</ul>
</section>
<!-- End Current Series -->
<!-- Begin Single Page -->
<section class="cnt single-entry">
<div class="h-headline">Jormungand – 01 <span class="section-slider-controls h-headline"><a href="#back"></a><a href="#next"></a></span></div>
<article class="l-75-25-col">
<section>
<p>Prior to every season, I typically <a href="#">make a quick list</a> of anime that plan to watch and the expectations I have for each. This time around, there were a quite a handful of shows that made it to my “high expectations” column, and one of them was Jormungand. Based on Takahashi Keitarou’s graphic novel about a child soldier named Jonah (Tamura Mutsumi) who joins a group of arms dealers lead by the charismatic Koko Hekmatyar (Itou Shizuka), the premise itself just oozes potential greatness. A dark and serious atmosphere, protagonists that seem anything but typical, animation done by White Fox (the studio behind Steins;Gate), and a Black Lagoon vibe— what more could you ask for? After watching this first episode, it’s quite clear the answer to that question is: not much.</p>
<p>I mean, when you start a series with such a bang, you just can’t help but be awed by it, especially when you consider the many paths this first episode could have taken. For one, it could have merely introduced the characters. With such a sizable cast, it’s not hard to imagine such introductions taking multiple episodes and detracting from the series in the long run. Luckily, Jormungand doesn’t do that. Rather, the episode itself revolves around demonstrating how Koko’s group works, following them through an operation to reclaim military armaments seized by customs, and a second operation to counter a rival arms dealer’s attempt to encroach on their dealings. Sprinkled in between, we see how each member of the main cast responds and acts in various situations, how they speak to others and among themselves, and how Koko and her group do their jobs. With this, we get a good feel of the personalities of each member of the main cast, without spending too much time explicitly doing so. Basically, what Jormungand does is throw you right into the action, while seamlessly integrating both character introduction and development in between. Suffice to say, the fact that it’s done so well plays a major part in allowing the episode to maintain its hectic pace. The pacing in turn, is key to series in the Action genre, as well as a reason why this episode was so great.</p>
</section>
<aside>
<ul class="entry-meta" data-subheadline="The Curious Extras">
<li>FILED UNDER <a href="">FIRST IMPRESSIONS</a>, <a href="">JORMUNGAND</a>, <a href="">SERIES INTRODUCTION</a></li>
<li>ARTICLE WRITTEN BY <a href="">ZEPHYR</a></li>
<li><a href="">79 COMMENTS</a></li>
<li>10,693 VIEWS</li>
</ul>
<ul class="image-column">
<img src="http://randomc.net/image/Jormungand/Jormungand%20-%2003%20-%2023.jpg" />
<img src="http://randomc.net/image/Jormungand/Jormungand%20-%2003%20-%2023.jpg" />
<img src="http://randomc.net/image/Jormungand/Jormungand%20-%2003%20-%2023.jpg" />
<img src="http://randomc.net/image/Jormungand/Jormungand%20-%2003%20-%2023.jpg" />
</ul>
</aside>
</article>
</section>
<!-- End Single Page -->
<!-- Begin Footer -->
<footer class="has-grouped-children l-four-col">
<section data-subheadline='About Random C.'>
<p>Anime impressions and high resolution images on the latest episodes from Japan.</p>
<a href="#contact" class="h-promo">Contact us</a>
<div class="copyright" data-copyright-year="2012">Random Curiosity</div>
</section>
<ul data-subheadline='Blogs we like'>
<li><a href="http://bigt1987.blogspot.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://bigt1987.blogspot.com/']);">A Product of Wasted Time</a></li>
<li><a href="http://animehistory.wordpress.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://animehistory.wordpress.com/']);">Anime History</a></li>
<li><a href="http://muhootsaver.tistory.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://muhootsaver.tistory.com/']);">CanyouMoe?</a></li>
<li><a href="http://detarame.wordpress.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://detarame.wordpress.com/']);">Detarame</a></li>
<li><a href="http://hashihime.blogspot.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://hashihime.blogspot.com/']);">Hashihime</a></li>
<li><a href="http://kurogane.animeblogger.net/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://kurogane.animeblogger.net/']);">Kurogane’s Anime Blog</a></li>
<li><a href="http://www.lostinanime.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.lostinanime.com/']);">Lost in America</a></li>
<li><a href="http://metanorn.net/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://metanorn.net/']);">METANORN</a></li>
<li><a href="http://www.seaslugteam.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.seaslugteam.com/']);">Sea Slugs! Anime Blog</a></li>
<li><a href="http://sekijitsu.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://sekijitsu.com/']);">Sekijitsu</a></li>
<li><a href="http://www.spinchan.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.spinchan.com/']);">SpinChan</a></li>
<li><a href="http://www.navinaj.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.navinaj.com/']);">Temporal Vortex</a></li>
<li><a href="http://www.thatanimeblog.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.thatanimeblog.com/']);">THAT Anime Blog</a></li>
</ul>
<ul data-subheadline='Our Network'>
<li><a href="http://anidb.net/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://anidb.net/']);">AniDB</a></li>
<li><a href="http://www.animenewsnetwork.com" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.animenewsnetwork.com']);">Anime News Network</a></li>
<li><a href="http://www.animesuki.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.animesuki.com/']);">AnimeSuki</a></li>
<li><a href="http://www.baka-updates.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.baka-updates.com/']);">Baka-Updates</a></li>
<li><a href="http://www.mangaupdates.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.mangaupdates.com/']);">Baka-Updates Manga</a></li>
<li><a href="http://www.d-addicts.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.d-addicts.com/']);">D-Addicts</a></li>
<li><a href="http://jpopsuki.eu/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://jpopsuki.eu/']);">jpopsuki</a></li>
<li><a href="http://mangastream.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://mangastream.com/']);">Manga Stream</a></li>
<li><a href="http://mangahelpers.com/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://mangahelpers.com/']);">MangaHelpers</a></li>
<li><a href="http://www.myanimelist.net/" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.myanimelist.net/']);">MyAnimeList</a></li>
<li><a href="http://www.tokyotosho.info" target="" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.tokyotosho.info']);">Tokyo Toshokan</a></li>
</ul>
<div class="pop-out-girl"></div>
</footer>
<!-- End Footer -->
</section>
<!-- End Random Curiosity -->
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment