rdoc 6.7.0 → 6.11.0

data/lib/rdoc/generator/template/darkfish/css/rdoc.css

@@ -1,5 +1,5 @@
 /*
- * "Darkfish" Rdoc CSS
+ * "Darkfish" RDoc CSS
  * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
  *
  * Author: Michael Granger <ged@FaerieMUD.org>
@@ -7,26 +7,45 @@
  */
 
 /* vim: ft=css et sw=2 ts=2 sts=2 */
-/* Base Green is: #6C8C22 */
-
-.hide { display: none !important; }
-
-* { padding: 0; margin: 0; }
 
+/* 1. Variables and Root Styles */
+:root {
+  --sidebar-width: 300px;
+  --highlight-color: #cc342d; /* Reddish color for accents and headings */
+  --secondary-highlight-color: #c83045; /* Darker reddish color for secondary highlights */
+  --text-color: #505050; /* Dark bluish-grey for text */
+  --background-color: #fefefe; /* Near white background */
+  --code-block-background-color: #f6f6f3; /* Slightly darker grey for code blocks */
+  --link-color: #42405F; /* Dark bluish-grey for links */
+  --link-hover-color: var(--highlight-color); /* Reddish color on hover */
+  --border-color: #e0e0e0;; /* General border color */
+  --source-code-toggle-color: var(--secondary-highlight-color);
+  --scrollbar-thumb-hover-background: #505050; /* Hover color for scrollbar thumb */
+  --table-header-background-color: #eceaed;
+  --table-td-background-color: #f5f4f6;
+
+  /* Font family variables */
+  --font-primary: 'Segoe UI', 'Verdana', 'Arial', sans-serif;
+  --font-heading: 'Helvetica', 'Arial', sans-serif;
+  --font-code: monospace;
+}
+
+/* 2. Global Styles */
 body {
-  background: #fafafa;
-  font-family: Lato, sans-serif;
-  font-weight: 300;
+  background: var(--background-color);
+  font-family: var(--font-primary);
+  font-weight: 400;
+  color: var(--text-color);
+  line-height: 1.6;
 
   /* Layout */
-  display: grid;
-  grid-template-columns: auto 1fr;
-}
-
-body > :last-child {
-  grid-column: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
 }
 
+/* 3. Typography */
 h1 span,
 h2 span,
 h3 span,
@@ -65,39 +84,50 @@ h4:target,
 h5:target,
 h6:target {
   margin-left: -10px;
-  border-left: 10px solid #f1edba;
+  border-left: 10px solid var(--border-color);
+  scroll-margin-top: 1rem;
 }
 
-:link,
-:visited {
-  color: #6C8C22;
-  text-decoration: none;
+main .anchor-link:target {
+  scroll-margin-top: 1rem;
 }
 
-:link:hover,
-:visited:hover {
-  border-bottom: 1px dotted #6C8C22;
+/* 4. Links */
+a {
+  color: var(--link-color);
+  transition: color 0.3s ease;
 }
 
-code,
-pre {
-  font-family: "Source Code Pro", Monaco, monospace;
-  background-color: rgba(27,31,35,0.05);
-  padding: 0em 0.2em;
-  border-radius: 0.2em;
+a:hover {
+  color: var(--link-hover-color);
 }
 
-em {
-  text-decoration-color: rgba(52, 48, 64, 0.25);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
+a code:hover {
+  color: var(--link-hover-color);
 }
 
-strong,
-em {
-  background-color: rgba(158, 178, 255, 0.1);
+/* 5. Code and Pre */
+code,
+pre {
+  font-family: var(--font-code);
+  background-color: var(--code-block-background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 1em 0;
 }
 
+code {
+  background-color: var(--code-block-background-color);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 85%;
+}
+
+/* Tables */
 table {
   margin: 0;
   border-spacing: 0;
@@ -106,429 +136,408 @@ table {
 
 table tr th, table tr td {
   padding: 0.2em 0.4em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
 }
 
 table tr th {
-  background-color: #eceaed;
+  background-color: var(--table-header-background-color);
 }
 
 table tr:nth-child(even) td {
-  background-color: #f5f4f6;
+  background-color: var(--table-td-background-color);
 }
 
-/* @group Generic Classes */
-
-.initially-hidden {
+/* 7. Navigation and Sidebar */
+nav {
+  font-family: var(--font-heading);
+  font-size: 16px;
+  border-right: 1px solid var(--border-color);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--sidebar-width);
+  background: var(--background-color); /* It needs an explicit background for toggling narrow screens */
+  overflow-y: auto;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+}
+
+nav[hidden] {
   display: none;
 }
 
-#search-field {
-  width: 98%;
-  background: white;
-  border: none;
-  height: 1.5em;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  text-align: left;
-}
-#search-field:focus {
-  background: #f1edba;
-}
-#search-field:-moz-placeholder,
-#search-field::-webkit-input-placeholder {
-  font-weight: bold;
-  color: #666;
+nav footer {
+  padding: 1em;
+  border-top: 1px solid var(--border-color);
 }
 
-.missing-docs {
-  font-size: 120%;
-  background: white url(../images/wrench_orange.png) no-repeat 4px center;
-  color: #ccc;
-  line-height: 2em;
-  border: 1px solid #d00;
-  opacity: 1;
-  padding-left: 20px;
-  text-indent: 24px;
-  letter-spacing: 3px;
-  font-weight: bold;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
+nav footer a {
+  color: var(--secondary-highlight-color);
 }
 
-.target-section {
-  border: 2px solid #dcce90;
-  border-left-width: 8px;
+nav .nav-section {
+  margin-top: 1em;
   padding: 0 1em;
-  background: #fff3c2;
 }
 
-/* @end */
-
-/* @group Index Page, Standalone file pages */
-.table-of-contents ul {
-  margin: 1em;
-  list-style: none;
+nav h2, nav h3 {
+  margin: 0 0 0.5em;
+  padding: 0.5em 0;
+  color: var(--highlight-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.table-of-contents ul ul {
-  margin-top: 0.25em;
+nav h2 {
+  font-size: 1.2em;
 }
 
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
-  font-size: 16px;
+nav h3,
+#table-of-contents-navigation {
+  font-size: 1em;
 }
 
-.table-of-contents li {
-  margin-bottom: 0.25em;
+nav ul,
+nav dl,
+nav p {
+  padding: 0;
+  list-style: none;
+  margin: 0.5em 0;
 }
 
-.table-of-contents li .toc-toggle {
-  width: 16px;
-  height: 16px;
-  background: url(../images/add.png) no-repeat;
+nav ul li {
+  margin-bottom: 0.3em;
 }
 
-.table-of-contents li .toc-toggle.open {
-  background: url(../images/delete.png) no-repeat;
+nav ul ul {
+  padding-left: 1em;
 }
 
-/* @end */
-
-/* @group Top-Level Structure */
-
-nav {
-  font-family: Helvetica, sans-serif;
-  font-size: 14px;
-  border-right: 1px solid #ccc;
-  position: sticky;
-  top: 0;
-  overflow: auto;
-
-  /* Layout */
-  width: 260px; /* fallback */
-  width: max(50px, 20vw);
-  min-width: 50px;
-  max-width: 80vw;
-  height: calc(100vh - 100px); /* reduce the footer height */
-  resize: horizontal;
+nav ul ul ul {
+  padding-left: 1em;
 }
 
-main {
-  display: block;
-  margin: 1em;
-  min-width: 340px;
-  font-size: 16px;
+nav ul ul ul ul {
+  padding-left: 1em;
 }
 
-main h1,
-main h2,
-main h3,
-main h4,
-main h5,
-main h6 {
-  font-family: Helvetica, sans-serif;
+nav a {
+  color: var(--link-color);
+  text-decoration: none;
 }
 
-.table-of-contents main {
-  margin-left: 2em;
+nav a:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
 }
 
-#validator-badges {
-  margin: 1em 1em 2em;
-  font-size: smaller;
+#navigation-toggle {
+  z-index: 1000;
+  font-size: 2em;
+  display: block;
+  position: fixed;
+  top: 10px;
+  left: 20px;
+  cursor: pointer;
 }
 
-/* @end */
-
-/* @group navigation */
-nav {
-  margin-bottom: 1em;
+#navigation-toggle[aria-expanded="true"] {
+  top: 10px;
+  left: 250px;
 }
 
-nav .nav-section {
-  margin-top: 2em;
-  border-top: 2px solid #aaa;
-  font-size: 90%;
-  overflow: hidden;
+nav ul li details {
+  position: relative;
+  padding-right: 1.5em;  /* Add space for the marker on the right */
 }
 
-nav h2 {
-  margin: 0;
-  padding: 2px 8px 2px 8px;
-  background-color: #e8e8e8;
-  color: #555;
-  font-size: 125%;
-  text-align: center;
+nav ul li details > summary {
+  list-style: none;  /* Remove the default marker */
+  position: relative; /* So that the open/close triangle can position itself absolutely inside */
 }
 
-nav h3,
-#table-of-contents-navigation {
-  margin: 0;
-  padding: 2px 8px 2px 8px;
-  text-align: right;
-  background-color: #e8e8e8;
-  color: #555;
+nav ul li details > summary::-webkit-details-marker {
+  display: none;  /* Removes the default marker, in Safari 18. */
 }
 
-nav ul,
-nav dl,
-nav p {
-  padding: 4px 8px 0;
-  list-style: none;
+nav ul li details > summary::after {
+  content: '▶';  /* Unicode right-pointing triangle */
+  position: absolute;
+  font-size: 0.8em;
+  bottom: 0.1em;
+  margin-left: 0.3em;
+  transition: transform 0.2s ease;
 }
 
-#project-navigation .nav-section {
-  margin: 0;
-  border-top: 0;
+nav ul li details[open] > summary::after {
+  transform: rotate(90deg);  /* Rotate the triangle when open */
 }
 
-#home-section h2 {
-  text-align: center;
+/* 8. Main Content */
+main {
+  flex: 1;
+  display: block;
+  margin: 3em auto;
+  padding: 0 2em;
+  max-width: 800px;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text-color);
+  box-sizing: border-box;
 }
 
-#table-of-contents-navigation {
-  font-size: 1.2em;
-  font-weight: bold;
-  text-align: center;
+@media (min-width: 1024px) {
+  main {
+    margin-left: var(--sidebar-width);
+  }
+
+  .table-of-contents main {
+    margin-left: 20em;
+  }
+
+  #navigation-toggle {
+    display: none;
+  }
 }
 
-#search-section {
+main h1[class] {
   margin-top: 0;
-  border-top: 0;
+  margin-bottom: 1em;
+  font-size: 2.5em;
+  color: var(--highlight-color);
 }
 
-#search-field-wrapper {
-  border-top: 1px solid #aaa;
-  border-bottom: 1px solid #aaa;
-  padding: 3px 8px;
-  background-color: #e8e8e8;
-  color: #555;
+main h1,
+main h2,
+main h3,
+main h4,
+main h5,
+main h6 {
+  font-family: var(--font-heading);
+  color: var(--highlight-color);
 }
 
-ul.link-list li {
-  white-space: nowrap;
-  line-height: 1.4em;
+/* Search */
+#search-section {
+  padding: 1em;
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
-ul.link-list .type {
-  font-size: 8px;
-  text-transform: uppercase;
-  color: white;
-  background: #969696;
-  padding: 2px 4px;
-  -webkit-border-radius: 5px;
+#search-field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
-dl.note-list dt {
-  float: left;
-  margin-right: 1em;
+#search-field {
+  width: 100%;
+  padding: 0.5em 1em 0.5em 2.5em;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.3s ease;
+  color: var(--text-color);
 }
 
-.calls-super {
-  background: url(../images/arrow_up.png) no-repeat right center;
+#search-field:focus {
+  border-color: var(--highlight-color);
 }
 
-.nav-section details > summary {
-  display: block;
+#search-field::placeholder {
+  color: var(--text-color);
 }
 
-.nav-section details > summary::-webkit-details-marker {
-  display: none;
+#search-field-wrapper::before {
+  content: "\1F50D";
+  position: absolute;
+  left: 0.75em;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: var(--text-color);
+  opacity: 0.6;
 }
 
-.nav-section details > summary::before {
-  content: "";
+/* Search Results */
+#search-results {
+  font-family: var(--font-primary);
+  font-weight: 300;
 }
 
-.nav-section details > summary::after {
-  content: "\25B6"; /* BLACK RIGHT-POINTING TRIANGLE */
-  font-size: 0.8em;
-  margin-left: 0.4em;
+#search-results .search-match {
+  font-family: var(--font-heading);
+  font-weight: normal;
 }
 
-.nav-section details[open] > summary::after {
-  content: "\25BD"; /* WHITE DOWN-POINTING TRIANGLE */
+#search-results .search-selected {
+  background: var(--code-block-background-color);
+  border-bottom: 1px solid transparent;
 }
 
-/* @end */
-
-/* @group Documentation Section */
-main {
-  color: #333;
+#search-results li {
+  list-style: none;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0.5em;
 }
 
-main > h1:first-child,
-main > h2:first-child,
-main > h3:first-child,
-main > h4:first-child,
-main > h5:first-child,
-main > h6:first-child {
-  margin-top: 0px;
+#search-results li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 
-main sup {
-  vertical-align: super;
-  font-size: 0.8em;
+#search-results li p {
+  padding: 0;
+  margin: 0.5em;
 }
 
-/* The heading with the class name */
-main h1[class] {
-  margin-top: 0;
-  margin-bottom: 1em;
-  font-size: 2em;
-  color: #6C8C22;
+#search-results .search-namespace {
+  font-weight: bold;
 }
 
-main h1 {
-  margin: 2em 0 0.5em;
-  font-size: 1.7em;
+#search-results li em {
+  background-color: rgba(224, 108, 117, 0.1);
+  font-style: normal;
 }
 
-main h2 {
-  margin: 2em 0 0.5em;
-  font-size: 1.5em;
+#search-results pre {
+  margin: 0.5em;
+  font-family: var(--font-code);
 }
 
-main h3 {
-  margin: 2em 0 0.5em;
-  font-size: 1.2em;
-}
+/* Syntax Highlighting - Gruvbox Light Scheme */
 
-main h4 {
-  margin: 2em 0 0.5em;
-  font-size: 1.1em;
-}
+.ruby-constant   { color: #AF3A03; }  /* Dark Orange */
+.ruby-keyword    { color: #9D0006; }  /* Dark Red */
+.ruby-ivar       { color: #B57614; }  /* Brown */
+.ruby-operator   { color: #427B58; }  /* Dark Teal */
+.ruby-identifier { color: #076678; }  /* Deep Teal */
+.ruby-node       { color: #8F3F71; }  /* Plum */
+.ruby-comment    { color: #928374; font-style: italic; }  /* Gray */
+.ruby-regexp     { color: #8F3F71; }  /* Plum */
+.ruby-value      { color: #AF3A03; }  /* Dark Orange */
+.ruby-string     { color: #79740E; }  /* Olive */
 
-main h5 {
-  margin: 2em 0 0.5em;
-  font-size: 1em;
+/* Emphasis */
+em {
+  text-decoration-color: rgba(52, 48, 64, 0.25);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 
-main h6 {
-  margin: 2em 0 0.5em;
-  font-size: 1em;
+strong,
+em {
+  color: var(--highlight-color);
+  background-color: rgba(255, 111, 97, 0.1); /* Light red background for emphasis */
 }
 
+/* Paragraphs */
 main p {
-  margin: 0 0 0.5em;
-  line-height: 1.4em;
+  line-height: 1.5em;
+  font-weight: 400;
 }
 
+/* Preformatted Text */
 main pre {
   margin: 1.2em 0.5em;
   padding: 1em;
   font-size: 0.8em;
 }
 
+/* Horizontal Rules */
 main hr {
   margin: 1.5em 1em;
-  border: 2px solid #ddd;
+  border: 2px solid var(--border-color);
 }
 
+/* Blockquotes */
 main blockquote {
   margin: 0 2em 1.2em 1.2em;
   padding-left: 0.5em;
-  border-left: 2px solid #ddd;
-}
-
-main ol,
-main ul {
-  margin: 1em 2em;
+  border-left: 2px solid var(--border-color);
 }
 
+/* Lists */
 main li > p {
-  margin-bottom: 0.5em;
+  margin: 0.5em;
 }
 
+/* Definition Lists */
 main dl {
   margin: 1em 0.5em;
 }
 
 main dt {
-  margin-bottom: 0.5em;
+  line-height: 1.5; /* matches `main p` */
   font-weight: bold;
 }
 
+main dl.note-list dt {
+  margin-right: 1em;
+  float: left;
+}
+
+main dl.note-list dt:has(+ dt) {
+  margin-right: 0.25em;
+}
+
+main dl.note-list dt:has(+ dt)::after {
+  content: ', ';
+  font-weight: normal;
+}
+
 main dd {
-  margin: 0 1em 1em 0.5em;
+  margin: 0 0 1em 1em;
 }
 
+main dd p:first-child {
+  margin-top: 0;
+}
+
+/* Headers within Main */
 main header h2 {
   margin-top: 2em;
   border-width: 0;
-  border-top: 4px solid #bbb;
+  border-top: 4px solid var(--border-color);
   font-size: 130%;
 }
 
 main header h3 {
   margin: 2em 0 1.5em;
   border-width: 0;
-  border-top: 3px solid #bbb;
+  border-top: 3px solid var(--border-color);
   font-size: 120%;
 }
 
-.documentation-section-title {
-  position: relative;
-}
-.documentation-section-title .section-click-top {
-  position: absolute;
-  top: 6px;
-  left: 12px;
-  font-size: 10px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-left: 0.5px;
-}
-
-.documentation-section-title:hover .section-click-top {
-  visibility: visible;
-}
-
-.constants-list > dl {
-  margin: 1em 0 2em;
-  border: 0;
-}
-
-.constants-list > dl dt {
-  margin-bottom: 0.75em;
-  padding-left: 0;
-  font-family: "Source Code Pro", Monaco, monospace;
-  font-size: 110%;
-}
-
-.constants-list > dl dt a {
-  color: inherit;
-}
+/* Utility Classes */
+.hide { display: none !important; }
+.initially-hidden { display: none; }
 
-.constants-list > dl dd {
-  margin: 0 0 2em 0;
-  padding: 0;
-  color: #666;
+/* Table of Contents */
+.table-of-contents ul {
+  margin: 1em;
+  list-style: none;
 }
 
-.documentation-section h2 {
-  position: relative;
+.table-of-contents ul ul {
+  margin-top: 0.25em;
 }
 
-.documentation-section h2 a {
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
+.table-of-contents ul :link,
+.table-of-contents ul :visited {
+  font-size: 16px;
 }
 
-.documentation-section h2:hover a {
-  visibility: visible;
+.table-of-contents li {
+  margin-bottom: 0.25em;
 }
 
-/* @group Method Details */
-
+/* Method Details */
 main .method-source-code {
+  visibility: hidden;
   max-height: 0;
   overflow: auto;
   transition-duration: 200ms;
@@ -537,59 +546,63 @@ main .method-source-code {
   transition-timing-function: ease-in-out;
 }
 
+main .method-source-code pre {
+  border-color: var(--source-code-toggle-color);
+}
+
 main .method-source-code.active-menu {
+  visibility: visible;
   max-height: 100vh;
 }
 
 main .method-description .method-calls-super {
-  color: #333;
+  color: var(--text-color);
   font-weight: bold;
 }
 
 main .method-detail {
   margin-bottom: 2.5em;
-  cursor: pointer;
 }
 
 main .method-detail:target {
   margin-left: -10px;
-  border-left: 10px solid #f1edba;
+  border-left: 10px solid var(--border-color);
+}
+
+main .method-header {
+  display: inline-block;
 }
 
 main .method-heading {
   position: relative;
-  font-family: "Source Code Pro", Monaco, monospace;
+  font-family: var(--font-code);
   font-size: 110%;
   font-weight: bold;
-  color: #333;
-}
-main .method-heading :link,
-main .method-heading :visited {
-  color: inherit;
 }
-main .method-click-advice {
+
+main .method-heading::after {
+  content: '¶';
   position: absolute;
-  top: 2px;
-  right: 5px;
-  font-size: 12px;
-  color: #9b9877;
   visibility: hidden;
-  padding-right: 20px;
-  line-height: 20px;
-  background: url(../images/zoom.png) no-repeat right top;
+  color: var(--highlight-color);
+  font-size: 0.5em;
 }
-main .method-header:hover .method-click-advice {
+
+main .method-heading:hover::after {
   visibility: visible;
 }
 
-main .method-alias .method-heading {
-  color: #666;
+main .method-controls {
+  line-height: 20px;
+  float: right;
+  color: var(--source-code-toggle-color);
+  cursor: pointer;
 }
 
 main .method-description,
 main .aliases {
   margin-top: 0.75em;
-  color: #333;
+  color: var(--text-color);
 }
 
 main .aliases {
@@ -597,6 +610,17 @@ main .aliases {
   font-style: italic;
   cursor: default;
 }
+
+main .aliases a {
+  color: var(--secondary-highlight-color);
+}
+
+main .mixin-from {
+  font-size: 80%;
+  font-style: italic;
+  margin-bottom: 0.75em;
+}
+
 main .method-description ul {
   margin-left: 1.5em;
 }
@@ -605,83 +629,40 @@ main #attribute-method-details .method-detail:hover {
   background-color: transparent;
   cursor: default;
 }
+
 main .attribute-access-type {
   text-transform: uppercase;
-  padding: 0 1em;
-}
-/* @end */
-
-/* @end */
-
-/* @group Source Code */
-
-pre {
-  margin: 0.5em 0;
-  border: 1px dashed #999;
-  padding: 0.5em;
-  background: #262626;
-  color: white;
-  overflow: auto;
-}
-
-.ruby-constant   { color: #7fffd4; background: transparent; }
-.ruby-keyword    { color: #00ffff; background: transparent; }
-.ruby-ivar       { color: #eedd82; background: transparent; }
-.ruby-operator   { color: #00ffee; background: transparent; }
-.ruby-identifier { color: #ffdead; background: transparent; }
-.ruby-node       { color: #ffa07a; background: transparent; }
-.ruby-comment    { color: #dc0000; background: transparent; }
-.ruby-regexp     { color: #ffa07a; background: transparent; }
-.ruby-value      { color: #7fffd4; background: transparent; }
-
-/* @end */
-
-
-/* @group search results */
-#search-results {
-  font-family: Lato, sans-serif;
-  font-weight: 300;
-}
-
-#search-results .search-match {
-  font-family: Helvetica, sans-serif;
-  font-weight: normal;
-}
-
-#search-results .search-selected {
-  background: #e8e8e8;
-  border-bottom: 1px solid transparent;
 }
 
-#search-results li {
-  list-style: none;
-  border-bottom: 1px solid #aaa;
-  margin-bottom: 0.5em;
-}
+/* Responsive Adjustments */
+@media (max-width: 480px) {
+  nav {
+    width: 100%;
+  }
 
-#search-results li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
+  main {
+    margin: 1em auto;
+    padding: 0 1em;
+    max-width: 100%;
+  }
 
-#search-results li p {
-  padding: 0;
-  margin: 0.5em;
-}
+  #navigation-toggle {
+    right: 10px;
+    left: auto;
+  }
 
-#search-results .search-namespace {
-  font-weight: bold;
-}
+  #navigation-toggle[aria-expanded="true"] {
+    left: auto;
+  }
 
-#search-results li em {
-  background: yellow;
-  font-style: normal;
-}
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
 
-#search-results pre {
-  margin: 0.5em;
-  font-family: "Source Code Pro", Monaco, monospace;
+  main .method-controls {
+    margin-top: 10px;
+    float: none;
+  }
 }
-
-/* @end */
-