Skip to content

Instantly share code, notes, and snippets.

@rpastorelle
Created April 13, 2013 20:21
Show Gist options
  • Save rpastorelle/5379917 to your computer and use it in GitHub Desktop.
Save rpastorelle/5379917 to your computer and use it in GitHub Desktop.
Tackk AppPanel
/**
* Tackk AppPanel
*/
* { box-sizing: border-box; }
body{ padding: 0px; margin: 0; color: #ccc; }
#app-panel{
border: 1px solid blue;
background: rgba(39, 39, 39, 0.88);
height: 100%;
width: 270px;
position: fixed;
right: 0;
top: 0;
z-index: 11;
box-shadow: 0 0 12px #222;
}
#account-info{
position: relative;
height: 45px;
background-color: Tomato;
z-index: 1;
}
#panel-menus{}
#panel-menus header{
position: relative;
height: 50px;
background-color: DarkCyan;
z-index: 1;
}
#menu{}
#submenu{
position: relative;
height: 55px;
background-color: purple;
z-index: 1;
}
#menu:before,
#menu:after {
content: " ";
display: table;
}
#menu:after {
clear: both;
}
#menu-wrapper{
position: absolute;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
top: 0;
padding-top: 150px;
z-index: 0;
overflow: auto;
}
#menu-wrapper.nosub {
padding-top: 95px;
}
#menu-body{
position: absolute;
background-color: rgba(255,127,80,.5);
padding: 8px 10px 80px;
}
#menu footer{
height: 80px;
background-color: rgba(60,179,113,.8);
position: absolute;
width: 100%;
bottom: 0;
}
<!-- content to be placed inside <body>…</body> -->
<div id="app-panel">
<section id="account-info">
Acct Info
</section>
<aside id="panel-menus">
<header>
Menu Titles
</header>
<section id="menu">
<div id="submenu">Submenus</div>
<div id="menu-wrapper">
<div id="menu-body">
<p>Start thundercats vice four loko high life sriracha odd future flannel cred umami single-origin coffee. Craft beer seitan farm-to-table blue bottle, vinyl 8-bit beard lo-fi flexitarian scenester salvia leggings kogi sriracha. Stumptown sriracha organic, banh mi dreamcatcher butcher echo park farm-to-table lo-fi. Church-key fap banh mi typewriter, mixtape selfies umami williamsburg godard four loko hella. Skateboard pickled PBR beard, gastropub mcsweeney's marfa. Keytar retro narwhal letterpress ennui cred. Shoreditch stumptown chambray, mumblecore swag butcher wes anderson photo booth iphone.</p><p>Fanny pack banh mi fashion axe, intelligentsia craft beer stumptown plaid cred fixie forage tofu small batch portland tousled synth. Meh lomo high life flexitarian portland cray. Cardigan trust fund mumblecore DIY salvia pickled. Art party +1 narwhal, etsy fixie umami biodiesel artisan actually stumptown american apparel. Lo-fi skateboard truffaut, art party banjo synth tofu vegan viral fixie actually. DIY tonx carles, Austin locavore deep v trust fund sriracha next level whatever actually hoodie squid. Semiotics wes anderson YOLO meggings twee yr, thundercats artisan leggings flannel craft beer mlkshk disrupt.</p><p>Tofu kale chips banh mi, typewriter whatever selfies locavore seitan try-hard. Vice helvetica pitchfork narwhal vinyl, single-origin coffee cardigan organic banksy +1 salvia keffiyeh street art hella plaid. Meggings squid bespoke dreamcatcher 8-bit selvage, messenger bag pickled put a bird on it banksy cray. Salvia raw denim brooklyn, intelligentsia swag tousled meggings plaid banh mi keffiyeh disrupt next level jean shorts fixie Austin. Narwhal literally VHS tonx. Pour-over leggings cred tattooed, mixtape seitan single-origin coffee next level carles trust fund ethnic farm-to-table ugh gluten-free. Retro salvia neutra truffaut, raw denim art party typewriter.</p><p>Banjo dreamcatcher hoodie, mlkshk seitan aesthetic tattooed whatever iphone pinterest artisan squid williamsburg post-ironic. Art party single-origin coffee craft beer, direct trade brooklyn kogi marfa bicycle rights irony. Polaroid literally etsy post-ironic. Dreamcatcher echo park readymade chillwave lo-fi. Butcher ethnic cray, gentrify portland irony mlkshk scenester tofu kale chips pitchfork DIY church-key single-origin coffee. Fanny pack umami tofu tonx salvia, odd future YOLO farm-to-table deep v portland before they sold out banh mi try-hard. Put a bird on it scenester butcher messenger bag wolf, intelligentsia biodiesel meggings gentrify quinoa chambray organic.</p><p>Fixie sriracha pour-over vinyl flannel biodiesel banjo. Mustache umami intelligentsia, PBR wolf helvetica mixtape locavore fingerstache. Narwhal typewriter whatever, letterpress truffaut readymade deep v Austin organic +1. Literally PBR occupy, umami williamsburg gastropub meh sustainable church-key keytar +1 jean shorts vice cray ennui. Pinterest typewriter messenger bag gastropub VHS. Banh mi gastropub jean shorts godard. Authentic typewriter helvetica hella tumblr tonx.</p><p>Kale chips pop-up banh mi yr carles. Blog deep v synth echo park, freegan leggings odd future fixie fingerstache high life tumblr pitchfork Austin butcher. Literally ethnic farm-to-table, hashtag gentrify terry richardson gastropub church-key bushwick flexitarian craft beer salvia twee. High life scenester pickled, artisan before they sold out meggings chillwave banksy. Shoreditch farm-to-table keytar, pour-over mustache kale chips ennui brunch fixie chillwave polaroid put a bird on it. American apparel master cleanse Austin mlkshk, lo-fi gluten-free stumptown semiotics banjo truffaut VHS viral jean shorts street art fingerstache. Street art literally leggings, actually meggings thundercats echo park.</p><p>Blue bottle craft beer flexitarian marfa swag. +1 pinterest before they sold out pickled hoodie. Neutra +1 fap, YOLO retro williamsburg pour-over marfa mcsweeney's. Fashion axe sriracha etsy, next level lo-fi fingerstache godard truffaut hoodie meggings bespoke cray irony portland. Letterpress leggings polaroid mumblecore. Tofu banjo plaid, mustache street art kogi artisan disrupt VHS wayfarers swag fashion axe pug tonx yr. Biodiesel shoreditch yr flexitarian wes anderson, tumblr ugh gastropub hella chillwave mlkshk forage.</p><p>Dreamcatcher godard direct trade, Austin try-hard retro mustache +1 chambray chillwave salvia selvage twee american apparel bespoke. Actually kale chips scenester pug occupy, twee ugh whatever pickled meggings authentic salvia wolf mustache. Fanny pack letterpress raw denim, 90's actually pitchfork master cleanse dreamcatcher single-origin coffee. Godard high life viral VHS, literally iphone ethnic raw denim umami retro readymade. Master cleanse letterpress echo park, etsy ethnic tofu keffiyeh disrupt tousled sriracha hashtag shoreditch. Flannel truffaut high life gentrify, selvage literally hella. Mlkshk hella quinoa flannel, mixtape before they sold out hashtag DIY 90's literally brunch kogi.</p><p>Swag aesthetic pickled, retro tumblr chambray +1 messenger bag artisan ennui YOLO. Post-ironic iphone Austin, brooklyn swag single-origin coffee wes anderson pork belly tattooed selvage hella blog. Fixie pour-over squid wes anderson, church-key godard authentic thundercats skateboard pinterest butcher ennui semiotics beard. Jean shorts helvetica marfa, pug vice four loko bushwick chambray banksy blue bottle pitchfork quinoa high life. Selfies stumptown tattooed chambray. Pop-up salvia cray gastropub. Organic cray american apparel shoreditch polaroid. El Fin.</p>
</div>
</div>
<footer>Menu Footer</footer>
</section>
</aside>
</div>
<div id="body">
<p>Bacon ipsum dolor sit amet in reprehenderit shoulder, pork chop excepteur ea consequat prosciutto tempor chicken cillum turducken ut. Shank bresaola shankle short loin pork loin cupidatat. Chuck turkey dolore bacon jowl short ribs occaecat tongue. Beef ribs hamburger jowl salami ex. Mollit prosciutto tail incididunt adipisicing elit sed exercitation short ribs shankle. Exercitation hamburger fatback irure ut. Pork belly proident dolore consequat rump culpa.</p><p>Pig labore culpa, cow non esse pariatur id beef rump ham. Swine ullamco drumstick, ut prosciutto commodo tongue do cillum shoulder chicken. Voluptate t-bone minim irure, boudin cow velit dolor ullamco pariatur. Do salami prosciutto, ut eu boudin adipisicing. Id adipisicing ball tip filet mignon, turducken qui cupidatat beef irure rump.</p><p>Proident eu aliquip, hamburger ex salami beef ribs ut veniam jerky. Tempor officia bacon, tri-tip doner shank incididunt t-bone pork chop. Enim magna irure hamburger pastrami fugiat laborum ut salami esse. Swine fatback flank turducken, adipisicing elit jowl ut nostrud sint dolore eu tri-tip capicola tail. Turducken id laborum flank shoulder. Minim flank fatback, strip steak ut ut eu tenderloin kielbasa consequat ham pork loin pastrami.</p><p>Bacon aliqua shank strip steak deserunt. Tri-tip tempor veniam consequat meatball leberkas short ribs. Reprehenderit chuck aliquip, in dolore officia consequat capicola do pariatur. Spare ribs deserunt esse salami, leberkas bacon ex ham hock exercitation brisket. Tail laborum do strip steak beef ribs. Corned beef filet mignon sausage shank ham hock, in cillum ad commodo meatloaf qui id.</p><p>Nostrud et andouille cupidatat reprehenderit chicken in beef dolore anim. Commodo shoulder sunt mollit pork belly, in labore ribeye id biltong. Doner short ribs nisi, aute andouille pancetta ribeye drumstick culpa chuck dolore exercitation jowl bresaola. Officia excepteur t-bone cillum.</p><p>Deserunt sed sausage mollit non, ea boudin turkey laboris swine chicken minim labore meatloaf t-bone. Officia kielbasa ut turducken. Eu ad dolor enim, strip steak chicken minim swine beef ribs officia in. Pancetta in short ribs, id shoulder meatloaf turkey reprehenderit ham aute nisi. Pancetta in id chuck doner adipisicing ad, rump tail. Nostrud salami cupidatat turducken, ut brisket in pork pancetta.</p><p>Short loin tenderloin boudin venison, nulla in hamburger fugiat sirloin excepteur ground round meatball sunt doner. Venison kielbasa frankfurter turducken, commodo est pork chop brisket jerky excepteur. Ham bacon aliqua duis non. Aliquip rump tongue shankle shoulder, beef ribs filet mignon ribeye chicken dolore anim ad venison. Laboris shoulder capicola, esse exercitation culpa meatloaf pork doner.</p><p>Shankle pig anim, laboris ball tip beef ex veniam tempor ad chuck esse tenderloin officia. Ad ham eiusmod hamburger cupidatat pariatur. Salami pancetta excepteur tail, aliqua sint aute id rump shoulder in corned beef. Proident shank shankle, pancetta nostrud prosciutto eiusmod hamburger. Swine et doner duis excepteur. Chicken pork loin et anim incididunt venison nulla swine spare ribs.</p><p>Cow sed sirloin, ea commodo do cupidatat capicola dolore dolor boudin laborum. Pancetta tongue beef ribs venison shank fatback. Tempor doner shoulder enim, t-bone ball tip short loin kielbasa. Culpa meatball shoulder minim bacon quis elit ground round. Venison strip steak cow laborum doner, leberkas andouille dolore dolor t-bone ribeye turkey aliquip incididunt pariatur. Fugiat jerky laboris hamburger flank do non.</p><p>Commodo strip steak venison spare ribs laborum irure brisket adipisicing incididunt short loin sirloin sed sunt. Salami excepteur sint t-bone doner ut strip steak do incididunt turkey tenderloin veniam. Short ribs flank sirloin, in incididunt ex aliqua sed quis. Leberkas esse strip steak, turkey meatloaf laborum ham hock tongue boudin shoulder jerky est spare ribs. Frankfurter jowl sed tri-tip ex, ball tip qui. Pork doner consequat fugiat ex deserunt exercitation pig ad short ribs spare ribs dolore in.</p><p>Dolor ham hock jerky duis elit chicken capicola meatball ut. Corned beef bacon pork belly, leberkas aliquip exercitation pariatur. Non labore capicola tempor. Hamburger ball tip voluptate pork loin veniam strip steak fugiat. Rump labore ribeye chicken frankfurter filet mignon prosciutto ut strip steak veniam nisi andouille velit jowl pork belly. Est ex chuck nostrud anim, fugiat doner flank tri-tip.</p><p>Occaecat ullamco consequat aliquip consectetur. Elit spare ribs chicken tenderloin turducken t-bone. Do pancetta tail magna turkey bacon, ham ut shoulder in in pork chop. Kielbasa dolor sed jerky dolore nisi shank tongue. Elit pancetta occaecat pork belly pariatur, brisket jowl proident spare ribs ut officia in. Flank quis duis meatball ham beef in beef ribs. Nisi tri-tip quis spare ribs, occaecat ribeye short loin sausage laborum chuck.</p><p>Magna jerky tenderloin cupidatat do pork, cillum kielbasa commodo cow dolore sirloin. Meatloaf frankfurter beef ribs, sunt fatback jowl in non doner tongue cow nisi sed enim. Meatloaf aute corned beef, capicola beef venison culpa velit short ribs brisket strip steak fatback excepteur. Boudin chuck flank pastrami.</p><p>Spare ribs prosciutto non dolore ea ut, kielbasa sint elit short loin sed dolor ullamco magna proident. Pork tenderloin qui meatloaf corned beef velit in jerky shankle swine enim pancetta. Beef ribs chuck occaecat, filet mignon cupidatat quis culpa frankfurter. Nisi jowl pastrami id, swine sausage commodo in quis dolor short loin tempor laboris meatball dolore.</p><p>Ad cillum turducken ullamco veniam salami. Ut shoulder chicken in, jowl pastrami minim aliquip. Doner fugiat non ad frankfurter hamburger nisi rump drumstick occaecat capicola dolore. Pork loin leberkas pancetta duis beef ribs, in corned beef ad. Shank capicola sausage, ullamco jerky pariatur minim eu chicken mollit proident. Venison short ribs pork loin nostrud pork chop, laboris chuck biltong dolore pastrami labore t-bone mollit. Pork bacon veniam ut aliqua, turkey laborum officia non shank sint capicola chicken tri-tip.</p><p>Boudin salami turducken cillum nisi strip steak. Aliqua jowl sirloin chuck adipisicing non elit turkey tempor velit. Excepteur ea in ribeye, pork jowl voluptate brisket tri-tip tongue elit pastrami magna hamburger. Esse rump culpa leberkas, deserunt jowl in meatball consequat sed hamburger labore ex.</p>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment