rename layout classes

make more consistent with rscss naming.

src/js/index.js

@@ -1,7 +1,19 @@
 (function() {
+	const observeSelector = '.js-onscreen';
+	const observedNodes = document.querySelectorAll(observeSelector);
+	let observedCount = 0;
+	let observedTotal = !!observeSelector ? observedNodes.length : 0;
+
 	window.addEventListener('DOMContentLoaded', event => {
 		const intersectionSupport = !!window.IntersectionObserver;
 
+		function updateObservedCount() {
+			observedCount++;
+			if (observedCount >= observedTotal) {
+				document.body.classList.add('observe-done');
+			}
+		}
+
 		function onScreenHandler(entries) {
 			entries.forEach(entry => {
 				if (entry.intersectionRatio > 0) {
@@ -12,7 +24,7 @@
 			});
 		}
 
-		document.querySelectorAll('.js-onscreen').forEach(el => {
+		observedNodes.forEach(el => {
 			if (intersectionSupport) {
 				const options = {
 					rootMargin: '0px',
@@ -22,6 +34,7 @@
 				observer.observe(el);
 				el.classList.add('is-observed');
 			}
+			updateObservedCount();
 		});
 	});
 })();

src/scss/_layout.scss

@@ -1,9 +1,9 @@
-.l-wrapper {
+.l-section-wrapper {
 	max-width: $column-max-width;
 	margin: 0 auto;
 }
 
-.l-column {
+.l-section-column {
 	width: 100%;
 	height: 100%;
 	padding: 0 16px;