content, css: main-separator

3 files changed, 36 insertions, 8 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index edee0611..1664c788 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -183,6 +183,11 @@ export default {
               }),
             ])),
 
+          (!html.isBlank(relations.artistCommentaryEntries) ||
+           !html.isBlank(relations.creditSourceEntries))
+          &&
+            html.tag('hr', {class: 'main-separator'}),
+
           language.encapsulate('releaseInfo.additionalFiles', capsule =>
             html.tags([
               relations.contentHeading.clone()
diff --git a/src/content/dependencies/generateContentContentHeading.js b/src/content/dependencies/generateContentContentHeading.js
index 35bb91e9..314ef197 100644
--- a/src/content/dependencies/generateContentContentHeading.js
+++ b/src/content/dependencies/generateContentContentHeading.js
@@ -36,4 +36,4 @@ export default {
       stickyTitle:
         language.$(slots.string, 'sticky'),
     }),
-}
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index f98a5ab1..fe16f5d2 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -2230,31 +2230,54 @@ li .origin-details {
 
 #content hr {
   border: 1px inset #808080;
-  width: 100%;
+}
+
+#content hr.split {
+  color: #808080;
 }
 
 #content hr.split::before {
   content: "(split)";
-  color: #808080;
 }
 
-#content hr.split {
+#content hr.main-separator {
+  color: var(--dim-color);
+  clear: none;
+  margin-top: -0.25em;
+  margin-bottom: 1.75em;
+}
+
+#content hr.main-separator::before {
+  content: "♦";
+  font-size: 1.2em;
+}
+
+#content hr.split,
+#content hr.main-separator {
   position: relative;
   overflow: hidden;
   border: none;
 }
 
-#content hr.split::after {
+#content hr.split::after,
+#content hr.main-separator::after {
   display: inline-block;
   content: "";
-  border: 1px inset #808080;
-  width: 100%;
+  width: calc(100% - min(calc(8vw - 35px), 45px));
   position: absolute;
   top: 50%;
-  margin-top: -2px;
   margin-left: 10px;
 }
 
+#content hr.split::after {
+  border: 1px inset currentColor;
+  margin-top: -2px;
+}
+
+#content hr.main-separator::after {
+  border-bottom: 1px solid currentColor;
+}
+
 li > ul {
   margin-top: 5px;
 }