major: use @startinblox/hubl-styling-framework

src/styles/content/_index.scss

@@ -0,0 +1,97 @@
+main {
+  height: calc(100vh - 72px);
+}
+
+/* Styles of the right-hand menu + pages with that menu */
+.with-sidebar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  /*margin-top: 50px;*/
+  overflow: hidden;
+
+  /*@media(min-width: 1024px) {
+    margin-top: 0;
+  }*/
+
+  .views-container {
+    flex: 1 0 0;
+    /*-webkit-backface-visibility: hidden;*/
+
+    &.sidebar-is-closed {
+
+      @media(min-width: 1024px) {
+        margin-left: -152px;
+        transform: translate(152px);
+      }
+    }
+  }
+
+  >div {
+    transition: all 0.5s;
+  }
+
+  nav {
+    background: #F1F1F1;
+    transition: all 0.5s;
+    width: 217px;
+
+    ul {
+
+      li {
+        border-bottom: 1px solid #D6CECE;
+
+        &>a {
+          vertical-align: super;
+        }
+      }
+      &>li:first-child>a {
+        vertical-align: middle;
+      }
+
+      >solid-route {
+
+        &[active]>li {
+          background-color: var(--color-heading);
+          color: white;
+        }
+        &:hover:not([active])>li {
+          background: #E4E4E4;
+        }
+      }
+    }
+
+    &.jsRightMenu {
+      display: none;
+
+      @media(min-width: 1024px) {
+        display: block;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
+      transform: translate(152px);
+    }
+
+    &.jsRightMenu[open] {
+
+      @media(min-width: 1024px) {
+        display: block;
+        bottom: 0;
+        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
+        min-width: 60%;
+        position: fixed;
+        right: 0;
+        top: 50px;
+        z-index: 1;
+      }
+      @media(min-width: 1024px) {
+        box-shadow: none;
+        min-width: unset;
+        position: unset;
+        z-index: unset;
+      }
+    }
+  }
+}