diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 0f6dbe2205..7fb0c6e40c 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -12,10 +12,12 @@ {% render 'cookie-notice.html' %} {% render 'gtags.html' %} {% include 'page-header.html', obsolete:obsolete %} - {% include 'navigation-side.html' %}
+ {% include 'navigation-side.html' %} {% if toc != false -%} + {%- comment -%} {% include 'navigation-toc-side.html', tocContents:tocContents %} + {% endcomment %} {% endif -%}
diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss index 1e2a9f753f..5eb1904864 100644 --- a/src/_sass/_site.scss +++ b/src/_sass/_site.scss @@ -41,6 +41,11 @@ } #page-content { + display: flex; + flex-direction: row; + flex-grow: 1; + align-items: flex-start; + justify-content: space-between; min-height: calc(100vh); body.homepage & { @@ -53,21 +58,27 @@ } > article { - > .content { - max-width: 960px; - margin-left: auto; - margin-right: auto; - padding: $top-content-padding 1.5rem 1.5rem; - } - - @media(min-width: 1024px) { - margin-left: 226px; - } - - @media(min-width: 1200px) { - margin-right: 226px; - } - } + overflow-x: hidden; + margin: 1rem; + max-width: 56rem; + } + + //> article { + // > .content { + // max-width: 960px; + // margin-left: auto; + // margin-right: auto; + // padding: $top-content-padding 1.5rem 1.5rem; + // } + // + // @media(min-width: 1024px) { + // margin-left: 226px; + // } + // + // @media(min-width: 1200px) { + // margin-right: 226px; + // } + //} } #site-content-title { diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidebar.scss index 5318e431cd..ae02168451 100644 --- a/src/_sass/components/_sidebar.scss +++ b/src/_sass/components/_sidebar.scss @@ -3,16 +3,16 @@ @use '../core/bootstrap'; #sidenav { - font-family: $site-font-family-alt; - position: fixed; + position: sticky; + overflow-y: auto; + top: $site-header-height; - bottom: 0; - left: 0; - width: 226px; + width: 15rem; + max-height: calc(100vh - $site-header-height); + + font-family: $site-font-family-alt; border-right: 1px solid #d8d8d8; - overflow-x: hidden; - overflow-y: auto; - z-index: 1; + scrollbar-width: thin; .open_menu & { z-index: 10000; @@ -20,6 +20,10 @@ overscroll-behavior: contain; pointer-events: auto; } + + @media(max-width: 768px) { + display: none; + } } .site-sidebar {