diff options
| author | Mathias Magnusson <mathias@magnusson.space> | 2023-08-21 19:26:58 +0200 |
|---|---|---|
| committer | Mathias Magnusson <mathias@magnusson.space> | 2023-08-21 20:45:49 +0200 |
| commit | afcec91855d15349f068315eebe131f936ee10d6 (patch) | |
| tree | 03ac280d5a320baa68a80def56723ca23e3083c4 /jobs/homepage/index.html | |
| parent | e9336eea2aa118216b0a833e19b19321e57d22e3 (diff) | |
| download | garm-afcec91855d15349f068315eebe131f936ee10d6.tar.gz | |
Add home page
Diffstat (limited to 'jobs/homepage/index.html')
| -rw-r--r-- | jobs/homepage/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/jobs/homepage/index.html b/jobs/homepage/index.html new file mode 100644 index 0000000..b31aa6d --- /dev/null +++ b/jobs/homepage/index.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html lang="sv"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>magnusson.space</title> + <style> +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin-top: 5rem; + background-color: #1d2021; + color: #ebdbb2; + font-family: 'Roboto', sans-serif; +} + +h1 { + text-align: center; +} + +section { + padding: 1rem; + width: 80%; + margin: 1rem auto; +} + +.wrapper { + background-color: #282828; + padding: 1rem; + border-radius: 3px; +} + +.grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + gap: 20px; +} + +h2 { + margin-bottom: 0.5rem; +} + +img { + vertical-align: bottom; +} + +a { + color: #689d6a; + text-decoration: none; +} + +.card { + padding: 0.5rem; + transition: color 0.2s, background-color 0.2s; + border-radius: 3px; +} + +.card:hover { + color: #8ec07c; + background-color: #fff1; +} + +a:not(.card):hover { + text-decoration: underline; +} + +code { + overflow-wrap: anywhere; +} + +button { + background: none; + border: none; + color: #689d6a; + cursor: pointer; + transition: color 0.2s; +} + +button:hover { + color: #8ec07c; +} + + </style> +</head> +<body> + <h1>Mathias Magnusson</h1> + <section> + <h2>Sidor</h2> + <div class="wrapper grid"> + <a class="card" href="https://raytracer.magnusson.space">Raytracer</a> + <a class="card" href="https://särskildakommandorörelsegruppen.se"> + Särskilda kommandorörelsegruppen + </a> + </div> + </section> + <section> + <h2>Kontaktinfo</h2> + <div class="wrapper"> + <p>e-post: <img src="/epost.png" /></p> + <p style="display: flex; align-items: center; flex-wrap: wrap"> + <a href="https://github.com/FiloSottile/age">age</a>-nyckel: + <div class="copy"> + <code style="margin: 0 1ch">age1yubikey1q2gkk5zhme43j9mzv8pyd22d60vv5v73aupcqw09fz8apwhw4qw3yd3n0w5</code> + <button style="width: 1em; height: 1em; position: relative; + flex-shrink: 0"> + <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -10%; + left: -10%" width="120%" height="120%" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> + <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> + <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> + </svg> + </button> + </div> + <div class="copy"> + <code style="margin: 0 1ch">age1yubikey1qtppenqpqjtll78q0tfcgnm4dczy7nakmj5l2z3syyqfcq27kqx32hh72rt</code> + <button style="width: 1em; height: 1em; position: relative; + flex-shrink: 0"> + <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -10%; + left: -10%" width="120%" height="120%" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> + <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> + <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> + </svg> + </button> + </div> + </p> + </div> + </section> + + <script> + if ("clipboard" in navigator) { + for (const div of document.querySelectorAll(".copy")) { + let showinfo = false; + const button = div.querySelector("button"); + const key = div.querySelector("code"); + + button.addEventListener("click", async () => { + if (showinfo) return; + + const content = button.innerHTML; + await navigator.clipboard.writeText(key.textContent); + + showinfo = true; + button.textContent = "Kopierad!"; + setTimeout(() => { + button.innerHTML = content; + showinfo = false; + }, 1000); + }); + } + } else { + for (const button of document.querySelectorAll(".copy button")) { + button.remove(); + } + } + </script> +</body> +</html> |