-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
131 lines (115 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Schnark’s Homepage</title>
<meta name="viewport" content="width=device-width">
<link rel="icon" href="main-favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="main-favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="main.css">
<style>
h1 {
text-align: center;
margin: 0.5em;
}
a.big {
display: block;
color: inherit !important;
text-decoration: none !important;
border: solid thin;
border-radius: 5px;
min-height: 4.5em;
padding: 0.5em 0.5em 0.5em 6em;
margin: 2em 0;
position: relative;
}
a.big:hover,
a.big:focus,
a.big:active {
border-color: #226;
transition: all 0.5s;
box-shadow: 0 0 5px #00f;
}
a.big h2 {
margin-top: 0;
}
a.big img {
width: 64px;
position: absolute;
top: 0.75em;
left: 0.75em;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
@keyframes img {
0% {
transform: none;
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(-2deg);
}
75% {
transform: rotate(5deg);
}
100% {
transform: none;
}
}
a.big:hover img,
a.big:focus img {
animation: img 0.5s;
}
a.big:active img {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
address {
margin-top: 4em;
border-top: thin solid;
font-size: small;
font-variant: normal;
font-style: normal;
opacity: 0.9;
}
address p {
padding-bottom: 1em;
}
</style>
</head><body>
<h1>Schnark’s Homepage</h1>
<p>Welcome to my homepage! Here is an overview over my projects.</p>
<a href="ffos-apps.html" class="big">
<h2>Apps for Firefox OS</h2>
<img alt="" src="ffos-favicon.ico">
<p>I developed several apps for FFOS. Since they are based on web technologies, most of them also run in any browser. <span class="more">→ more</span></p>
</a>
<a href="lewis-carroll/html/index.html" class="big">
<h2>The (almost really) Complete Works of Lewis Carroll</h2>
<img alt="" src="lewis-carroll/res/favicon.svg">
<p>A collection of the works of Lewis Carroll, both as HTML and PDF, with all images and many almost unknown works. <span class="more">→ more</span></p>
</a>
<a href="js13k.html" class="big">
<h2>Games for js13kGames</h2>
<img alt="" src="js13k.svg">
<p>I created several games for the js13kGames competition. <span class="more">→ more</span></p>
</a>
<h2>And more!</h2>
<p>That’s not all! There is also Carroll’s interactive story about <a href="mr-c-mr-t/">Mr. C and Mr. T</a>, and other projects, which are all listed in <a href="overview.html">this overview</a>.</p>
<address>
<p>
All these projects and more contributions are also listed on <a href="https://github.com/Schnark">my profile page</a> on <a href="https://github.com">GitHub</a>. If you want to contact me without a GitHub account, you can send an e-mail to my Gmail account called <code>listenleser</code>. You can use both English and German.
</p>
<p lang="de">
Alle diese Projekte und weitere Beiträge sind auch auf <a href="https://github.com/Schnark">meiner Profilseite</a> bei <a href="https://github.com">GitHub</a> aufgelistet. Wenn du mich ohne ein GitHub-Konto kontaktieren willst, kannst du eine E-Mail an mein Gmail-Konto senden, das den Namen <code>listenleser</code> hat. Du kannst sowohl Deutsch als auch Englisch verwenden. <a href="legal.html">Rechtliches Blabla</a> für diejenigen, die so etwas gerne lesen.
</p>
</address>
</body></html>