ssstyles 0.0.1-test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Daniel Schulz (iamschulz.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# Ssstyles
+
+Ssstyles is a very simple CSS style system. It consists of a classless stylesheet as a base layer and some small, optional components on top.
+
+It's supposed to be:
+
+-   Lightweight
+-   Configurable
+-   Hackable
+-   Accessible
+
+You can use this as a quick start for simple websites and build your own stuff on top.
+
+## Usage
+
+You have multiple options to install Ssstyles. I provide two packages:
+
+-   The base styles, which include a classless stylesheet for simple HTML sites
+-   The complete base+components package, which you can use to build more advanced sites
+
+### CDN
+
+Use this snippet to insert the **base styles**:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/package@version/file" />
+```
+
+Use this snippet to insert the base styles **and all components**:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/package@version/file" />
+```
+
+### npm
+
+```bash
+npm install ssstyles
+```
+
+```css
+@layer base, layout, components;
+@import "ssstyles" layer(base);
+@import "ssstyles/css/transition.css" layer(base);
+@import "ssstyles/css/basegrid.css" layer(layout);
+@import "ssstyles/css/headline.css" layer(components);
+/* Whatever components you need */
+
+/* Or the complete package: */
+@import "ssstyles/css/all.css" layer(base);
+```
+
+### Manual installation
+
+You can also simply download the CSS file and include it however you wish.
+
+## More info
+
+Fore more information pleaee visit the [project site](https://iamschulz.github.io/ssstyles).

package/css/actionlink.css

@@ -0,0 +1,22 @@
+[data-actionlink] {
+	--actionlink-size: 3rem;
+	--col-button: var(--col-accent);
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	min-height: var(--actionlink-size);
+	min-width: var(--actionlink-size);
+	border-radius: var(--actionlink-size);
+	background-color: var(--col-button);
+	color: var(--col-accent-contrast);
+	font-weight: 600;
+	display: grid;
+	place-items: center;
+	padding: 1ch;
+	text-decoration: none;
+	z-index: 1;
+
+	&:hover {
+		background-color: color-mix(in oklab, var(--col-button), white 10%);
+	}
+}

package/css/animation.css

@@ -0,0 +1,113 @@
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		translate: 0 1rem;
+	}
+	to {
+		opacity: 1;
+		translate: 0 0;
+	}
+}
+
+[data-fade-in] {
+	view-timeline-name: --fade-in;
+	view-timeline-axis: block;
+
+	@media (prefers-reduced-motion: no-preference) {
+		animation: ease-in-out fade-in both;
+		animation-timeline: --fade-in;
+		animation-range: entry -10% cover 20%;
+	}
+}
+
+@keyframes sparkle {
+	0% {
+		opacity: 0;
+		translate: -0.7ch -10%;
+	}
+	10% {
+		opacity: 1;
+		translate: -0.7ch -10%;
+	}
+	20% {
+		opacity: 0;
+		translate: -0.7ch -10%;
+	}
+
+	25% {
+		opacity: 0;
+		translate: 60% -30%;
+	}
+	35% {
+		opacity: 1;
+		translate: 60% -30%;
+	}
+	45% {
+		opacity: 0;
+		translate: 60% -30%;
+	}
+
+	55% {
+		opacity: 0;
+		translate: 30% 0;
+	}
+	65% {
+		opacity: 1;
+		translate: 30% 0;
+	}
+	75% {
+		opacity: 0;
+		translate: 30% 0;
+	}
+
+	80% {
+		opacity: 0;
+		translate: calc(100% - 1.3ch) -20%;
+	}
+	90% {
+		opacity: 1;
+		translate: calc(100% - 1.3ch) -20%;
+	}
+	100% {
+		opacity: 0;
+		translate: calc(100% - 1.3ch) -20%;
+	}
+}
+
+[data-sparkle] {
+	--sparkle-color: oklch(100% 0 259.28 / 100%);
+	position: relative;
+	text-shadow: 0 0 10px var(--sparkle-color);
+	letter-spacing: calc(var(--letter-spacing) + 0.03em);
+
+	&::before,
+	&::after {
+		content: "✨";
+		position: absolute;
+		inset: 0;
+		text-shadow: 0 0 10px var(--sparkle-color);
+		animation: sparkle 3s ease-in-out infinite;
+
+		@media (prefers-reduced-motion) {
+			animation: none;
+		}
+	}
+
+	&::after {
+		animation-delay: 1s;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		--sparkle-color: oklch(100% 0 259.28 / 50%);
+	}
+
+	@media (prefers-reduced-motion) {
+		&::before,
+		&::after {
+			animation: none;
+			position: relative;
+		}
+	}
+}
+
+/* todo: view transitions */

package/css/autogrid.css

@@ -0,0 +1,20 @@
+[data-autogrid] {
+	--gap: 1rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
+	justify-items: stretch;
+	align-items: flex-start;
+	gap: var(--gap);
+}
+
+[data-autogrid="1/4"] {
+	--grid-item-width: max(calc(25% - var(--gap) * 3), 140px);
+}
+
+[data-autogrid="1/3"] {
+	--grid-item-width: max(calc(33% - var(--gap) * 2), 200px);
+}
+
+[data-autogrid="1/2"] {
+	--grid-item-width: max(calc(50% - var(--gap)), 240px);
+}

package/css/base/blockquote.css

@@ -0,0 +1,28 @@
+blockquote {
+	margin: 1rem 0;
+	padding: 1rem 2ch;
+	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
+		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
+	background: var(--col-bg2);
+	font-size: 1.2rem;
+	font-style: italic;
+	border: 2px solid var(--col-bg3);
+
+	> footer {
+		font-size: 1rem;
+		margin: 1rem 0 0 2ch;
+		font-style: normal;
+
+		&::before {
+			content: "— ";
+		}
+
+		cite {
+			font-style: italic;
+		}
+	}
+}
+
+figure > blockquote {
+	margin: 0;
+}

package/css/base/button.css

@@ -0,0 +1,34 @@
+button,
+[data-button],
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+	--col-button: var(--col-accent);
+	--col-button2: var(--col-button);
+	--pos-gradient: -0.25rem;
+	padding: 0.25rem 1ch;
+	border: none;
+	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
+		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
+	color: var(--col-accent-contrast);
+	font-weight: 500;
+	text-decoration: none;
+	cursor: pointer;
+	background: linear-gradient(
+		to bottom,
+		var(--col-button2) calc(100% + var(--pos-gradient)),
+		color-mix(in oklab, var(--col-button2), black 20%) calc(100% + var(--pos-gradient))
+	);
+
+	&:hover:not(:is([disabled], [aria-disabled])) {
+		--col-button2: color-mix(in oklab, var(--col-button), white 10%);
+	}
+
+	&:active:not(:is([disabled], [aria-disabled])) {
+		--pos-gradient: -0.35rem;
+	}
+
+	&[data-button="accent2"] {
+		--col-button: var(--col-accent2);
+	}
+}

package/css/base/code.css

@@ -0,0 +1,41 @@
+code,
+kbd,
+pre {
+	background: var(--col-bg2);
+	border: 0.125rem solid var(--col-bg3);
+	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
+		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
+	padding: 0.05rem 0.5ch;
+	font-size: 0.8rem;
+	font-family: var(--font-mono);
+	font-weight: 600;
+	color: var(--col-accent2);
+	max-width: 100%;
+	overflow: auto;
+	text-wrap: nowrap;
+}
+
+pre {
+	padding: 0.5rem;
+	margin: 1rem 0;
+}
+
+kbd {
+	border-bottom: 0.25rem solid var(--col-bg3);
+	border-radius: var(--border-radius) var(--border-radius) 5px 5px;
+	font-weight: 700;
+}
+
+pre code,
+code pre {
+	background: inherit;
+	font-size: inherit;
+	color: inherit;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+code pre {
+	display: inline;
+}

package/css/base/colors.css

@@ -0,0 +1,17 @@
+:root {
+	color-scheme: light dark;
+	background-color: var(--col-bg);
+	color: var(--col-fg);
+}
+
+* {
+	accent-color: var(--col-accent);
+}
+
+a:not([data-button]) {
+	color: var(--col-accent);
+
+	&:hover {
+		color: var(--col-accent2);
+	}
+}

package/css/base/config.css

@@ -0,0 +1,34 @@
+:root {
+	--body-width: 45rem;
+
+	--col-bg: #eee;
+	--col-bg2: #e8e8e8;
+	--col-bg3: #dfdfdf;
+	--col-fg: #333;
+	--col-fg2: #7c8386;
+	--col-accent: #b2033a;
+	--col-accent2: #1c618f;
+	--col-accent-contrast: #eee;
+
+	--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+	--font-mono: Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
+	--font-size-min: 1rem;
+	--font-size-max: 1.2rem;
+	--line-height: 1.6;
+	--letter-spacing: 0.01875em;
+
+	--border-radius: 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--col-bg: #15181a;
+		--col-bg2: #161e21;
+		--col-bg3: #1a2225;
+		--col-fg: #eee;
+		--col-fg2: #7c8386;
+		--col-accent: #ff297a;
+		--col-accent2: #72c4ff;
+		--col-accent-contrast: #111;
+	}
+}

package/css/base/dialog.css

@@ -0,0 +1,36 @@
+@keyframes dialog-fade-in {
+	from {
+		opacity: 0;
+		translate: 0 1rem;
+	}
+	to {
+		opacity: 1;
+		translate: 0 0;
+	}
+}
+
+body:has(dialog[open]) {
+	overflow: hidden;
+}
+
+dialog {
+	padding: 1rem 2ch;
+	border: 0.125rem solid var(--col-bg3);
+	background: var(--col-bg);
+	@media (prefers-reduced-motion: no-preference) {
+		animation: dialog-fade-in 0.1s ease-out;
+	}
+
+	> header {
+		background: var(--col-bg3);
+		margin: -1rem -2ch 1rem;
+		padding: 1rem 2ch;
+		font-weight: 700;
+	}
+
+	&::backdrop {
+		background: rgba(0, 0, 0, 0.4);
+		backdrop-filter: blur(4px);
+		animation: fade-in 0.1s ease-out;
+	}
+}

package/css/base/forms.css

@@ -0,0 +1,36 @@
+fieldset {
+	background-color: var(--col-bg2);
+	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
+		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
+	border-color: var(--col-bg3);
+	border-style: solid;
+
+	:is(input:not(:is([type="button"], [type="submit"], [type="reset"])), textarea, select) {
+		background-color: color-mix(in lch, var(--col-bg2) 95%, var(--col-fg));
+		border-color: var(--col-fg2);
+	}
+}
+
+input:not(:is([type="button"], [type="submit"], [type="reset"])),
+textarea,
+select {
+	padding: 0.1rem 1ch;
+	background-color: var(--col-bg2);
+	border: 0.125rem solid var(--col-fg2);
+	--br-tl: var(--border-radius);
+	--br-tr: var(--border-radius);
+	--br-bl: var(--border-radius);
+	--br-br: var(--border-radius);
+	border-radius: var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl);
+}
+
+textarea {
+	max-width: 100%;
+}
+
+select {
+	-webkit-appearance: none;
+	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%2740%27%20width%3D%27100%27%20fill%3D%22%23888%22%3E%3Cpolygon%20points%3D%220%2C0%2050%2C40%20100%2C0%22%2F%3E%3C%2Fsvg%3E")
+		calc(100% - 0.8rem) 50%/0.8rem no-repeat;
+	padding-right: 2rem;
+}

package/css/base/highcontrast.css

@@ -0,0 +1,25 @@
+@media (prefers-contrast: more) {
+	:root {
+		--col-bg: #fff;
+		--col-bg2: #fff;
+		--col-bg3: #fff;
+		--col-fg: #000;
+		--col-fg2: #000;
+		--col-accent: #800;
+		--col-accent2: #00f;
+		--col-accent-contrast: #fff;
+	}
+}
+
+@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+	:root {
+		--col-bg: #000;
+		--col-bg2: #000;
+		--col-bg3: #000;
+		--col-fg: #fff;
+		--col-fg2: #fff;
+		--col-accent: #ff0;
+		--col-accent2: #0ff;
+		--col-accent-contrast: #000;
+	}
+}

package/css/base/layout.css

@@ -0,0 +1,58 @@
+:root {
+	box-sizing: border-box;
+}
+
+body {
+	max-width: var(--body-width);
+	margin: auto;
+	padding: 0 1rem;
+	word-wrap: break-word;
+
+	> :is(header, footer) {
+		position: relative;
+		margin: 0 calc((50vw - 50%) * -1 + 1rem);
+		padding: 2rem calc(50vw - 50% - 1rem);
+		background: var(--col-bg3);
+
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			box-shadow: -2rem 0 0 0 var(--col-bg3), 2rem 0 0 0 var(--col-bg3);
+			z-index: -1;
+		}
+	}
+
+	&:not(:has(header)) {
+		padding-top: 1rem;
+	}
+
+	&:not(:has(footer)) {
+		padding-bottom: 1rem;
+	}
+
+	> header {
+		margin-bottom: 1rem;
+	}
+
+	> footer {
+		margin-top: 5rem;
+	}
+}
+
+figure,
+video,
+canvas,
+iframe {
+	display: block;
+	max-width: 100%;
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+}
+
+img,
+svg {
+	max-width: 100%;
+	height: auto;
+	vertical-align: text-bottom;
+}

package/css/base/misc.css

@@ -0,0 +1,20 @@
+hr {
+	border: 0.125rem solid var(--col-bg3);
+	border-radius: var(--border-radius);
+	margin: 5rem 0;
+}
+
+[disabled],
+[aria-disabled] {
+	cursor: not-allowed;
+	filter: saturate(0);
+}
+
+abbr {
+	cursor: help;
+}
+
+mark {
+	background-color: var(--col-accent2);
+	color: var(--col-accent-contrast);
+}

package/css/base/summary.css

@@ -0,0 +1,46 @@
+details {
+	background-color: var(--col-bg2);
+	border-color: var(--col-bg3);
+	border-style: solid;
+	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
+		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
+	padding: 0.5rem 1ch;
+
+	> summary {
+		position: relative;
+		font-weight: 500;
+		cursor: pointer;
+		padding-left: 1rem;
+		list-style-type: none;
+
+		&::marker,
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			left: -1ch;
+			width: 0;
+			height: 0;
+			border: 0.5rem solid transparent;
+			border-left: 0.5rem solid var(--col-accent);
+			transform: translate(0.625rem, 0.25lh) rotate(var(--dstr, 0deg));
+			transform-origin: 25% center;
+			transition: transform 0.1s ease-out;
+		}
+
+		&:hover::before {
+			border-left-color: var(--col-accent2);
+		}
+	}
+
+	&[open] > summary {
+		margin-bottom: 1rem;
+
+		&::before {
+			--dstr: 90deg;
+		}
+	}
+}

package/css/base/table.css

@@ -0,0 +1,50 @@
+table {
+	border-collapse: collapse;
+	table-layout: fixed;
+	min-width: 100%;
+}
+
+figure:has(table) {
+	overflow-x: auto;
+}
+
+thead {
+	border-bottom: 0.125rem solid var(--col-bg3);
+}
+
+tbody tr:nth-child(even) {
+	background-color: var(--col-bg2);
+}
+
+td,
+th {
+	padding: 0.5rem 1ch;
+	text-align: left;
+	vertical-align: top;
+	white-space: nowrap;
+}
+
+tfoot {
+	border-top: 0.125rem solid var(--col-bg3);
+}
+
+dl {
+	& dd {
+		margin-inline-start: 0.5ch;
+
+		&::before {
+			content: "├";
+			margin-inline-end: 0.5ch;
+			font-family: var(--font-mono);
+			font-size: 2em;
+			position: relative;
+			top: 0.4rem;
+			line-height: 0;
+			color: var(--col-fg2);
+		}
+		&:last-of-type::before,
+		&:has(+ dt)::before {
+			content: "└";
+		}
+	}
+}