-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (111 loc) · 10.5 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
132
133
134
<!doctype html>
<html lang="en-US" class="no-js">
<head>
<meta charset="utf-8">
<title>the matt files (dot) com</title>
<meta name="description" content="the matt files (dot) com is the personal website of matt keehner. it shows a picture of penpen, his penguin tattoo.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.no-js').classList.remove('no-js');
});
function fontLoaded() {
document.querySelector('#js-css').id = 'css';
var css = document.querySelector('#css');
css.onload = null;
css.rel = 'stylesheet';
document.querySelector('html').classList.add('font-loaded');
}
</script>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch&display=swap" as="style" id="js-css" onload="fontLoaded();"> -->
<!-- <noscript> -->
<link rel="stylesheet" id="css" href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch&display=swap">
<style>
.no-js {
font-family: 'Grenze Gotisch', Times New Roman, serif;
font-size-adjust: none;
}
</style>
<!-- </noscript> -->
<style>
:root {
color-scheme: light dark;
}
html,
html[dark="false"] {
--body-bg-color: #EDEDED;
--font-color: #121212;
}
html[dark="true"] {
--body-bg-color: #121212;
--font-color: #EDEDED;
}
html {
-webkit-text-size-adjust: 100%;
background-color: var(--body-bg-color);
color: var(--font-color);
line-height: 1.15;
font-family: Times New Roman, serif;
font-size-adjust: 0.377;
transition: color 0.66s ease-in-out, background-color 0.66s ease-in-out;
}
.font-loaded {
font-family: 'Grenze Gotisch', Times New Roman, serif;
font-size-adjust: none;
/* font-size-adjust: 0.5425; */
}
body {
margin: 0;
}
main {
display: block;
}
html,
body,
#site {
height: 100%;
}
#site {
display: grid;
grid-template-rows: minmax(0, 1fr);
justify-content: center;
overflow: hidden;
place-items: center;
}
#penpen {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#title {
color: var(--font-color);
font-size: clamp(2em, (13vw + 1em), 20em);
margin: 0.25em 0.25em 0.5em;
max-width: 100%;
white-space: nowrap;
}
@media (orientation: landscape) {
#title {
font-size: clamp(2em, (15vw + 1em), 4em);
}
}
@media (orientation: landscape) and (min-height: 768px) {
#title {
font-size: clamp(2em, (15vw + 1em), 10em);
}
}
</style>
<link rel="icon"href="./favicon.ico">
<link rel="apple-touch-icon" href="assets/icons/icon-192x192.png">
<link rel="manifest" href="./site.webmanifest">
<meta name="theme-color" content="#FF838B">
</head>
<body>
<main id="site">
<svg id="penpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><path fill="#2F2F2F" stroke="#000" stroke-miterlimit="10" d="M492.35 487.105s52.484 87.47 54.963 165.982c2.479 78.512-95.045 106.608-152.068 103.305-57.026-3.303-86.779-25.615-86.779-25.615s7.441-28.098-19.006-96.696c-26.447-68.6-178.515-161.159-147.111-141.324 0 0-64.981-140.171 97.262-51.067 0 0-8.215-55.943 2.531-87.346 0 0 15.917-60.768 96.285-84.528 0 0 114.668-10.157 114.875 97.104l39.048 120.185z"/><path fill="#FEBA0E" stroke="#000" stroke-miterlimit="10" d="M538.977 691.371s10.68 6.573 22.611 5.178c0 0 7.594-5.889 20.609-3.409 0 0 9.144.155 19.68 15.962 0 0 7.438 27.583-19.834 20.609 0 0 16.58 40.29-30.992 18.905 0 0 13.172 31.456-24.484 10.848L486.2 739.178c-.001 0 47.984-23.229 52.777-47.807z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M551.051 748.616s-14.473-33.115-29.14-6.449m60.392-11.782s-10.162-25.822-28.287-15.635"/><path fill="#FEBA0E" stroke="#000" stroke-miterlimit="10" d="M355.211 739.212s1.549-7.283 11.156-9.143c0 0 16.271-2.635 31.768 20.299 0 0 2.324 15.962 1.084 17.045 0 0-7.438 9.298-19.68 11.468 0 0-14.876.775-22.624-2.635 0 0-6.354-.154-12.243-10.071 0 0-9.762 11.468-18.904 12.784 0 0-14.876 5.035-20.61-11.234 0 0-5.268 15.341-26.343 10.071 0 0-14.565-6.198-15.031-36.104 0 0 4.959-12.862 15.188-18.441 0 0 18.904-5.113 26.652 8.059 0 0 1.239-9.085 17.975-9.035-.001-.002 15.496-2.432 31.612 16.937z"/><path fill="#2F2F2F" stroke="#000" stroke-miterlimit="10" d="M492.35 487.105s33.883-31.936 43.801-98.051c9.917-66.114-3.719-115.29-3.719-115.29s-14.465-18.596-26.033 3.305c-11.568 21.9-32.645 86.363-50.413 91.323-17.771 4.958-26.034 40.497-8.265 56.202 17.77 15.704 44.629 62.511 44.629 62.511z"/><path fill="#FFF" stroke="#000" stroke-miterlimit="10" d="M449.166 341.947s-95.66-65.912-152.686 45.04c0 0-23.143 63.189 84.709 138.811 0 0-29.337 80.162-26.859 98.757 0 0 5.373 57.443 34.301 71.491 0 0 37.192 29.753 97.109 8.676 0 0 23.968-4.54 58.265-54.956 0 0 7.853-37.191-12.397-71.902 0 0-19.84-42.942-37.606-51 0 0-4.133-5.366-24.38-5.782l-70.248-75.001-2.064-49.587 49.174-40.082 2.682-14.465z"/><path stroke="#000" stroke-miterlimit="10" d="M331.191 380.014s22.934-2.635 25.568 21.384c0 0 2.014 13.638 0 21.23 0 0-20.609 30.683-40.754.93.001 0-14.566-39.825 15.186-43.544z"/><path fill="#FFF" d="M321.686 383.064s8.371-4.445 3.308 4.232l-5.373 6.407s-7.231 5.68-2.894-4.237l4.959-6.402z"/><path stroke="#000" stroke-miterlimit="10" d="M431.09 368.803s26.547 3.099 15.598-18.386c0 0-5.475-11.676-20.041-8.886 0 0-14.771 2.586-14.462 15.704 0 0-1.755 16.731 18.905 11.568z"/><path fill="#FFF" d="M420.061 345.147s8.602-4.57 4.262 3.099l-4.262 4.185s-8.135 3.254-3.873-3.486l3.873-3.798z"/><path stroke="#000" stroke-miterlimit="10" d="M446.631 425.923s-4.007 57.417 34.717 107.825c0 0-40.059 59.754-80.785-23.367 0 0-43.397-93.137 46.068-84.458z"/><path fill="#FEBA0E" stroke="#000" stroke-miterlimit="10" d="M491.937 423.767s-2.479-39.259-47.108-52.895c0 0-28.513-6.198-44.215 8.266 0 0-27.271 23.548-27.271 59.916 0 0 14.049 94.22 29.75 114.468 15.703 20.246 65.291 39.669 84.299 0 0 0 4.805-23.195-2.168-35.283 0 0-4.186 17.356-17.201 21.539 0 0-13.791 7.903-34.401 1.396 0 0-19.524-8.213-25.568-26.034 0 0-10.538-15.681-10.072-42.086 0 0 6.198-18.193 22.624-34.31 0 0 6.043-5.035 24.639-12.058l46.692-2.919z"/><path fill="#FF4646" stroke="#000" stroke-miterlimit="10" d="M466.936 537.608s-11.467 11.157-35.021 2.479c0 0-7.747-15.806 0-39.359 0 0 6.819-25.725 35.021-20.146 0 0 23.71-1.859 12.088 24.484 0 0-8.832 14.721-18.75 12.396-.001.002-3.1-.308 6.662 20.146z"/><path fill="#3C4579" stroke="#000" stroke-miterlimit="10" d="M362.184 270.396S286.563 125.695 68.998 100.281c0 0 0 16.426 16.736 35.021 0 0 17.665 19.525 20.454 33.472 0 0 1.859 28.823 36.262 27.893l-11.157 1.86 20.145 41.219s7.021 38.43 13.429 45.662c0 0 2.223 8.575 6.406 14.773s5.578 35.64 34.711 54.855c0 0 9.005 15.361 17.593 1.811.103-.159.203-.324.305-.494 0 0-7.979 29.985 11.854 35.253 19.835 5.27 126.448-121.21 126.448-121.21z"/><path fill="#C8B800" stroke="#000" stroke-miterlimit="10" d="m64.602 76.004 33.471 9.607-28.513 17.665-3.41 34.712-17.045-24.794-35.331 2.48 15.807-26.343-15.807-23.244 30.063 5.578L59.952 49.35z"/><path fill="#91745A" stroke="#000" stroke-miterlimit="10" d="M192.966 208.473c-17.768-.825-15.701 58.06-15.701 58.06-7.232 6.198-10.743 15.082-10.743 15.082-2.271 9.298 6.816 13.225 6.816 13.225-4.133 11.783 5.218 19.938 5.218 19.938 2.867 3.486-11.622 37.19-11.622 37.19-2.789-3.099-53.307 127.376-53.307 127.376-3.719 10.848-33.573 63.888-33.573 63.888-9.19 16.116-1.966 22.522-1.966 22.522-3.409 3.618-15.495 17.046-15.495 17.046l34.71 35.54c22.936 3.824 15.188-2.897 15.188-2.897-4.858-2.688-27.84-30.261-27.84-30.261 22.855 4.494 10.691-16.425 10.691-16.425 6.431 1.085 14.256-3.255 14.256-3.255l56.096-147.522c10.228-6.198 43.079-89.411 43.079-89.411 14.257 5.113 17.201-12.552 17.201-12.552-1.55-3.254 10.536-12.707 10.536-12.707 6.974 1.085 11.468-6.508 11.468-6.508.311-10.538 1.55-9.763 1.55-9.763 16.735-16.581 8.934-33.004 8.934-33.004l-65.496-45.562z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M198.578 295.167c-1.866.158-4.159-1.709-5.829-2.338-2.045-.77-5.132-.754-7.334-.288-2.203.466-3.918 1.622-5.999 2.5-2.133.9-4.866.534-6.838 1.625m5.833 19.001c2.722.673 6.967.486 9.833.175 1.377-.15 3.091-.72 4.204-1.472 1.202-.812 1.443-2.027 2.296-3.037"/><path fill="#FF838B" fill-opacity=".5" stroke="#000" stroke-miterlimit="10" d="M264.249 100.208s27.275 3.306 46.281 40.496c0 0 6.613 27.688-3.099 25.827-9.711-1.859-22.11 33.058-8.267 42.355 0 0 25.622-13.222 23.349 15.91 0 0 6.404 9.297 18.182 9.503 0 0 17.355 31.821-10.537 33.885l-31.508 1.032s-17.046 6.973-2.79 20.3c0 0 19.37 44.318-41.374 37.81 0 0-15.342-28.91-19.215.654 0 0 2.867 8.877 9.297 13.99 0 0-9.917 7.439-27.04-6.973 0 0-53.074 16.456-55.244-29.931 0 0-4.803-9.351-14.411-8.731 0 0-27.118-5.423-28.202-32.696 0 0-2.17-13.327 2.944-16.426 0 0 20.145-1.394 31.611-8.212 0 0 29.81 2.324 15.758-28.357 0 0-8.939-15.497-14.208-30.063 0 0-7.593-15.806 12.396-21.075 0 0 49.588-24.949 4.805-56.56 0 0-73.452-15.651-9.298-53.307 0 0 36.881-56.716 67.563 10.383 0 0-32.542 10.072-12.242 42.149 0-.001 27.428 37.296 45.249-1.963z"/><path id="gem" fill="#950000" stroke="#000" stroke-miterlimit="10" d="M257.223 173.348s-10.952-13.634-25.414.828c0 0-8.676-11.986-19.007-1.034 0 0-28.203 7.592-12.552 24.019 0 0-6.198 3.719-6.818 28.823 0 0-13.017 28.512 2.015 66.168l6.353 5.733s9.918-12.397 27.118-5.733c0 0 7.903-13.482 13.017-13.482 0 0 13.326-6.818 13.792-25.413 0 0 3.564-26.228-7.128-20.552-.001 0-1.501-50.009 8.624-59.357z" style="cursor:pointer"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M248.078 233c-1.943-1.711-5.948-4.774-8.557-5.443-2.441-.626-2.922 1.351-4.693 2.387-1.646.963-3.486.751-5.236.487-3.718-.561-6.046.551-9.001 2.819-1.234.948-2.673 2.187-2.957 3.806-.178 1.011.637 1.635.443 2.445-.314 1.319-.801.981-1.574 1.925-1.628 1.986-3.181 4.817-3.675 7.324-.729 3.693 1.118 5.282 3.5 7.25m171 160c2.605-.473 3.498-3.147 6.506-1.256 1.727 1.085 3.18 3.468 3.694 5.312 1.302 4.666-.614 10.722-5.7 11.944"/><path fill="#2F2F2F" stroke="#000" stroke-miterlimit="10" d="M177.128 459.9s-.005-33.491-33.342-56.619c-33.335-23.117-73.456 79.941-18.764 83.529 54.696 3.593 52.106-26.91 52.106-26.91z"/></svg>
<h1 id="title">the matt files</h1>
</main>
<script src="main.js"></script>
</body>
</html>