Site padding fixes + miscellaneous (#7)

colegoldsmith · web-flow · commit 59725a180c5b · 2023-09-18T11:10:34.000-05:00
* logo fix for prefers theme, site padding fixes, random style fixes

* input padding
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -3,9 +3,9 @@
   font-size: var(--doc-font-size);
   hyphens: auto;
   line-height: var(--doc-line-height);
-  margin: 0; /* var(--doc-margin); */
+  margin: var(--doc-margin);
   max-width: var(--doc-max-width);
-  padding-right: calc(40 / var(--rem-base) * 1rem);
+  padding-right: calc(24 / var(--rem-base) * 1rem);
   padding-left: calc(24 / var(--rem-base) * 1rem);
   padding-bottom: 4rem;
 }
@@ -14,7 +14,7 @@
   .doc {
     flex: auto;
     font-size: var(--doc-font-size--desktop);
-    margin: 0; /* var(--doc-margin--desktop); */
+    margin: var(--doc-margin--desktop);
     max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
@@ -132,6 +132,7 @@
 .doc h5 .anchor::before,
 .doc h6 .anchor::before {
   font-family: "Material Icons Outlined", sans-serif;
+  font-weight: 400;
   content: "\f1cd";
 }
 
diff --git a/src/css/ds-input.css b/src/css/ds-input.css
@@ -48,7 +48,15 @@
   font-size: 20px;
 }
 
+.ds-input--leading-icon + .ds-input {
+  padding-left: 0;
+}
+
 .ds-input--trailing-icon {
   margin-right: 10px;
   font-size: 20px;
 }
+
+.ds-input--trailing-icon + .ds-input {
+  padding-right: 0;
+}
diff --git a/src/css/ds-logo.css b/src/css/ds-logo.css
@@ -0,0 +1,51 @@
+html[data-theme="dark"] #datastax-docs-logo-main {
+  background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
+}
+
+html[data-theme="light"] #datastax-docs-logo-main {
+  background: url('../img/datastax-docs-logo-dark-bg.svg') no-repeat center / contain;
+}
+
+#datastax-docs-logo-main {
+  width: 287px;
+  height: 40px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
+  }
+}
+
+@media screen and (max-width: 768.5px) {
+  #datastax-docs-logo-main {
+    width: 162px;
+    height: 40px;
+  }
+
+  html[data-theme="dark"] #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-small-light-bg.svg') no-repeat center / contain;
+  }
+
+  html[data-theme="light"] #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-small-dark-bg.svg') no-repeat center / contain;
+  }
+}
+
+@media screen and (max-width: 768.5px) and (prefers-color-scheme: light) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-small-dark-bg.svg') no-repeat center / contain;
+  }
+}
+
+@media screen and (max-width: 768.5px) and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
+    background: url('../img/datastax-docs-logo-small-light-bg.svg') no-repeat center / contain;
+  }
+}
diff --git a/src/css/header.css b/src/css/header.css
@@ -9,7 +9,6 @@ body {
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
-  /* font-size: calc(16 / var(--rem-base) * 1rem); */
   height: var(--navbar-height);
   position: fixed;
   top: 0;
@@ -23,7 +22,6 @@ body {
 
 .navbar-brand {
   display: flex;
-  /* flex: auto; */
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--site-padding);
@@ -50,6 +48,7 @@ body {
 
 .navbar-burger::before {
   font-family: "Material Icons Outlined", sans-serif;
+  font-weight: 400;
   font-size: 20px;
   content: "\e5d2";
 }
@@ -58,25 +57,18 @@ body {
   content: "\e5cd";
 }
 
-#datastax-docs-logo-main {
-  width: 287px;
-  height: 40px;
-}
-
-html[data-theme="dark"] #datastax-docs-logo-main {
-  background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
-}
-
-html[data-theme="light"] #datastax-docs-logo-main {
-  background: url('../img/datastax-docs-logo-dark-bg.svg') no-repeat center / contain;
-}
-
 @media screen and (min-width: 769px) {
   #search-input {
     width: 200px;
   }
 }
 
+@media screen and (max-width: 768.5px) {
+  #search-button {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 1023.5px) {
   #get-support {
     width: 40px;
@@ -87,36 +79,10 @@ html[data-theme="light"] #datastax-docs-logo-main {
   #get-support .ds-button--leading-icon {
     margin: 0;
   }
-}
-
-@media screen and (max-width: 768.5px) {
-  #search-button {
-    display: none;
-  }
-
-  #datastax-docs-logo-main {
-    width: 162px;
-    height: 40px;
-  }
-
-  html[data-theme="dark"] #datastax-docs-logo-main {
-    background: url('../img/datastax-docs-logo-small-light-bg.svg') no-repeat center / contain;
-  }
-
-  html[data-theme="light"] #datastax-docs-logo-main {
-    background: url('../img/datastax-docs-logo-small-dark-bg.svg') no-repeat center / contain;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  #search-input {
-    width: 200px;
-  }
-}
 
-@media screen and (max-width: 1023.5px) {
   .navbar-brand {
     height: inherit;
+    padding: 0 var(--site-padding--mobile);
   }
 
   .navbar-brand .navbar-item {
@@ -130,7 +96,7 @@ html[data-theme="light"] #datastax-docs-logo-main {
     max-height: var(--body-min-height);
     overflow-y: auto;
     overscroll-behavior: none;
-    padding: 16px var(--site-padding);
+    padding: var(--site-padding--mobile);
     border-top: 1px solid var(--ds-divider);
     border-bottom: 1px solid var(--ds-divider);
   }
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,3 +1,7 @@
+main {
+  padding-right: var(--site-padding);
+}
+
 @media screen and (max-width: 1023.5px) {
   aside.toc.sidebar {
     display: none;
@@ -6,6 +10,10 @@
   main > .content {
     overflow-x: auto;
   }
+
+  main {
+    padding-right: 0;
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -33,7 +41,3 @@
     flex-basis: var(--toc-width--widescreen);
   }
 }
-
-main {
-  padding-right: calc(24 / var(--rem-base) * 1rem);
-}
diff --git a/src/css/page-versions.css b/src/css/page-versions.css
@@ -21,6 +21,7 @@
   padding: 0.5rem 1.5rem 0.5rem 0.5rem;
   position: relative;
   z-index: var(--z-index-page-version-menu);
+  border-radius: 6px;
 }
 
 .page-versions .version-menu {
@@ -34,6 +35,8 @@
   top: 0;
   right: 0;
   white-space: nowrap;
+  border-radius: 6px;
+  border: 1px solid var(--ds-divider);
 }
 
 .page-versions:not(.is-active) .version-menu {
diff --git a/src/css/site.css b/src/css/site.css
@@ -12,6 +12,7 @@
 @import "ds-typography.css";
 @import "ds-button.css";
 @import "ds-input.css";
+@import "ds-logo.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
@@ -9,7 +9,7 @@
   position: sticky;
   top: var(--navbar-height);
   z-index: var(--z-index-toolbar);
-  padding: 0 var(--site-padding) 0 24px;
+  padding-left: calc(24 / var(--rem-base) * 1rem);
 }
 
 .toolbar ul li:last-of-type {
@@ -22,6 +22,7 @@
 
 .nav-toggle::after {
   font-family: "Material Icons Outlined", sans-serif;
+  font-weight: 400;
   font-size: 20px;
   content: "\e9bd";
 }
@@ -50,3 +51,9 @@
 .toolbar .edit-this-page a {
   color: var(--toolbar-font-color);
 }
+
+@media screen and (max-width: 1023.5px) {
+  .toolbar {
+    padding-right: var(--site-padding--mobile);
+  }
+}
diff --git a/src/css/vars.css b/src/css/vars.css
@@ -41,8 +41,8 @@
   --toolbar-border-color: var(--ds-divider);
   --toolbar-font-color: var(--ds-primary-main);
   --toolbar-muted-color: var(--ds-text-tertiary);
-  --page-version-menu-background: var(--ds-background-level3);
-  --page-version-missing-font-color: var(--ds-text-tertiary);
+  --page-version-menu-background: var(--ds-background-body);
+  --page-version-missing-font-color: var(--ds-text-disabled);
   /* admonitions */
   --caution-color: var(--ds-primary-main);
   --caution-on-color: var(--ds-text-inverse);
@@ -105,6 +105,7 @@
   --footer-link-font-color: var(--link-font-color);
   /* dimensions and positioning */
   --site-padding: calc(32 / var(--rem-base) * 1rem);
+  --site-padding--mobile: calc(24 / var(--rem-base) * 1rem);
   --navbar-height: calc(100 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
diff --git a/src/partials/nav-toggle.hbs b/src/partials/nav-toggle.hbs
@@ -1 +1 @@
-<button class="nav-toggle ds-button ds-button--color-neutral ds-button--variant-plain"></button>
+<button class="nav-toggle ds-button ds-button--color-neutral ds-button--variant-plain ds-button--is-icon"></button>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+main {`
	`2`	`+ padding-right: var(--site-padding);`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`@media screen and (max-width: 1023.5px) {`
`2`	`6`	`aside.toc.sidebar {`
`3`	`7`	`display: none;`
`@@ -6,6 +10,10 @@`
`6`	`10`	`main > .content {`
`7`	`11`	`overflow-x: auto;`
`8`	`12`	`}`
	`13`	`+`
	`14`	`+ main {`
	`15`	`+ padding-right: 0;`
	`16`	`+ }`
`9`	`17`	`}`
`10`	`18`
`11`	`19`	`@media screen and (min-width: 1024px) {`
`@@ -33,7 +41,3 @@`
`33`	`41`	`flex-basis: var(--toc-width--widescreen);`
`34`	`42`	`}`
`35`	`43`	`}`
`36`		`-`
`37`		`-main {`
`38`		`- padding-right: calc(24 / var(--rem-base) * 1rem);`
`39`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`padding: 0.5rem 1.5rem 0.5rem 0.5rem;`
`22`	`22`	`position: relative;`
`23`	`23`	`z-index: var(--z-index-page-version-menu);`
	`24`	`+ border-radius: 6px;`
`24`	`25`	`}`
`25`	`26`
`26`	`27`	`.page-versions .version-menu {`
`@@ -34,6 +35,8 @@`
`34`	`35`	`top: 0;`
`35`	`36`	`right: 0;`
`36`	`37`	`white-space: nowrap;`
	`38`	`+ border-radius: 6px;`
	`39`	`+ border: 1px solid var(--ds-divider);`
`37`	`40`	`}`
`38`	`41`
`39`	`42`	`.page-versions:not(.is-active) .version-menu {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<button class="nav-toggle ds-button ds-button--color-neutral ds-button--variant-plain"></button>`
	`1`	`+<button class="nav-toggle ds-button ds-button--color-neutral ds-button--variant-plain ds-button--is-icon"></button>`