176 lines
6.2 KiB
TypeScript
176 lines
6.2 KiB
TypeScript
import { defineComponent, ref } from "vue";
|
|
import useHead from "@/useHead.ts";
|
|
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
|
|
import DjEmail from "@/DjEmail.tsx";
|
|
import { addCSS, css } from "@/util.ts";
|
|
|
|
const styles = css`
|
|
body {
|
|
height: 100vh;
|
|
}
|
|
|
|
.dj-home-root {
|
|
margin: auto;
|
|
width: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.resource {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.spacer {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.dj-title {
|
|
font-size: 48px;
|
|
margin: 20px auto;
|
|
color: var(--dj-palette3);
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-flow: row-reverse;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline solid var(--dj-palette3);
|
|
}
|
|
|
|
.pad {
|
|
color: var(--dj-bgpalette1);
|
|
}
|
|
|
|
.main {
|
|
margin: 20px auto;
|
|
text-align: left;
|
|
}
|
|
|
|
li {
|
|
list-style: disclosure-closed;
|
|
}
|
|
|
|
a {
|
|
color: var(--dj-palette3);
|
|
|
|
&:visited {
|
|
color: var(--dj-visited);
|
|
}
|
|
}
|
|
|
|
footer {
|
|
margin-left: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@media only screen and (max-width: 1024px) {
|
|
width: 100%;
|
|
|
|
.dj-title {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
footer {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default defineComponent({
|
|
name: "DjHomeRoot",
|
|
setup() {
|
|
addCSS('DjHomeRoot', styles);
|
|
useHead({ title: "djledda" });
|
|
|
|
const tooltipCarrier = ref<HTMLDivElement | null>(null);
|
|
setupTooltip({ carrier: tooltipCarrier });
|
|
|
|
return () => <>
|
|
<div ref={tooltipCarrier} class="tooltip-carrier" />
|
|
<div class="dj-home-root">
|
|
<div>
|
|
<div class="dj-title">
|
|
<DjTooltip tooltip="Easily the coolest guy out there.">
|
|
<div class="underline">
|
|
<span class="pad">_ _ _ _ _ _ _ __</span><span>dj ledda</span>
|
|
</div>
|
|
</DjTooltip>
|
|
</div>
|
|
<main class="main">
|
|
<ul class="resourcelist">
|
|
<li>
|
|
<a href="/blog">
|
|
<DjTooltip class="resource" tooltip="My musings, my losings, my winnings, my thoughts">
|
|
Blog
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/generative-energy">
|
|
<DjTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
|
|
Generative Energy - Ray Peat Resources
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://git.djledda.net/Ledda">
|
|
<DjTooltip class="resource" tooltip="Check out what I'm coding!">
|
|
My git projects
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/home/muenchen-auf-englisch.html">
|
|
<DjTooltip class="resource" tooltip="
|
|
Authentic historically accurate translations of all of Munich's S-Bahn and U-Bahn
|
|
stations, as well as the main municipalities, into English. You live in Allach? It's
|
|
Axleigh now. Giesing? Nope! Kyesing! This is a WIP.
|
|
">
|
|
München auf Englisch - Munich in English
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://drum-slayer.com">
|
|
<DjTooltip class="resource" tooltip="Small app for designing multitrack looped rhythms with local save and multiple files. Originally built using just vanilla TypeScript and CSS, now with Vue.">
|
|
Drum Slayer
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/somaesque/index.html">
|
|
<DjTooltip class="resource" tooltip="Puzzle solver app for puzzle cubes resembling the original Soma Cube puzzle. Save and edit your own puzzles! Built with Svelte, THREE.js and AssemblyScript.">
|
|
Somaesque
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/kadi/">
|
|
<DjTooltip class="resource" tooltip="Make an account and start saving paper and tracking your Yatzy stats with your
|
|
friends! Make your own rulesets, and more. Built with React, express.js, and
|
|
MongoDB. Currently inactive.">
|
|
K A D I: Online Yatzy Scoresheets
|
|
</DjTooltip>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
</div>
|
|
<div class="spacer" />
|
|
<footer>
|
|
<div class="bottom">
|
|
<div>
|
|
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>;
|
|
},
|
|
});
|