Initial commit

Author: crnacura

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.cache
+.parcel-cache
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops)
+
+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.

README.md

@@ -0,0 +1,327 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+:root {
+	font-size: 16px;
+	--color-text: #fff;
+	--color-bg: #000;
+	--color-link: #fff;
+	--color-link-hover: #fff;
+}
+
+body {
+	margin: 0;
+	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: "area-normal",-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+	font-family: "anonymous-pro", monospace;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	height: 100%;
+	overflow: hidden;
+}
+
+/* Page Loader */
+.js .loading::before,
+.js .loading::after {
+	content: '';
+	position: fixed;
+	z-index: 1000;
+}
+
+.js .loading::before {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--color-bg);
+}
+
+.js .loading::after {
+	top: 50%;
+	left: 50%;
+	width: 60px;
+	height: 60px;
+	margin: -30px 0 0 -30px;
+	border-radius: 50%;
+	opacity: 0.4;
+	background: var(--color-link);
+	animation: loaderAnim 0.7s linear infinite alternate forwards;
+
+}
+
+@keyframes loaderAnim {
+	to {
+		opacity: 1;
+		transform: scale3d(0.5,0.5,1);
+	}
+}
+
+a {
+	text-decoration: none;
+	color: var(--color-link);
+	outline: none;
+	cursor: pointer;
+}
+
+a:hover {
+	color: var(--color-link-hover);
+	outline: none;
+}
+
+/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
+a:focus {
+	/* Provide a fallback style for browsers
+	 that don't support :focus-visible */
+	outline: none;
+	background: lightgrey;
+}
+
+a:focus:not(:focus-visible) {
+	/* Remove the focus indicator on mouse-focus for browsers
+	 that do support :focus-visible */
+	background: transparent;
+}
+
+a:focus-visible {
+	/* Draw a very noticeable focus style for
+	 keyboard-focus on browsers that do support
+	 :focus-visible */
+	outline: 2px solid red;
+	background: transparent;
+}
+
+.unbutton {
+	background: none;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	cursor: pointer;
+}
+
+.unbutton:focus {
+	outline: none;
+}
+
+.frame {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	color: var(--color-title);
+	padding: 2rem;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto auto auto auto 1fr;
+	grid-template-areas: 'title title' 'prev back' 'demos demos' 'sponsor sponsor' 'nav nav';
+	justify-content: start;
+	align-content: start;
+	align-items: start;
+	z-index: 100;
+	pointer-events: none;
+	grid-gap: 1rem;
+}
+
+body #cdawrap {
+	align-self: start;
+	justify-self: start;
+}
+
+.frame a,
+.frame button {
+	pointer-events: auto;
+}
+
+.frame__title {
+	grid-area: title;
+	display: flex;
+	align-items: flex-end;
+	font-weight: 400;
+}
+
+.frame strong {
+	font-weight: 700;
+}
+
+.frame__title-main {
+	font-size: inherit;
+	margin: 0;
+	font-weight: inherit;
+}
+
+.frame__back {
+	grid-area: back;
+}
+
+.frame__prev {
+	grid-area: prev;
+}
+
+.frame__demos {
+	grid-area: demos;
+	display: grid;
+	grid-template-columns: repeat(8,auto);
+	column-gap: 1rem;
+	row-gap: 0.5rem;
+}
+
+.frame__demos span {
+	grid-column: 1 / span 8;
+}
+
+a.frame__demo {
+	font-weight: 400;
+	font-size: 1rem;
+	text-decoration: none;
+	opacity: 0.5;
+	font-family: "anonymous-pro", monospace;
+}
+
+a.frame__demo--current {
+	font-weight: 700;
+	opacity: 1;
+	color: var(--color-link-hover);
+}
+
+.slides {
+	width: 100%;
+	height: 100vh;
+	overflow: hidden;
+	display: grid;
+	grid-template-rows: 100%;
+	grid-template-columns: 100%;
+	place-items: center;
+}
+
+.slide {
+	width: 100%;
+	height: 100%;
+	grid-area: 1 / 1 / -1 / -1;
+	pointer-events: none;
+	opacity: 0;
+	overflow: hidden;
+	position: relative;
+	display: grid;
+	place-items: center;
+	will-change: transform, opacity;
+}
+
+.slide--current {
+	pointer-events: auto;
+	opacity: 1;
+}
+
+.deco {
+	width: 100%;
+	height: 100%;
+	grid-area: 1 / 1 / -1 / -1;
+	pointer-events: none;
+	position: relative;
+	opacity: 0;
+	background: #8c718e;
+	will-change: transform, opacity;
+}
+
+.deco--1 {
+	background: #d4503e;
+}
+
+.deco--2 {
+	background: #1c1a1a;
+}
+
+.deco--3 {
+	background: #4e4141;
+}
+
+.deco--4 {
+	background: #000;
+}
+
+.deco--5 {
+	background: #060b17;
+}
+
+.deco--6 {
+	background: #34365c;
+}
+
+.deco--7 {
+	background: #9f6794;
+}
+
+.slide__img {
+	width: 100%;
+	height: 100%;
+	background-size: cover;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	will-change: transform, opacity, filter;
+}
+
+.demo-2 .slide__img {
+	width: 120%;
+	height: 120%;
+}
+
+.slides-nav {
+	grid-area: nav;
+	display: flex;
+	gap: 0.5rem;
+	align-self: end;
+	align-items: center;
+}
+
+.slides-nav::before {
+	content: 'scroll / drag';
+	margin-right: 2rem;
+}
+
+.slides-nav__item {
+	border: 0;
+	background: #fff;
+	color: #000;
+	width: 60px;
+	aspect-ratio: 1;
+	display: grid;
+	place-items: center;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+.slides-nav__item:hover {
+	background-color: #ccc;
+}
+
+
+@media screen and (min-width: 53em) {
+	.frame { 
+		height: 100vh; 
+		grid-gap: 2rem;
+		align-content: space-between;
+		grid-template-columns: auto auto auto 1fr;
+		grid-template-rows: auto auto;
+		grid-template-areas: 'title back prev demos' 'sponsor ... ... nav ';
+	}
+	.frame__demos {
+		justify-self: end;
+		justify-content: end;
+	}
+	.frame__demos span,
+	a.frame__demo {
+		text-align: right;
+	}
+	.slides-nav {
+		justify-self: end;
+	}
+	body #cdawrap {
+		align-self: center;
+		justify-self: start;
+	}
+}