https://nebulon.de/

1<html>
2<head>
3<title> Johannes Zellner </title>
4
5<link id="favicon" type="image/jpeg" rel="icon" href="avatar.jpeg">
6
7<style>
8
9@font-face {
10    font-family: 'Maven Pro Foo';
11    src: url(maven-pro.regular.ttf);
12}
13
14body {
15    font-family: 'Maven Pro Foo', sans-serif;
16    padding: 0;
17    margin: 0;
18    height: 100%;
19    width: 100%;
20    background: linear-gradient(45deg, #00b7ff 0%,#ffffc7 100%);
21}
22
23.left {
24    min-height: 100%;
25    width: 50%;
26    float: left;
27}
28
29.container {
30    background-image: url('./separator.svg');
31    background-repeat: no-repeat;
32    background-position: left;
33    background-size: cover;
34    width: 50%;
35    min-height: 100%;
36    float: right;
37    transition: all 150ms;
38}
39
40.item {
41    text-align: right;
42    display: block;
43    font-size: 32px;
44    padding: 50px 40px;
45}
46
47a, a:hover, a:active {
48    color: black;
49    text-decoration: none;
50    transition: all 100ms;
51}
52
53a:hover {
54    color: #00b7ff;
55}
56
57.avatar {
58    background-image: url('avatar.jpeg');
59    width: 128px;
60    height: 128px;
61    border-radius: 64px;
62    margin: auto;
63    background-size: cover;
64    background-repeat: no-repeat;
65    margin: 50px;
66}
67
68.social-item {
69    font-size: 18px;
70    position: absolute;
71    left: 40px;
72    bottom: 30px;
73}
74
75a.social-item:hover {
76    color: white;
77}
78
79</style>
80
81</head>
82
83<body>
84
85<div class="left">
86    <div class="avatar"></div>
87</div>
88
89<div class="container">
90    <a class="item" href="https://cloudron.io">Cloudron</a>
91    <a class="item" href="https://git.cloudron.io/cloudron/surfer">Surfer</a>
92    <a class="item" href="https://getcubby.org">Cubby</a>
93    <a class="item" href="https://meemo.minimal-space.de">Meemo</a>
94    <a class="item" href="https://pankow.nebulon.de">Pankow</a>
95    <!-- <a class="item" href="https://minimal-space.de">Minimal Space</a> -->
96</div>
97
98<a class="social-item" rel="me" href="https://mastodon.nebulon.de/@nebulon">> Mastodon</a>
99
100</body>
101</html>