diff --git a/new_site/src/normalize.css b/new_site/src/normalize.css new file mode 100644 index 0000000..35f54b7 --- /dev/null +++ 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 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; +} diff --git a/new_site/src/test.css b/new_site/src/test.css new file mode 100644 index 0000000..17bfc66 --- /dev/null +++ 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; +} + diff --git a/new_site/src/test.html b/new_site/src/test.html new file mode 100644 index 0000000..c3c6807 --- /dev/null +++ b/new_site/src/test.html @@ -0,0 +1,29 @@ + + + + + + + + + + Privacynerd's new home :) + + + +
+

Hello you!

+

This is a test paragraph!

+
+ + +
+ +

Privacynerd's Gitea

+
+ + + + +