update anchor header styles (#42)

* update anchor header styles

* update anchor with .discrete class

* updates for step headers

Author: josuebran

src/css/doc.css

@@ -114,16 +114,26 @@
   font-weight: var(--alt-heading-font-weight);
 }
 
+.doc h2:not(.discrete),
+.doc h3:not(.discrete),
+.doc h4:not(.discrete),
+.doc h5:not(.discrete),
+.doc h6:not(.discrete) {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--ds-space-h);
+}
+
 .doc h1 .anchor,
 .doc h2 .anchor,
 .doc h3 .anchor,
 .doc h4 .anchor,
 .doc h5 .anchor,
 .doc h6 .anchor {
-  position: absolute;
+  display: flex;
   text-decoration: none;
-  width: 2.75ex;
-  margin-left: -2ex;
   visibility: hidden;
   font-weight: normal;
   color: var(--ds-primary-soft-hover-bg);
@@ -1003,19 +1013,13 @@
   counter-reset: step;
 }
 
-.doc .step h2::before,
-.doc .step h3::before,
-.doc .step h4::before {
+.doc .step h2::after,
+.doc .step h3::after,
+.doc .step h4::after {
   counter-increment: step;
   content: counter(step) ". ";
 }
 
-.doc .step h2 .anchor,
-.doc .step h3 .anchor,
-.doc .step h4 .anchor {
-  margin-left: -4.25ex;
-}
-
 .doc .conum[data-value] {
   @include text-overline;
 

src/css/ds-layout.css

@@ -16,37 +16,41 @@
   }
 }
 
-html[data-layout="full"] main > .content {
-  justify-content: center;
-}
+html[data-layout="full"] {
+  main > .content {
+    justify-content: center;
+  }
 
-html[data-layout="full"] .content-container {
-  flex-wrap: wrap;
-  align-content: center;
+  .content-container {
+    flex-wrap: wrap;
+    align-content: center;
+  }
 }
 
-html[data-layout="landing"] .toolbar,
-html[data-layout="full"] .toolbar {
-  justify-content: flex-end;
-}
+html[data-layout="landing"],
+html[data-layout="full"] {
+  .toolbar {
+    justify-content: flex-end;
+  }
 
-html[data-layout="landing"] .doc > h1.page:first-child,
-html[data-layout="full"] .doc > h1.page:first-child {
-  font-size: calc(34 / var(--rem-base) * 1rem);
-  margin-top: var(--ds-space-3);
-  margin-top: var(--ds-space-2);
-}
+  .doc > h1.page:first-child {
+    font-size: calc(34 / var(--rem-base) * 1rem);
+    margin-top: var(--ds-space-3);
+    margin-top: var(--ds-space-2);
+  }
 
-html[data-layout="landing"] #preamble,
-html[data-layout="full"] #preamble {
-  max-width: 650px;
-}
+  #preamble {
+    max-width: 650px;
+  }
 
-html[data-layout="landing"] .doc .olist li + li,
-html[data-layout="landing"] .doc .ulist li + li,
-html[data-layout="full"] .doc .olist li + li,
-html[data-layout="full"] .doc .ulist li + li {
-  margin-top: var(--ds-space-2);
+  .anchor {
+    display: none;
+  }
+
+  .doc .olist li + li,
+  .doc .ulist li + li {
+    margin-top: var(--ds-space-2);
+  }
 }
 
 .sect1.text-h1 {