Merge pull request #168 from 10up/feature/content-width

Feature/content width
10up · Aug 22, 2024 · 004e927 · 004e927
2 parents 572b015 + 2a9a444
commit 004e927
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 7 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -18,4 +18,5 @@
 @import "global-sidebar";
 @import "homepage-search";
 @import "homepage-components";
-@import "docs-content";
+@import "docs-content";
+@import "toc";
diff --git a/src/css/global-footer.css b/src/css/global-footer.css
@@ -1,6 +1,12 @@
 .footer {
   padding-inline: 0;
   border-top: 2px solid var(--ifm-color-secondary-lightest);
+
+  & > .container {
+    padding: 0;
+    margin: 0;
+    max-width: 100%;
+  }
 }
 
 .footer-about {
@@ -10,7 +16,7 @@
 
 .footer-about-inner {
   margin: 0 auto;
-  max-width: var(--wide-width);
+  max-width: var(--normal-width);
   text-align: center;
 }
 
@@ -57,14 +63,18 @@
   background-color: var(--ifm-color-primary-dark);
 }
 
+.footer__links {
+  max-width: var(--normal-width);
+  margin: 0 auto;
+}
 
 .footer-10up {
   padding: 3rem var(--ifm-spacing-horizontal);
 }
 
 .footer-10up .wrap {
   margin: 0 auto;
-  max-width: var(--wide-width);
+  max-width: var(--normal-width);
   text-align: center;
 }
 
@@ -96,4 +106,4 @@
   .footer-10up p {
     margin: 0;
   }
-}
+}
diff --git a/src/css/global-site.css b/src/css/global-site.css
@@ -32,7 +32,7 @@ main > .container {
 }
 
 .content-wrapper {
-  width: var(--wide-width);
+  width: var(--normal-width);
   margin-inline: auto;
 }
 

diff --git a/src/css/toc.css b/src/css/toc.css
@@ -0,0 +1,32 @@
+.table-of-contents {
+  border-left: none;
+
+  & li {
+	margin: 0 0.25rem 0 0;
+
+	& ul {
+	  margin-left: 0.75rem;
+	}
+  }
+
+  & a {
+	padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+	text-decoration: none;
+	border-radius: .5rem;
+
+	&:hover {
+	  color: var(--ifm-color-primary);
+	  text-decoration: underline;
+	}
+  }
+
+  & .table-of-contents__link--active {
+	outline: 1px solid #ddd;
+	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
+	font-weight: 700;
+  }
+
+  & code {
+	font-size: inherit;
+  }
+}
diff --git a/src/css/variables.css b/src/css/variables.css
@@ -20,7 +20,7 @@
   --ifm-link-decoration: underline;
   --ifm-link-hover-color: var(--ifm-color-primary-dark);
   --ifm-code-font-size: 1rem;
-  --ifm-container-width-xl: 80ch;
+  --ifm-container-width-xl: 120ch;
   --ifm-container-width: 80ch;
   --ifm-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -36,6 +36,7 @@
   --c-10up-secondary-dark: #7ED5D4;
 
   --wide-width: min(calc(100vw - 2.5rem), calc(var(--ifm-container-width-xl) + 300px));
+  --normal-width: min(calc(100vw - 2.5rem), calc(var(--ifm-container-width) + 300px));
 
   --docusaurus-highlighted-code-line-bg: #e0e0e0;
-}
+}