defenition of color samples for text and hyperlinks. fitgrd CSS grid.
Created
December 8, 2014 20:29
-
-
Save tankred/f9c8670294a542434ba2 to your computer and use it in GitHub Desktop.
colorpalette
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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">></span> <a href="#">October 31</a></li> | |
| <li><span class="off">></span> <a href="#">Red</a></li> | |
| <li><span class="on">></span> <a href="#">The vase and the mirror</a></li> | |
| <li><span class="off">></span> <a href="#">Party</a></li> | |
| <li><span class="off">></span> <a href="#">Lullaby for Lena</a></li> | |
| <li><span class="off">></span> <a href="#">Jan</a></li> | |
| <li><span class="off">></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/>> 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 --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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