feat: lots of css fixes

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

View file

@ -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;

View file

@ -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();
}
});

View file

@ -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 &quot;Alexander Daichendt &lt;alexander@daichendt.one&gt;&quot; [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 &quot;Alexander Daichendt
&lt;alexander@daichendt.one&gt;&quot; [ultimate]</code
>
</p>
</div>
</div>
</details>