diff --git a/src/Config.css b/src/Config.css index 03c1601..65df266 100644 --- a/src/Config.css +++ b/src/Config.css @@ -1,6 +1,6 @@ .config-ui-header { text-align: center; - top: 0; + top: 1em; position: sticky; } diff --git a/src/Sidebar.css b/src/Sidebar.css index 6367653..8470cb7 100644 --- a/src/Sidebar.css +++ b/src/Sidebar.css @@ -17,18 +17,24 @@ .sidebar { user-select: text; - transition: left 150ms ease-out; position: fixed; - left: 100%; top: 0; height: 100%; width: calc(100% - 700px); padding: 1em; background-color: rgba(255,255,255,.7); - z-index: 21; overflow-y: auto; + padding-top: 2em; + padding-bottom: 1em; +} + +.sidebar, .sidebar-title { + left: 100%; + transition: left 150ms ease-out; + z-index: 21; + width: calc(100% - 700px); } -.sidebar-on .sidebar { +.sidebar-on .sidebar, .sidebar-on .sidebar-title { left: 700px; } @@ -38,19 +44,19 @@ } @media screen and (max-width: 1300px) { - .sidebar { + .sidebar, .sidebar-title { width: 550px; padding: 1em .5em; } - .sidebar-on .sidebar { + .sidebar-on .sidebar, .sidebar-on .sidebar-title { left: calc(100% - 550px); } } @media screen and (max-width: 570px) { - .sidebar { + .sidebar, .sidebar-title { width: calc(100% - 20px); } - .sidebar-on .sidebar { + .sidebar-on .sidebar, .sidebar-on .sidebar-title { left: 20px; } } diff --git a/src/Sidebar.js b/src/Sidebar.js index 9bbf3aa..0f32959 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -6,12 +6,12 @@ export function Sidebar(props) {
-

-    - {props.title} -

{props.content}
+
+    + {props.title} +
); } \ No newline at end of file