sphinx template: max content readability within the viewport

Author: peppelinux

themes/eid-wallet-docs/layout.html

@@ -146,7 +146,7 @@ <h2 class="it-brand-title it-docs-header-site-title" id="header-site-title">{{ h
 
 {%- block content %}
 <div class="it-docs-layout">
-  <div class="container it-docs-container">
+  <div class="it-docs-container">
     <div class="row it-docs-row">
       <aside class="col-12 col-lg-3 it-docs-sidebar-col" aria-label="{{ _('Primary navigation') }}">
         <div class="navbar-collapsable it-docs-primary-nav-collapsable" id="itDocsPrimaryNav">

themes/eid-wallet-docs/static/eid-wallet-docs.css

@@ -69,9 +69,20 @@ body.it-docs-body {
 .it-docs-layout {
   flex: 1 1 auto;
   width: 100%;
+  max-width: 100%;
   padding: var(--it-docs-space-3) 0 var(--it-docs-space-5);
 }
 
+.it-docs-container {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: none !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-left: var(--it-docs-space-3);
+  padding-right: var(--it-docs-space-3);
+}
+
 .it-docs-row.row {
   align-items: flex-start;
   width: 100%;
@@ -712,17 +723,20 @@ body.it-docs-body {
 .it-docs-main .body ol,
 .it-docs-main .body dl,
 .it-docs-main .body blockquote,
+.it-docs-main .body .admonition p,
+.it-docs-main .body .admonition ul,
+.it-docs-main .body .admonition ol,
+.it-docs-main .body .toctree-wrapper > p.caption {
+  max-width: min(100%, var(--it-docs-prose-max-width));
+}
+
 .it-docs-main .body h1,
 .it-docs-main .body h2,
 .it-docs-main .body h3,
 .it-docs-main .body h4,
 .it-docs-main .body h5,
-.it-docs-main .body h6,
-.it-docs-main .body .admonition p,
-.it-docs-main .body .admonition ul,
-.it-docs-main .body .admonition ol,
-.it-docs-main .body .toctree-wrapper > p.caption {
-  max-width: var(--it-docs-prose-max-width);
+.it-docs-main .body h6 {
+  max-width: 100%;
 }
 
 .it-docs-main .table-responsive,