new testimonial effect

packages/website/_includes/default.html

@@ -38,407 +38,450 @@
 			href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh"
 		/>
 		<style type="text/css">
-					:root {
+						:root {
-						--layout-max-width: 90ch;
+							--layout-max-width: 90ch;
-						--base-font-size: 1em;
+							--base-font-size: 1em;
-					}
+						}
-					*,*:after,*:before {
+						*,*:after,*:before {
-						box-sizing: border-box;
+							box-sizing: border-box;
-					}
+						}
 
-					html {
+						html {
-						font-size: var(--base-font-size);
+							font-size: var(--base-font-size);
-					}
+						}
 
-					body {
+						body {
-						font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+							font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-							Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+								Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-						background: white;
+							background: white;
-						min-height: 100vh;
+							min-height: 100vh;
-						line-height: 1.4;
+							line-height: 1.4;
-						padding: 0;
+							padding: 0;
-						margin: 0;
+							margin: 0;
-						color: #3a3a3a;
+							color: #3a3a3a;
-						-webkit-font-smoothing: antialiased;
+							-webkit-font-smoothing: antialiased;
-					}
+						}
-					body.docs {
+						body.docs {
-						max-width: 70ch;
+							max-width: 70ch;
-						margin: 0 auto;
-					}
-
-					.ml-1 {
-						margin-left: 1rem;
-					}
-
-					.ml-2 {
-						margin-left: 2rem;
-					}
-
-					.mb-1 {
-						margin-bottom: 1rem;
-					}
-
-					.mb-2 {
-						margin-bottom: 2rem;
-					}
-
-					.ta-c {
-						text-align: center;
-					}
-
-					.d-f {
-						display: flex;
-					}
-
-					.logo {
-						vertical-align: middle;
-						position: relative;
-						top: -10px;
-						margin-right: 10px;
-					}
-
-					button {
-						font-size: inherit;
-					}
-					.homepage-title {
-						font-size: 3.1em;
-						margin: 0;
-						padding: 0.25em 0 0;
-						text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
-						color:white;
-					}
-
-					.main-content {
-						padding: 1rem;
-						max-width: var(--layout-max-width);
-						margin: 0 auto;
-						min-height: 55vh;
-					}
-
-					@media screen and (max-width: 700px) {
-						.logo {
-							display: block;
 							margin: 0 auto;
 						}
 
-						h2 {
+						.ml-1 {
-							padding: 0 10px;
+							margin-left: 1rem;
 						}
-					}
 
-					img {
+						.ml-2 {
-						max-width: 90%;
+							margin-left: 2rem;
-					}
+						}
 
-					a {
+						.mb-1 {
-						color: #1a5a7a;
+							margin-bottom: 1rem;
-					}
+						}
 
-					h1,h2,h3 {
+						.mb-2 {
-						font-family: 'Raleway', sans-serif;
+							margin-bottom: 2rem;
-					}
+						}
-					.flex {
-						display: flex;
-					}
 
-					.hero {
+						.ta-c {
-						text-align: center;
+							text-align: center;
-						background: linear-gradient(45deg, #000001, #65487d);
+						}
-						color: #a7a1bd;
-						padding: 2em 1em;
-						margin-bottom: 2em;
-						min-height: 97vh;
-					}
-					.hero a {
-						color: white;
-					}
-					.header {
-						min-width: 45ch;
-					}
-					.hero-img {
-						margin-top: 30px;
-						perspective: 400px;
-					}
 
-					.btn {
+						.d-f {
-						background: rgba(0, 0, 0, 0.2);
-						padding: 10px 2em;
-						display: inline-block;
-						border-radius: 8px;
-						text-transform: uppercase;
-						transition: 0.25s ease;
-						color: rgba(0, 0, 0, 0.7);
-					}
-
-					.btn:not(.disabled):hover {
-						transform: scale(1.1);
-					}
-
-					.download-btn {
-						color: white;
-						background: linear-gradient(to bottom, #4d7bd6, #3c5d9e);
-						border: 2px solid #32508b;
-						border-bottom-color: #4870b3;
-						line-height: 2.5rem;
-						margin: 1rem 0 0;
-						/* width: 80%; */
-						text-decoration: none;
-					}
-
-					.download-btn.disabled {
-						filter: grayscale(50);
-						cursor: not-allowed;
-					}
-
-					.web-app-btn {
-						position: relative;
-					}
-
-					.web-app-btn:hover:after {
-						transform: rotate(0deg);
-					}
-
-					.web-app-btn:hover:before {
-						transform: rotate(-10deg);
-					}
-
-					.btn > img {
-						vertical-align: middle;
-						margin-right: 10px;
-					}
-
-					.screenshot {
-						box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6);
-						transform: rotateX(4deg) rotateY(-2deg);
-						border: 1px solid black;
-						border-radius: 10px;
-						max-width: 90%;
-					}
-
-					.site-header {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						padding: 0.5rem 1rem;
-					}
-
-					.site-header__logo {
-						width: 50px;
-						height: 20px;
-					}
-
-					.site-footer {
-						max-width: var(--layout-max-width);
-						margin: 4rem auto 0;
-					}
-
-					.site-footer__links  {
-			display: flex;
-			justify-content: center;
-			flex-wrap: wrap;
-			gap : 1rem;
-					}
-					.site-footer ul {
-						list-style: none;
-						padding: 0 0.5em;/
-					}
-
-					a svg {
-						fill: rgba(255, 255, 255, 0.6);
-					}
-
-					a:hover svg {
-						fill: white;
-					}
-
-					.social-bar {
-						display: none;
-					}
-
-					.feature-box {
-						flex-wrap: wrap;
-						margin-top: 2em;
-						justify-content: center;
-					}
-
-					.feature {
-						flex-basis: 100%;
-						max-width: 100%;
-						margin: 0.5em;
-						/* padding: 0.5em 1em; */
-						box-sizing: border-box;
-					}
-
-					.feature__title {
-						border-bottom: 7px solid;
-						padding-bottom: 0.4em;
-						white-space: nowrap;
-					}
-
-					.feature svg {
-						width: 32px;
-						height: 32px;
-						fill: #444;
-					}
-
-					.info {
-						display: none;
-						visibility: hidden;
-					}
-
-					.people-say {
-						margin: 4em 0 4em;
-						/* width: 100vw; */
-						overflow-x: hidden;
-					}
-
-					.people-say-top {
-						align-items: flex-end;
-					}
-
-					.people-say-bottom {
-						align-items: flex-start;
-					}
-
-					.say {
-						color: inherit;
-						padding: 10px 20px;
-						margin: 10px 10px;
-						display: block;
-						flex-shrink: 0;
-						border-radius: 5px;
-						font-size: 0.95rem;
-						background: #f8f8f8;
-						text-align: left;
-						border: 1px solid rgba(0, 0, 0, 0.05);
-						text-decoration: none;
-					}
-
-					.say:hover {
-						border-color: rgba(0, 0, 0, 0.2);
-					}
-
-					.say p {
-						margin: 10px 0 0 0;
-					}
-
-					.say__name {
-						font-weight: bold;
-						color: #555;
-						display: flex;
-						align-items: center;
-					}
-
-					.say__name img {
-						height: 40px;
-						border-radius: 50%;
-						margin-right: 10px;
-					}
-
-					.say__handle {
-						color: #515151;
-						font-weight: 400;
-					}
-
-					@media (min-width: 1200px) {
-						.hero {
 							display: flex;
-							justify-content: center;
-							align-items: center;
-							margin-bottom: 2em;
-							padding: 3em;
-						}
-					}
-					@media (min-width: 751px) {
-						:root {
-							--base-font-size: 1.2em;
 						}
 
+						.logo {
+							vertical-align: middle;
+							position: relative;
+							top: -10px;
+							margin-right: 10px;
+						}
+
+						button {
+							font-size: inherit;
+						}
 						.homepage-title {
-							font-size: 4em;
+							font-size: 3.1em;
+							margin: 0;
+							padding: 0.25em 0 0;
+							text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
+							color:white;
+						}
+
+						.main-content {
+							padding: 1rem;
+							max-width: var(--layout-max-width);
+							margin: 0 auto;
+							min-height: 55vh;
+						}
+
+						@media screen and (max-width: 700px) {
+							.logo {
+								display: block;
+								margin: 0 auto;
+							}
+
+							h2 {
+								padding: 0 10px;
+							}
+						}
+
+						img {
+							max-width: 90%;
+						}
+
+						a {
+							color: #1a5a7a;
+						}
+
+						h1,h2,h3 {
+							font-family: 'Raleway', sans-serif;
+						}
+						.flex {
+							display: flex;
+						}
+
+						.hero {
+							text-align: center;
+							background: linear-gradient(45deg, #000001, #65487d);
+							color: #a7a1bd;
+							padding: 2em 1em;
+							margin-bottom: 2em;
+							min-height: 97vh;
+						}
+						.hero a {
+							color: white;
+						}
+						.header {
+							min-width: 45ch;
+						}
+						.hero-img {
+							margin-top: 30px;
+							perspective: 800px;
+						}
+
+						.btn {
+							background: rgba(0, 0, 0, 0.2);
+							padding: 10px 2em;
+							display: inline-block;
+							border-radius: 8px;
+							text-transform: uppercase;
+							transition: 0.25s ease;
+							color: rgba(0, 0, 0, 0.7);
+						}
+
+						.btn:not(.disabled):hover {
+							transform: scale(1.1);
+						}
+
+						.download-btn {
+							color: white;
+							background: linear-gradient(to bottom, #4d7bd6, #3c5d9e);
+							border: 2px solid #32508b;
+							border-bottom-color: #4870b3;
+							line-height: 2.5rem;
+							margin: 1rem 0 0;
+							/* width: 80%; */
+							text-decoration: none;
+						}
+
+						.download-btn.disabled {
+							filter: grayscale(50);
+							cursor: not-allowed;
+						}
+
+						.web-app-btn {
+							position: relative;
+						}
+
+						.web-app-btn:hover:after {
+							transform: rotate(0deg);
+						}
+
+						.web-app-btn:hover:before {
+							transform: rotate(-10deg);
+						}
+
+						.btn > img {
+							vertical-align: middle;
+							margin-right: 10px;
+						}
+
+						.screenshot {
+							box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6);
+							transform: rotateX(4deg) rotateY(-2deg);
+							border: 1px solid black;
+							border-radius: 10px;
+							max-width: 90%;
 						}
 
 						.site-header {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
 							padding: 0.5rem 1rem;
 						}
 
-						.logo {
+						.site-header__logo {
-							width: 6em;
+							width: 50px;
-							height: auto;
+							height: 20px;
 						}
 
-						.web-app-btn:after {
+						.site-footer {
-							right: -50px;
+							max-width: var(--layout-max-width);
+							margin: 4rem auto 0;
 						}
 
-						.web-app-btn:before {
+						.site-footer__links  {
-							right: -22px;
+				display: flex;
+				justify-content: center;
+				flex-wrap: wrap;
+				gap : 1rem;
+						}
+						.site-footer ul {
+							list-style: none;
+							padding: 0 0.5em;/
+						}
+
+						a svg {
+							fill: rgba(255, 255, 255, 0.6);
+						}
+
+						a:hover svg {
+							fill: white;
+						}
+
+						.social-bar {
+							display: none;
 						}
 
 						.feature-box {
-							min-width: 400px;
+							flex-wrap: wrap;
-							/* width: 80vw; */
+							margin-top: 2em;
-							margin: 0 auto;
+							justify-content: center;
 						}
 
 						.feature {
-							padding: 0.5em 2em;
+							flex-basis: 100%;
-							flex: 1;
+							max-width: 100%;
-							flex-basis: 16vw;
+							margin: 0.5em;
-							padding: 0.5em 2em;
+							/* padding: 0.5em 1em; */
-							margin: 1em;
+							box-sizing: border-box;
+						}
+
+						.feature__title {
+							border-bottom: 7px solid;
+							padding-bottom: 0.4em;
+							white-space: nowrap;
+						}
+
+						.feature svg {
+							width: 32px;
+							height: 32px;
+							fill: #444;
 						}
 
 						.info {
-							background: white;
+							display: none;
-							box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
+							visibility: hidden;
-							padding: 2rem;
-							position: fixed;
-							will-change: transform;
-							bottom: 0;
-							transform: translateY(101%);
-							width: 70vw;
-							margin-left: -35vw;
-							left: 50%;
-							text-align: left;
-							font-size: 0.9em;
-							transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9);
 						}
 
-						.info.show {
+						.people-say {
-							display: block;
+							margin: 4em 0 4em;
-							visibility: visible;
+							/* overflow-x: hidden; */
-							transform: translateY(0);
+							transform-style: preserve-3d;
+							perspective: 800px;
+							padding:0 2rem;
+						}
+
+						.people-say-top {
+							align-items: flex-end;
 						}
 
-						.people-say-top,
 						.people-say-bottom {
-							display: flex;
+							align-items: flex-start;
-							overflow: scroll;
 						}
 
 						.say {
-							width: 18vw;
+							color: inherit;
+							padding: 1rem 2rem;
+							margin: 1rem 0.8rem;
+							display: block;
 							flex-shrink: 0;
-							padding: 20px;
+							border-radius: 5px;
+							font-size: 0.95rem;
+							background: #faf8fc;
+							text-align: left;
+							border: 2px solid #222;
+							text-decoration: none;
+							transition: 0.3s ease;
+						}
+
+						.say:hover {
+							transform: scale(1.05);
 						}
 
 						.say p {
-							margin: 20px 0 0 0;
+							margin: 10px 0 0 0;
 						}
-					}
 
-					@media screen and (min-width: 2000px) {
+						.say__name {
-						:root {
+							font-weight: bold;
-							--base-font-size: 1.7em;
+							color: #555;
+							display: flex;
+							align-items: center;
 						}
-					}
 
-					@media screen and (min-width: 3000px) {
+						.say__name img {
-						:root {
+							height: 40px;
-							--base-font-size: 2.1em;
+							border-radius: 50%;
+							margin-right: 10px;
 						}
-					}
+
+						.say__handle {
+							color: #515151;
+							font-weight: 400;
+						}
+
+						@media (min-width: 1200px) {
+							.hero {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								margin-bottom: 2em;
+								padding: 3em;
+							}
+						}
+						@media (min-width: 751px) {
+							:root {
+								--base-font-size: 1.2em;
+							}
+
+							.homepage-title {
+								font-size: 4em;
+							}
+
+							.site-header {
+								padding: 0.5rem 1rem;
+							}
+
+							.logo {
+								width: 6em;
+								height: auto;
+							}
+
+							.web-app-btn:after {
+								right: -50px;
+							}
+
+							.web-app-btn:before {
+								right: -22px;
+							}
+
+							.feature-box {
+								min-width: 400px;
+								/* width: 80vw; */
+								margin: 0 auto;
+							}
+
+							.feature {
+								padding: 0.5em 2em;
+								flex: 1;
+								flex-basis: 16vw;
+								padding: 0.5em 2em;
+								margin: 1em;
+							}
+
+							.info {
+								background: white;
+								box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
+								padding: 2rem;
+								position: fixed;
+								will-change: transform;
+								bottom: 0;
+								transform: translateY(101%);
+								width: 70vw;
+								margin-left: -35vw;
+								left: 50%;
+								text-align: left;
+								font-size: 0.9em;
+								transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9);
+							}
+
+							.info.show {
+								display: block;
+								visibility: visible;
+								transform: translateY(0);
+							}
+
+							.people-say-top,
+							.people-say-bottom {
+								display: flex;
+								overflow: scroll;
+							}
+
+							.say {
+								width: 25ch;
+								flex-shrink: 0;
+								padding: 20px;
+							}
+
+							.say p {
+								margin: 20px 0 0 0;
+							}
+						}
+
+						@media screen and (min-width: 2000px) {
+							:root {
+								--base-font-size: 1.7em;
+							}
+						}
+
+						@media screen and (min-width: 3000px) {
+							:root {
+								--base-font-size: 2.1em;
+							}
+						}
+
+
+			@keyframes rotate-progress {
+				from {
+					transform: rotateY(8deg);
+				}
+
+				to {
+					transform: rotateY(-8deg);
+				}
+			}
+			@property --shadow-x {
+				syntax: "<length>";
+				inherits: false;
+				initial-value: 0px;
+			}
+			@keyframes shadow-progress {
+				from {
+					--shadow-x: -10px;
+				}
+
+				to {
+					--shadow-x: 10px;
+				}
+			}
+
+			.people-say-top,.people-say-bottom {
+				scroll-timeline: --page-scroll inline;
+				animation: rotate-progress auto linear;
+				animation-timeline: --page-scroll;
+			}
+			.say {
+				box-shadow: var(--shadow-x, -10px) var(--shadow-y,5px) 0px 2px rgba(0, 0, 0, 0.15);
+				animation: shadow-progress auto linear;
+				animation-timeline: --page-scroll;
+				will-change: box-shadow, scale, transform;
+			}
+			.people-say-bottom .say {
+				--shadow-y: -5px;
+			}
 		</style>
 	</head>
 

packages/website/_includes/footer.html

@@ -42,20 +42,17 @@
 	>
 		<img
 			src="https://cssbattle.dev/images/avatar-chang.png"
-			style="width: 180px; border-radius: 40px; position: relative; top: 2rem"
+			style="width: 180px; border-radius: 40px"
 		/>
 		<p
 			style="
-				position: absolute;
+				position: relative;
-				bottom: 0;
 				background: black;
 				border-radius: 1in;
-				padding: 5px 10px;
+				padding: 0.3rem 3rem;
 				color: white;
 				display: inline-block;
-				width: 30ch;
+				margin: -1.6rem 0 0;
-				margin: -1rem 0 0;
-				left: calc(50% - 15ch);
 			"
 		>
 			Made by

packages/website/index.html

@@ -2,7 +2,7 @@
 layout: default.html
 ---
 
-<h2 style="font-size: 2em; " class="ta-c">Awesome Features</h2>
+<h2 style="font-size: 2em" class="ta-c">Awesome Features</h2>
 
 <div class="flex feature-box">
 	<div class="feature">
@@ -64,8 +64,8 @@ layout: default.html
 </div>
 
 <div class="people-say">
-	<h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around">
+	<h2 style="font-size: 2em" class="ta-c" aria-label="Love from all around">
-		<span style="color:red;">♥</span> from all around
+		<span style="color: red">♥</span> from all around
 	</h2>
 	<div class="people-say-top">
 		<a
@@ -269,7 +269,7 @@ layout: default.html
 		or you can set up a filter in Adblock Plus or similar ad blocker tools like
 		AdBlock, uBlock or Adblock Pro.
 	</p>
-	<div style="text-align: center;">
+	<div style="text-align: center">
 		<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
 	</div>
 </div>