Skip to content

Instantly share code, notes, and snippets.

@tankred
Created December 8, 2014 20:29
Show Gist options
  • Save tankred/f9c8670294a542434ba2 to your computer and use it in GitHub Desktop.
Save tankred/f9c8670294a542434ba2 to your computer and use it in GitHub Desktop.
colorpalette
<!-- fork 2 -->
<!-- START sample content -->
<article class="slide first-content">
<div class="center">
<div class="row">
<section class="fg6">
<h1>Navigation</h1>
<h2></h2>
<ul>
<li><span class="off">&gt</span> <a href="#">October 31</a></li>
<li><span class="off">&gt</span> <a href="#">Red</a></li>
<li><span class="on">&gt</span> <a href="#">The vase and the mirror</a></li>
<li><span class="off">&gt</span> <a href="#">Party</a></li>
<li><span class="off">&gt</span> <a href="#">Lullaby for Lena</a></li>
<li><span class="off">&gt</span> <a href="#">Jan</a></li>
<li><span class="off">&gt</span> <a href="#">Time will show/Interventions</a></li>
</ul>
</section>
<section class="fg6"><h1>Headline</h1>
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, <a href="#4">sanctus quaerendum</a> et vix, at vel paulo oratio. His enim choro cu, has erat adversarium ex. <b>Vix ut minimum blandit</b>, ea novum minimum sed. Sapientem tincidunt no pri, petentium intellegat constituam eam no. Cu quo velit nonumy.
</p><p>
<a href="#5">Mea id verear meliore tractatos</a>
</p></section>
<section class="fg2"><div class="colorpalette rgb01"></div><span class="url">color #01 <br/><a href="#"> hyperlink</a></span></section>
<section class="fg2"><div class="colorpalette rgb03"></div><span class="vurl">color #03<br/><a href="#">visited link</a></span></section>
<section class="fg2"><div class="colorpalette rgb06"></div><span class="aurl">color #06 <br/>&gt; nav. link</span><br/></section>
<section class="fg2"><div class="colorpalette rgb02"></div><span class="rgbf02">color #02<br/> text</span></section>
<section class="fg2"><div class="colorpalette rgb04"></div><span class="rgbf04">color #04<br/> <b>bold text</b></span></section>
<section class="fg2"><div class="colorpalette rgb05"></div><span class="rgbf02">color #05<br/>background<br/>white</span></section>
</div>
</div>
</article>
<!-- END sample content -->
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;vertical-align:top}.center{max-width:80em;margin:0 auto;position:relative}.row{margin:0 .5em;padding:2% 1em 0;overflow:hidden;height:1%;*zoom:1;min-height:1%}.clearfix{height:0;clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12{margin:0 2% 0;padding:0;float:left;position:relative}.fg12{width:96%}.fg11{width:87.66%}.fg10{width:79.33%}.fg9{width:71%}.fg8{width:62.66%}.fg7{width:54.33%}.fg6{width:46%}.fg5{width:37.66%}.fg4{width:29.33%}.fg3{width:21%}.fg2{width:12.66%}.fg1{width:4.33%}.push12{margin-left:100%}.push11{margin-left:93.66%}.push10{margin-left:85.33%}.push9{margin-left:77%}.push8{margin-left:68.66%}.push7{margin-left:60.33%}.push6{margin-left:52%}.push5{margin-left:43.66%}.push4{margin-left:35.33%}.push3{margin-left:27%}.push2{margin-left:18.66%}.push1{margin-left:10.33%}.fg-no-gutter{padding:0 3.5%;margin-top:0;margin-bottom:0}.fg-no-gutter > [class*="fg"]{margin:0;padding:0;float:left;position:relative}.fg-no-gutter img{max-width:100%;max-height:100%}.fg-no-gutter .fg12{width:100%}.fg-no-gutter .fg11{width:91.66%}.fg-no-gutter .fg10{width:83.33%}.fg-no-gutter .fg9{width:75%}.fg-no-gutter .fg8{width:66.66%}.fg-no-gutter .fg7{width:58.33%}.fg-no-gutter .fg6{width:50%}.fg-no-gutter .fg5{width:41.66%}.fg-no-gutter .fg4{width:33.33%}.fg-no-gutter .fg3{width:25%}.fg-no-gutter .fg2{width:16.66%}.fg-no-gutter .fg1{width:8.33%}.fg-no-gutter .push12{margin-left:100%}.fg-no-gutter .push11{margin-left:91.66%}.fg-no-gutter .push10{margin-left:83.33%}.fg-no-gutter .push9{margin-left:75%}.fg-no-gutter .push8{margin-left:66.66%}.fg-no-gutter .push7{margin-left:58.33%}.fg-no-gutter .push6{margin-left:50%}.fg12 .push5{margin-left:41.66%}.fg-no-gutter .push4{margin-left:33.33%}.fg-no-gutter .push3{margin-left:25%}.fg-no-gutter .push2{margin-left:16.66%}.fg-no-gutter .push1{margin-left:8.33%}.fg-no-mobile{display:block !important}.fg-no-desktop{display:none !important}@media screen and (max-width: 36.5em ){.row{padding:0 1em;margin:0}.fg1,.fg2{width:46%;margin-bottom:1em}.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12{margin:0 2% 1em;padding:0;width:96%}.fg-no-gutter > [class*="fg"]{width:50%}.fg-no-mobile{display:none !important}.fg-no-desktop{display:block !important}}
body {
font: 300 1em/1.5em 'Letter Gothic Std','Andala',sans-serif;
}
.slide{
padding: 2em 0;
}
.first-content{
}
.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
background: #fff;
color: #333;
padding: 2em 0;
font-size: .9em;
margin-bottom: 2%;
text-align: center;
}
a:link, span.url {
color: #333;
/*text-decoration: underline;
text-decoration-style:dotted;*/
}
a:visited, span.vurl {
color: #333;
}
a:hover {
color: #333;
}
a:active, span.aurl {
color: #333;
}
p,h1,h2 {
padding:0 16px;
}
p,h1,h2,li {
text-align:left;
color:#333;
}
.colorpalette {
margin-left:1.9em;
width: 6em;
height: 6em;
border:1px solid #000;
}
.rgbf01,
.rgbf02,
.rgbf03,
.rgbf04,.rgbf06 {
color:#333;
}
.rgbf05 {
}
.rgb01,
.rgb02,
.rgb03,
.rgb04, .rgb06 {
background-color:#333;
}
.rgb05 {
background-color:#fff;
}
li {list-style-type:none;}
.off {color:#fff;}
li a {text-decoration:none;}
li:hover span {color:#333;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment