assests/scss: cleanup of main.scss (#749)

open-telemetry · Sep 21, 2021 · 649324c · 649324c
1 parent 1acbc0d
commit 649324c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 142 deletions.
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -1,5 +1,8 @@
 /* docsy-delta full file override: we're not tracking changes to the docsy file of the same name. */
 
+@import "registry";
+@import "tabs";
+
 .navbar-position-absolute {
   position: absolute !important;
 }
@@ -36,3 +39,50 @@
       }
   }  
 }
+
+// Adjust the spacing of page-mata and page-TOC (https://github.com/open-telemetry/opentelemetry.io/pull/354)
+.td-toc #TableOfContents {
+  padding-top: 1rem;
+}
+
+// https://github.com/open-telemetry/opentelemetry.io/pull/377/files
+section#announcement {
+  display: flex;
+  justify-content: center;
+  padding: 6px;
+}
+
+// Homepage
+#cncf {
+  width: 100%;
+  text-align: center;
+
+  a { color: $primary; }
+  p {
+    font-size: 18px;
+    margin-bottom: 0;
+  }
+  img {
+    margin-top: 1rem;
+    width: 20rem;
+    max-width: 80%;
+  }
+}
+
+// https://github.com/open-telemetry/opentelemetry.io/pull/414
+.td-box--dark p > a {
+    color: #3176d9;
+}
+
+.td-box--dark p > a:hover,
+a:hover {
+    color: #3176d9;
+    text-decoration: underline;
+}
+
+// Adjust anchors scroll snape (https://github.com/open-telemetry/opentelemetry.io/pull/348)
+@include media-breakpoint-up(md) {
+  h2[id], h3[id], h4[id], h5[id] {
+    scroll-margin-top: 5rem;
+  }
+}
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
@@ -1,3 +1,5 @@
+/* docsy-delta full file override: we're not tracking changes to the docsy file of the same name. */
+
 $twitter-blue: #00aced;
 $gitter-magenta: #ec1363;
 $opentelemetry-orange: #f5a800;

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -1,4 +1,3 @@
-// note: if you add a new css file, make sure to import it here
 @import "support/functions";
 @import "variables_project";
 @import "variables";
@@ -27,8 +26,6 @@
 @import "blocks/blocks";
 @import "section-index";
 @import "pageinfo";
-@import "registry";
-@import "tabs";
 
 @if $td-enable-google-fonts {
   @import url($web-font-path);
@@ -51,48 +48,13 @@ footer {
     visibility: hidden;
   }
 
-  h2[id], h3[id], h4[id], h5[id] {
-    scroll-margin-top: 5rem;
+  h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before {
+    display: block;
+    content: " ";
+    margin-top: -5rem;
+    height: 5rem;
+    visibility: hidden;
   }
 }
 
-// Adjust the spacing of page-mata and page-TOC
-.td-toc #TableOfContents {
-  padding-top: 1rem;
-}
-
-
 @import "styles_project";
-
-section#announcement {
-  display: flex;
-  justify-content: center;
-  padding: 6px;
-}
-
-#cncf {
-  width: 100%;
-  text-align: center;
-
-  a { color: $primary; }
-  p {
-    font-size: 18px;
-    margin-bottom: 0;
-  }
-  img {
-    margin-top: 1rem;
-    width: 20rem;
-    max-width: 80%;
-  }
-}
-
-
-.td-box--dark p > a {
-    color: #3176d9;
-}
-
-.td-box--dark p > a:hover,
-a:hover {
-    color: #3176d9;
-    text-decoration: underline;
-}