Added another testing site without Tailwind CSS

2025-02-18 22:01:06 +01:00 · 2025-02-18 22:01:06 +01:00 · c0b88bd08d
commit c0b88bd08d
parent f7a6883724
3 changed files with 218 additions and 0 deletions
--- a/new_site/src/normalize.css
+++ b/new_site/src/normalize.css
@ -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;
+}
--- a/new_site/src/test.css
+++ b/new_site/src/test.css
@ -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;
+}
+
--- a/new_site/src/test.html
+++ b/new_site/src/test.html
@ -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>