feat: lots of css fixes
This commit is contained in:
parent
3bf65ae7ab
commit
c7e3b2c2d6
10 changed files with 139 additions and 109 deletions
|
|
@ -23,6 +23,7 @@
|
|||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@astrojs/tailwind": "^5.1.3",
|
||||
"@cloudflare/workers-types": "^4.20241230.0",
|
||||
"@fontsource/fira-sans": "^5.1.1",
|
||||
"@fontsource/ubuntu": "^5.1.0",
|
||||
"@iconify-json/mdi": "^1.2.1",
|
||||
"@iconify-json/simple-icons": "^1.2.14",
|
||||
|
|
|
|||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
|
|
@ -29,6 +29,9 @@ importers:
|
|||
'@cloudflare/workers-types':
|
||||
specifier: ^4.20241230.0
|
||||
version: 4.20241230.0
|
||||
'@fontsource/fira-sans':
|
||||
specifier: ^5.1.1
|
||||
version: 5.1.1
|
||||
'@fontsource/ubuntu':
|
||||
specifier: ^5.1.0
|
||||
version: 5.1.0
|
||||
|
|
@ -961,6 +964,9 @@ packages:
|
|||
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
|
||||
engines: {node: '>=14'}
|
||||
|
||||
'@fontsource/fira-sans@5.1.1':
|
||||
resolution: {integrity: sha512-LdbPwcMEADFjbcMx5sdPcyLi0NnEzP34YO+4d2eOeIKjCu1SyJiG/bBz5K07qm4pyhh2cQveifhFrG7gQDG9wQ==}
|
||||
|
||||
'@fontsource/ubuntu@5.1.0':
|
||||
resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==}
|
||||
|
||||
|
|
@ -4157,6 +4163,8 @@ snapshots:
|
|||
|
||||
'@fastify/busboy@2.1.1': {}
|
||||
|
||||
'@fontsource/fira-sans@5.1.1': {}
|
||||
|
||||
'@fontsource/ubuntu@5.1.0': {}
|
||||
|
||||
'@iconify-json/mdi@1.2.1':
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import "../styles/global.css";
|
||||
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 "@fontsource/fira-sans";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import HeaderLink from "./HeaderLink.astro";
|
|||
</nav>
|
||||
</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
|
||||
name="mdi:menu"
|
||||
id="iconMenu"
|
||||
|
|
@ -33,7 +33,7 @@ import HeaderLink from "./HeaderLink.astro";
|
|||
</button>
|
||||
<header
|
||||
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">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
|
|
@ -45,7 +45,7 @@ import HeaderLink from "./HeaderLink.astro";
|
|||
</header>
|
||||
|
||||
<script>
|
||||
const menu = document.getElementById("menu");
|
||||
const menu = document.getElementById("nav-menu");
|
||||
const drawer = document.getElementById("drawer");
|
||||
|
||||
function toggle() {
|
||||
|
|
@ -68,10 +68,15 @@ import HeaderLink from "./HeaderLink.astro";
|
|||
document.addEventListener("click", (event) => {
|
||||
console.log("click outside");
|
||||
if (
|
||||
!drawer.classList.contains("hidden") &&
|
||||
!drawer.classList.contains("translate-x-full") &&
|
||||
!drawer.contains(event.target) &&
|
||||
!menu.contains(event.target)
|
||||
) {
|
||||
console.log(
|
||||
!drawer.classList.contains("translate-x-full"),
|
||||
!drawer.contains(event.target),
|
||||
!menu.contains(event.target),
|
||||
);
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ const { cv } = Astro.props;
|
|||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="p-6 pt-6 space-y-6">
|
||||
<div class="p-4 sm:p-6 pt-6 space-y-6">
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-200">
|
||||
1. Verify SHA256 Hash
|
||||
|
|
@ -136,27 +136,36 @@ const { cv } = Astro.props;
|
|||
>
|
||||
</li>
|
||||
<li>
|
||||
Import the key into your keyring with
|
||||
<pre
|
||||
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>
|
||||
|
||||
<li>
|
||||
Download the above PGP signature by clicking <button
|
||||
class="text-blue-500 dark:text-blue-400 hover:underline"
|
||||
id="download-pgp"
|
||||
>here
|
||||
</button>
|
||||
</li>
|
||||
<li>Run the following command:</li>
|
||||
Import the key into your keyring with<br />
|
||||
<code
|
||||
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>
|
||||
|
||||
<li>
|
||||
Download the above PGP signature by clicking <button
|
||||
class="text-blue-500 dark:text-blue-400 hover:underline"
|
||||
id="download-pgp"
|
||||
>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>
|
||||
<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 "Alexander Daichendt <alexander@daichendt.one>" [ultimate]</pre>
|
||||
</p>
|
||||
</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 "Alexander Daichendt
|
||||
<alexander@daichendt.one>" [ultimate]</code
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
|
|||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
|
||||
<!-- 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">
|
||||
<h2 class="font-bold text-lg mb-0">
|
||||
<a href="/">{SITE_TITLE}</a>
|
||||
|
|
|
|||
|
|
@ -4,30 +4,29 @@ import FormattedDate from "../../components/FormattedDate.astro";
|
|||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
|
||||
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>
|
||||
<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">
|
||||
<a
|
||||
href={`/blog/${post.id}`}
|
||||
class="grid grid-cols-[2fr,1fr] gap-4 items-center"
|
||||
>
|
||||
<h6 class="text-lg font-medium">
|
||||
{post.data.title}
|
||||
</h6>
|
||||
<span class="date text-right text-gray-600 text-sm">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
<h1 class="mb-16">Blog</h1>
|
||||
<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">
|
||||
<a
|
||||
href={`/blog/${post.id}`}
|
||||
class="grid grid-cols-[2fr,1fr] gap-4 items-center"
|
||||
>
|
||||
<h6 class="text-lg font-medium mb-0">{post.data.title}</h6>
|
||||
<span class="date text-right text-gray-600 text-sm">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -4,68 +4,70 @@ import { Icon } from "astro-icon/components";
|
|||
---
|
||||
|
||||
<BaseLayout title="Contact">
|
||||
<ul class="space-y-2">
|
||||
<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>
|
||||
<h1 class="mb-16">Contact</h1>
|
||||
|
||||
<li class="flex items-center space-x-3">
|
||||
<span class="flex items-center">
|
||||
<Icon name="simple-icons:element" class="w-6 h-6" />
|
||||
<span class="ml-2 font-medium">Element:</span>
|
||||
</span>
|
||||
<span class="text-gray-700 dark:text-gray-300">
|
||||
@alexdaichendt:matrix.org
|
||||
</span>
|
||||
</li>
|
||||
<ul class="space-y-2">
|
||||
<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">
|
||||
<span class="flex items-center">
|
||||
<Icon name="simple-icons:bluesky" class="w-6 h-6" />
|
||||
<span class="ml-2 font-medium">Bluesky:</span>
|
||||
</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>
|
||||
<li class="flex items-center space-x-3">
|
||||
<span class="flex items-center">
|
||||
<Icon name="simple-icons:element" class="w-6 h-6" />
|
||||
<span class="ml-2 font-medium">Element:</span>
|
||||
</span>
|
||||
<span class="text-gray-700 dark:text-gray-300">
|
||||
@alexdaichendt:matrix.org
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center space-x-3">
|
||||
<span class="flex items-center">
|
||||
<Icon name="simple-icons:bluesky" class="w-6 h-6" />
|
||||
<span class="ml-2 font-medium">Bluesky:</span>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -167,6 +167,8 @@ const getCardStyle = (company?: string) => {
|
|||
---
|
||||
|
||||
<BaseLayout title="Projects">
|
||||
<h1 class="mb-16">Projects</h1>
|
||||
|
||||
<p>
|
||||
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
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@
|
|||
@layer base {
|
||||
h1 {
|
||||
@apply text-h1-mobile md:text-h1;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
h2 {
|
||||
@apply text-h2-mobile md:text-h2;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
h3 {
|
||||
@apply text-h3-mobile md:text-h3;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
h4 {
|
||||
@apply text-h4-mobile md:text-h4;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue