add optimization for animation via viewport IntersectionObserver

.gitattributes

@@ -1,5 +1,3 @@
 *.sav filter=lfs diff=lfs merge=lfs -text
 *.bsp filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
-*.ttf filter=lfs diff=lfs merge=lfs -text
-*.woff2 filter=lfs diff=lfs merge=lfs -text

render/base.css

@@ -4,8 +4,12 @@
 }
 @font-face {
 	font-family: "OpenMojiDemoFont";
-	src: url("./fonts/OpenMoji/OpenMoji-color-colr1_svg.woff2") format("woff2");
+	src: url("./fonts/OpenMoji/OpenMoji-color-colr1_svg.ttf");
 }
+/*@font-face {
+	font-family: "OpenMojiDemoFont";
+	src: url("OpenMoji-color-colr1_svg.woff2") format("woff2");
+}*/
 @font-face {
 	font-family: "Twemoji Mozilla Built";
 	src: url("./fonts/Mozilla/Twemoji.Mozilla.ttf");
@@ -24,53 +28,21 @@ html, body {
 *, *:before, *:after {
   box-sizing: inherit;
 }
-
-h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child {
+h1,h2,h3,h4,h5 {
 	margin-top: 0;
 }
 
 .emoji {
-	font-family: "Noto Color Emoji", sans-serif;
+	/*font-family: "Twemoji Mozilla Built", sans-serif;*/
+	/*font-family: "Noto Color Emoji", sans-serif;*/
 	font-family: "OpenMojiDemoFont", sans-serif;
-	font-family: "Twemoji Mozilla Built", sans-serif;
-	font-size: 16px;
 	font-weight: 400;
 	font-style: normal;
-	position: relative;
-	/*top: 1px; /* Twemoji */
 }
 .emoji:after {
-	font-variant-emoji: emoji; /* experimental feature and only in firefox :( */
+	font-variant-emoji: emoji; /* experimental and only in firefox :( */
 	content: '\FE0F'; /* fuck off, give me emoji // https://codepoints.net/U+FE0F */
 }
-.emoji.Twemoji {
-	font-family: "Twemoji Mozilla Built", sans-serif;
-	font-size: 16px;
-	top: 2px;
-}
-.emoji.Noto {
-	font-family: "Noto Color Emoji", sans-serif;
-	font-size: 14px;
-	/*left: -1px;*/
-	top: 0px;
-}
-.emoji.OpenMoji {
-	font-family: "OpenMojiDemoFont", sans-serif;
-	font-size: 17px;
-	left: -2px;
-	top: 0px;
-	color: #888; /* fix outline */
-}
-.emoji.OpenMoji + .text-left-margin {
-	margin-left: 0;
-}
-.emoji.Noto + .text-left-margin {
-	margin-left: 5px;
-}
-.sidebar .emoji.Noto + .emoji.Noto {
-	margin-left: 4px;
-}
-
 
 footer {
 	text-align: center;
@@ -161,27 +133,17 @@ table, tr, td, th {
 	display: grid;
 	grid-gap: 2px;
 	align-items: stretch;
-	align-content: baseline;
-}
-.sidebar h2 {
-	font-size: 17px;
 }
+
 #options {
 	height: var(--options-height);
 }
 #table { }
-
 #fail_images {
 	display: grid;
-	justify-content: left;
-}
-#fail_images.center,
-.grid-container.reversed #fail_images.center{
 	justify-content: center;
 }
-.grid-container.reversed #fail_images {
-	justify-content: right;
-}
+
 
 .panel {
 	display: block;
@@ -199,27 +161,23 @@ table, tr, td, th {
 .content {
 	grid-area: content;
 	overflow: auto;
-	padding: 0px 10px;
+	justify-content: center;
 }
 
-
-
-body.mini { /* split feature */
+body.min { /* split feature */
 	width: 75%; margin: 0 auto; /* FIXME */
 }
-.mini .sidebar {
+.min .sidebar {
 	font-size: 12px;
-	/*font-weight: bold;*/
 }
-.mini .sidebar .panel > div {
+.min .sidebar .panel > div {
 	line-height: 20px;
 }
-.mini .sidebar #options.panel {
+.min .sidebar #options.panel {
 	height: var(--options-height-min);
 }
 
 
-
 @keyframes flash {
 	0% {
 		z-index: 1;
@@ -286,45 +244,11 @@ body.mini { /* split feature */
 	position: absolute;
 	animation: flash var(--animation-duration) infinite;
 }
-.block-gold.anim_off,
-.block-gold.anim_force_off,
-.all_diff .block-gold,
-.split_compare .block-gold{
+.block-gold.anim_off {
 	animation: none;
 }
 
 
-
-
-
-.split_compare .image-container {
-	cursor: col-resize;
-}
-.split_compare .block-gold {
-	overflow: hidden;
-	width: 50%;
-	position: absolute;
-	z-index: 10;
-}
-
-.split_compare .separator {
-	width: 1px;
-	height: 100%;
-	cursor: col-resize;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	z-index: 10;
-	backdrop-filter: invert(1);
-}
-.split_compare .block-test:after {
-	left: auto;
-	right: 25px;
-}
-
-
-
-
 :root {
 	--animation-duration: 0.7s;
 	--height-image: calc((100vh - 800px) / 2);
@@ -335,34 +259,23 @@ body.mini { /* split feature */
 	position: relative;
 }
 
-.meta-block h3 {
+.meta-block h2 {
 	/*display: none;*/
 	font-family: monospace;
 	/*font-family: "Gill Sans", sans-serif;*/
 	padding-top: 10px;
 	margin-top: revert;
-	/*font-size: 150%;*/
-	font-size: 1.5em;
 }
-.meta-block h3:before {
+.meta-block h2:before {
 	content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */
 }
-
-.text-link {
-	text-decoration: none;
-}
-
-#fail_images.vpadding .meta-block {
+#fail_images.padding .meta-block {
 	/*margin-block: 100vh;*/
 	padding-top: calc(var(--height-image));
 	padding-bottom: 2px;
 	/*padding-bottom: calc(50% - var(--height-image) );*/
 }
-#fail_images.vpadding .meta-block:last-child {
-	padding-top: calc(var(--height-image));
-	padding-bottom: calc(var(--height-image));
-}
-#fail_images.vpadding .meta-block h3, .meta-block:first-child h3 {
+#fail_images.padding .meta-block h2, .meta-block:first-child h2 {
 	border-top: none;
 }
 
@@ -374,27 +287,14 @@ body.mini { /* split feature */
 	/*z-index: 10;*/
 }
 
-.block-diff.show_diff,
-.all_diff .block-diff {
+.block-diff.show_diff {
 	display: block;
 	z-index: 2;
 }
 
-.diff_separate .block-diff {
-	display: block;
-	position: relative;
-	top: auto;
-}
 
 .image-container, img, .block {
 	max-width: 100%;
-	user-select: none;
-}
-/* TODO: исправить конфликт с image split compare */
-.split_compare .image-container,
-.split_compare img,
-.split_compare .block {
-	max-width: unset;
 }
 
 table {
@@ -422,46 +322,14 @@ th {
 }
 th.table-sticky {
 	position: sticky;
-	top: 2.7em; /* FIXME */
-}
-.mini th.table-sticky {
-	position: sticky;
-	top: 3.53em; /* FIXME */
+	top: 0;
 }
 #options.sticky + #table th.table-sticky {
-	top: calc(var(--options-height) + 2.74em); /* FIXME */
+	top: calc(var(--options-height) + 0.07em); /* FIXME */
 }
-.mini .sidebar #options.sticky + #table th.table-sticky {
-	top: calc(var(--options-height-min) + 3.50em); /* FIXME */
+.min .sidebar #options.sticky + #table th.table-sticky {
+	top: calc(var(--options-height-min) + 0.07em); /* FIXME */
 }
-.filter {
-	display: block;
-	padding: 10px 4px;
-	font-size: 16px;
-	font-weight: bold;
-}
-.filter * {
-	font-weight: normal;
-}
-.mini .filter {
-	font-size: 12px;
-}
-
-#options.sticky + #table .filter.sticky {
-	top: calc(var(--options-height) + 0.0em); /* FIXME */
-}
-.mini .sidebar #options.sticky + #table .filter.sticky {
-	top: calc(var(--options-height-min) + 0.0em); /* FIXME */
-}
-.filter input {
-	margin-left: 10px;
-}
-#options .filter.sticky {
-	
-}
-
-
-
 
 input[type=range] { vertical-align: middle; }
 
@@ -504,15 +372,4 @@ details[open] summary:before {
 .green {
 	color: #6b9a00;
 	color: oklch(62.8% 0.25768330773615683 128.19);
-}
-
-table th:nth-child(3) {
-	text-align: center;
-}
-table td:nth-child(3) { /* Δ, % // TODO: add class */
-	text-align: right;
-	font-family: Consolas, monospace;
-}
-table td:nth-child(4) { /* Passed // TODO: add class */
-	text-align: center;
-}
+}

render/fonts/Mozilla/LICENSE.md

@@ -1,50 +0,0 @@
-## License for the Code
-
-Copyright 2016-2018, Mozilla Foundation
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-
-
-## License for the Visual Design
-
-The Emoji art in the twe-svg.zip archive comes from [Twemoji](https://twitter.github.io/twemoji),
-and is used and redistributed under the CC-BY-4.0 [license terms](https://github.com/twitter/twemoji#license)
-offered by the Twemoji project.
-
-### Creative Commons Attribution 4.0 International (CC BY 4.0)
-https://creativecommons.org/licenses/by/4.0/legalcode
-or for the human readable summary: https://creativecommons.org/licenses/by/4.0/
-
-
-#### You are free to:
-**Share** — copy and redistribute the material in any medium or format
-
-**Adapt** — remix, transform, and build upon the material for any purpose, even commercially.
-
-The licensor cannot revoke these freedoms as long as you follow the license terms.
-
-
-#### Under the following terms:    
-**Attribution** — You must give appropriate credit, provide a link to the license,
-and indicate if changes were made.
-You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
-
-**No additional restrictions** — You may not apply legal terms or **technological measures**
-that legally restrict others from doing anything the license permits.
-
-#### Notices:
-You do not have to comply with the license for elements of the material in the public domain
-or where your use is permitted by an applicable exception or limitation. No warranties are given.
-The license may not give you all of the permissions necessary for your intended use.
-For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.