Add files via upload

Author: edmond-chow

sources/style.css

@@ -318,20 +318,23 @@
 			/* top */
 			body > top {
 				position: fixed;
+				margin: 0px;
+				top: 8px;
+				left: min(max(calc(50% - 516px), 8px), 10%);
+				width: max(min(calc(100% - 16px), 1032px), 80%);
 				z-index: 4; /* -> layer[fixed] */
 			}
 			top /* -> */ {
 				overflow: hidden;
 				position: relative;
-				margin: 8px 0px;
+				margin: 8px;
 				border: 1px solid #e7e7e7;
+				outline: #ff9900 solid 0px;
 				transition-property: max-height, box-shadow;
 				transition-duration: 0.5s;
 				background-color: #f3f3f3;
 				box-sizing: border-box;
 				max-height: 53px;
-				left: min(max(calc(50% - 516px), 8px), 10%);
-				width: max(min(calc(100% - 16px), 1032px), 80%);
 			}
 			top:hover {
 				animation-name: extending-hidden-scrollbar;
@@ -409,22 +412,14 @@
 				width: 100%;
 				height: 100%;
 			}
-			body > top + :is(major, major.tiny) {
+			body > top + major {
 				height: auto;
-				padding-top: 69px;
-			}
-			body.blur > top + :is(major, major.tiny) {
-				padding-top: 67px;
 			}
 			major > major-menu /* -> */ {
-				position: absolute;
 				width: 100%;
 				height: 0px;
-				left: 0px;
-				top: 0px;
-				z-index: 2; /* -> layer[top] */
 			}
-			major.no-menu > major-menu {
+			body > top + major > major-menu, major.no-menu > major-menu {
 				display: none;
 			}
 			major > sub-major /* -> */ {
@@ -445,15 +440,12 @@
 				padding-top: 18px;
 				padding-bottom: 54px;
 			}
-			:is(major, major.tiny):not(.no-menu) > sub-major > major-post {
+			body > top + major > sub-major > major-post, major:not(.no-menu) > sub-major > major-post {
 				padding-top: 69px;
 			}
-			body.blur :is(major, major.tiny):not(.no-menu) > sub-major > major-post {
+			body.blur > top + major > sub-major > major-post, body.blur major:not(.no-menu) > sub-major > major-post {
 				padding-top: 67px;
 			}
-			body > top + :is(major, major.tiny).no-menu > sub-major > major-post {
-				padding-top: 0px;
-			}
 			/* post */
 			post /* -> */ {
 				padding: 4px 0px;
@@ -509,8 +501,8 @@
 				border: 1px solid rgba(247, 247, 247, 0.7);
 				width: 100%;
 				height: 100%;
-				left: -1px;
 				top: -1px;
+				left: -1px;
 				pointer-events: none;
 			}
 			post[icon-src] > post-icon + sub-post {
@@ -534,8 +526,8 @@
 			body.blur post > sub-post:after {
 				border-radius: inherit;
 				border: 0px;
-				left: 0px;
 				top: 0px;
+				left: 0px;
 			}
 			body.blur post.non-blur > sub-post:before {
 				background-color: rgba(239, 239, 239, 0.9);
@@ -657,11 +649,11 @@
 			}
 			post > sub-post > scroll-into /* -> */ {
 				position: relative;
+				top: -9px;
 				left: -8px;
-				top: -70px;
 			}
 			body.blur post > sub-post > scroll-into {
-				top: -67px;
+				top: -8px;
 			}
 			/* dropdown */
 			dropdown /* -> */ {
@@ -862,6 +854,21 @@
 			}
 		}
 		@layer constrained-container {
+			/* major */
+			major > major-menu > top {
+				position: absolute;
+				margin: 0px;
+				top: 8px;
+				left: min(max(calc(50% - 516px), 8px), 10%);
+				width: max(min(calc(100% - 16px), 1032px), 80%);
+				z-index: 2; /* -> layer[top] */
+			}
+			major > sub-major post.adjust > sub-post > scroll-into {
+				top: -70px;
+			}
+			body.blur major > sub-major post.adjust > sub-post > scroll-into {
+				top: -67px;
+			}
 			/* post */
 			post > sub-post > post-leader > post-leader-advance > :is(button.advance, dropdown.has-single-button) {
 				display: inline-block;

sources/style.js

@@ -512,13 +512,15 @@
 		document.dispatchEvent(eventScrollIntoView);
 	};
 	let conveyMajorToPosts = () => {
+		let inlinedMajorNodes = forAll('body > top + major, body > major:not(.no-menu)');
 		let markedPostNodes = [];
 		forAllTag('major').map((value) => {
 			return new Major(value);
 		}).filter((value) => {
 			return value.completed;
 		}).forEach((majorValue) => {
 			let shouldTinyPosts = majorValue.majorNode.classList.contains('tiny');
+			let shouldAdjustPosts = inlinedMajorNodes.length > 0;
 			let markerReversed = [];
 			if (majorValue.majorNode.hasAttribute('marker-reversed')) {
 				markerReversed = majorValue.majorNode.getAttribute('marker-reversed').split(' ').map((value) => {
@@ -551,6 +553,11 @@
 					} else {
 						postValue.postNode.classList.remove('tiny');
 					}
+					if (shouldAdjustPosts) {
+						postValue.postNode.classList.add('adjust');
+					} else {
+						postValue.postNode.classList.remove('adjust');
+					}
 					markedPostNodes.push(postValue.postNode);
 					subPostConducting(postValue.postContentSubstanceNode, subOrderString + '.', postLayer + 1);
 				});
@@ -566,6 +573,7 @@
 		}).forEach((postValue) => {
 			postValue.postNode.removeAttribute('marker');
 			postValue.postNode.classList.remove('tiny');
+			postValue.postNode.classList.remove('adjust');
 		});
 	};
 	let structuredTag = async () => {