Some testings about how the buttons to services should look like
This commit is contained in:
parent
8017f1edfd
commit
f7a6883724
GPG Key ID:
327233DA85435270
1
new_site/src/img/logos/gitea.svg
Normal file
1
new_site/src/img/logos/gitea.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640" width="32" height="32"><path d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12" style="fill:#fff"/><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#609926"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#609926"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -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>
|
||||
|
||||
@ -1 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--badge-transition-properties: rotate, translate, color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
--badge-transition-duration-color: 700ms;
|
||||
--badge-transition-duration-motion: 200ms;
|
||||
--badge-transition-durations: var(--badge-transition-duration-motion),var(--badge-transition-duration-motion),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color);
|
||||
}
|
||||
@ -7,11 +7,13 @@
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
--color-red-500: oklch(0.637 0.237 25.331);
|
||||
--color-amber-100: oklch(0.962 0.059 95.617);
|
||||
--color-amber-400: oklch(0.828 0.189 84.429);
|
||||
--color-amber-600: oklch(0.666 0.179 58.318);
|
||||
--color-amber-700: oklch(0.555 0.163 48.998);
|
||||
--color-yellow-500: oklch(0.795 0.184 86.047);
|
||||
--color-lime-300: oklch(0.897 0.196 126.665);
|
||||
--color-green-400: oklch(0.792 0.209 151.711);
|
||||
--color-green-600: oklch(0.627 0.194 149.214);
|
||||
--color-indigo-600: oklch(0.511 0.262 276.966);
|
||||
--color-violet-700: oklch(0.491 0.27 292.581);
|
||||
--color-pink-500: oklch(0.656 0.241 354.308);
|
||||
@ -25,6 +27,8 @@
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--font-weight-medium: 500;
|
||||
@ -382,6 +386,9 @@
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.my-auto {
|
||||
margin-block: auto;
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top: calc(var(--spacing) * 10);
|
||||
}
|
||||
@ -486,6 +493,9 @@
|
||||
.h-\[3rem\] {
|
||||
height: 3rem;
|
||||
}
|
||||
.h-max {
|
||||
height: max-content;
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
@ -750,8 +760,8 @@
|
||||
.auto-rows-min {
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-none {
|
||||
grid-template-columns: none;
|
||||
@ -909,6 +919,9 @@
|
||||
.justify-items-stretch {
|
||||
justify-items: stretch;
|
||||
}
|
||||
.gap-3 {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-10 {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
}
|
||||
@ -1162,6 +1175,10 @@
|
||||
--tw-gradient-position: in oklab;
|
||||
background-image: conic-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-linear-90\/decreasing {
|
||||
--tw-gradient-position: 90deg in oklch decreasing hue;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-linear-120\/decreasing {
|
||||
--tw-gradient-position: 120deg in oklch decreasing hue;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
@ -1184,6 +1201,10 @@
|
||||
--tw-gradient-from: var(--color-indigo-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.from-pink-500 {
|
||||
--tw-gradient-from: var(--color-pink-500);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.from-violet-700 {
|
||||
--tw-gradient-from: var(--color-violet-700);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
@ -1201,6 +1222,10 @@
|
||||
--tw-gradient-to: var(--color-violet-700);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-yellow-500 {
|
||||
--tw-gradient-to: var(--color-yellow-500);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.box-decoration-clone {
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
@ -1424,6 +1449,10 @@
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.text-xl {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
.leading-\[3\.5rem\] {
|
||||
--tw-leading: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
@ -1702,8 +1731,8 @@
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-amber-100 {
|
||||
--tw-shadow-color: var(--color-amber-100);
|
||||
.shadow-amber-600 {
|
||||
--tw-shadow-color: var(--color-amber-600);
|
||||
}
|
||||
.shadow-initial {
|
||||
--tw-shadow-color: initial;
|
||||
@ -1803,6 +1832,11 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\(--badge-transition-properties\) {
|
||||
transition-property: var(--badge-transition-properties);
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@ -1837,6 +1871,14 @@
|
||||
.transition-normal {
|
||||
transition-behavior: normal;
|
||||
}
|
||||
.duration-\(--badge-transition-duration-color\) {
|
||||
--tw-duration: var(--badge-transition-duration-color);
|
||||
transition-duration: var(--badge-transition-duration-color);
|
||||
}
|
||||
.duration-\(--badge-transition-durations\) {
|
||||
--tw-duration: var(--badge-transition-durations);
|
||||
transition-duration: var(--badge-transition-durations);
|
||||
}
|
||||
.duration-200 {
|
||||
--tw-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
@ -1981,6 +2023,10 @@
|
||||
.ring-inset {
|
||||
--tw-ring-inset: inset;
|
||||
}
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.transform-3d {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
@ -2002,6 +2048,14 @@
|
||||
.transform-view {
|
||||
transform-box: view-box;
|
||||
}
|
||||
.hover\:-translate-y-1 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-translate-y: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:rotate-3 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -2009,6 +2063,60 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:rotate-360 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
rotate: 360deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-neutral-900 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-neutral-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-linear-90\/decreasing {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-position: 90deg in oklch decreasing hue;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:from-green-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-from: var(--color-green-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:via-green-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-via: var(--color-green-600);
|
||||
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:to-green-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-gradient-to: var(--color-green-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-white {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:grid-cols-2 {
|
||||
@media (width >= 40rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@ -2039,6 +2147,30 @@
|
||||
text-decoration-color: var(--color-amber-400);
|
||||
}
|
||||
}
|
||||
.dark\:hover\:bg-white {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:text-black {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--badge-transition-properties: rotate, translate, color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
--badge-transition-duration-color: 700ms;
|
||||
--badge-transition-duration-motion: 200ms;
|
||||
--badge-transition-durations: var(--badge-transition-duration-motion),var(--badge-transition-duration-motion),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color),var(--badge-transition-duration-color);
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user