diff --git a/src/kapidox/data/htmlresource/css/kapidox.css b/src/kapidox/data/htmlresource/css/kapidox.css
--- a/src/kapidox/data/htmlresource/css/kapidox.css
+++ b/src/kapidox/data/htmlresource/css/kapidox.css
@@ -1,816 +1,670 @@
-/**
- *
- * Colors:
- *  bg-primary: #0057ae
- *  fg-primary: #ffffff
- */
-
 /**
  * Global
  */
 :root {
-    --base: white;
-    --on-base: black;
-    --plasma-blue: #54a3d8;
-    --on-plasma-blue: white;
-    --card: white;
-    --on-card: black;
-    --borders: rgba(0,0,0,0.3);
-    --borders-faint: rgba(0,0,0,0.1);
-}
+  --base: white;
+  --on-base: black;
+  --plasma-blue: #54a3d8;
+  --on-plasma-blue: white;
+  --card: white;
+  --on-card: black;
+  --borders: rgba(0,0,0,0.3);
+  --borders-faint: rgba(0,0,0,0.1); }
 
 @media (prefers-color-scheme: dark) {
-    table tr:nth-child(odd) {
-        background-color: transparent !important;
-    }
-    .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-        background-color: transparent !important;
-    }
-    :root {
-        --base: #232629;
-        --on-base: #eff0f1;
-        --card: rgba(255,255,255,0.1);
-        --on-card: #eff0f1;
-        --borders: rgba(255,255,255,0.2);
-        --borders-faint: rgba(255,255,255,0.05);
-        --plasma-blue: #98c8e8;
-        --on-plasma-blue: black;
-
-        background-color: var(--base);
-    }
-}
+  table tr:nth-child(odd) {
+    background-color: transparent !important; }
+
+  .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+    background-color: transparent !important; }
+
+  :root {
+    --base: #232629;
+    --on-base: #eff0f1;
+    --card: rgba(255,255,255,0.1);
+    --on-card: #eff0f1;
+    --borders: rgba(255,255,255,0.2);
+    --borders-faint: rgba(255,255,255,0.05);
+    --plasma-blue: #98c8e8;
+    --on-plasma-blue: black;
+    background-color: var(--base); } }
+body {
+  background: var(--base); }
 
 html {
-    margin: 0;
-}
+  font-family: "Noto Sans",Verdana, Geneva, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4em; }
 
-body {
-    background: var(--base);
-}
-
-body, table, div, p, dl {
-    font-family: "Noto Sans",Verdana, Geneva, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.4em;
-}
-
-#navbar
-{
-    height: 50px;
-    background-color: var(--base);
-    color: var(--on-base);
-    border-bottom: 4px solid var(--plasma-blue);
-}
-
-#navbar .container {
-    height: 100%;
-    max-width: 800px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.navbar-nav.breadcrumb {
+.body {
+  display: grid;
+  grid-template-columns: 300px auto;
+  grid-template-rows: 50px auto;
+  grid-template-areas: "sidebar header" "sidebar content"; }
+  @media (max-width: 767px) {
+    .body.no-js {
+      grid-template-columns: auto;
+      grid-template-rows: 50px auto auto;
+      grid-template-areas: "header" "sidebar" "content"; } }
+  @media (max-width: 767px) {
+    .body {
+      grid-template-columns: 0 auto;
+      grid-template-rows: 50px auto;
+      grid-template-areas: "sidebar header" "sidebar content"; }
+      .body .sidebar {
+        display: none; }
+      .body.sidebar-active {
+        grid-template-columns: 300px auto;
+        grid-template-rows: 50px auto;
+        grid-template-areas: "sidebar header" "sidebar content"; }
+        .body.sidebar-active .sidebar {
+          display: block;
+          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+          scrollbar-width: none;
+          overflow-y: scroll;
+          padding-bottom: 40px;
+          scrollbar-width: 0; }
+        .body.sidebar-active .header {
+          position: fixed;
+          left: 300px;
+          top: 0; }
+        .body.sidebar-active .content {
+          overflow: hidden;
+          max-width: 100%;
+          position: fixed;
+          left: 300px;
+          top: 50px; } }
+
+.header {
+  grid-area: header; }
+  .header .navbar-nav.breadcrumb {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
-}
-
-.navbar-nav.breadcrumb a {
-    padding: 13px;
-    font-size: 20px;
-}
-
-.navbar-nav > li {
-    float: initial;
-}
-
-.breadcrumb {
     margin-bottom: 0;
     height: 100%;
     background-color: transparent;
-}
-
-li.active a {
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-}
-
-#body_wrapper.container {
-    margin-right: initial;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    min-height: 100vh;
-}
-
-.api-kde-org-sidebar {
-    margin-top: 60px;
-}
-
-.navbar {
-    width: 100%;
-    min-width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    background-color: var(--base);
-}
-
-section {
+    max-height: 46px;
     margin-left: auto;
     margin-right: auto;
-    width: 80vw;
+    width: 60vw;
     max-width: 100%;
     padding-left: 20px;
-    padding-right: 20px;
-}
-
-.body {
+    padding-right: 20px; }
+    @media (max-width: 767px) {
+      .header .navbar-nav.breadcrumb {
+        width: 95vw; } }
+    .header .navbar-nav.breadcrumb .breadcrumb-link {
+      padding: 13px .2rem;
+      font-size: 20px; }
+
+@media (min-width: 767px) {
+  .navbar-toggler {
+    display: none; } }
+.sidebar {
+  background-color: var(--base);
+  grid-area: sidebar;
+  max-width: 100vw; }
+
+.content {
+  grid-area: content;
+  margin-top: 20px; }
+  .content > * {
+    margin-left: auto;
+    margin-right: auto;
+    width: 60vw;
+    max-width: 100%;
+    padding-left: 20px;
+    padding-right: 20px; }
+    @media (max-width: 767px) {
+      .content > * {
+        width: 95vw; } }
+  .content h1.content-title {
     display: flex;
-    flex-direction: column;
-}
-
-.api-kde-org-sidebar {
-    background-color: var(--base);
-}
+    justify-content: space-between;
+    flex-wrap: wrap; }
 
-@media (min-width: 768px) {
-    .api-kde-org-sidebar {
-        min-width: 300px;
-        max-width: 300px;
-        box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
-        z-index: 9999;
-        scrollbar-width: none;
-        overflow-y: scroll;
-        padding-bottom: 40px;
-        margin-top: 0;
-        scrollbar-width: 0;
-    }
-    .api-kde-org-sidebar::-webkit-scrollbar {
-        width: 0;
-    }
-
-    .navbar {
-        padding-left: 300px;
-    }
-    
-    aside {
-        margin-top: 60px;
-    }
-
-    .body {
-        flex-direction: row;
-    }
+footer {
+  width: 100%; }
 
-    main section {
-        margin-top: 60px;
-        width: 60vw;
-    }
-}
+main::after {
+  display: none !important; }
 
+@media (min-width: 768px) {
+  .sidebar {
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+    scrollbar-width: none;
+    overflow-y: scroll;
+    padding-bottom: 40px;
+    scrollbar-width: 0; }
+
+  .sidebar::-webkit-scrollbar {
+    width: 0; } }
 #sidebar-header {
-    height: 100px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-}
-
-@media (prefers-color-scheme: dark) {
-    #sidebar-header {
-        background-color: var(--card);
-        color: var(--on-card);
-    }
-}
-
-#sidebar-header a {
-    color: white;
-}
-
-#sidebar-header h2 {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--plasma-blue);
+  color: var(--on-plasma-blue); }
+  #sidebar-header a {
+    color: white; }
+  #sidebar-header h2 {
     font-size: 30px;
-    font-weight: 700;
-}
+    font-weight: 700; }
+  @media (prefers-color-scheme: dark) {
+    #sidebar-header #sidebar-header {
+      background-color: var(--card);
+      color: var(--on-card); } }
 
 @media (max-width: 767px) {
-    .navbar-nav {
-        margin: 0;
-    }
-    #sidebar-header {
-        display: none;
-    }
-}
+  .navbar-nav {
+    margin: 0; }
 
+  #sidebar-header {
+    display: none; } }
 #main-column {
-    width: 100%;
-    max-width: 1200px;
-}
+  width: 100%;
+  max-width: 1200px; }
 
 h1, h2, h3, h4, h5, h6, legend {
-    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
-    margin-top: 0;
-    font-weight: 700;
-    color: var(--on-base) !important;
-}
+  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
+  margin-top: 0;
+  font-weight: 700;
+  color: var(--on-base) !important; }
 
 h2.groupheader {
-    color: var(--on-base) !important;
-    border-bottom: 0;
-    margin-bottom: 8px;
-}
+  color: var(--on-base) !important;
+  border-bottom: 0;
+  margin-bottom: 8px; }
 
 h1 {
-    font-size: 300%;
-    margin-bottom: 8px;
-}
+  font-size: 300%;
+  margin-bottom: 8px; }
 
 h2, h2.groupheader {
-    font-size: 240%;
-    margin-bottom: 8px;
-}
+  font-size: 240%;
+  margin-bottom: 8px; }
 
 h3 {
-    font-size: 180%;
-    margin-bottom: 8px;
-}
+  font-size: 180%;
+  margin-bottom: 8px; }
 
 h4 {
-    font-size: 140%;
-    margin-bottom: 8px;
-}
+  font-size: 140%;
+  margin-bottom: 8px; }
 
 h5 {
-    font-size: 120%;
-    margin-bottom: 10px;
-}
+  font-size: 120%;
+  margin-bottom: 10px; }
 
-#navbar .navbar-brand
-{
-    padding-top:0;
-    padding-top:0;
-}
+#navbar .navbar-brand {
+  padding-top: 0;
+  padding-top: 0; }
 
 #navbar-logo {
-    width: 35px;
-    margin-top:10px;
-}
+  width: 35px;
+  margin-top: 10px; }
 
 #navbar-title {
-    font-size: 1.4em;
-    font-weight: bold;
-}
+  font-size: 1.4em;
+  font-weight: bold; }
 
 footer {
-    margin-top: 15px;
-    padding: 15px 0px 5px 0px;
-    margin-bottom: 0px;
-}
-
+  margin-top: 15px;
+  padding: 15px 0px 5px 0px;
+  margin-bottom: 0px; }
 
 /* The 2 next follow breadcrumb style... should find a way*/
 .nav li a {
-    padding: 8px 15px;
-    background-color: #f5f5f5;
-}
+  padding: 8px 15px;
+  background-color: #f5f5f5; }
 
 .nav li a:focus, .nav li a:hover {
-    background-color: #f5f5f5;
-    text-decoration: underline;
-}
+  background-color: #f5f5f5;
+  text-decoration: underline; }
 
 .bg-primary {
-    background-color: var(--plasma-blue) !important;
-    color: var(--on-plasma-blue) !important;
-}
+  background-color: var(--plasma-blue) !important;
+  color: var(--on-plasma-blue) !important; }
 
 @media (prefers-color-scheme: dark) {
-    .bg-primary {
-        background-color: var(--card) !important;
-        color: var(--on-card) !important;
-    }
-}
-
+  .bg-primary {
+    background-color: var(--card) !important;
+    color: var(--on-card) !important; } }
 footer.bg-primary {
-    background-color: transparent !important;
-    color: var(--on-base) !important;
-}
+  background-color: transparent !important;
+  color: var(--on-base) !important; }
 
 footer a {
-    font-weight: bold;
-    color: var(--on-base);
-}
+  font-weight: bold;
+  color: var(--on-base); }
 
 footer a:hover {
-    color: var(--on-base);
-}
+  color: var(--on-base); }
 
 #left h2 {
-    font-size: 1.2em;
-}
+  font-size: 1.2em; }
 
 .menu-box {
-    padding: 0.7em 0 0 0;
-}
+  padding: 0.7em 0 0 0; }
 
 .menu-box .menu-content {
-    margin: 0 7px 0 10px;
-}
+  margin: 0 7px 0 10px; }
 
 .menu-box ul {
-    list-style-type: none;
-    list-style-position:inside;
-    margin: 0 0 0 1.3em;
-    padding:0;
-}
+  list-style-type: none;
+  list-style-position: inside;
+  margin: 0 0 0 1.3em;
+  padding: 0; }
 
 .menu-title {
-    margin: 0.6em 0 1.2em 0;
-    padding:0;
-    color: var(--on-plasma-blue);
-    background-color: var(--plasma-blue);
-}
+  margin: 0.6em 0 1.2em 0;
+  padding: 0;
+  color: var(--on-plasma-blue);
+  background-color: var(--plasma-blue); }
 
 .sidebar-header .menu-title {
-    background-color: transparent;
-}
+  background-color: transparent; }
 
 @media (prefers-color-scheme: dark) {
-    .menu-title {
-        color: var(--on-card);
-        background-color: var(--card);
-    }
-}
-
+  .menu-title {
+    color: var(--on-card);
+    background-color: var(--card); } }
 .menu-title h2 {
-    margin: 0;
-    padding: 0.4em 1.3em 0.2em 1.3em;
-    line-height:1.2em;
-    font-size: 1.2em;
-    font-weight: normal;
-    color: var(--on-plasma-blue) !important;
-}
+  margin: 0;
+  padding: 0.4em 1.3em 0.2em 1.3em;
+  line-height: 1.2em;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: var(--on-plasma-blue) !important; }
 
 @media (prefers-color-scheme: dark) {
-    .menu-title h2 {
-        color: var(--on-card) !important;
-        background-color: transparent;
-    }
-    #sidebar-header .menu-title {
-        background-color: transparent;
-        color: var(--on-card);
-    }
-}
+  .menu-title h2 {
+    color: var(--on-card) !important;
+    background-color: transparent; }
 
+  #sidebar-header .menu-title {
+    background-color: transparent;
+    color: var(--on-card); } }
 a {
-    color: var(--plasma-blue);
-}
+  color: var(--plasma-blue); }
 
 .menu-content dl {
-    list-style-position: inside;
-    margin: 0;
-    padding: 0;
-}
+  list-style-position: inside;
+  margin: 0;
+  padding: 0; }
 
 .menu-content dl dd {
-    list-style-position: inside;
-    margin: 0 0 0 1.3em;
-    padding: 0;
-}
-
+  list-style-position: inside;
+  margin: 0 0 0 1.3em;
+  padding: 0; }
 
 /**
  * Frontpage
  */
-
 .product-row {
-    background: var(--card);
-    color: var(--on-card);
-    border: 1px solid var(--borders);
-    border-radius: 3px;
-    padding: 12px;
-    margin-bottom: 15px;
-    transition: all 0.3s;
-}
+  background: var(--card);
+  color: var(--on-card);
+  border: 1px solid var(--borders);
+  border-radius: 3px;
+  padding: 12px;
+  margin-bottom: 15px;
+  transition: all 0.3s; }
 
 .product-row:hover {
-    border: 1px solid transparent;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-    transform: translateY(-2);
-    transition: all 0.3s;
-}
+  border: 1px solid transparent;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  transform: translateY(-2);
+  transition: all 0.3s; }
 
 table.fieldtable {
-    width: initial;
-    border: 1px solid var(--borders);
-    border-radius: 0px;
-    box-shadow: none;
-}
+  width: initial;
+  border: 1px solid var(--borders);
+  border-radius: 0px;
+  box-shadow: none; }
 
 .fieldtable th {
-    background-image: none;
-    background-color: rgba(0,0,0,.2);
-    border-bottom: 1px solid var(--borders-faint);
-}
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--borders-faint); }
 
 .fieldtable td.fieldtype, .fieldtable td.fieldname {
-    border-bottom: 1px solid var(--borders-faint);
-    border-right: 1px solid var(--borders-faint);
-}
+  border-bottom: 1px solid var(--borders-faint);
+  border-right: 1px solid var(--borders-faint); }
 
 .fieldtable td.fielddoc {
-    border-bottom: 1px solid var(--borders-faint);
-}
+  border-bottom: 1px solid var(--borders-faint); }
 
 table.params .paramname {
-    padding-right: 10px;
-}
+  padding-right: 10px; }
 
 .product-logo {
-    margin-top: .5em;
-}
+  margin-top: .5em; }
 
 #kde-main-row {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center; }
 
 .kde-product-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
+  display: flex;
+  flex-direction: row;
+  align-items: center; }
 
 .kde-product-column {
-    margin-left: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; }
 
 /**
  * Subgroup
  */
-
 table.libraries {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 12px;
-}
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 12px; }
 
 table.libraries td, table.libraries th {
-    border: solid 1px var(--borders);
-}
+  border: solid 1px var(--borders); }
 
 table.libraries h3 {
-    margin: 0;
-    padding: 0;
-}
+  margin: 0;
+  padding: 0; }
 
 table.libraries td {
-    padding: 0.5em;
-}
+  padding: 0.5em; }
 
 table.libraries th {
-    background: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-    font-size: 1.1em;
-    line-height: 1.7em;
-    text-align: center;
-}
+  background: var(--plasma-blue);
+  color: var(--on-plasma-blue);
+  font-size: 1.1em;
+  line-height: 1.7em;
+  text-align: center; }
 
 @media (prefers-color-scheme: dark) {
-    table.libraries th {
-        background: var(--card);
-        color: var(--on-card);
-    }
-}
-
+  table.libraries th {
+    background: var(--card);
+    color: var(--on-card); } }
 .library-main-column {
-    vertical-align: top;
-}
+  vertical-align: top; }
 
 .library-detail-column {
-    text-align: center;
-    width: 120px;
-}
+  text-align: center;
+  width: 120px; }
 
 .library-fancyname {
-    font-size: 120%;
-}
+  font-size: 120%; }
 
 .library-platforms {
-    float: right;
-    font-size: 80%;
-}
+  float: right;
+  font-size: 80%; }
 
 .library-platform {
-    color: #666;
-    padding-left: 6px;
-    margin-left: 6px;
-    border-left: 1px solid #ccc;
-}
+  color: #666;
+  padding-left: 6px;
+  margin-left: 6px;
+  border-left: 1px solid #ccc; }
 
 .library-platform:first-child {
-    padding-left: 0;
-    border-left: none;
-}
+  padding-left: 0;
+  border-left: none; }
 
 .library-platform a {
-    text-decoration: none;
-}
+  text-decoration: none; }
 
 .library-platform-unsupported .library-platform-text {
-    text-decoration: line-through;
-    color: #aaa;
-}
+  text-decoration: line-through;
+  color: #aaa; }
 
 /* Platform filtering --------------------------------*/
 .not-available-indicator, .available-indicator {
-    display: none;
-    float: left;
-    padding-right: 0.5em;
-}
+  display: none;
+  float: left;
+  padding-right: 0.5em; }
 
 .not-available .not-available-indicator {
-    display: inline;
-}
+  display: inline; }
 
 .available .available-indicator {
-    display: inline;
-}
+  display: inline; }
 
 .not-available {
-    background-color: rgba(233, 61, 87, 0.2);
-}
+  background-color: rgba(233, 61, 87, 0.2); }
 
 .not-available .library-description {
-    display: none;
-}
+  display: none; }
 
 .library-platform-required .library-platform-text {
-    color: green;
-}
+  color: green; }
 
 .library-platform-required.library-platform-unsupported .library-platform-text {
-    color: red;
-}
+  color: red; }
 
 .warning-tooltip {
-    width: 15px;
-}
+  width: 15px; }
 
 /* Platform note -------------------------------------*/
 .note-tip {
-    display: none;
-    z-index: 3000;
-    position: absolute;
-
-    background-color: #222;
-    color: white;
-    padding: 6px;
-    border-radius: 5px;
-}
+  display: none;
+  z-index: 3000;
+  position: absolute;
+  background-color: #222;
+  color: white;
+  padding: 6px;
+  border-radius: 5px; }
 
 a.note-close, a.note-close:active, a.note-close:visited {
-    color: white;
-    text-decoration: none;
-    margin-left: 6px;
-}
-
-
+  color: white;
+  text-decoration: none;
+  margin-left: 6px; }
 
 .copyrights {
-    border-top: 1px solid var(--borders);
-    margin-top: 20px;
-    padding-top: 5px;
-    text-align: center;
-    color: var(--on-base);
-}
+  border-top: 1px solid var(--borders);
+  margin-top: 20px;
+  padding-top: 5px;
+  text-align: center;
+  color: var(--on-base); }
 
 hr {
-    border-color: var(--borders-faint);
-}
+  border-color: var(--borders-faint); }
 
 /****
  * Search page loader
  * Shamelessly taken from https://www.w3schools.com/howto/howto_css_loader.asp
  ****/
- .loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    margin: auto;
-    margin-top: 5%;
-    animation: spin 2s linear infinite;
-}
+.loader {
+  border: 16px solid #f3f3f3;
+  /* Light grey */
+  border-top: 16px solid #3498db;
+  /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  margin: auto;
+  margin-top: 5%;
+  animation: spin 2s linear infinite; }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
 /*****
  * Doxygen
  *****/
-
 /* Provided by Doxygen, redundant, because already in our header */
 div.headertitle, div#top {
-    display: none;
-}
+  display: none; }
 
 /* The Doxygen content feels "out of place" if it has a margin different from the rest of the page */
 div.contents {
-    margin-left: 0;
-    margin-right: 0;
-}
+  margin-left: 0;
+  margin-right: 0; }
 
 div.header {
-    background-image: none;
-    background-color: none;
-    margin: 0px;
-    border: none;
-}
+  background-image: none;
+  background-color: none;
+  margin: 0px;
+  border: none; }
 
 /**
  * classes
  */
-
 .memtitle {
-    display: none;
-}
+  display: none; }
 
 .memdoc {
-    border: 0;
-    border-radius: 0px 0px 6px 6px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
+  border: 0;
+  border-radius: 0px 0px 6px 6px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }
 
 .memproto, dl.reflist dt {
-    background: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-    border-radius: 0;
-}
+  background: var(--plasma-blue);
+  color: var(--on-plasma-blue);
+  border-radius: 0; }
 
 .memname {
-    color: var(--on-plasma-blue);
-    text-shadow: none;
-}
+  color: var(--on-plasma-blue);
+  text-shadow: none; }
 
 @media (prefers-color-scheme: dark) {
-    table {
-        background-color: transparent !important;
-        color: var(--on-base) !important;
-    }
-    .memproto, dl.reflist dt {
-        background: var(--card) !important;
-        color: var(--on-card) !important;
-    }
-    .memname {
-        color: var(--on-card);
-    }
-    table.mlabels tr, table.memberdecls tr.heading, .mlabels tr, .memproto table tr, table.params tr {
-        background-color: transparent !important;
-        color: var(--on-base) !important;
-    }
-    div.memproto {
-        border: 0;
-    }
-}
+  table {
+    background-color: transparent !important;
+    color: var(--on-base) !important; }
+
+  .memproto, dl.reflist dt {
+    background: var(--card) !important;
+    color: var(--on-card) !important; }
 
+  .memname {
+    color: var(--on-card); }
+
+  table.mlabels tr, table.memberdecls tr.heading, .mlabels tr, .memproto table tr, table.params tr {
+    background-color: transparent !important;
+    color: var(--on-base) !important; }
+
+  div.memproto {
+    border: 0; } }
 .memdoc, dl.refllist dd {
-    background: var(--card);
-    color: var(--on-card);
-}
+  background: var(--card);
+  color: var(--on-card); }
 
 .memSeparator {
-    border-color: var(--borders);
-}
+  border-color: var(--borders); }
 
 .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-    background: var(--card);
-    color: var(--on-card);
-    border-color: var(--borders);
-}
+  background: var(--card);
+  color: var(--on-card);
+  border-color: var(--borders); }
 
-.memproto a.elRef{
-    color: #aaaabb;
-    font-weight: bold;
-}
+.memproto a.elRef {
+  color: #aaaabb;
+  font-weight: bold; }
 
 .memproto a.el {
-    color: #ccccee;
-    font-weight: bold;
-}
+  color: #ccccee;
+  font-weight: bold; }
 
 .memproto .paramtype {
-    font-weight: bold;
-}
+  font-weight: bold; }
 
 .memproto .paramname {
-    color: #f7800a;
-    font-weight: bold;
-}
+  color: #f7800a;
+  font-weight: bold; }
 
 .memproto span.mlabel {
-    padding: 6px;
-    border: 0;
-    border-radius: 4px;
-    background: var(--base);
-    color: var(--on-base);
-}
+  padding: 6px;
+  border: 0;
+  border-radius: 4px;
+  background: var(--base);
+  color: var(--on-base); }
 
 .additional_info {
-    margin-top: 10px;
-}
+  margin-top: 10px; }
 
 table.directory tr {
-    background-color: transparent !important;
-    color: var(--on-base);
-}
+  background-color: transparent !important;
+  color: var(--on-base); }
+
 table.directory tr.even {
-    background-color: transparent !important;
-    color: var(--on-base);
-}
+  background-color: transparent !important;
+  color: var(--on-base); }
 
 /**
  * Fragments
  */
 .fragment .line {
-    line-height: 1.4;
-    white-space: pre;
-}
+  line-height: 1.4;
+  white-space: pre; }
 
 /* Use div.fragment, not pre.fragment. pre.fragment is used for @verbatim blocks, which must keep their border */
 div.fragment {
-    background-color: var(--card);
-    color: var(--on-card);
-    border: 1px solid var(--borders);
-    border-radius: 10px;
-    padding: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
+  background-color: var(--card);
+  color: var(--on-card);
+  border: 1px solid var(--borders);
+  border-radius: 10px;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }
 
 pre.fragment {
-    background-color: var(--card);
-    color: var(--on-card);
-    border-color: var(--borders);
-    white-space: pre;
-    scrollbar-width: 0;
-}
+  background-color: var(--card);
+  color: var(--on-card);
+  border-color: var(--borders);
+  white-space: pre;
+  scrollbar-width: 0; }
+
 pre.fragment::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-}
+  width: 0;
+  height: 0; }
 
 span.icona {
-    display: none;
-}
+  display: none; }
 
 table.directory td {
-    padding-bottom: 20px;
-}
+  padding-bottom: 20px; }
 
 /**
 * Listing
 */
 span.lineno {
-    border-right: 1px solid var(--borders);
-    background-color: transparent;
-    color: var(--on-card);
-}
+  border-right: 1px solid var(--borders);
+  background-color: transparent;
+  color: var(--on-card); }
 
 span.lineno a {
-    background-color: transparent;
-}
+  background-color: transparent; }
 
 .d-flex {
-    display: flex;
-}
+  display: flex; }
 
 .PageDoc .header::after, section .header::after, header.page-header::after {
-    display: none !important;
-}
+  display: none !important; }
 
 div.summary {
-    float: none;
-    width: auto;
-    margin-left: auto;
-}
+  float: none;
+  width: auto;
+  margin-left: auto; }
 
 div.header {
-    background: none;
-}
+  background: none; }
 
 h1 {
-    word-wrap: break-word;
-}
\ No newline at end of file
+  word-wrap: break-word; }
+
+.breadcrumb li a::before {
+  display: inline-block;
+  padding-right: .5rem;
+  padding-left: .5rem;
+  color: #6c757d;
+  content: "/"; }
+
+.breadcrumb li:nth-child(2) a::before {
+  display: none; }
+
+/*# sourceMappingURL=kapidox.css.map */
diff --git a/src/kapidox/data/htmlresource/css/kapidox.css b/src/kapidox/data/htmlresource/css/kapidox.scss
copy from src/kapidox/data/htmlresource/css/kapidox.css
copy to src/kapidox/data/htmlresource/css/kapidox.scss
--- a/src/kapidox/data/htmlresource/css/kapidox.css
+++ b/src/kapidox/data/htmlresource/css/kapidox.scss
@@ -1,208 +1,227 @@
-/**
- *
- * Colors:
- *  bg-primary: #0057ae
- *  fg-primary: #ffffff
- */
-
 /**
  * Global
  */
+$md: 767px;
+
 :root {
-    --base: white;
-    --on-base: black;
-    --plasma-blue: #54a3d8;
-    --on-plasma-blue: white;
-    --card: white;
-    --on-card: black;
-    --borders: rgba(0,0,0,0.3);
-    --borders-faint: rgba(0,0,0,0.1);
+  --base: white;
+  --on-base: black;
+  --plasma-blue: #54a3d8;
+  --on-plasma-blue: white;
+  --card: white;
+  --on-card: black;
+  --borders: rgba(0,0,0,0.3);
+  --borders-faint: rgba(0,0,0,0.1);
 }
 
 @media (prefers-color-scheme: dark) {
-    table tr:nth-child(odd) {
-        background-color: transparent !important;
-    }
-    .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-        background-color: transparent !important;
-    }
-    :root {
-        --base: #232629;
-        --on-base: #eff0f1;
-        --card: rgba(255,255,255,0.1);
-        --on-card: #eff0f1;
-        --borders: rgba(255,255,255,0.2);
-        --borders-faint: rgba(255,255,255,0.05);
-        --plasma-blue: #98c8e8;
-        --on-plasma-blue: black;
-
-        background-color: var(--base);
-    }
+  table tr:nth-child(odd) {
+    background-color: transparent !important;
+  }
+  .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+    background-color: transparent !important;
+  }
+  :root {
+    --base: #232629;
+    --on-base: #eff0f1;
+    --card: rgba(255,255,255,0.1);
+    --on-card: #eff0f1;
+    --borders: rgba(255,255,255,0.2);
+    --borders-faint: rgba(255,255,255,0.05);
+    --plasma-blue: #98c8e8;
+    --on-plasma-blue: black;
+
+    background-color: var(--base);
+  }
 }
 
-html {
-    margin: 0;
+@mixin content-width {
+  margin-left: auto;
+  margin-right: auto;
+  width: 60vw;
+  max-width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  @media (max-width: $md) {
+    width: 95vw;
+  }
 }
 
 body {
-    background: var(--base);
+  background: var(--base);
 }
 
-body, table, div, p, dl {
-    font-family: "Noto Sans",Verdana, Geneva, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.4em;
+html {
+  font-family: "Noto Sans",Verdana, Geneva, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4em;
 }
 
-#navbar
-{
-    height: 50px;
-    background-color: var(--base);
-    color: var(--on-base);
-    border-bottom: 4px solid var(--plasma-blue);
-}
+.body {
+  display: grid;
+  grid-template-columns: 300px auto;
+  grid-template-rows: 50px auto;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content";
+
+  &.no-js {
+    @media (max-width: $md) {
+      grid-template-columns: auto;
+      grid-template-rows: 50px auto auto;
+      grid-template-areas:
+        "header"
+        "sidebar"
+        "content";
+    }
+  }
+
+  @media (max-width: $md) {
+    grid-template-columns: 0 auto;
+    grid-template-rows: 50px auto;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar content";
+    .sidebar {
+      display: none;
+    }
 
-#navbar .container {
-    height: 100%;
-    max-width: 800px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    &.sidebar-active {
+      grid-template-columns: 300px auto;
+      grid-template-rows: 50px auto;
+      grid-template-areas:
+        "sidebar header"
+        "sidebar content";
+      .sidebar {
+
+        display: block;
+        box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
+        scrollbar-width: none;
+        overflow-y: scroll;
+        padding-bottom: 40px;
+        scrollbar-width: 0;
+      }
+      .header {
+        position: fixed;
+        left: 300px;
+        top: 0;
+      }
+      .content {
+        overflow: hidden;
+        max-width: 100%;
+        position: fixed;
+        left: 300px;
+        top: 50px;
+      }
+    }
+  }
 }
 
-.navbar-nav.breadcrumb {
+.header {
+  grid-area: header;
+
+  .navbar-nav.breadcrumb {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
-}
-
-.navbar-nav.breadcrumb a {
-    padding: 13px;
-    font-size: 20px;
-}
-
-.navbar-nav > li {
-    float: initial;
-}
-
-.breadcrumb {
     margin-bottom: 0;
     height: 100%;
     background-color: transparent;
-}
+    max-height: 46px;
 
-li.active a {
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
+    @include content-width;
+  
+    .breadcrumb-link {
+      padding: 13px .2rem;
+      font-size: 20px;
+    }
+  }
 }
 
-#body_wrapper.container {
-    margin-right: initial;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    min-height: 100vh;
+@media (min-width: $md) {
+  .navbar-toggler {
+    display: none;
+  }
 }
 
-.api-kde-org-sidebar {
-    margin-top: 60px;
+.sidebar {
+  background-color: var(--base);
+  grid-area: sidebar;
+  max-width: 100vw;
 }
 
-.navbar {
-    width: 100%;
-    min-width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    background-color: var(--base);
-}
+.content {
+  grid-area: content;
+  margin-top: 20px;
 
-section {
-    margin-left: auto;
-    margin-right: auto;
-    width: 80vw;
-    max-width: 100%;
-    padding-left: 20px;
-    padding-right: 20px;
+  & > * {
+    @include content-width;
+  }
+  
+  h1.content-title {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 }
 
-.body {
-    display: flex;
-    flex-direction: column;
+footer {
+  width: 100%;
 }
 
-.api-kde-org-sidebar {
-    background-color: var(--base);
+main::after {
+  display: none !important;
 }
 
 @media (min-width: 768px) {
-    .api-kde-org-sidebar {
-        min-width: 300px;
-        max-width: 300px;
-        box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
-        z-index: 9999;
-        scrollbar-width: none;
-        overflow-y: scroll;
-        padding-bottom: 40px;
-        margin-top: 0;
-        scrollbar-width: 0;
-    }
-    .api-kde-org-sidebar::-webkit-scrollbar {
-        width: 0;
-    }
-
-    .navbar {
-        padding-left: 300px;
-    }
-    
-    aside {
-        margin-top: 60px;
-    }
-
-    .body {
-        flex-direction: row;
-    }
-
-    main section {
-        margin-top: 60px;
-        width: 60vw;
-    }
+  .sidebar {
+    box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
+    scrollbar-width: none;
+    overflow-y: scroll;
+    padding-bottom: 40px;
+    scrollbar-width: 0;
+  }
+  .sidebar::-webkit-scrollbar {
+    width: 0;
+  }
 }
 
 #sidebar-header {
-    height: 100px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-}
-
-@media (prefers-color-scheme: dark) {
-    #sidebar-header {
-        background-color: var(--card);
-        color: var(--on-card);
-    }
-}
-
-#sidebar-header a {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--plasma-blue);
+  color: var(--on-plasma-blue);
+
+  a {
     color: white;
-}
+  }
 
-#sidebar-header h2 {
+  h2 {
     font-size: 30px;
     font-weight: 700;
-}
+  }
 
-@media (max-width: 767px) {
-    .navbar-nav {
-        margin: 0;
-    }
+  @media (prefers-color-scheme: dark) {
     #sidebar-header {
-        display: none;
+      background-color: var(--card);
+      color: var(--on-card);
     }
+  }
+}
+
+
+
+@media (max-width: $md) {
+  .navbar-nav {
+    margin: 0;
+  }
+  #sidebar-header {
+    display: none;
+  }
 }
 
 #main-column {
@@ -813,4 +832,16 @@
 
 h1 {
     word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.breadcrumb li a::before {
+  display: inline-block;
+  padding-right: .5rem;
+  padding-left: .5rem;
+  color: #6c757d;
+  content: "/";
+}
+
+.breadcrumb li:nth-child(2) a::before {
+  display: none;
+}
diff --git a/src/kapidox/data/templates/base.html b/src/kapidox/data/templates/base.html
--- a/src/kapidox/data/templates/base.html
+++ b/src/kapidox/data/templates/base.html
@@ -45,23 +45,29 @@
     <li><a href="#cp-menu" accesskey="5">Skip to link menu</a></li>
   </ul>
 
-  <nav id="navbar" class="navbar">
-    <div class="container">
+  <main class="body">
+    <header class="header">
+      <nav class="navbar">
         <ol class="breadcrumb navbar-nav">
-        {% for entry in breadcrumbs.entries %}
-          <li{% if loop.last %} class="active"{% endif %}><a href="{{ entry.href }}">{{ entry.text }}</a></li>
-        {% endfor %}
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          {% for entry in breadcrumbs.entries %}
+            <li class="breadcrumb-link{% if loop.last %} active{% endif %}">
+              <a href="{{ entry.href }}">{{ entry.text }}</a>
+            </li>
+          {% endfor %}
         </ol>
-    </div>
-  </nav> <!-- /header -->
+      </nav>
+    </header>
 
-  <main class="body">
-    <aside class="api-kde-org-sidebar">
+    <aside class="sidebar">
       {% block sidebar %}{% endblock %}
     </aside>
 
-    <section>
-      <header class="page-header">
+    <article class="content">
+      <h1 class="content-title">
+        {% block title %}{% endblock %}
         <form action="search.html" method="get" class="form-inline">
           <div id="search" class="input-group ml-auto">
             <input type="text" id="search-input" name="query" aria-label="Search input" class="form-control" placeholder="Search...">
@@ -72,9 +78,10 @@
             </span>
           </div>
         </form>
-        <h1><a name="content"></a>{% block title %}{% endblock %}</h1>
-      </header>
+      </h1>
+
       {% block content %}{% endblock %}
+
       <footer class="footer bg-primary">
         <div id="footer-text" class="center-block col-md-7" style="float:none;">
             {% include 'footer.html' %}
@@ -85,8 +92,15 @@
         </div>
         {% endblock %}#}
       </footer>
-    </section>
+    </article>
   </main>
+  <script>
+    const toggler = document.querySelector('.navbar-toggler');
+    const body = document.querySelector('.body');
+    toggler.addEventListener('click', () => {
+      body.classList.toggle('sidebar-active');
+    });
+  </script>
 
 <!--
 WARNING: DO NOT SEND MAIL TO THE FOLLOWING EMAIL ADDRESS! YOU WILL
diff --git a/src/kapidox/data/templates/subgroup-sidebar.html b/src/kapidox/data/templates/subgroup-sidebar.html
--- a/src/kapidox/data/templates/subgroup-sidebar.html
+++ b/src/kapidox/data/templates/subgroup-sidebar.html
@@ -9,20 +9,16 @@
     </div>
     <div class="menu-content">
     <ul>
-        <li>
-        <ul>
-            {% if group.libraries | selectattr('subproducts', 'none') | list | length > 0 %}
-            {% if group.subproduct | length > 0 %}
-            <li><a href="#sg-{{ nosubproduct }}">Without subgroup</a></li>
-            {% else  %}
-            <li><a href="#content">All</a></li>
-            {% endif %}
-            {% endif %}
-            {% for subproduct in group.subproducts | sort(attribute='order') %}
-            <li><a href="#sg-{{ subproduct.name }}">{{ subproduct.fancyname }}</a></li>
-            {% endfor %}
-        </ul>
-        </li>
+      {% if group.libraries | selectattr('subproducts', 'none') | list | length > 0 %}
+      {% if group.subproduct | length > 0 %}
+      <li><a href="#sg-{{ nosubproduct }}">Without subgroup</a></li>
+      {% else  %}
+      <li><a href="#content">All</a></li>
+      {% endif %}
+      {% endif %}
+      {% for subproduct in group.subproducts | sort(attribute='order') %}
+      <li><a href="#sg-{{ subproduct.name }}">{{ subproduct.fancyname }}</a></li>
+      {% endfor %}
     </ul>
     </div>
 </div>