<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Florian Brucker</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|EB+Garamond' rel='stylesheet' type='text/css'>
<link rel="openid.server" href="http://www.florianbrucker.de/openid/config.php">
<link rel="openid.delegate" href="http://www.florianbrucker.de/openid/config.php">
<style>
body {
padding: 5%;
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
* {
font-family: 'EB Garamond', serif;
}
h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
#content {
margin: auto;
}
a {
color: #000;
}
a:hover {
color: #444;
}
/* Link icons layout for small and medium screens */
@media (max-width: 679px) {
#links {
width: 100%;
display: table;
table-layout: fixed;
padding: 0;
}
#links li {
display: table-cell;
width: auto;
}
#links li a {
display: block;
}
#links img {
vertical-align: middle;
}
}
/* Small portrait screens */
@media (orientation: portrait) and (max-width: 400px) {
#portrait {
width: 100%;
}
h1 {
font-size: 12vw;
text-align: center;
margin: 0;
}
#info {
font-size: 7vw;
margin: 0 0 1em 0;
line-height: 1.2em;
}
#links li {
text-align: center;
}
#links img {
height: 8vw;
}
}
/* Small/medium landscape and medium portrait screens */
@media (orientation: landscape) and (max-width: 679px),
(orientation: portrait) and (min-width: 401px) and (max-width: 679px) {
#portrait {
height: 30vw;
width: 30vw;
margin-right: 4vw;
}
h1 {
font-size: 8vw;
margin: 0;
}
#links img {
height: 5.5vw;
}
#content {
display: flex;
align-items: center;
}
#info {
font-size: 4vw;
margin: 0;
}
}
/* Large Screens */
@media (min-width: 680px) {
#portrait {
height: 150px;
width: 150px;
margin-right: 1em;
}
h1 {
font-size: 250%;
margin: 0;
}
#info {
font-size: 125%;
margin: 0.5em 0 1em 0;
}
#links img {
height: 30px;
}
#content {
display: flex;
align-items: center;
}
#links {
list-style-type: none;
padding: 0;
}
#links li {
display: inline-block;
margin-right: 1em;
}
}
</style>
<head>
<body>
<div id="content">
<img id="portrait" src="portrait.png"/>
<div id="text">
<h1>Florian Brucker</h1>
<p id="info">
I'm a software developer from
<a href="https://en.wikipedia.org/wiki/Karlsruhe">Karlsruhe</a>,
Germany.
</p>
<ul id="links">
<li>
<a href="mailto:mail@florianbrucker.de">
<img title="E-Mail" src="email.png"/>
</a>
</li>
<li>
<a href="https://github.com/torfsen">
<img title="GitHub" src="github.png"/>
</a>
</li>
<li>
<a href="https://stackoverflow.com/users/857390">
<img title="StackOverflow" src="stackoverflow.png"/>
</a>
</li>
<li>
<a href="https://de.linkedin.com/in/florianbrucker">
<img title="LinkedIn" src="linkedin.png"/>
</a>
</li>
<li>
<a href="https://www.xing.com/profile/Florian_Brucker2">
<img title="Xing" src="xing.png"/>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>