added web vendorsHEADmaster

6 files changed, 459 insertions, 0 deletions

diff --git a/preact/demo/people/styles/animations.scss b/preact/demo/people/styles/animations.scss
new file mode 100644
index 0000000..c7ce8cb
--- /dev/null
+++ b/preact/demo/people/styles/animations.scss
@@ -0,0 +1,34 @@
+@keyframes popup {
+	from {
+		box-shadow: 0 0 0 black;
+		opacity: 0;
+		transform: scale(0.9);
+	}
+	to {
+		box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes zoom {
+	from {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes appear-from-left {
+	from {
+		opacity: 0;
+		transform: translateX(-25px);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
diff --git a/preact/demo/people/styles/app.scss b/preact/demo/people/styles/app.scss
new file mode 100644
index 0000000..4473f9e
--- /dev/null
+++ b/preact/demo/people/styles/app.scss
@@ -0,0 +1,100 @@
+#people-app {
+	position: relative;
+	overflow: hidden;
+	min-height: 100vh;
+	animation: popup 300ms cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
+	background: var(--app-background);
+	--menu-width: 260px;
+	--menu-item-height: 50px;
+
+	@media (min-width: 1280px) {
+		max-width: 1280px;
+		min-height: calc(100vh - 64px);
+		margin: 32px auto;
+		border-radius: 10px;
+	}
+
+	> nav {
+		position: absolute;
+		display: flow-root;
+		width: var(--menu-width);
+		height: 100%;
+		background-color: var(--app-background-secondary);
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	> nav h4 {
+		padding-left: 16px;
+		font-weight: normal;
+		text-transform: uppercase;
+	}
+
+	> nav ul {
+		position: relative;
+	}
+
+	> nav li {
+		position: absolute;
+		width: 100%;
+		animation: zoom 200ms forwards;
+		opacity: 0;
+		transition: top 200ms;
+	}
+
+	> nav li > a {
+		position: relative;
+		display: flex;
+		overflow: hidden;
+		flex-flow: row;
+		align-items: center;
+		margin-left: 16px;
+		border-right: 2px solid transparent;
+		border-bottom-left-radius: 48px;
+		border-top-left-radius: 48px;
+		text-transform: capitalize;
+		transition: border 500ms;
+	}
+
+	> nav li > a:hover {
+		background-color: var(--app-highlight);
+	}
+
+	> nav li > a::after {
+		position: absolute;
+		top: 0;
+		right: -2px;
+		bottom: 0;
+		left: 0;
+		background-image: radial-gradient(
+			circle,
+			var(--app-ripple) 1%,
+			transparent 1%
+		);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 10000%;
+		content: '';
+		opacity: 0;
+		transition: opacity 700ms, background 300ms;
+	}
+
+	> nav li > a:active::after {
+		background-size: 100%;
+		opacity: 0.5;
+		transition: none;
+	}
+
+	> nav li > a.active {
+		border-color: var(--app-primary);
+		background-color: var(--app-highlight);
+	}
+
+	> nav li > a > * {
+		margin: 8px;
+	}
+
+	#people-main {
+		padding-left: var(--menu-width);
+	}
+}
diff --git a/preact/demo/people/styles/avatar.scss b/preact/demo/people/styles/avatar.scss
new file mode 100644
index 0000000..437c6c4
--- /dev/null
+++ b/preact/demo/people/styles/avatar.scss
@@ -0,0 +1,16 @@
+#people-app {
+	.avatar {
+		display: inline-block;
+		overflow: hidden;
+		width: var(--avatar-size, 32px);
+		height: var(--avatar-size, 32px);
+		background-color: var(--avatar-color, var(--app-primary));
+		border-radius: 50%;
+		font-size: calc(var(--avatar-size, 32px) * 0.5);
+		line-height: var(--avatar-size, 32px);
+		object-fit: cover;
+		text-align: center;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+}
diff --git a/preact/demo/people/styles/button.scss b/preact/demo/people/styles/button.scss
new file mode 100644
index 0000000..ce43138
--- /dev/null
+++ b/preact/demo/people/styles/button.scss
@@ -0,0 +1,115 @@
+#people-app {
+	button {
+		position: relative;
+		overflow: hidden;
+		min-width: 36px;
+		height: 36px;
+		padding: 0 16px;
+		border: none;
+		background-color: transparent;
+		border-radius: 4px;
+		color: var(--app-text);
+		font-family: 'Montserrat', sans-serif;
+		font-size: 14px;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		transition: background 300ms, color 200ms;
+		white-space: nowrap;
+	}
+
+	button::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: var(--app-ripple);
+		content: '';
+		opacity: 0;
+		transition: opacity 200ms;
+	}
+
+	button:hover:not(:disabled)::before {
+		opacity: 0.3;
+		transition: opacity 100ms;
+	}
+
+	button:active:not(:disabled)::before {
+		opacity: 0.7;
+		transition: none;
+	}
+
+	button::after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-image: radial-gradient(
+			circle,
+			var(--app-ripple) 1%,
+			transparent 1%
+		);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 20000%;
+		content: '';
+		opacity: 0;
+		transition: opacity 700ms, background 400ms;
+	}
+
+	button:active:not(:disabled)::after {
+		background-size: 100%;
+		opacity: 1;
+		transition: none;
+	}
+
+	button.primary {
+		background-color: var(--app-primary);
+		box-shadow: 0 2px 6px var(--app-shadow);
+	}
+
+	button.secondary {
+		background-color: var(--app-secondary);
+		box-shadow: 0 2px 6px var(--app-shadow);
+	}
+
+	button:disabled {
+		color: var(--app-text-secondary);
+	}
+
+	button.busy {
+		animation: stripes 500ms linear infinite;
+		background-image: repeating-linear-gradient(
+			45deg,
+			var(--app-shadow) 0%,
+			var(--app-shadow) 25%,
+			transparent 25%,
+			transparent 50%,
+			var(--app-shadow) 50%,
+			var(--app-shadow) 75%,
+			transparent 75%,
+			transparent 100%
+		);
+		color: var(--app-text);
+		/* letter-spacing: -.7em; */
+	}
+
+	button:disabled:not(.primary):not(.secondary).busy,
+	button:disabled.primary:not(.busy),
+	button:disabled.secondary:not(.busy) {
+		background-color: var(--app-background-disabled);
+	}
+
+	@keyframes stripes {
+		from {
+			background-position-x: 0;
+			background-size: 16px 16px;
+		}
+		to {
+			background-position-x: 16px;
+			background-size: 16px 16px;
+		}
+	}
+}
diff --git a/preact/demo/people/styles/index.scss b/preact/demo/people/styles/index.scss
new file mode 100644
index 0000000..80b342e
--- /dev/null
+++ b/preact/demo/people/styles/index.scss
@@ -0,0 +1,168 @@
+@import 'app.scss';
+@import 'animations.scss';
+@import 'avatar.scss';
+@import 'profile.scss';
+@import 'button.scss';
+
+// :root {
+#people-app {
+	--app-background: #2f2b43;
+	--app-background-secondary: #353249;
+	--app-background-disabled: #555366;
+	--app-highlight: rgba(255, 255, 255, 0.1);
+	--app-ripple: rgba(255, 255, 255, 0.5);
+	--app-shadow: rgba(0, 0, 0, 0.15);
+	--app-text: #fff;
+	--app-text-secondary: #807e97;
+	--app-primary: #ff0087;
+	--app-secondary: #4d7cfe;
+	--app-tertiary: #00ec97;
+	--app-danger: #f3c835;
+	--spinner-size: 200px;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+// body {
+#people-app {
+	// display: flow-root;
+	// overflow: auto;
+	// min-height: 100vh;
+	// margin: 0;
+	// animation: background-light 5s ease-out forwards;
+	// /* very fancy background */
+	// background: radial-gradient(
+	// 		circle 15px at 150px 90vh,
+	// 		rgba(255, 255, 255, 0.35),
+	// 		rgba(255, 255, 255, 0.35) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 9px at 60px 50vh,
+	// 		rgba(255, 255, 255, 0.55),
+	// 		rgba(255, 255, 255, 0.55) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 19px at 40vw 70px,
+	// 		rgba(255, 255, 255, 0.3),
+	// 		rgba(255, 255, 255, 0.3) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 12px at 80vw 80px,
+	// 		rgba(255, 255, 255, 0.4),
+	// 		rgba(255, 255, 255, 0.4) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 7px at 55vw calc(100vh - 95px),
+	// 		rgba(255, 255, 255, 0.6),
+	// 		rgba(255, 255, 255, 0.6) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 14px at 25vw calc(100vh - 35px),
+	// 		rgba(255, 255, 255, 0.4),
+	// 		rgba(255, 255, 255, 0.4) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 11px at calc(100vw - 95px) 55vh,
+	// 		rgba(255, 255, 255, 0.45),
+	// 		rgba(255, 255, 255, 0.45) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 13px at calc(100vw - 35px) 85vh,
+	// 		rgba(255, 255, 255, 0.4),
+	// 		rgba(255, 255, 255, 0.4) 90%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 50vw at 0 -25%,
+	// 		rgba(255, 255, 255, 0.07),
+	// 		rgba(255, 255, 255, 0.07) 100%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(
+	// 		circle 80vw at top left,
+	// 		rgba(255, 255, 255, 0.07),
+	// 		rgba(255, 255, 255, 0.07) 100%,
+	// 		transparent
+	// 	),
+	// 	radial-gradient(circle at bottom right, #ef2fb8, transparent),
+	// 	radial-gradient(circle at top right, #c45af3, transparent),
+	// 	linear-gradient(#ee66ca, #ff47a6);
+	color: var(--app-text);
+	font-family: 'Montserrat', sans-serif;
+}
+
+#people-app {
+	.spinner {
+		position: absolute;
+		top: 200px;
+		left: calc(50% - var(--spinner-size) / 2);
+		width: var(--spinner-size);
+		height: var(--spinner-size);
+		animation: zoom 250ms 500ms forwards ease-out;
+		opacity: 0;
+		transition: opacity 200ms, transform 200ms ease-in;
+	}
+
+	.spinner.exit {
+		opacity: 0;
+		transform: scale(0.5);
+	}
+
+	.spinner::before,
+	.spinner::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: calc(var(--spinner-size) / 3);
+		height: calc(var(--spinner-size) / 3);
+		animation: spinner 2s infinite ease-in-out;
+		background-color: rgba(255, 255, 255, 0.6);
+		content: '';
+	}
+
+	.spinner::after {
+		animation-delay: -1s;
+	}
+
+	@keyframes spinner {
+		25% {
+			transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
+				rotate(-90deg) scale(0.5);
+		}
+		50% {
+			transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
+				translateY(calc(var(--spinner-size) / 3 * 2 - 1px)) rotate(-179deg);
+		}
+		50.1% {
+			transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
+				translateY(calc(var(--spinner-size) / 3 * 2 - 1px)) rotate(-180deg);
+		}
+		75% {
+			transform: translateX(0) translateY(calc(var(--spinner-size) / 3 * 2 - 1px))
+				rotate(-270deg) scale(0.5);
+		}
+		100% {
+			transform: rotate(-360deg);
+		}
+	}
+
+	ul,
+	ol {
+		padding-left: 0;
+		list-style: none;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+}
diff --git a/preact/demo/people/styles/profile.scss b/preact/demo/people/styles/profile.scss
new file mode 100644
index 0000000..f74b760
--- /dev/null
+++ b/preact/demo/people/styles/profile.scss
@@ -0,0 +1,26 @@
+#people-app {
+	.profile {
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		margin: 32px 0;
+		animation: appear-from-left 0.5s forwards;
+		--avatar-size: 80px;
+	}
+
+	.profile h2 {
+		text-transform: capitalize;
+	}
+
+	.profile .details {
+		display: flex;
+		flex-flow: column;
+		align-items: stretch;
+		margin: 16px auto;
+	}
+
+	.profile .details p {
+		margin-top: 8px;
+		margin-bottom: 8px;
+	}
+}