git.privacynerd.de/privacynerd.de
1
0
Fork 0
Code Issues Actions Activity

Some testings about how the buttons to services should look like

Browse Source
This commit is contained in:
BlueFox
2025-02-18 22:00:49 +01:00
parent 8017f1edfd
commit f7a6883724
4 changed files with 163 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
new_site/src/index.html
View File

@@ -9,11 +9,12 @@
</head>
<body class="bg-white text-black decoration-amber-700
dark:bg-neutral-900 dark:bg-none dark:text-white dark:decoration-amber-400">
dark:bg-neutral-900 dark:text-white dark:decoration-amber-400">
<h1 class="text-5xl decoration-2 decoration-inherit font-bold underline text-center p-2 mt-10">Hello you!</h1>
<p class="text-lg text-center p-2">This is a test paragraph!</p>
<div class="shadow-amber-100 size-max mx-auto grid grid-cols-1 gap-10 px-10 font-mono font-bold sm:grid-cols-2 m-6
<div class="shadow-amber-600 size-max mx-auto grid grid-cols-2 gap-10 px-10 font-mono font-bold m-6
sm:grid-cols-2
border-2 border-green-400 rounded-2xl p-5 backdrop-blur-xl drop-shadow-lg
hover:rotate-3 duration-200">
<div class="flex flex-col">
@@ -38,6 +39,21 @@
class="mx-auto hover:rotate-3 m-3 duration-200 size-48 h-[3rem] rounded-xl bg-linear-120/decreasing from-violet-700 to-pink-500 brightness-150"">
</div>
<a href="https://git.privacynerd.de" target="_blank"
class="mx-auto block size-max p-1 rounded-2xl drop-shadow-lg select-none
bg-linear-90/decreasing ease-linear from-pink-500 to-yellow-500
transition-(--badge-transition-properties) duration-(--badge-transition-durations)
hover:bg-linear-90/decreasing hover:from-green-600 hover:via-green-600 hover:to-green-600" draggable="false">
<div class="size-max flex flex-row gap-3 font-mono font-bold bg-white rounded-xl p-2
dark:bg-neutral-900
dark:hover:bg-white dark:hover:text-black
hover:bg-neutral-900 hover:text-white duration-(--badge-transition-duration-color)">
<img class="my-auto h-max
transition-transform hover:rotate-360 ease-in-out" src="img/logos/gitea.svg" />
<div class="my-auto text-xl">Privacynerd's Gitea</div>
</div>
</a>
</body>
</html>