datenspuren layout: 1000 little papercuts
This commit is contained in:
parent
d37fb4e3eb
commit
d11341b71d
|
@ -12,7 +12,7 @@ body {
|
||||||
vertical-align:top;
|
vertical-align:top;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-right: 160px;
|
padding-right: 160px;
|
||||||
padding-bottom: 64px;
|
padding-bottom: 8px;
|
||||||
min-height: 800px;
|
min-height: 800px;
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
@ -40,11 +40,13 @@ img {
|
||||||
width: 136px;
|
width: 136px;
|
||||||
}
|
}
|
||||||
#c3d2 {
|
#c3d2 {
|
||||||
margin-left: 32px;
|
margin-left: 16px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
#c3d2 img {
|
#c3d2 img {
|
||||||
width: 98px;
|
width: 98px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
margin: 1em 32px 1em 16px;
|
||||||
}
|
}
|
||||||
header, article, footer {
|
header, article, footer {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
@ -69,8 +71,14 @@ header h1, header h2 {
|
||||||
padding:0;
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
}
|
}
|
||||||
header h1 {letter-spacing: 0.2em;}
|
header h1 {
|
||||||
header h2 {letter-spacing: 0.15em;}
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
header h2 {
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
font-variant: small-caps;
|
||||||
|
}
|
||||||
header, aside {
|
header, aside {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
@ -79,6 +87,8 @@ aside {
|
||||||
float:right;
|
float:right;
|
||||||
text-align:right;
|
text-align:right;
|
||||||
margin-right: -152px;
|
margin-right: -152px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #ddd;
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
/* background:rgba(0,0,0,.1); */
|
/* background:rgba(0,0,0,.1); */
|
||||||
|
@ -130,10 +140,12 @@ date {
|
||||||
clear: right;
|
clear: right;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
position:relative;
|
position:relative;
|
||||||
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: -160px;
|
margin-right: -160px;
|
||||||
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
footer ul, aside ul {
|
footer ul, aside ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
@ -144,6 +156,7 @@ footer li {
|
||||||
}
|
}
|
||||||
footer li:after {
|
footer li:after {
|
||||||
content: "000";
|
content: "000";
|
||||||
|
color: #ccc;
|
||||||
}
|
}
|
||||||
footer li:last-child:after {
|
footer li:last-child:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
@ -46,15 +46,27 @@
|
||||||
</aside>
|
</aside>
|
||||||
<header>
|
<header>
|
||||||
<a href="index.html">
|
<a href="index.html">
|
||||||
<h1>DATENSPUREN</h1>
|
<h1>Datenspuren</h1>
|
||||||
<h2>PRIVACY BY DESIGN</h2>
|
<h2>Privacy by Design</h2>
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
<nav>
|
||||||
|
<div>
|
||||||
|
<a href="info.html">
|
||||||
|
<img src="./images/info.svg" width="64" height="64"/>
|
||||||
|
<span>Informationen</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="ort.html">
|
<a href="ort.html">
|
||||||
<img src="./images/map.svg" width="64" height="64"/>
|
<img src="./images/map.svg" width="64" height="64"/>
|
||||||
<span>Scheune, Dresden</span>
|
<span>Ort</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="fahrplan.html">
|
||||||
|
<img src="./images/calendar.svg" width="64" height="64"/>
|
||||||
|
<span>Programm</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -69,18 +81,6 @@
|
||||||
<span>Mitschnitte</span>
|
<span>Mitschnitte</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<a href="fahrplan.html">
|
|
||||||
<img src="./images/calendar.svg" width="64" height="64"/>
|
|
||||||
<span>Programm</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="info.html">
|
|
||||||
<img src="./images/info.svg" width="64" height="64"/>
|
|
||||||
<span>Informationen</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="c3d2">
|
<div id="c3d2">
|
||||||
<a href="http://c3d2.de">
|
<a href="http://c3d2.de">
|
||||||
<img src="images/c3d2.svg"/>
|
<img src="images/c3d2.svg"/>
|
||||||
|
|
Loading…
Reference in New Issue