authorgravatar for ian@ianjohnson.devIan Johnson <ian@ianjohnson.dev> 2023-09-04 00:52:37-04:00
committergravatar for kappaloris@gmail.comLoris Cro <kappaloris@gmail.com> 2023-09-09 19:48:18+02:00
log51d7700c8c8e81706e0d0313d853b8e989f8a4da
treeca21503675dc3087422d67feee92dafbb7744ed3
parent2f26b15995f1b92b696dce58c3145b77deb90d7c

Autodoc: tweak page layout

Closes #17011 Closes #17012 This commit allows the logo to scale more freely to fit its container, and removes some extra margins so that the content scroll bar is flush with the right side of the viewport.

1 files changed, 7 insertions(+), 15 deletions(-)

lib/docs/index.html+7-15
...@@ -70,7 +70,6 @@...@@ -70,7 +70,6 @@
70 display: flex;70 display: flex;
71 flex-direction: column;71 flex-direction: column;
72 justify-content: center;72 justify-content: center;
73 margin: 0 1rem;
7473
75 height: 100%;74 height: 100%;
76 overflow: hidden;75 overflow: hidden;
...@@ -91,14 +90,12 @@...@@ -91,14 +90,12 @@
91 }90 }
9291
93 .flex-left {92 .flex-left {
94 width: 12rem;
95 max-width: 15vw;
96 min-width: 9.5rem;
97 overflow: auto;93 overflow: auto;
98 -webkit-overflow-scrolling: touch;94 -webkit-overflow-scrolling: touch;
99 overflow-wrap: break-word;95 overflow-wrap: break-word;
100 flex-shrink: 0;96 flex-shrink: 0;
101 flex-grow: 0;97 flex-grow: 0;
98 margin-right: 0.5rem;
10299
103 z-index: 300;100 z-index: 300;
104 }101 }
...@@ -135,13 +132,11 @@...@@ -135,13 +132,11 @@
135 }132 }
136133
137 .logo {134 .logo {
138 width: 168px;135 margin: 0.5rem;
139 margin-right: 1rem;
140 }136 }
141137
142 .logo > svg {138 .logo > svg {
143 display: block;139 display: block;
144 overflow: visible;
145 }140 }
146141
147 ul.guides-api-switch {142 ul.guides-api-switch {
...@@ -276,7 +271,7 @@...@@ -276,7 +271,7 @@
276 .column {271 .column {
277 flex-basis: 0;272 flex-basis: 0;
278 flex-grow: 1;273 flex-grow: 1;
279 min-width: 24rem;274 min-width: min(24rem, 90%);
280 }275 }
281276
282 277
...@@ -750,9 +745,6 @@...@@ -750,9 +745,6 @@
750 padding-left: 1.4rem;745 padding-left: 1.4rem;
751 padding-right: 1.4rem;746 padding-right: 1.4rem;
752 }747 }
753 .logo {
754 max-width: 6.5rem;
755 }
756 .flex-main > .flex-filler {748 .flex-main > .flex-filler {
757 display: none;749 display: none;
758 }750 }
...@@ -951,7 +943,7 @@...@@ -951,7 +943,7 @@
951 <a href="https://github.com/ziglang/zig/wiki/How-to-read-the-standard-library-source-code">Learn more about stdlib source code</a>.943 <a href="https://github.com/ziglang/zig/wiki/How-to-read-the-standard-library-source-code">Learn more about stdlib source code</a>.
952 </div>944 </div>
953 <div id="main" class="flex-main">945 <div id="main" class="flex-main">
954 <div class="flex-horizontal" style="justify-content: center;padding:0.5rem;">946 <div class="flex-horizontal" style="justify-content: center; padding: 0 0.5rem;">
955 <div class="flex-left">947 <div class="flex-left">
956 <div class="logo">948 <div class="logo">
957 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 140">949 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 140">
...@@ -1021,7 +1013,7 @@...@@ -1021,7 +1013,7 @@
1021 </div>1013 </div>
1022 </div>1014 </div>
1023 </div>1015 </div>
1024 <div style="height:100%; overflow:hidden; margin: 0 1rem;">1016 <div style="height:100%; overflow:hidden;">
1025 <div id="sectSearchResults" class="docs hidden">1017 <div id="sectSearchResults" class="docs hidden">
1026 <details id="searchHelp">1018 <details id="searchHelp">
1027 <summary id="searchHelpSummary" class="normal">How to search effectively</summary>1019 <summary id="searchHelpSummary" class="normal">How to search effectively</summary>
...@@ -1084,7 +1076,7 @@...@@ -1084,7 +1076,7 @@
1084 </ul>1076 </ul>
1085 <p>Press <kbd>?</kbd> to see keyboard shortcuts and <kbd>Esc</kbd> to return.</p>1077 <p>Press <kbd>?</kbd> to see keyboard shortcuts and <kbd>Esc</kbd> to return.</p>
1086 </div>1078 </div>
1087 <div id="guides" class="flex-horizontal hidden" style="align-items:flex-start;height:100%;oveflow:hidden;">1079 <div id="guides" class="flex-horizontal hidden" style="align-items:flex-start;height:100%;overflow:hidden;">
1088 <div id="guidesMenu" class="sidebar">1080 <div id="guidesMenu" class="sidebar">
1089 <h2 id="guidesMenuTitle">Table of Contents</h2>1081 <h2 id="guidesMenuTitle">Table of Contents</h2>
1090 <div id="guideTocListEmpty" style="margin:0 1rem;"><i>No content to display.</i></div>1082 <div id="guideTocListEmpty" style="margin:0 1rem;"><i>No content to display.</i></div>
...@@ -1092,7 +1084,7 @@...@@ -1092,7 +1084,7 @@
1092 </div>1084 </div>
1093 <div id="activeGuide" class="hidden"></div>1085 <div id="activeGuide" class="hidden"></div>
1094 </div> 1086 </div>
1095 <div id="docs" class="hidden" style="align-items:flex-start;height:100%;oveflow:hidden;">1087 <div id="docs" class="hidden" style="align-items:flex-start;height:100%;overflow:hidden;">
1096 <section id="docs-scroll" class="docs">1088 <section id="docs-scroll" class="docs">
1097 <p id="status">Loading...</p>1089 <p id="status">Loading...</p>
1098 <div id="fnProto" class="hidden">1090 <div id="fnProto" class="hidden">