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

Compare commits

base: git.privacynerd.de:8017f1edfdace6b74b9344bfc4474a1764514345
Branches Tags
git.privacynerd.de:master
..
compare: git.privacynerd.de:c0b88bd08d9deffd0b8120ef621d0a2edfce9613
Branches Tags
git.privacynerd.de:master

2 Commits
8017f1edfd ... c0b88bd08d

Author SHA1 Message Date
BlueFox
c0b88bd08d
Added another testing site without Tailwind CSS
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 6s
Details
2025-02-18 22:01:06 +01:00
BlueFox
f7a6883724
Some testings about how the buttons to services should look like 2025-02-18 22:00:49 +01:00
7 changed files with 381 additions and 7 deletions
Show Stats Expand all files Collapse all files

1
new_site/src/img/logos/gitea.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

20
new_site/src/index.html
View File

@ -9,11 +9,12 @@
</head> </head>
<body class="bg-white text-black decoration-amber-700 <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> <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> <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 border-2 border-green-400 rounded-2xl p-5 backdrop-blur-xl drop-shadow-lg
hover:rotate-3 duration-200"> hover:rotate-3 duration-200">
<div class="flex flex-col"> <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""> 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> </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> </body>
</html> </html>

7
new_site/src/input.css
View File

@ -1 +1,8 @@
@import "tailwindcss"; @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);
}

101
new_site/src/normalize.css vendored Normal file
View File

@ -0,0 +1,101 @@
@charset "utf-8";
/***
The new CSS reset - version 1.8.5 (last updated 14.6.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
- The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: initial;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}

142
new_site/src/output.css
View File

@ -7,11 +7,13 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; "Liberation Mono", "Courier New", monospace;
--color-red-500: oklch(0.637 0.237 25.331); --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-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-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-lime-300: oklch(0.897 0.196 126.665);
--color-green-400: oklch(0.792 0.209 151.711); --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-indigo-600: oklch(0.511 0.262 276.966);
--color-violet-700: oklch(0.491 0.27 292.581); --color-violet-700: oklch(0.491 0.27 292.581);
--color-pink-500: oklch(0.656 0.241 354.308); --color-pink-500: oklch(0.656 0.241 354.308);
@ -25,6 +27,8 @@
--text-sm--line-height: calc(1.25 / 0.875); --text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem; --text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125); --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: 3rem;
--text-5xl--line-height: 1; --text-5xl--line-height: 1;
--font-weight-medium: 500; --font-weight-medium: 500;
@ -382,6 +386,9 @@
.mx-auto { .mx-auto {
margin-inline: auto; margin-inline: auto;
} }
.my-auto {
margin-block: auto;
}
.mt-10 { .mt-10 {
margin-top: calc(var(--spacing) * 10); margin-top: calc(var(--spacing) * 10);
} }
@ -486,6 +493,9 @@
.h-\[3rem\] { .h-\[3rem\] {
height: 3rem; height: 3rem;
} }
.h-max {
height: max-content;
}
.h-screen { .h-screen {
height: 100vh; height: 100vh;
} }
@ -750,8 +760,8 @@
.auto-rows-min { .auto-rows-min {
grid-auto-rows: min-content; grid-auto-rows: min-content;
} }
.grid-cols-1 { .grid-cols-2 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.grid-cols-none { .grid-cols-none {
grid-template-columns: none; grid-template-columns: none;
@ -909,6 +919,9 @@
.justify-items-stretch { .justify-items-stretch {
justify-items: stretch; justify-items: stretch;
} }
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-10 { .gap-10 {
gap: calc(var(--spacing) * 10); gap: calc(var(--spacing) * 10);
} }
@ -1162,6 +1175,10 @@
--tw-gradient-position: in oklab; --tw-gradient-position: in oklab;
background-image: conic-gradient(var(--tw-gradient-stops)); 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 { .bg-linear-120\/decreasing {
--tw-gradient-position: 120deg in oklch decreasing hue; --tw-gradient-position: 120deg in oklch decreasing hue;
background-image: linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops));
@ -1184,6 +1201,10 @@
--tw-gradient-from: var(--color-indigo-600); --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)); --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 { .from-violet-700 {
--tw-gradient-from: var(--color-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)); --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-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)); --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 { .box-decoration-clone {
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
box-decoration-break: clone; box-decoration-break: clone;
@ -1424,6 +1449,10 @@
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height)); 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\] { .leading-\[3\.5rem\] {
--tw-leading: 3.5rem; --tw-leading: 3.5rem;
line-height: 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)); --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); 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 { .shadow-amber-600 {
--tw-shadow-color: var(--color-amber-100); --tw-shadow-color: var(--color-amber-600);
} }
.shadow-initial { .shadow-initial {
--tw-shadow-color: initial; --tw-shadow-color: initial;
@ -1803,6 +1832,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); 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-all {
transition-property: all; transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@ -1837,6 +1871,14 @@
.transition-normal { .transition-normal {
transition-behavior: 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 { .duration-200 {
--tw-duration: 200ms; --tw-duration: 200ms;
transition-duration: 200ms; transition-duration: 200ms;
@ -1981,6 +2023,10 @@
.ring-inset { .ring-inset {
--tw-ring-inset: inset; --tw-ring-inset: inset;
} }
.select-none {
-webkit-user-select: none;
user-select: none;
}
.transform-3d { .transform-3d {
transform-style: preserve-3d; transform-style: preserve-3d;
} }
@ -2002,6 +2048,14 @@
.transform-view { .transform-view {
transform-box: view-box; 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\:rotate-3 {
&:hover { &:hover {
@media (hover: 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 { .sm\:grid-cols-2 {
@media (width >= 40rem) { @media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
@ -2039,6 +2147,30 @@
text-decoration-color: var(--color-amber-400); 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 { @property --tw-translate-x {
syntax: "*"; syntax: "*";

88
new_site/src/test.css Normal file
View File

@ -0,0 +1,88 @@
@charset "utf-8";
/* Some variables */
:root {
--spacing: 0.25rem;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Colors in light & dark mode */
:root {
--color-bg: olkch(1 1 1);
--color-fg: rgb(0,0,0);
--color-decoration: oklch(0.555 0.163 48.998);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: oklch(0.205 0 0);
--color-fg: rgb(255 255 255);
--color-decoration: oklch(0.828 0.189 84.429);
}
}
body {
background-color: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-sans);
text-decoration-color: var(--color-decoration);
}
div {
text-decoration-color: inherit;
margin-left: auto;
margin-right: auto;
max-width: max-content;
max-height: max-content;
}
h1 {
text-decoration-thickness: 2px;
text-decoration-color: inherit;
text-decoration-line: underline;
font-weight: bold;
font-size: 3rem;
padding: calc(var(--spacing)*2);
margin-top: calc(var(--spacing)*10);
text-align: center;
}
p {
font-size: 1.125rem;
padding: calc(var(--spacing)*2);
text-align: center;
}
.headline {
margin-bottom: calc(var(--spacing)*10);
}
.badge {
margin-left: auto;
margin-right: auto;
padding: calc(var(--spacing)*1);
max-width: max-content;
max-height: max-content;
display: block;
border-radius: 16px;
user-select: none; -ms-user-select: none; -moz-user-select: none; -ms-touch-select: none; -webkit-user-select: none;
background-color: var(--color-fg);
color: var(--color-bg);
}
.badge div {
background-color: var(--color-bg);
color: var(--color-fg);
border-radius: 12px;
padding: calc(var(--spacing)*2) calc(var(--spacing)*3);
display: flex;
flex-direction: row;
}
.badge div * {
margin-top: auto;
margin-bottom: auto;
font-size: 1.15rem;
}

29
new_site/src/test.html Normal file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<link href="./normalize.css" rel="stylesheet">
<link href="./test.css" rel="stylesheet">
<title>Privacynerd's new home :)</title>
</head>
<body>
<div class="headline">
<h1>Hello you!</h1>
<p>This is a test paragraph!</p>
</div>
<a href="https://git.privacynerd.de" target="_blank"
class="badge" draggable="false">
<div>
<img src="img/logos/gitea.svg" />
<p>Privacynerd's Gitea</p>
</div>
</a>
</body>
</html>