120 lines
2.6 KiB
Text
120 lines
2.6 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="apple-touch-icon" href="https://data.lukasrosier.com/appsmall.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title></title>
|
|
<base href="https://www.lukasrosier.com">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
body {
|
|
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
background-image: radial-gradient(circle, antiquewhite 0.5px, #E0E722 1px);
|
|
background-size: 10px 10px;
|
|
background-color: ghostwhite;
|
|
font-size: clamp(5rem, 15vw, 20rem);
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
}
|
|
|
|
.frame {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.frame div {
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
a:link {
|
|
background-color: ghostwhite;
|
|
text-decoration: none;
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem;
|
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: hotpink;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-image: radial-gradient(circle, #191919 0.5px, #040d14 1px);
|
|
background-size: 10px 10px;
|
|
}
|
|
|
|
a:link {
|
|
background-color: #1c1b1a;
|
|
box-shadow: black 0px 3px 8px;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: #E0E722;
|
|
}
|
|
}
|
|
@media (orientation:landscape) {
|
|
body {
|
|
font-size: clamp(2rem, 6vw, 10rem);
|
|
}
|
|
|
|
.frame {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: auto auto auto auto auto auto auto auto auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="frame">
|
|
<div>
|
|
<a href="https://data.lukasrosier.com">📁</a>
|
|
</div>
|
|
<div>
|
|
<a href="mailto:mail@lukasrosier.com">📧</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://lukasrosier.com/book">📖</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://lukasrosier.com/friends">🎉</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://git.lukasrosier.com">🐙</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://lukasrosier.com/now">🚀</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://lukasrosier.com/about">📝</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://need.lukasrosier.com" title="NEEDS">🤲</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://lukasrosier.com/roadmap" title="ROADMAP">🗺️</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|