Beitrage zut
Kunst
des 19. und 20.Jahrhunderts
Jahrbuch 1968/69
Institut suisse pour l'étude de l'art
Schweizerisches
Institut für Kunstwissenschaft
Istituto svizzero di studi d'arte
Swiss Institute for Art Research
Swiss Cover Five Columns
HTML
<main class="cf pa3 pa4-m pa5-l mw9 center"> <div class="fr w-100 w-80-l"> <p class="f6"> Beitrage zut </p> <h1 class="f2 f1-l lh-title mt0 mb4 mb5-ns"> Kunst<br class="dn db-ns"> des 19. und 20.Jahrhunderts </h1> </div> <div class="f6 lh-copy fl w-100 mb4"> <div class="fl-ns w-100 w-20-l pr3-m pr5-l"> <p> Jahrbuch <small class="fw6">1968/69</small> </p> </div> <div class="fl-ns w-50-m w-20-l pr3-m pr5-l"> <p> Institut suisse pour l'étude de l'art </p> </div> <div class="fl-ns w-50-m w-20-l pr3-m pr5-l"> <p> Schweizerisches<br class="dn db-l"> Institut für Kunstwissenschaft </p> </div> <div class="fl-ns w-50-m w-20-l pr3-m pr5-l"> <p> Istituto svizzero di studi d'arte </p> </div> <div class="fl-ns w-50-m w-20-l pr3-m pr5-l"> <p> Swiss Institute for Art Research </p> </div> </div> <img src="http://mrmrs.github.io/photos/u/007.jpg" class="db" alt="iceland"/> </main>
css
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .dn { display: none; } .db { display: block; } .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fw6 { font-weight: 600; } .lh-title { line-height: 1.25; } .lh-copy { line-height: 1.5; } .mw9 { max-width: 96rem; } .w-100 { width: 100%; } .pa3 { padding: 1rem; } .mb4 { margin-bottom: 2rem; } .mt0 { margin-top: 0; } .f2 { font-size: 2.25rem; } .f6 { font-size: .875rem; } .center { margin-right: auto; margin-left: auto; } @media screen and (min-width: 30em) { .db-ns { display: block; } .fl-ns { float: left; _display: inline; } .mb5-ns { margin-bottom: 4rem; } } @media screen and (min-width: 30em) and (max-width: 60em) { .w-50-m { width: 50%; } .pa4-m { padding: 2rem; } .pr3-m { padding-right: 1rem; } } @media screen and (min-width: 60em) { .db-l { display: block; } .w-20-l { width: 20%; } .w-80-l { width: 80%; } .pa5-l { padding: 4rem; } .pr5-l { padding-right: 4rem; } .f1-l { font-size: 3rem; } }
Css stats for this component
- Gzipped Size
- 449B
- Selectors
- 31
- Declarations
- 35
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-clears tachyons-display tachyons-floats tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-widths tachyons-spacing tachyons-type-scale tachyons-utilities