Skip to content

Instantly share code, notes, and snippets.

@afraser

afraser/dabblet.css

Created August 3, 2012 12:59
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 afraser/3247500 to your computer and use it in GitHub Desktop.
Save afraser/3247500 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
*{
+box-sizing(border-box)
}
input, textarea
+box-sizing(content-box)
.menu{x-sizing(border-box)
input, textarea
+box-sizing(content-box)
position: absolute;
z-index: 1000;
width: 310px;
display: none;
left: 200px+ 5px;
}
.menu_content{
border: 1px solid #000;
position: relative;
border-radius: 11px;
background-color: #575757;
background-image: linear-gradient(top left, #575757, #373737);
box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.37), 0px 2px 10px 0px rgba(0, 0, 0, 0.8);
padding: 5px;
}
.menu_content .menu_body{
height: auto;
position: absolute;
left: 0px;
right: 5px;
bottom: 5px;
top: 0px;
border-radius: 7px;
border: 1px solid #000;
position: relative;
background-color: #EEE;
box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.4);
}
.menu_body .menu_body_cont{
border-radius: 7px;
overflow: hidden;
height: 100%;
}
.menu_body .menu_body_cont .menu_mask{
border-radius: 7px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 5px 0px rgba(0, 0, 0, 0.66);
pointer-events: none;
}
.arrow{
position: absolute;
left: -13px;
width: 15px;
height: 28px;
overflow: hidden;
}
.arrow span{
display: block;
width: 28px;
height: 28px;
background: red;
rotate: -45deg;
zoom: 1;
margin: 0 0 0 4px;
background: #484848;
border-left: 1px solid #000;
border-top: 1px solid #000;
box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.37);
}
ul{
list-style: none;
margin: 0;
height: 100%;
overflow-y: scroll;
}
ul li {
list-style: none;
margin: 0px;
background-color: #EEE;
}
ul li:hover{
background-color: #DDD
}
ul li:last-child a {
border-bottom: 0;
}
ul li a{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #555;
display: block;
height: 36px;
line-height: 36px;
position: relative;
}
ul li a:hover{
text-decoration: none;
}
ul.chapters li a span{
display: block;
text-shadow: rgba(255,255,255,0.8) 1px 0 0;
}
ul.chapters li a span.number{
width: 30px;
float: left;
text-align: right;
/*font-family: $serifFontFamily;*/
font-style: italic;
font-size: 18px;
color: #808080;
}
ul.chapters li a span.title{
margin-left: 30px;
padding: 0px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
font-size: 13px;
}
h3 {
font-size: 13px;
color: #fff;
font-weight: 700;
line-height: 16px;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header>
<div class="course-level-menu menu" id="content_menu" style="display: block; "><div class="content menu_content">
<div class="arrow"><span></span></div>
<div class="section top">
<h3>Chapters:</h3>
</div>
<div class="menu_body no-pages" style="height: 730px; ">
<div class="menu_body_cont">
<ul class="chapters">
<li>
<a href="/courses/biology/chapters/1" data-ajax="true"> <span class="number">1</span>
<span class="title">Introduction to Biology</span></a>
</li>
<li>
<a href="/courses/biology/chapters/2" data-ajax="true"> <span class="number">2</span>
<span class="title">The Scientific Method</span></a>
</li>
<li>
<a href="/courses/biology/chapters/3" data-ajax="true"> <span class="number">3</span>
<span class="title">General Chemistry</span></a>
</li>
<li>
<a href="/courses/biology/chapters/4" data-ajax="true"> <span class="number">4</span>
<span class="title">Properties of Water</span></a>
</li>
<li>
<a href="/courses/biology/chapters/5" data-ajax="true"> <span class="number">5</span>
<span class="title">Organic Chemistry</span></a>
</li>
<li>
<a href="/courses/biology/chapters/6" data-ajax="true"> <span class="number">6</span>
<span class="title">Macromolecules</span></a>
</li>
<li>
<a href="/courses/biology/chapters/7" data-ajax="true"> <span class="number">7</span>
<span class="title">Cellular Structure and Function</span></a>
</li>
<li>
<a href="/courses/biology/chapters/8" data-ajax="true"> <span class="number">8</span>
<span class="title">The Plasma Membrane</span></a>
</li>
<li>
<a href="/courses/biology/chapters/9" data-ajax="true"> <span class="number">9</span>
<span class="title">Membrane Transport</span></a>
</li>
<li>
<a href="/courses/biology/chapters/10" data-ajax="true"> <span class="number">10</span>
<span class="title">Thermodynamics</span></a>
</li>
<li>
<a href="/courses/biology/chapters/11" data-ajax="true"> <span class="number">11</span>
<span class="title">Cellular Energetics</span></a>
</li>
<li>
<a href="/courses/biology/chapters/12" data-ajax="true"> <span class="number">12</span>
<span class="title">Cellular Respiration</span></a>
</li>
<li>
<a href="/courses/biology/chapters/13" data-ajax="true"> <span class="number">13</span>
<span class="title">Photosynthesis</span></a>
</li>
<li>
<a href="/courses/biology/chapters/14" data-ajax="true"> <span class="number">14</span>
<span class="title">Cell Signaling</span></a>
</li>
<li>
<a href="/courses/biology/chapters/15" data-ajax="true"> <span class="number">15</span>
<span class="title">Mitosis</span></a>
</li>
<li>
<a href="/courses/biology/chapters/16" data-ajax="true"> <span class="number">16</span>
<span class="title">Meiosis</span></a>
</li>
<li>
<a href="/courses/biology/chapters/17" data-ajax="true"> <span class="number">17</span>
<span class="title">Mendelian Inheritance</span></a>
</li>
<li>
<a href="/courses/biology/chapters/18" data-ajax="true"> <span class="number">18</span>
<span class="title">Inheritance Patterns</span></a>
</li>
<li>
<a href="/courses/biology/chapters/19" data-ajax="true"> <span class="number">19</span>
<span class="title">DNA</span></a>
</li>
<li>
<a href="/courses/biology/chapters/20" data-ajax="true"> <span class="number">20</span>
<span class="title">Transcription and Translation</span></a>
</li>
<li>
<a href="/courses/biology/chapters/21" data-ajax="true"> <span class="number">21</span>
<span class="title">Gene Regulation</span></a>
</li>
<li>
<a href="/courses/biology/chapters/22" data-ajax="true"> <span class="number">22</span>
<span class="title">Viruses</span></a>
</li>
<li>
<a href="/courses/biology/chapters/23" data-ajax="true"> <span class="number">23</span>
<span class="title">Bioinformatics and Genomics</span></a>
</li>
<li>
<a href="/courses/biology/chapters/24" data-ajax="true"> <span class="number">24</span>
<span class="title">Biotechnology</span></a>
</li>
<li>
<a href="/courses/biology/chapters/25" data-ajax="true"> <span class="number">25</span>
<span class="title">Cancer and Disease</span></a>
</li>
<li>
<a href="/courses/biology/chapters/26" data-ajax="true"> <span class="number">26</span>
<span class="title">Introduction to Evolution</span></a>
</li>
<li>
<a href="/courses/biology/chapters/27" data-ajax="true"> <span class="number">27</span>
<span class="title">Genetic Variation</span></a>
</li>
<li>
<a href="/courses/biology/chapters/28" data-ajax="true"> <span class="number">28</span>
<span class="title">Natural Selection</span></a>
</li>
<li>
<a href="/courses/biology/chapters/29" data-ajax="true"> <span class="number">29</span>
<span class="title">Speciation</span></a>
</li>
<li>
<a href="/courses/biology/chapters/30" data-ajax="true"> <span class="number">30</span>
<span class="title">Evolution of Early Life</span></a>
</li>
<li>
<a href="/courses/biology/chapters/31" data-ajax="true"> <span class="number">31</span>
<span class="title">Evolutionary Developmental Biology</span></a>
</li>
<li>
<a href="/courses/biology/chapters/32" data-ajax="true"> <span class="number">32</span>
<span class="title">Phylogenetics</span></a>
</li>
<li>
<a href="/courses/biology/chapters/33" data-ajax="true"> <span class="number">33</span>
<span class="title">A Genome Approach to Evolutionary Theory</span></a>
</li>
<li>
<a href="/courses/biology/chapters/34" data-ajax="true"> <span class="number">34</span>
<span class="title">Prokaryotes</span></a>
</li>
<li>
<a href="/courses/biology/chapters/35" data-ajax="true"> <span class="number">35</span>
<span class="title">Single Celled Eukaryotes</span></a>
</li>
<li>
<a href="/courses/biology/chapters/36" data-ajax="true"> <span class="number">36</span>
<span class="title">Land Plant Evolution</span></a>
</li>
<li>
<a href="/courses/biology/chapters/37" data-ajax="true"> <span class="number">37</span>
<span class="title">Seed Plants</span></a>
</li>
<li>
<a href="/courses/biology/chapters/38" data-ajax="true"> <span class="number">38</span>
<span class="title">Fungi</span></a>
</li>
<li>
<a href="/courses/biology/chapters/39" data-ajax="true"> <span class="number">39</span>
<span class="title">The Animal Kingdom</span></a>
</li>
<li>
<a href="/courses/biology/chapters/40" data-ajax="true"> <span class="number">40</span>
<span class="title">Lower Animals</span></a>
</li>
<li>
<a href="/courses/biology/chapters/41" data-ajax="true"> <span class="number">41</span>
<span class="title">Early Chordate Evolution</span></a>
</li>
<li>
<a href="/courses/biology/chapters/42" data-ajax="true"> <span class="number">42</span>
<span class="title">Higher Chordate Evolution</span></a>
</li>
<li>
<a href="/courses/biology/chapters/43" data-ajax="true"> <span class="number">43</span>
<span class="title">Human Evolution</span></a>
</li>
<li>
<a href="/courses/biology/chapters/44" data-ajax="true"> <span class="number">44</span>
<span class="title">Plant Anatomy</span></a>
</li>
<li>
<a href="/courses/biology/chapters/45" data-ajax="true"> <span class="number">45</span>
<span class="title">Water and Solute Management in Plants</span></a>
</li>
<li>
<a href="/courses/biology/chapters/46" data-ajax="true"> <span class="number">46</span>
<span class="title">Plant Nutrition</span></a>
</li>
<li>
<a href="/courses/biology/chapters/47" data-ajax="true"> <span class="number">47</span>
<span class="title">Flowering Plants</span></a>
</li>
<li>
<a href="/courses/biology/chapters/48" data-ajax="true"> <span class="number">48</span>
<span class="title">Cellular Signaling in Plants</span></a>
</li>
<li>
<a href="/courses/biology/chapters/49" data-ajax="true"> <span class="number">49</span>
<span class="title">Response to External Stimuli in Plants</span></a>
</li>
<li>
<a href="/courses/biology/chapters/50" data-ajax="true"> <span class="number">50</span>
<span class="title">Homeostasis</span></a>
</li>
<li>
<a href="/courses/biology/chapters/51" data-ajax="true"> <span class="number">51</span>
<span class="title">Animal Diet and Nutrition</span></a>
</li>
<li>
<a href="/courses/biology/chapters/52" data-ajax="true"> <span class="number">52</span>
<span class="title">Digestive Systems</span></a>
</li>
<li>
<a href="/courses/biology/chapters/53" data-ajax="true"> <span class="number">53</span>
<span class="title">Circulatory System</span></a>
</li>
<li>
<a href="/courses/biology/chapters/54" data-ajax="true"> <span class="number">54</span>
<span class="title">Respiratory System and Gas Exchange</span></a>
</li>
<li>
<a href="/courses/biology/chapters/55" data-ajax="true"> <span class="number">55</span>
<span class="title">Immunology</span></a>
</li>
<li>
<a href="/courses/biology/chapters/56" data-ajax="true"> <span class="number">56</span>
<span class="title">Water and Waste Management</span></a>
</li>
<li>
<a href="/courses/biology/chapters/57" data-ajax="true"> <span class="number">57</span>
<span class="title">Hormones</span></a>
</li>
<li>
<a href="/courses/biology/chapters/58" data-ajax="true"> <span class="number">58</span>
<span class="title">Endocrine System</span></a>
</li>
<li>
<a href="/courses/biology/chapters/59" data-ajax="true"> <span class="number">59</span>
<span class="title">Reproductive Systems</span></a>
</li>
<li>
<a href="/courses/biology/chapters/60" data-ajax="true"> <span class="number">60</span>
<span class="title">Mammalian Reproduction</span></a>
</li>
<li>
<a href="/courses/biology/chapters/61" data-ajax="true"> <span class="number">61</span>
<span class="title">Embryogenesis</span></a>
</li>
<li>
<a href="/courses/biology/chapters/62" data-ajax="true"> <span class="number">62</span>
<span class="title">Neurons</span></a>
</li>
<li>
<a href="/courses/biology/chapters/63" data-ajax="true"> <span class="number">63</span>
<span class="title">Central Nervous System</span></a>
</li>
<li>
<a href="/courses/biology/chapters/64" data-ajax="true"> <span class="number">64</span>
<span class="title">Sensation and Perception</span></a>
</li>
<li>
<a href="/courses/biology/chapters/65" data-ajax="true"> <span class="number">65</span>
<span class="title">Musculoskeletal System</span></a>
</li>
<li>
<a href="/courses/biology/chapters/66" data-ajax="true"> <span class="number">66</span>
<span class="title">Animal Behavior</span></a>
</li>
<li>
<a href="/courses/biology/chapters/67" data-ajax="true"> <span class="number">67</span>
<span class="title">Evolution and Behavior</span></a>
</li>
<li>
<a href="/courses/biology/chapters/68" data-ajax="true"> <span class="number">68</span>
<span class="title">Introduction to Ecology</span></a>
</li>
<li>
<a href="/courses/biology/chapters/69" data-ajax="true"> <span class="number">69</span>
<span class="title">Demographics and Growth Patterns</span></a>
</li>
<li>
<a href="/courses/biology/chapters/70" data-ajax="true"> <span class="number">70</span>
<span class="title">Community Dynamics</span></a>
</li>
<li>
<a href="/courses/biology/chapters/71" data-ajax="true"> <span class="number">71</span>
<span class="title">Interactions Between the Environment and Organisms</span></a>
</li>
<li>
<a href="/courses/biology/chapters/72" data-ajax="true"> <span class="number">72</span>
<span class="title">Ecosystem Function</span></a>
</li>
<li>
<a href="/courses/biology/chapters/73" data-ajax="true"> <span class="number">73</span>
<span class="title">Conservation of Biodiversity</span></a>
</li>
<li>
<a href="/courses/biology/chapters/74" data-ajax="true"> <span class="number">74</span>
<span class="title">Conservation Issues</span></a>
</li>
</ul>
</div>
<div class="menu_mask"></div>
</div>
</div></div>
</header>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment