Smaller sidebar, visible header (#250)

app/src/components/categorydescription.js

@@ -5,7 +5,7 @@ export default ({categoryName}) => {
     return (
         <div aria-labelledby="category-description">
             <h2 id="category-description">
-                Mind expanding books on {categoryName}
+                {categoryName}
             </h2>
         </div>
     )

app/src/components/header.js

@@ -3,12 +3,11 @@ import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header className="my-1 bg-red" aria-labelledby='main-title'>
+  <header className="my-1 bg-red custom-header" aria-labelledby='main-title'>
     <h1 id="main-title" style={{ margin: 0 }}>
       <Link
         to="/"
         style={{
-          color: `white`,
           textDecoration: `none`,
         }}
       >

app/src/styles/global.css

@@ -0,0 +1,3 @@
+.custom-header{
+    position: fixed;
+}

app/src/styles/sidebar.css

@@ -4,8 +4,9 @@
   bottom: 0;
   left: 0;
   min-height: 100vh !important;
-  padding: 48px 0 0;
+  margin: 70px 0 0;
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
+  width: max-content;
 }
 #sidebar-wrapper {
   min-height: 100vh !important;
@@ -20,7 +21,6 @@
   padding: 0.875rem 1.25rem;
   font-size: 1.2rem;
 }
-
 #page-content-wrapper {
   min-width: 0;
   width: 100%;