alex/daichendt.one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: lots of css fixes

Browse source
This commit is contained in:
Alexander Daichendt 2025-01-03 20:32:29 +01:00
parent 3bf65ae7ab
commit c7e3b2c2d6
10 changed files with 139 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -23,6 +23,7 @@
"@astrojs/sitemap": "^3.2.1", "@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.3", "@astrojs/tailwind": "^5.1.3",
"@cloudflare/workers-types": "^4.20241230.0", "@cloudflare/workers-types": "^4.20241230.0",
"@fontsource/fira-sans": "^5.1.1",
"@fontsource/ubuntu": "^5.1.0", "@fontsource/ubuntu": "^5.1.0",
"@iconify-json/mdi": "^1.2.1", "@iconify-json/mdi": "^1.2.1",
"@iconify-json/simple-icons": "^1.2.14", "@iconify-json/simple-icons": "^1.2.14",

8
pnpm-lock.yaml generated
View file

@ -29,6 +29,9 @@ importers:
'@cloudflare/workers-types': '@cloudflare/workers-types':
specifier: ^4.20241230.0 specifier: ^4.20241230.0
version: 4.20241230.0 version: 4.20241230.0
'@fontsource/fira-sans':
specifier: ^5.1.1
version: 5.1.1
'@fontsource/ubuntu': '@fontsource/ubuntu':
specifier: ^5.1.0 specifier: ^5.1.0
version: 5.1.0 version: 5.1.0
@ -961,6 +964,9 @@ packages:
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@fontsource/fira-sans@5.1.1':
resolution: {integrity: sha512-LdbPwcMEADFjbcMx5sdPcyLi0NnEzP34YO+4d2eOeIKjCu1SyJiG/bBz5K07qm4pyhh2cQveifhFrG7gQDG9wQ==}
'@fontsource/ubuntu@5.1.0': '@fontsource/ubuntu@5.1.0':
resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==} resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==}
@ -4157,6 +4163,8 @@ snapshots:
'@fastify/busboy@2.1.1': {} '@fastify/busboy@2.1.1': {}
'@fontsource/fira-sans@5.1.1': {}
'@fontsource/ubuntu@5.1.0': {} '@fontsource/ubuntu@5.1.0': {}
'@iconify-json/mdi@1.2.1': '@iconify-json/mdi@1.2.1':

1
src/components/BaseHead.astro
View file

@ -4,6 +4,7 @@
import "../styles/global.css"; import "../styles/global.css";
import ubuntuRegularWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-400-normal.woff2?url"; import ubuntuRegularWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-400-normal.woff2?url";
import ubuntuBoldWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-700-normal.woff2?url"; import ubuntuBoldWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-700-normal.woff2?url";
import "@fontsource/fira-sans";
interface Props { interface Props {
title: string; title: string;

13
src/components/NavMenu.astro
View file

@ -17,7 +17,7 @@ import HeaderLink from "./HeaderLink.astro";
</nav> </nav>
</header> </header>
<button id="menu" class="lg:hidden relative w-[30px] h-[30px]"> <button id="nav-menu" class="lg:hidden relative w-[30px] h-[30px]">
<Icon <Icon
name="mdi:menu" name="mdi:menu"
id="iconMenu" id="iconMenu"
@ -33,7 +33,7 @@ import HeaderLink from "./HeaderLink.astro";
</button> </button>
<header <header
id="drawer" id="drawer"
class="fixed top-16 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out" class="fixed z-50 top-14 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out"
> >
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<HeaderLink href="/">Home</HeaderLink> <HeaderLink href="/">Home</HeaderLink>
@ -45,7 +45,7 @@ import HeaderLink from "./HeaderLink.astro";
</header> </header>
<script> <script>
const menu = document.getElementById("menu"); const menu = document.getElementById("nav-menu");
const drawer = document.getElementById("drawer"); const drawer = document.getElementById("drawer");
function toggle() { function toggle() {
@ -68,10 +68,15 @@ import HeaderLink from "./HeaderLink.astro";
document.addEventListener("click", (event) => { document.addEventListener("click", (event) => {
console.log("click outside"); console.log("click outside");
if ( if (
!drawer.classList.contains("hidden") && !drawer.classList.contains("translate-x-full") &&
!drawer.contains(event.target) && !drawer.contains(event.target) &&
!menu.contains(event.target) !menu.contains(event.target)
) { ) {
console.log(
!drawer.classList.contains("translate-x-full"),
!drawer.contains(event.target),
!menu.contains(event.target),
);
toggle(); toggle();
} }
}); });

49
src/components/verification/DataTable.astro
View file

@ -108,7 +108,7 @@ const { cv } = Astro.props;
</span> </span>
</summary> </summary>
<div class="p-6 pt-6 space-y-6"> <div class="p-4 sm:p-6 pt-6 space-y-6">
<div> <div>
<h4 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-200"> <h4 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-200">
1. Verify SHA256 Hash 1. Verify SHA256 Hash
@ -136,27 +136,36 @@ const { cv } = Astro.props;
> >
</li> </li>
<li> <li>
Import the key into your keyring with Import the key into your keyring with<br />
<pre <code
class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2">gpg --import ~/Downloads/pub.key</pre> class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2 break-all"
>gpg --import ~/Downloads/pub.key</code
<li> >
Download the above PGP signature by clicking <button </li>
class="text-blue-500 dark:text-blue-400 hover:underline"
id="download-pgp" <li>
>here Download the above PGP signature by clicking <button
</button> class="text-blue-500 dark:text-blue-400 hover:underline"
</li> id="download-pgp"
<li>Run the following command:</li> >here
</button>
</li>
<li>
Run the following command:<br />
<code
class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6"
>gpg --verify signature.asc cv.pdf</code
>
</li> </li>
<pre
class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6">gpg --verify signature.asc cv.pdf</pre>
<p class="text-gray-600 dark:text-gray-400 mt-2">
If the verification is successful, GPG will indicate so.
<pre
class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2">gpg: Good signature from &quot;Alexander Daichendt &lt;alexander@daichendt.one&gt;&quot; [ultimate]</pre>
</p>
</ol> </ol>
<p class="text-gray-600 dark:text-gray-400 mt-2">
If the verification is successful, GPG will indicate so.<br />
<code
class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2 break-all"
>gpg: Good signature from &quot;Alexander Daichendt
&lt;alexander@daichendt.one&gt;&quot; [ultimate]</code
>
</p>
</div> </div>
</div> </div>
</details> </details>

2
src/layouts/BaseLayout.astro
View file

@ -34,7 +34,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
</head> </head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white"> <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
<!-- Mobile layout --> <!-- Mobile layout -->
<div class="lg:hidden flex flex-col min-h-screen p-4"> <div class="lg:hidden flex flex-col min-h-screen p-2 sm:p-4">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg mb-0"> <h2 class="font-bold text-lg mb-0">
<a href="/">{SITE_TITLE}</a> <a href="/">{SITE_TITLE}</a>

43
src/pages/blog/index.astro
View file

@ -4,30 +4,29 @@ import FormattedDate from "../../components/FormattedDate.astro";
import BaseLayout from "../../layouts/BaseLayout.astro"; import BaseLayout from "../../layouts/BaseLayout.astro";
const posts = (await getCollection("blog")).sort( const posts = (await getCollection("blog")).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
); );
--- ---
<BaseLayout> <BaseLayout>
<section class="max-w-4xl mx-auto"> <h1 class="mb-16">Blog</h1>
<ul class=""> <section class="max-w-4xl mx-auto">
{ <ul class="">
posts.map((post) => ( {
<li class="hover:dark:bg-gray-700 hover:bg-gray-100 p-2 rounded"> posts.map((post) => (
<a <li class="hover:dark:bg-gray-700 hover:bg-gray-100 p-2 rounded">
href={`/blog/${post.id}`} <a
class="grid grid-cols-[2fr,1fr] gap-4 items-center" href={`/blog/${post.id}`}
> class="grid grid-cols-[2fr,1fr] gap-4 items-center"
<h6 class="text-lg font-medium"> >
{post.data.title} <h6 class="text-lg font-medium mb-0">{post.data.title}</h6>
</h6> <span class="date text-right text-gray-600 text-sm">
<span class="date text-right text-gray-600 text-sm"> <FormattedDate date={post.data.pubDate} />
<FormattedDate date={post.data.pubDate} /> </span>
</span> </a>
</a> </li>
</li> ))
)) }
} </ul>
</ul> </section>
</section>
</BaseLayout> </BaseLayout>

126
src/pages/contact.astro
View file

@ -4,68 +4,70 @@ import { Icon } from "astro-icon/components";
--- ---
<BaseLayout title="Contact"> <BaseLayout title="Contact">
<ul class="space-y-2"> <h1 class="mb-16">Contact</h1>
<li class="flex items-center space-x-3">
<span class="flex items-center">
<Icon name="mdi:email" class="w-6 h-6" />
<span class="ml-2 font-medium">E-Mail:</span>
</span>
<a
href="mailto:me@daichendt.one"
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
me@daichendt.one
</a>
<a
href="/pub.key"
class="ml-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
<Icon name="mdi:key" class="w-4 h-4 inline" />
PGP key
</a>
</li>
<li class="flex items-center space-x-3">
<span class="flex items-center">
<Icon name="mdi:github" class="w-6 h-6" />
<span class="ml-2 font-medium">Github:</span>
</span>
<a
href="https://github.com/AlexDaichendt"
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
AlexDaichendt
</a>
</li>
<li class="flex items-center space-x-3"> <ul class="space-y-2">
<span class="flex items-center"> <li class="flex items-center space-x-3">
<Icon name="simple-icons:element" class="w-6 h-6" /> <span class="flex items-center">
<span class="ml-2 font-medium">Element:</span> <Icon name="mdi:email" class="w-6 h-6" />
</span> <span class="ml-2 font-medium">E-Mail:</span>
<span class="text-gray-700 dark:text-gray-300"> </span>
@alexdaichendt:matrix.org <a
</span> href="mailto:me@daichendt.one"
</li> class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
me@daichendt.one
</a>
<a
href="/pub.key"
class="ml-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
<Icon name="mdi:key" class="w-4 h-4 inline" />
PGP key
</a>
</li>
<li class="flex items-center space-x-3">
<span class="flex items-center">
<Icon name="mdi:github" class="w-6 h-6" />
<span class="ml-2 font-medium">Github:</span>
</span>
<a
href="https://github.com/AlexDaichendt"
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
AlexDaichendt
</a>
</li>
<li class="flex items-center space-x-3"> <li class="flex items-center space-x-3">
<span class="flex items-center"> <span class="flex items-center">
<Icon name="simple-icons:bluesky" class="w-6 h-6" /> <Icon name="simple-icons:element" class="w-6 h-6" />
<span class="ml-2 font-medium">Bluesky:</span> <span class="ml-2 font-medium">Element:</span>
</span> </span>
<a <span class="text-gray-700 dark:text-gray-300">
href="https://bsky.app/profile/alexdaichendt.bsky.social" @alexdaichendt:matrix.org
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200" </span>
target="_blank" </li>
rel="nofollow noreferrer noopener"
> <li class="flex items-center space-x-3">
@alexdaichendt.bsky.social <span class="flex items-center">
</a> <Icon name="simple-icons:bluesky" class="w-6 h-6" />
</li> <span class="ml-2 font-medium">Bluesky:</span>
</ul> </span>
<a
href="https://bsky.app/profile/alexdaichendt.bsky.social"
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
target="_blank"
rel="nofollow noreferrer noopener"
>
@alexdaichendt.bsky.social
</a>
</li>
</ul>
</BaseLayout> </BaseLayout>

2
src/pages/projects/index.astro
View file

@ -167,6 +167,8 @@ const getCardStyle = (company?: string) => {
--- ---
<BaseLayout title="Projects"> <BaseLayout title="Projects">
<h1 class="mb-16">Projects</h1>
<p> <p>
Here are some of the projects I have worked on in the past. They are sorted Here are some of the projects I have worked on in the past. They are sorted
by my personal rating of relevancy. Projects done for a company are marked by my personal rating of relevancy. Projects done for a company are marked

3
src/styles/global.css
View file

@ -5,12 +5,15 @@
@layer base { @layer base {
h1 { h1 {
@apply text-h1-mobile md:text-h1; @apply text-h1-mobile md:text-h1;
font-family: "Fira Sans", sans-serif;
} }
h2 { h2 {
@apply text-h2-mobile md:text-h2; @apply text-h2-mobile md:text-h2;
font-family: "Fira Sans", sans-serif;
} }
h3 { h3 {
@apply text-h3-mobile md:text-h3; @apply text-h3-mobile md:text-h3;
font-family: "Fira Sans", sans-serif;
} }
h4 { h4 {
@apply text-h4-mobile md:text-h4; @apply text-h4-mobile md:text-h4;