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