diff --git a/new_site/src/img/logos/gitea.svg b/new_site/src/img/logos/gitea.svg new file mode 100644 index 0000000..4329134 --- /dev/null +++ b/new_site/src/img/logos/gitea.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/new_site/src/index.html b/new_site/src/index.html index b92a674..bc018ce 100644 --- a/new_site/src/index.html +++ b/new_site/src/index.html @@ -9,11 +9,12 @@ + dark:bg-neutral-900 dark:text-white dark:decoration-amber-400">

Hello you!

This is a test paragraph!

-
@@ -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"">
+ +
+ +
Privacynerd's Gitea
+
+ + diff --git a/new_site/src/input.css b/new_site/src/input.css index f1d8c73..a2057b4 100644 --- a/new_site/src/input.css +++ b/new_site/src/input.css @@ -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); +} \ No newline at end of file diff --git a/new_site/src/output.css b/new_site/src/output.css index 22dfba5..6b12dce 100644 --- a/new_site/src/output.css +++ b/new_site/src/output.css @@ -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: "*";