feat: make theme larger & cleaner

gregberge · Dec 6, 2020 · 245f8a7 · 245f8a7
1 parent 06f5307
commit 245f8a7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/smooth-doc/src/components/DocLayout.js b/smooth-doc/src/components/DocLayout.js
@@ -51,15 +51,23 @@ const Container = styled.div`
     'md',
     css`
       display: grid;
-      grid-template-columns: 200px 0 minmax(0, 1fr);
+      grid-template-columns: 288px minmax(0, 1fr);
       grid-gap: ${th.space(5)};
+
+      .sidebar-container {
+        display: none;
+      }
     `,
   )}
 
   ${up(
     'xl',
     css`
-      grid-template-columns: 200px 0 minmax(0, 1fr) 200px;
+      grid-template-columns: 288px minmax(0, 1fr) 288px;
+
+      .sidebar-container {
+        display: none;
+      }
     `,
   )}
 `
@@ -79,7 +87,7 @@ const SidebarSticky = styled.aside`
   padding: 4 0;
   overflow-y: auto;
   height: calc(100vh - 50px);
-  width: 200px;
+  width: 288px;
 
   ${down(
     'md',
@@ -183,7 +191,7 @@ export function DocLayout({ children, tableOfContents, editLink, ...props }) {
           <SidebarSticky>
             <SideNav {...sideNav} />
           </SidebarSticky>
-          <div>
+          <div className="sidebar-container">
             {!upMd && (
               <MobileSidebar>
                 <SideNav {...sideNav} />

diff --git a/smooth-doc/src/components/SideNav.js b/smooth-doc/src/components/SideNav.js
@@ -77,6 +77,8 @@ const NavGroupMenuItem = styled.li`
   list-style-type: none;
   margin: 2 0 0 -2px;
   padding: 0;
+  font-size: 14;
+  font-weight: 500;
 
   a {
     color: on-background-light;
@@ -87,15 +89,18 @@ const NavGroupMenuItem = styled.li`
     border-left: 3;
     border-color: transparent;
     text-decoration: none;
+    opacity: 0.85;
 
     &:hover {
       color: on-background;
+      opacity: 1;
     }
 
     &[aria-current='page'] {
       font-weight: 600;
       border-color: primary;
       color: on-background;
+      opacity: 1;
     }
   }
 `

diff --git a/smooth-doc/src/components/TableOfContents.js b/smooth-doc/src/components/TableOfContents.js
@@ -111,7 +111,8 @@ const TocContainer = styled.div`
 
   h4 {
     margin: 0;
-    font-size: 13;
+    font-size: 14;
+    font-weight: 500;
     text-transform: uppercase;
     color: on-background-light;
   }
@@ -134,16 +135,19 @@ const TocContainer = styled.div`
     transition: fast;
     color: on-background-light;
     text-decoration: none;
+    opacity: 0.85;
 
     &[aria-current] {
       font-weight: 500;
       color: on-background;
       transform: translateX(2px);
+      opacity: 1;
     }
 
     &:hover {
       color: on-background;
       transform: translateX(2px);
+      opacity: 1;
     }
   }
 `

diff --git a/smooth-doc/src/theme.js b/smooth-doc/src/theme.js
@@ -127,7 +127,7 @@ export const theme = {
     'control-focus': th.shadow('focus'),
   },
   sizes: {
-    screen: 1280,
+    screen: 1440,
   },
   colors: {
     black: '#000',