Tweak sidebar size and padding

raspberrypi · Dec 10, 2024 · a28a588 · a28a588
1 parent 54f5e4d
commit a28a588
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 65 deletions.
diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html
@@ -37,7 +37,7 @@ <h1 id="docs-header-title">
                   <label class="toc-toggle" for="{{ subdir.path }}" onclick="event.stopPropagation()">
                     <div class="toc-toggle-container">
                       <a class="level1" href="{{ site.baseurl }}{{ subdir.path }}">
-                        <a alt="expand {{ item.title | markdownify }}" title="expand {{ item.title | markdownify }}"
+                        <a title="expand {{ item.title | markdownify }}"
                           {% if page.url contains subdir.path %}
                           class="bold toc-item"
                           {% else %}
@@ -64,7 +64,7 @@ <h1 id="docs-header-title">
                       <label class="toc-toggle" for="{{ item.path }}">
                         <div class="toc-toggle-container">
                           <a class="level2" href="{{ site.baseurl }}{{ item.path }}">
-                            <a alt="expand {{ item.title | markdownify }}" title="expand {{ item.title | markdownify }}"
+                            <a title="expand {{ item.title | strip_html }}"
                               {% if page.url contains item.path %}
                               class="bold toc-item"
                               {% else %}
@@ -97,15 +97,15 @@ <h1 id="docs-header-title">
                             <div class="toc-toggle-container">
                               {% if entry.subsections[0] %}
                               <a class="level3" href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}" >
-                                <a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" alt="expand {{ entry.heading | markdownify }}" title="expand {{ entry.heading | markdownify }}"
+                                <a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" title="expand {{ entry.heading | strip_html }}"
                                 >
                                 <script type="text/javascript">if (window.location.href.includes('{{ item.path }}#{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }</script>
                                   {{ entry.heading | markdownify }}
                                 </a>
                               </a>
                               {% else %}
                               <a class="level3">
-                                <a id="{{ item.path }}#{{entry.anchor}}-toc" alt="expand {{ entry.heading | markdownify }}" title="expand {{ entry.heading | markdownify }}"
+                                <a id="{{ item.path }}#{{entry.anchor}}-toc" title="expand {{ entry.heading | strip_html }}"
                                   href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
                                   onclick="document.getElementById('mobile-toggle').checked = false;"
                                   class="toc-item no-dropdown"

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
@@ -86,7 +86,6 @@ body {
   font-size: initial;
   line-height: initial;
   margin: 0;
-  max-width: 100%;
   background-color: var(--bg);
 }
 
@@ -209,12 +208,12 @@ div.subtitle p {
 
 #docs-container {
   position: relative;
-  flex-basis: 300px;
   flex-grow: 1;
-  overflow: wrap;
-  min-width: 0;
   white-space: initial;
   word-break: break-word;
+  overflow: wrap;
+  padding-right: 0px;
+  margin-right: 0px;
 }
 
 #container .section {
@@ -229,7 +228,7 @@ div.subtitle p {
 
 #docs-content #toc-container-container {
   flex-grow: 0;
-  flex-basis: 270px;
+  flex-basis: 250px;
   background-color: var(--code-bg-colour);
   top: 0;
   position: sticky;
@@ -259,16 +258,6 @@ pre {
   padding-bottom: 5px;
 }
 
-#toc-container #tocbot {
-  margin-top: 10px;
-  --offset: 1rem;
-  list-style-type: none;
-  padding-left: 10px;
-}
-
-#theme-toggle-container {
-}
-
 #theme-toggle {
   border-radius: 3px;
   padding: 5px;
@@ -367,9 +356,9 @@ input:checked + li span label div .toc-item::before {
 
 #docs-content {
   display: flex;
-  width: 100%;
   justify-content: left;
   height: 100%;
+  width: fit-content;
 }
 
 #on-this-page {
@@ -664,9 +653,10 @@ nav#mobile-contents li {
   min-width: 600px;
   max-width: 900px;
   width: 100%;
-  margin-left: 20px;
+  margin-left: 0px;
+  margin-right: 0px;
   padding-bottom: 10vh;
-  padding-right: 10px;
+  padding-right: 0px;
   padding-left: 10px;
 }
 
@@ -1292,6 +1282,7 @@ div.legal {
   align-items: center;
   justify-content: center;
   background-color: var(--rptl-footer-background-color);
+  width: 100%;
 }
 
 div.legal + div.legal {
@@ -1338,19 +1329,6 @@ footer {
   margin-top: 30px;
 }
 
-.c-footer-social__link--facebook {
-    background-image: url(https://www.raspberrypi.com/app/themes/mind-control/images/application/footer/social/facebook.svg);
-}
-.c-footer-social__link--twitter {
-    background-image: url(https://www.raspberrypi.com/app/themes/mind-control/images/application/footer/social/twitter.svg);
-}
-.c-footer-social__link--instagram {
-    background-image: url(https://www.raspberrypi.com/app/themes/mind-control/images/application/footer/social/instagram.svg);
-}
-.c-footer-social__link--youtube {
-    background-image: url(https://www.raspberrypi.com/app/themes/mind-control/images/application/footer/social/youtube.svg);
-}
-
 @media screen and (max-width: 1350px) {
   div.contribute {
     padding-left: 50px;
@@ -1401,6 +1379,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
   overflow-y: scroll;
   height: 90vh;
   background-color: var(--code-bg-colour);
+  max-width: 25vw;
 }
 
 #toc-inner {
@@ -1454,6 +1433,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
 
   #mobile-toggle:checked ~ #docs-content .toc {
     height: 100vh;
+    max-width: 100vw;
   }
 
   #container {
@@ -1495,17 +1475,24 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
     background-color: var(--near-bg);
   }
 
+  #docs-container {
+    max-width: 100vw;
+  }
+
   #docs-content {
     flex-direction: column;
   }
 
+  #content {
+    padding: 5px;
+  }
+
   #toc-container-container {
     top: 0;
     position: sticky;
     background-color: var(--code-bg-colour);
     z-index: 100;
     max-height: 50px;
-    width: 300px;
   }
 
   #docs-header {
@@ -1671,21 +1658,6 @@ div.subtitle.error-message p a {
   }
 }
 
-@media screen and (max-width: 1219px) {
-  p#release {
-    width: 800px;
-  }
-}
-
-@media screen and (max-width: 889px) {
-  p#release {
-    text-align: center;
-    padding-right: 0px;
-    width: 100%;
-  }
-}
-
-
 /* documentation category tabs */
 
 * {
@@ -1739,20 +1711,6 @@ ul#tab-container li.selected a {
   color: var(--accent);
 }
 
-p#release {
-  text-align: right;
-  padding-top: 10px;
-  color: var(--subtle);
-  font-size: 0.9em;
-  width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-p#release + #container {
-  margin-top: 75px;
-}
-
 @media screen and (max-width: 1219px) {
   ul#tab-container li {
     width: 200px;