styling
This commit is contained in:
@@ -119,12 +119,12 @@ export default defineComponent({
|
||||
onBeforeUnmount(() => tooltip.hide());
|
||||
|
||||
return () => <>
|
||||
<div class="tooltip-container"
|
||||
<span class="tooltip-container"
|
||||
{...attrs}
|
||||
onMouseenter={(e) => tooltip.show(props.tooltip, e.pageX, e.pageY)}
|
||||
onMouseleave={() => tooltip.hide()}>
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
</span>
|
||||
</>;
|
||||
},
|
||||
});
|
||||
|
||||
@@ -28,42 +28,59 @@ export const routes: RouteRecordRaw[] = [
|
||||
];
|
||||
|
||||
const styles = css`
|
||||
.supercontainer {
|
||||
.dj-blog-root {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
height: 100vh;
|
||||
|
||||
.container {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dj-palette3);
|
||||
text-decoration: solid line;
|
||||
|
||||
&:visited {
|
||||
color: var(--dj-visited);
|
||||
.container {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: 40px;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
footer {
|
||||
color: gray;
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 20px;
|
||||
font-style: italic;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dj-palette3);
|
||||
text-decoration: solid line;
|
||||
|
||||
&:visited {
|
||||
color: var(--dj-visited);
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: 40px;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
a, a:visited {
|
||||
color: var(--dj-palette3);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.container {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -80,7 +97,7 @@ export default defineComponent({
|
||||
return () => (
|
||||
<>
|
||||
<div ref={carrier} class="tooltip-carrier" />
|
||||
<div class="supercontainer">
|
||||
<div class="dj-blog-root">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
|
||||
@@ -102,14 +119,15 @@ export default defineComponent({
|
||||
)),
|
||||
}}
|
||||
</RouterView>
|
||||
<footer>
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="spacer" />
|
||||
<footer>
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,60 +1,82 @@
|
||||
import { defineComponent, ref, type Ref } from "vue";
|
||||
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`
|
||||
:root {
|
||||
--subject-spacing: 40px;
|
||||
body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.resource {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title_name {
|
||||
font-size: 48px;
|
||||
color: var(--dj-palette3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.supercontainer {
|
||||
padding-top: 3em;
|
||||
.dj-home-root {
|
||||
margin: auto;
|
||||
}
|
||||
width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.main {
|
||||
width: 50em;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.main {
|
||||
width: 35em;
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
}
|
||||
:root {
|
||||
--subject-spacing: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.title_name {
|
||||
font-size: 30px;
|
||||
li {
|
||||
list-style: disclosure-closed;
|
||||
}
|
||||
.main {
|
||||
width: 20em;
|
||||
padding: 20px;
|
||||
|
||||
a {
|
||||
color: var(--dj-palette3);
|
||||
|
||||
&:visited {
|
||||
color: var(--dj-visited);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dj-palette3);
|
||||
footer {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--dj-visited);
|
||||
@media only screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
|
||||
.dj-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -70,31 +92,39 @@ export default defineComponent({
|
||||
|
||||
return () => <>
|
||||
<div ref={tooltipCarrier} class="tooltip-carrier" />
|
||||
<div class="supercontainer">
|
||||
<div class="dj-home-root">
|
||||
<div>
|
||||
<div class="dj-title title_name">
|
||||
<div class="dj-title">
|
||||
<DjTooltip tooltip="Easily the coolest guy out there.">
|
||||
<span>dj ledda</span>
|
||||
<div class="underline">
|
||||
<span class="pad">_ _ _ _ _ _ _ __</span><span>dj ledda</span>
|
||||
</div>
|
||||
</DjTooltip>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="subject">
|
||||
<div class="resourcelist">
|
||||
<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
|
||||
@@ -104,16 +134,22 @@ export default defineComponent({
|
||||
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
|
||||
@@ -121,15 +157,18 @@ export default defineComponent({
|
||||
K A D I: Online Yatzy Scoresheets
|
||||
</DjTooltip>
|
||||
</a>
|
||||
<DjEmail>
|
||||
<DjTooltip class="resource" tooltip="You'll see my address when you click here.">
|
||||
Click here to get in touch
|
||||
</DjTooltip>
|
||||
</DjEmail>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user