datenspuren layout: 1000 little papercuts

This commit is contained in:
Astro 2013-05-14 16:59:03 +02:00
parent d37fb4e3eb
commit d11341b71d
2 changed files with 32 additions and 19 deletions

View File

@ -12,7 +12,7 @@ body {
vertical-align:top;
padding-left: 8px;
padding-right: 160px;
padding-bottom: 64px;
padding-bottom: 8px;
min-height: 800px;
max-width: 1024px;
margin: 0 auto;
@ -40,11 +40,13 @@ img {
width: 136px;
}
#c3d2 {
margin-left: 32px;
margin-left: 16px;
text-align: center;
}
#c3d2 img {
width: 98px;
height: 32px;
margin: 1em 32px 1em 16px;
}
header, article, footer {
padding: 8px;
@ -69,8 +71,14 @@ header h1, header h2 {
padding:0;
margin:0;
}
header h1 {letter-spacing: 0.2em;}
header h2 {letter-spacing: 0.15em;}
header h1 {
letter-spacing: 0.2em;
text-transform: uppercase;
}
header h2 {
letter-spacing: 0.15em;
font-variant: small-caps;
}
header, aside {
text-align: left;
}
@ -79,6 +87,8 @@ aside {
float:right;
text-align:right;
margin-right: -152px;
font-size: 0.8em;
color: #ddd;
}
article {
/* background:rgba(0,0,0,.1); */
@ -130,10 +140,12 @@ date {
clear: right;
font-size: 0.8em;
position:relative;
margin-top: 0.2em;
}
footer {
text-align: center;
margin-right: -160px;
font-size: 0.8em;
}
footer ul, aside ul {
list-style: none;
@ -144,6 +156,7 @@ footer li {
}
footer li:after {
content: "000";
color: #ccc;
}
footer li:last-child:after {
content: "";

View File

@ -46,15 +46,27 @@
</aside>
<header>
<a href="index.html">
<h1>DATENSPUREN</h1>
<h2>PRIVACY BY DESIGN</h2>
<h1>Datenspuren</h1>
<h2>Privacy by Design</h2>
</a>
</header>
<nav>
<div>
<a href="info.html">
<img src="./images/info.svg" width="64" height="64"/>
<span>Informationen</span>
</a>
</div>
<div>
<a href="ort.html">
<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>
</div>
<div>
@ -69,18 +81,6 @@
<span>Mitschnitte</span>
</a>
</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">
<a href="http://c3d2.de">
<img src="images/c3d2.svg"/>