Merge pull request #4444 from github/codeql-style-updates

[CodeQL docs] First pass at style updates for docs microsite
2026-01-01 00:27:24 +01:00 · 2020-10-09 11:40:47 +01:00
parent b0d01cfe8d 6d78c7b46e
commit 2436c56258
4 changed files with 14965 additions and 416 deletions
--- a/docs/language/global-sphinx-files/_static/custom.css_t
+++ b/docs/language/global-sphinx-files/_static/custom.css_t
@@ -1,148 +1,19 @@
 /*
- * Sphinx stylesheet to add some customizations to the default Alabaster theme.
+ * This Sphinx stylesheet adds some customizations to the default Alabaster theme.
 * 
 * The source for the default stylesheet can be found at 
 * https://github.com/bitprophet/alabaster/blob/master/alabaster/static/alabaster.css_t
 *
+ * For the classes provided by the primer, see https://unpkg.com/@primer/css/dist/primer.css
 */

-/* -- HEADER ------------------------------------------------------------------------------- */
+/* -- FOOTER ------------------------------------------------------------------------------- */

-div.header {
-    background-color: #140f46;
-    top:0;
-    position: fixed;
+div.footer {
    width: 100%;
-    padding: 0 30px 30px 30px;
 }

-#siteBanner {
-    width: 100%;
-    height: 80px; 
-    margin: 0;
-    opacity: 0.95;
-    z-index: 1;
-    transform: translate3d(0px, 0px, 0px);
-    position: relative;
-}
-
-#siteBanner input {
-    border-width: 0;
-    /*color: rgb(244, 244, 244);
-    background-color: #140f46;
-    font-size: 0.9rem;*/
-    letter-spacing: 0.1rem;
-    /*width: 12rem;*/
-}
-
-#siteBanner input:focus, 
-#siteBanner textarea:focus, 
-#siteBanner select:focus{
-    outline: none;
-}
-
-div.logocontainer {
-    height: 72px;
-    width: 350px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-}
-
-div.linkcontainer {
-    width: 70%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    right: 15px;
-}
-
-div.linkbar {
-    float:right;
-}
-
-.linkbar a {
-    color: black;
-    font-size: 20px;
-    margin-left: 20px;
-    text-decoration: none;
-}
-
-.linkbar a:hover {
-    text-decoration: underline;
-}
-
-
-/* CODEQL DOCUMENTATION AND SEARCHBOX BANNER ---------------------------------------------------------- */
-
-#title-banner {
-    background: #140f46;
-    height: 50px;
-    position: relative;
-}
-
-#title-banner a {
-    color: white;
-    font-size: 32px;
-    text-decoration: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    left: 32px;
-}
-
-#searchbox-title-banner {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    right: 32px;
-}
-
-#searchbox-navbar {
-    display: none;
-}
-
-#textfield {
-    position: relative;
-    float: left;
-}
-
-#searchbutton {
-   position: relative;
-   float: left;
-}
-
-/* -- WRAPPER CONTAINING NAVBAR AND MAIN BOX --------------------------------------------------*/
-
-div.wrapper {
-    margin-bottom: 0px;
-    height: 637px;
-}
-
-/* -- DOCUMENT ------------------------------------------------------------------------------- */
-
-div.document {
-    width: 95%;
-    padding: 0;
-    margin: 0 0 30px 0;
-}
-
-div.documentwrapper {
-    width: 90%;
-    margin: 20px 20px 20px 20px;
-    padding-bottom: 50px;
-}
-div.mainBox {
-    margin-left: calc(30% + 25px);  /* Allow 25px for the width of the ToC scrollbar */
-}
+/* -- PRIVACY NOTICE ----------------------------------------------------------------------- */

 div.privacy {
    text-align: right;
@@ -150,200 +21,67 @@ div.privacy {
    padding-bottom: 20px;
 }

+code {
+    font-size: 0.9em !important; /* makes code snippets in headings the correct size */
+}
+
+/* -- MAIN BODY ---------------------------------------------------------------------------- */
+
+div.body {
+    max-width: 100%;
+    min-width: unset;
+}
+
 div.body li {
    margin: 0 0 0.5em 0; /* Increase spacing between list items */
 }

 /* -- SIDEBAR ------------------------------------------------------------------------------- */

-div.navBox {
-    width:29%;
-    padding-left: 25px;
-    height: calc(100% - 108px);
-    z-index: 100;
-    background-color: #FFFFFF;
-    padding-top: 30px;
-    color: black;
-    float: left;
+.SideNav {
+    height: 100vh;
 }

-.navBox li {
+.SideNav li {
    margin: 10px 0 10px 0px; 
 }

-.navBox ul, .navBox ol, .navBox li {
+.SideNav ul, .SideNav ol, .SideNav li {
    list-style-type: none;
 }

-.navBox ul li a {
+.SideNav ul li a {
    border-bottom: none;
    color: black;
 }

-.navBox ul li a:hover {
+.SideNav ul li a:hover {
    font-weight: bold;
    border-bottom: none;
 }

-.navBox a.current {
+.SideNav a.current {
    font-weight: bold;
    text-decoration: underline;
 }

-/* -- SIDEBAR TOC ----------------------------------------------------------------------------------*/
+/* -- BREADCRUMBS --------------------------------------------------------------------------------*/

-#toc h1 {
-   font-size: 20px;
-   font-weight: bold;
-   margin-left: 28px;
+div.related ul {
+    padding: 0;
 }

-/* -- SMALL SCREEN ------------------------------------------------------------------------------- */
+/* -- LINKS --------------------------------------------------------------------------------------*/

-@media screen and (max-width: 875px){ 
-   
-    body {
-        margin: 0;
-        padding: 0;
-        overflow: inherit;
-        width: 100%;
-    }
-
-    #siteBanner {
-        position: relative;
-    }
-
-    div.logocontainer {
-        width: 200px;
-    }  
-
-    .linkcontainer a:not(:first-child) {  /* Only display Learn CodeQL link on small screen */
-        display: none;
-    }
-    
-    #title-banner a {
-        font-size: 5vw;
-    }
-
-    #searchbox-title-banner { /* Move searchbox from title banner to sidebar on small screen */
-        display: none;
-    }
-
-    #searchbox-navbar {
-       display: block; 
-       float: left;
-       margin-right: 20px;
-    }
-
-    div.navBox {
-        position: relative;
-        width: 95%;
-        border-color: #2f1695; 
-        padding-top: 10px;      
-    }
-    
-    #toc h1 { /* Slightly reposition the heading on small screens */
-        margin-left: 18px;
-    }
-    
-    div.wrapper {
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-        padding-top: 0px;
-    }  
-    div.mainBox {
-        margin: 0 10px 0 10px;
-        position: relative;
-        height: 100%;
-        width: 95%;
-    } 
-    div.documentwrapper {
-        padding-left: 20px;
-        width:100%;
-        box-shadow: none;
-        margin: 0;
-        padding-left:0;
-    }
-
-    div.body {
-        min-width: unset;
-    }
-
-    ul {
-    margin: 10px 20px 10px 20px;
-    }
-
-    div.privacy {
-        padding-right: 0%;
-    }
-
-}
-    
-/* -- PRINT VIEW ----------------------------------------------------------------------------*/
-
-@media print {
-    div.navBox {
-        display: none;
-    }
-
-    #siteBanner {
-        display: none;
-    }
-
-    div.wrapper {
-        /*margin-top:-100px;*/
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-        padding-top: 0px;
-    }  
-    div.mainBox {
-        margin: 0 10px 0 10px;
-        position: relative;
-        height: 100%;
-        width: 100%;
-    } 
-    div.documentwrapper {
-        padding-left: 20px;
-        width:100%;
-        box-shadow: none;
-        margin: 0;
-        padding-left:0;
-    }
-
-    body {
-        margin: 0;
-        padding: 0;
-        overflow: inherit;
-        width:95%;
-    }
-
-    div.body {
-        min-width: unset;
-    }
-    div.linkbar {
-        display: none;
-    
-    } 
-    .small-bar {
-        display: inherit;
-    }
-    
-    ul {
-    margin: 10px 20px 10px 20px;
-    }
-
-    div.privacy {
-        display: none;
-    }
+a.reference {
+    border-bottom: none;
 }

-/* -- MAIN BODY ---------------------------------------------------------------------------- */
+a.reference:hover {
+    text-decoration: none; 
+}

-div.body {
-    max-width: 100%;  /* overrule 800px in basic.css */
-} 
+/* -- ADMONITIONS ---------------------------------------------------------------------------- */

 /* 
 * Override default styling for "admonitions". 
@@ -384,6 +122,8 @@ pre {
    white-space: pre-wrap;
 }

+/* -- QL SYNTAX HIGHLIGHTING -------------------------------------------------- */
+
 /*
 * Use more appropriate colors for syntax highlighting
 *
@@ -399,30 +139,20 @@ pre {
 .highlight .kt { color: #7a65cd; font-weight: bold } /* built-in type keywords */
 .highlight .kr { color: #333; font-style: italic } /* annotations */

+
+/* -- SEARCH PAGE ---------------------------------------------------------------------------- */
+
 div.context { /* hide rst search snippets */
    display: none;
 }

-/* -- INDEX -------------------------------------------------------------------------------- */
+/* -- INDEX ---------------------------------------------------------------------------------------- */

 table.indextable li > a {
    text-decoration: unset;
 }

-
-/* -- FOOTER ------------------------------------------------------------------------------- */
-
-/* Adjust anchor targets to allow for the fixed banner */
-div.documentwrapper a[name], 
-div.documentwrapper :target::before,
-div.footnote-group a[name], 
-div.footnote-group :target::before
- {
-    content: "";
-    display: block;
-    height: 78px;      /* Height of banner */
-    margin-top: -78px; /* Prevent this showing as a gap */      
-}
+/* -- ANCHOR LINKS ------------------------------------------------------------------------------- */

 /* make anchor highlighting more sensible */

@@ -490,3 +220,38 @@ blockquote.pull-quote > :last-child {
 .toggle .name.open:after {
    content: " ▼";
 }
+
+/* -- PRINT VIEW ----------------------------------------------------------------------------*/
+
+@media print {
+
+    div.SideNav {
+        display: none;
+    }
+
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: inherit;
+        width:95%;
+    }
+
+    div.privacy {
+        display: none;
+    }
+}
+
+/* -- SMALL SCREEN ------------------------------------------------------------------------------- */
+
+@media screen and (max-width: 875px) { 
+
+    /* Overrides strange behaviour caused by default styles */
+
+    body {
+        padding: 0;
+    } 
+    
+    div.footer {
+        display: block;
+    }
+}
--- a/docs/language/global-sphinx-files/_static/primer.css
+++ b/docs/language/global-sphinx-files/_static/primer.css
--- a/docs/language/global-sphinx-files/_templates/layout.html
+++ b/docs/language/global-sphinx-files/_templates/layout.html
@@ -1,10 +1,9 @@
 {#
-    Override alabaster/layout.html template to add a header
-    with the Semmle logo.
-    This header (including the SVG logo) is copied from the Semmle 
-    documentation home page at help.semmle.com.
-
-    It also adds some JavaScript (in the footer) to allow collapsible sections.
+    Override alabaster/layout.html template to customize the template
+    used to generate the CodeQL documentation.
+    
+    The classes used in this template are provided by the GitHub Primer https://primer.style/css/.
+    The CSS for the primer can be found at https://unpkg.com/@primer/css/dist/primer.css

    The source for the default Alabaster stylesheet can be found at:
    https://github.com/bitprophet/alabaster/blob/master/alabaster/layout.html
@@ -12,121 +11,122 @@

 {%- extends "alabaster/layout.html" %}

+{%- macro customrelbar() %}
+<div class="related" role="navigation" aria-label="related navigation">
+    <ul>
+        {%- block rootrellink %}
+        <li class="nav-item nav-item-0"><a href="{{ pathto(master_doc) }}">{{ shorttitle|e }}</a>{{ reldelim1 }}</li>
+        {%- endblock %}
+        {%- for parent in parents %}
+        <li class="nav-item nav-item-{{ loop.index }}"><a href="{{ parent.link|e }}"
+                {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
+        {%- endfor %}
+        {%- block customrelbaritems %} {% endblock %}
+    </ul>
+</div>
+{%- endmacro %}
+
 {%- block extrahead %}
-  <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i) {w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var  f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);}) (window,document,'script','dataLayer','GTM-5Q9DBRM');</script>
-  <!-- End Google Tag Manager -->
-  {{ super() }}
-  <link rel="stylesheet" href="{{ pathto('_static/custom.css', 1) }}" type="text/css" />
-  {% if theme_touch_icon %}
-    <link rel="apple-touch-icon" href="{{ pathto('_static/' ~ theme_touch_icon, 1) }}" />
-  {% endif %}
-  {% if theme_canonical_url %}
-    <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}.html"/>
-  {% endif %}
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<title>CodeQL docs</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" href="{{ pathto('_static/custom.css', 1) }}" type="text/css" />
+<link rel="stylesheet" href="{{ pathto('_static/primer.css', 1) }}" type="text/css" />
+
 {% endblock %}

 {%- block content %}
-<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5Q9DBRM" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<!-- End Google Tag Manager (noscript) -->
-<div id="siteBanner">
-    <div class="logocontainer">
-        <a href="https://securitylab.github.com" id="Header-logo" class="">
-                <svg width="100%" height="100%" viewBox="0 0 696 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect width="696" height="160" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M80.0397 32.8C53.4747 32.8 32 54.4342 32 81.1965C32 102.59 45.7597 120.699 64.8483 127.109C67.2344 127.59 68.1093 126.067 68.1093 124.785C68.1093 123.664 68.0297 119.818 68.0297 115.811C54.6677 118.696 51.884 110.042 51.884 110.042C49.7365 104.433 46.5551 102.991 46.5551 102.991C42.1806 100.026 46.8732 100.026 46.8732 100.026C51.7249 100.347 54.27 104.994 54.27 104.994C58.565 112.366 65.4846 110.283 68.2684 109C68.666 105.876 69.9386 103.712 71.2907 102.51C60.6329 101.388 49.4184 97.2219 49.4184 78.6325C49.4184 73.3441 51.3272 69.0173 54.3496 65.6519C53.8724 64.45 52.2021 59.4822 54.8268 52.8317C54.8268 52.8317 58.8831 51.5496 68.0297 57.7995C71.8475 56.7579 75.9833 56.197 80.0397 56.197C84.096 56.197 88.2319 56.7579 92.0496 57.7995C101.196 51.5496 105.253 52.8317 105.253 52.8317C107.877 59.4822 106.207 64.45 105.73 65.6519C108.832 69.0173 110.661 73.3441 110.661 78.6325C110.661 97.2219 99.4464 101.308 88.7091 102.51C90.4589 104.033 91.97 106.917 91.97 111.484C91.97 117.975 91.8905 123.183 91.8905 124.785C91.8905 126.067 92.7654 127.59 95.1515 127.109C114.24 120.699 128 102.59 128 81.1965C128.079 54.4342 106.525 32.8 80.0397 32.8Z" fill="black"/>
-                    <path d="M50.2139 102.27C50.1343 102.51 49.7367 102.59 49.4185 102.43C49.1004 102.27 48.8618 101.949 49.0208 101.709C49.1004 101.469 49.4981 101.388 49.8162 101.549C50.1343 101.709 50.2934 102.029 50.2139 102.27Z" fill="black"/>
-                    <path d="M52.1224 104.433C51.8837 104.674 51.4065 104.513 51.1679 104.193C50.8498 103.872 50.7702 103.392 51.0089 103.151C51.2475 102.911 51.6451 103.071 51.9633 103.392C52.2814 103.792 52.361 104.273 52.1224 104.433Z" fill="black"/>
-                    <path d="M54.0314 107.238C53.7132 107.478 53.236 107.238 52.9974 106.837C52.6793 106.436 52.6793 105.876 52.9974 105.715C53.3155 105.475 53.7928 105.715 54.0314 106.116C54.3495 106.517 54.3495 106.997 54.0314 107.238Z" fill="black"/>
-                    <path d="M56.656 109.962C56.4174 110.283 55.8607 110.202 55.3834 109.802C54.9858 109.401 54.8267 108.84 55.1448 108.6C55.3834 108.279 55.9402 108.359 56.4174 108.76C56.8151 109.081 56.8946 109.642 56.656 109.962Z" fill="black"/>
-                    <path d="M60.2354 111.484C60.1558 111.885 59.5991 112.045 59.0423 111.885C58.4856 111.725 58.1674 111.244 58.247 110.924C58.3265 110.523 58.8832 110.363 59.44 110.523C59.9967 110.683 60.3149 111.084 60.2354 111.484Z" fill="black"/>
-                    <path d="M64.1324 111.805C64.1324 112.206 63.6552 112.526 63.0984 112.526C62.5417 112.526 62.0645 112.206 62.0645 111.805C62.0645 111.404 62.5417 111.084 63.0984 111.084C63.6552 111.084 64.1324 111.404 64.1324 111.805Z" fill="black"/>
-                    <path d="M67.791 111.164C67.8705 111.565 67.4729 111.965 66.9161 112.045C66.3594 112.125 65.8822 111.885 65.8026 111.484C65.7231 111.084 66.1208 110.683 66.6775 110.603C67.2343 110.523 67.7115 110.763 67.791 111.164Z" fill="black"/>
-                    <path d="M190.125 70.1023H198.591C198.335 60.7841 190.097 54.0227 178.278 54.0227C166.602 54.0227 157.653 60.6989 157.653 70.7273C157.653 78.8239 163.449 83.5682 172.795 86.0966L179.67 87.9716C185.892 89.6193 190.693 91.6648 190.693 96.8352C190.693 102.517 185.267 106.267 177.795 106.267C171.034 106.267 165.409 103.256 164.898 96.9205H156.091C156.659 107.46 164.812 113.966 177.852 113.966C191.517 113.966 199.386 106.778 199.386 96.9205C199.386 86.4375 190.04 82.375 182.653 80.5568L176.972 79.0796C172.426 77.9148 166.375 75.7841 166.403 70.2159C166.403 65.2727 170.92 61.608 178.079 61.608C184.756 61.608 189.5 64.733 190.125 70.1023Z" fill="black"/>
-                    <path d="M227.201 113.881C236.718 113.881 243.451 109.193 245.383 102.091L237.343 100.642C235.809 104.761 232.116 106.864 227.287 106.864C220.014 106.864 215.127 102.148 214.9 93.7386H245.923V90.7273C245.923 74.9602 236.491 68.7955 226.605 68.7955C214.446 68.7955 206.434 78.0568 206.434 91.4659C206.434 105.017 214.332 113.881 227.201 113.881ZM214.929 87.375C215.27 81.1818 219.758 75.8125 226.662 75.8125C233.252 75.8125 237.571 80.6989 237.599 87.375H214.929Z" fill="black"/>
-                    <path d="M272.928 113.881C283.241 113.881 289.917 107.688 290.854 99.1932H282.587C281.508 103.909 277.843 106.693 272.985 106.693C265.798 106.693 261.167 100.699 261.167 91.1818C261.167 81.8352 265.883 75.9546 272.985 75.9546C278.383 75.9546 281.678 79.3636 282.587 83.4546H290.854C289.945 74.6477 282.758 68.7955 272.843 68.7955C260.542 68.7955 252.587 78.0568 252.587 91.3807C252.587 104.534 260.258 113.881 272.928 113.881Z" fill="black"/>
-                    <path d="M326.78 94.9034C326.809 102.318 321.297 105.841 316.525 105.841C311.269 105.841 307.633 102.034 307.633 96.0966V69.3636H299.138V97.1193C299.138 107.943 305.076 113.568 313.456 113.568C320.019 113.568 324.479 110.102 326.496 105.443H326.951V113H335.303V69.3636H326.78V94.9034Z" fill="black"/>
-                    <path d="M345.916 113H354.411V86.3523C354.411 80.6421 358.814 76.5227 364.837 76.5227C366.598 76.5227 368.587 76.8352 369.269 77.0341V68.9091C368.416 68.7955 366.74 68.7102 365.661 68.7102C360.547 68.7102 356.172 71.608 354.581 76.2955H354.127V69.3636H345.916V113Z" fill="black"/>
-                    <path d="M375.82 113H384.314V69.3636H375.82V113ZM380.109 62.6307C383.035 62.6307 385.479 60.358 385.479 57.5739C385.479 54.7898 383.035 52.4886 380.109 52.4886C377.155 52.4886 374.74 54.7898 374.74 57.5739C374.74 60.358 377.155 62.6307 380.109 62.6307Z" fill="black"/>
-                    <path d="M415.311 69.3636H406.362V58.9091H397.868V69.3636H391.475V76.1818H397.868V101.949C397.839 109.875 403.89 113.71 410.595 113.568C413.294 113.54 415.112 113.028 416.106 112.659L414.572 105.642C414.004 105.756 412.953 106.011 411.589 106.011C408.833 106.011 406.362 105.102 406.362 100.188V76.1818H415.311V69.3636Z" fill="black"/>
-                    <path d="M429.276 129.25C436.293 129.25 440.754 125.585 443.254 118.824L461.293 69.4489L452.117 69.3636L441.066 103.227H440.612L429.56 69.3636H420.47L436.435 113.568L435.384 116.466C433.225 122.119 430.185 122.631 425.526 121.352L423.481 128.313C424.504 128.795 426.72 129.25 429.276 129.25Z" fill="black"/>
-                    <path d="M489.551 113H524.693V105.443H498.33V54.8182H489.551V113Z" fill="black"/>
-                    <path d="M545.925 113.966C553.141 113.966 557.203 110.301 558.822 107.034H559.163V113H567.459V84.0227C567.459 71.3239 557.459 68.7955 550.527 68.7955C542.629 68.7955 535.356 71.9773 532.516 79.9318L540.498 81.75C541.748 78.6534 544.93 75.6705 550.641 75.6705C556.123 75.6705 558.936 78.5398 558.936 83.483V83.6818C558.936 86.7784 555.754 86.7216 547.913 87.6307C539.646 88.5966 531.18 90.7557 531.18 100.67C531.18 109.25 537.629 113.966 545.925 113.966ZM547.771 107.148C542.97 107.148 539.504 104.989 539.504 100.784C539.504 96.2386 543.538 94.6193 548.453 93.9659C551.209 93.5966 557.743 92.858 558.964 91.6364V97.2614C558.964 102.432 554.845 107.148 547.771 107.148Z" fill="black"/>
-                    <path d="M578.654 113H586.95V106.21H587.66C589.194 108.994 592.319 113.852 600.274 113.852C610.842 113.852 618.512 105.386 618.512 91.2671C618.512 77.1193 610.728 68.7955 600.189 68.7955C592.092 68.7955 589.166 73.7386 587.66 76.4375H587.149V54.8182H578.654V113ZM586.978 91.1818C586.978 82.0625 590.956 76.0114 598.37 76.0114C606.069 76.0114 609.933 82.5171 609.933 91.1818C609.933 99.9318 605.956 106.608 598.37 106.608C591.069 106.608 586.978 100.358 586.978 91.1818Z" fill="black"/>
-                </svg>
-                  
+<div class="Header">
+    <div class="Header-item--full">
+        <a href="{{ pathto(master_doc) }}" class="Header-link f2 d-flex flex-items-center">
+            <!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
+            <svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32"
+                aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
+                </path>
+            </svg>
+            <span class="hide-sm">{{ project }}</span>
        </a>
-    </div>            
-        <div class="linkcontainer" id="linkcontainermenu">
-                <div class="linkbar">
-                    <a href="https://help.semmle.com/QL/learn-ql/">Learn CodeQL</a>
-                    <a href="https://help.semmle.com/codeql/codeql-tools.html">CodeQL tools</a>
-                    <a href="https://github.com/github/codeql">CodeQL repository</a>
-                    <a href="https://help.semmle.com/QL/ql-libraries.html">CodeQL libraries</a>
-                    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                      </a>
+    </div>
+    <div class="Header-item hide-sm hide-md">
+        <form class="search" action="{{ pathto('search') }}" method="get">
+            <input class="form-control input-dark" type="text" name="q" placeholder="Search" />
+            <input class="btn" type="submit" value="Search" />
+            <input type="hidden" name="check_keywords" value="yes" />
+            <input type="hidden" name="area" value="default" />
+        </form>
+        <script type="text/javascript">$('#searchbox').show(0);</script>
+
+        <div class="clearer"></div>
+    </div>
+    <div class="Header-item">
+
+        <details class="dropdown details-reset details-overlay d-inline-block">
+            <summary class="btn bg-gray-dark text-white border" aria-haspopup="true">
+                CodeQL resources
+                <div class="dropdown-caret"></div>
+            </summary>
+
+            <ul class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
+                <div class="dropdown-header">
+                    Help docs
                </div>
-       </div>
-</div>  
-<div id="title-banner">
-    <a href="{{ pathto(master_doc) }}">{{ project }}</a>
-    <div id="searchbox-title-banner" role="search">
-            <form class="search" action="{{ pathto('search') }}" method="get">
-                <div id="textfield"><input type="text" name="q" /></div>
-                <div id="searchbutton"><input type="submit" value="Search" /></div>
-                <input type="hidden" name="check_keywords" value="yes" />
-                <input type="hidden" name="area" value="default" />
-            </form>
-        </div>
-        <script type="text/javascript">$('#searchbox').show(0);</script> 
-    <div class="clearer"></div>
+                <li><a class="dropdown-item" href="https://help.semmle.com/QL/learn-ql/">Learn CodeQL</a></li>
+                <li><a class="dropdown-item" href="https://help.semmle.com/codeql/codeql-tools.html">CodeQL tools</a>
+                </li>
+                <li class="dropdown-divider" role="separator"></li>
+                <div class="dropdown-header">
+                    Reference docs
+                </div>
+                <li><a class="dropdown-item" href="https://help.semmle.com/QL/ql-handbook/">QL language reference</a>
+                <li><a class="dropdown-item" href="https://help.semmle.com/QL/ql-libraries.html">CodeQL libraries</a>
+                <li><a class="dropdown-item" href="https://help.semmle.com/QL/ql-built-in-queries.htmll">CodeQL
+                        queries</a>
+                <li class="dropdown-divider" role="separator"></li>
+                <div class="dropdown-header">
+                    Source files
+                </div>
+                <li><a class="dropdown-item" href="https://github.com/github/codeql">CodeQL repository</a>
+            </ul>
+        </details>
+
+    </div>
+
 </div>

-<div class="wrapper">
-   
-    <div class="navBox" > 
-            <div id="searchbox-navbar"  role="search">
-                    <form class="search" action="{{ pathto('search') }}" method="get">
-                        <div id="textfield"><input type="text" name="q" /></div>
-                        <div id="searchbutton"><input type="submit" value="Search" /></div>
-                        <input type="hidden" name="check_keywords" value="yes" />
-                        <input type="hidden" name="area" value="default" />
-                    </form>
-                </div>
-                <script type="text/javascript">$('#searchbox').show(0);</script> 
-                <div class="clearer"></div>
-            <div id="toc">
-                <h1>Contents</h1>  
-                {{ toctree(includehidden=true, maxdepth=2, collapse=true) }}
-            </div>
+<nav
+    class="SideNav position-sticky top-0 col-lg-3 col-md-3 float-left border p-4 hide-sm hide-md overflow-y-auto">
+
+    {{ toctree(includehidden=true, maxdepth=2, collapse=true) }}
+
+</nav>
+
+<div class="body p-4 col-sm-12 col-md-9 col-lg-9 float-left">
+    <div class="hide-lg hide-xl">
+        {{customrelbar()}}
    </div>
-    <div class="mainBox">
-        {{super()}}
-    </div>
-    <div class="privacy">
-            <a target="_blank" href="https://help.semmle.com/privacy-policy.html" alt="Privacy policy and tracking preferences" title="Privacy policy and tracking preferences">Privacy policy</a>
-    </div>
-    
+
+    {% block body %} {% endblock %}
 </div>

 {% endblock %}

 {% block footer %}
- <script type="text/javascript">
-    $(document).ready(function() {
+<div class="privacy">
+    <a class="p5" target="_blank" href="https://help.semmle.com/privacy-policy.html"
+        alt="Privacy policy and tracking preferences" title="Privacy policy and tracking preferences">Privacy
+        policy</a>
+</div>
+
+<script type="text/javascript">
+    $(document).ready(function () {
        $(".toggle > *").hide();
        $(".toggle .name").show();
-        $(".toggle .name").click(function() {
+        $(".toggle .name").click(function () {
            $(this).parent().children().not(".name").toggle(400);
            $(this).parent().children(".name").toggleClass("open");
        })
    });
 </script>
-{% endblock %}
-
-    
-
-
+{% endblock %}
--- a/docs/language/global-sphinx-files/global-conf.py
+++ b/docs/language/global-sphinx-files/global-conf.py
@@ -38,7 +38,7 @@ extensions = [
 ]

 # The encoding of source files.
-#source_encoding = 'utf-8-sig'
+source_encoding = 'utf-8-sig'

 # The name of the Pygments (syntax highlighting) style to use.
 pygments_style = 'sphinx'
@@ -86,10 +86,9 @@ html_theme_options = {'font_size': '16px',
                      'body_text': '#333', 
                      'link': '#2F1695',
                      'link_hover': '#2F1695',
-                      'font_family': 'Lato, sans-serif',
-                      'head_font_family': 'Moderat, sans-serif',
                      'show_powered_by': False,
                      'nosidebar':True,
+                      'head_font_family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                      }

 # Add any paths that contain templates here, relative to this directory.