From 791105d027b29fe69cd8da45db08cc177d4b61cd Mon Sep 17 00:00:00 2001 From: Stan Lo Date: Sat, 17 Aug 2024 23:28:05 +0100 Subject: [PATCH] Reorganize css and overhaul the sidebar design --- .../template/darkfish/_sidebar_toggle.rhtml | 6 +- .../generator/template/darkfish/css/rdoc.css | 397 ++++++++---------- 2 files changed, 177 insertions(+), 226 deletions(-) diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml index 8710d75b48..ed2cbe31a0 100644 --- a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml +++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml @@ -1,3 +1,3 @@ - + diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css index b6dd6353ca..c2e0d80917 100644 --- a/lib/rdoc/generator/template/darkfish/css/rdoc.css +++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css @@ -9,6 +9,7 @@ /* vim: ft=css et sw=2 ts=2 sts=2 */ /* Base Green is: #6C8C22 */ +/* 1. Variables and Root Styles */ :root { --sidebar-width: 300px; --primary-color: #2c8c5e; /* A more muted green */ @@ -21,10 +22,7 @@ --sidebar-text-color: #2c3e50; /* Dark blue-gray for contrast */ } -.hide { display: none !important; } - -* { padding: 0; margin: 0; } - +/* 2. Global Styles */ body { background: var(--background-color); font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; @@ -43,6 +41,7 @@ body > :last-child { width: 100%; } +/* 3. Typography */ h1 span, h2 span, h3 span, @@ -84,6 +83,7 @@ h6:target { border-left: 10px solid #f1edba; } +/* 4. Links */ :link, :visited { color: var(--link-color); @@ -98,6 +98,7 @@ h6:target { text-decoration: underline; } +/* 5. Code and Pre */ code, pre { font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; @@ -111,36 +112,7 @@ pre { margin: 1em 0; /* Add some vertical margin */ } -/* Syntax highlighting */ -.ruby-constant { color: #005cc5; } /* Blue */ -.ruby-keyword { color: #d73a49; } /* Red */ -.ruby-ivar { color: #e36209; } /* Orange */ -.ruby-operator { color: #005cc5; } /* Blue */ -.ruby-identifier { color: #0f6e81; } /* Darker teal for identifiers */ -.ruby-node { color: #22863a; } /* Green */ -.ruby-comment { color: #6a737d; } /* Gray */ -.ruby-regexp { color: #032f62; } /* Navy */ -.ruby-value { color: #005cc5; } /* Blue */ -.ruby-string { color: #032f62; } /* Navy */ - -code { - background-color: #f0f4f8; /* Match pre background */ - padding: 0.2em 0.4em; - border-radius: 3px; - font-size: 85%; -} - -em { - text-decoration-color: rgba(52, 48, 64, 0.25); - text-decoration-line: underline; - text-decoration-style: dotted; -} - -strong, -em { - background-color: rgba(158, 178, 255, 0.1); -} - +/* 6. Tables */ table { margin: 0; border-spacing: 0; @@ -160,117 +132,126 @@ table tr:nth-child(even) td { background-color: #f5f4f6; } -/* @group Generic Classes */ +/* 7. Navigation and Sidebar */ +nav { + font-family: 'Helvetica Neue', Arial, sans-serif; + font-size: 16px; + border-right: 1px solid var(--border-color); + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: var(--sidebar-width); + background: var(--sidebar-background, #f8f9fa); + overflow-y: auto; + z-index: 10; + display: flex; + flex-direction: column; + color: var(--sidebar-text-color); +} -.initially-hidden { +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 #ccc; } -.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 .nav-section { + margin-top: 1em; + padding: 0 1em; } -.target-section { - border: 2px solid #dcce90; - border-left-width: 8px; - padding: 0 1em; - background: #fff3c2; +nav h2 { + margin: 0 0 0.5em; + padding: 0.5em 0; + font-size: 1.2em; + color: var(--primary-color, #333333); + border-bottom: 1px solid var(--border-color); } -/* @end */ +nav h3, +#table-of-contents-navigation { + margin: 0; + padding: 0.5em 0; + font-size: 1em; + color: var(--text-color, #333333); +} -/* @group Index Page, Standalone file pages */ -.table-of-contents ul { - margin: 1em; +nav ul, +nav dl, +nav p { + padding: 0; list-style: none; + margin: 0.5em 0; } -.table-of-contents ul ul { - margin-top: 0.25em; +nav ul li { + margin-bottom: 0.3em; } -.table-of-contents ul :link, -.table-of-contents ul :visited { - font-size: 16px; +nav ul ul { + padding-left: 1em; } -.table-of-contents li { - margin-bottom: 0.25em; +nav ul ul ul { + padding-left: 1em; } -.table-of-contents li .toc-toggle { - width: 16px; - height: 16px; - background: url(../images/add.png) no-repeat; +nav ul ul ul ul { + padding-left: 1em; } -.table-of-contents li .toc-toggle.open { - background: url(../images/delete.png) no-repeat; +nav a { + color: var(--link-color, #0366d6); + text-decoration: none; } -/* @end */ +nav a:hover { + text-decoration: underline; +} -/* @group Top-Level Structure */ +#navigation-toggle { + z-index: 1000; + font-size: 2em; + position: absolute; +} -nav { - font-family: 'Helvetica Neue', Arial, sans-serif; - font-size: 16px; /* Increased from 14px */ - border-right: 1px solid var(--border-color); - position: fixed; - top: 0; - bottom: 0; - overflow-y: auto; - z-index: 10; +#navigation-toggle[aria-expanded="true"] { + top: 10px; + left: 250px; +} - /* Layout */ - width: var(--sidebar-width); - background: white; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); +#navigation-toggle[aria-expanded="false"] { + top: 10px; + left: 20px; +} - display: flex; - flex-direction: column; - color: var(--sidebar-text-color); +nav ul li details { + position: relative; + padding-right: 1.5em; /* Add space for the marker on the right */ } -nav[hidden] { - display: none; +nav ul li details > summary { + list-style: none; /* Remove the default marker */ } -nav footer { - padding: 1em; - border-top: 1px solid #ccc; +nav ul li details > summary::after { + content: '▶'; /* Unicode right-pointing triangle */ + position: absolute; + font-size: 0.8em; + top: 0.3em; + padding-left: 0.2em; + transition: transform 0.2s ease; } +nav ul li details[open] > summary::after { + transform: rotate(90deg); /* Rotate the triangle when open */ +} + +/* 8. Main Content */ main { flex: 1; display: block; @@ -308,153 +289,123 @@ main h6 { font-size: smaller; } -/* @end */ - -/* @group navigation */ -nav { - margin-bottom: 1em; -} - -nav .nav-section { - margin-top: 2em; - border-top: 2px solid #aaa; - font-size: 90%; - flex: 1; -} - -nav h2 { - margin: 0; - padding: 2px 8px 2px 8px; - background-color: #e8e8e8; - color: #555; - font-size: 125%; - text-align: center; -} - -nav h3, -#table-of-contents-navigation { - margin: 0; - padding: 2px 8px 2px 8px; - text-align: right; - background-color: #e8e8e8; - color: #555; +/* 9. Search */ +#search-section { + padding: 1em; + background-color: var(--sidebar-background, #f8f9fa); + border-bottom: 1px solid var(--border-color); } -nav ul, -nav dl, -nav p { - padding: 4px 8px 0; - list-style: none; +#search-field-wrapper { + position: relative; + display: flex; + align-items: center; } -.navigation-toggle { - position: fixed; - left: 4px; - z-index: 100; - - background: transparent; - border: none; - cursor: pointer; - padding: 4px; - font-size: 24px; -} -.navigation-toggle[aria-expanded="true"] { - left: 260px; +#search-field { + width: 100%; + padding: 0.5em 1em 0.5em 2em; + border: 1px solid var(--border-color); + border-radius: 20px; + font-size: 14px; + outline: none; + transition: border-color 0.3s ease; + background-color: var(--background-color, #ffffff); } -/* Adds a suble gradient to help the toggle stand out from the background */ -.navigation-toggle::before { - content: ""; - background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%); - display: block; - z-index: -1; - pointer-events: none; - position: fixed; - top: 0; - height: 50px; - width: 100vw; +#search-field:focus { + border-color: var(--primary-color, #333333); } -.navigation-toggle[aria-expanded="true"]::before { - height: 0; +#search-field::placeholder { + color: var(--text-color, #333333); + opacity: 0.6; } -#project-navigation .nav-section { - margin: 0; - border-top: 0; +#search-field-wrapper::before { + content: "\1F50D"; /* Unicode for magnifying glass */ + position: absolute; + left: 0.75em; + top: 50%; + transform: translateY(-50%); + font-size: 14px; + color: var(--text-color, #333333); + opacity: 0.6; } -#home-section h2 { - text-align: center; -} +/* 10. Utility Classes */ +.hide { display: none !important; } +.initially-hidden { display: none; } -#table-of-contents-navigation { - font-size: 1.2em; - font-weight: bold; - text-align: center; +/* 11. Media Queries */ +@media (min-width: 1024px) { + /* Styles for larger screens */ } -#search-section { - margin-top: 0; - border-top: 0; +/* 12. Print Styles */ +@media print { + /* Print-specific styles */ } -#search-field-wrapper { - border-top: 1px solid #aaa; - border-bottom: 1px solid #aaa; - padding: 3px 8px; - background-color: #e8e8e8; - color: #555; -} +/* 13. Syntax Highlighting */ +.ruby-constant { color: #005cc5; } +.ruby-keyword { color: #d73a49; } +.ruby-ivar { color: #e36209; } +.ruby-operator { color: #005cc5; } +.ruby-identifier { color: #0f6e81; } +.ruby-node { color: #22863a; } +.ruby-comment { color: #6a737d; } +.ruby-regexp { color: #032f62; } +.ruby-value { color: #005cc5; } +.ruby-string { color: #032f62; } -ul.link-list li { - white-space: nowrap; - line-height: 1.4em; +code { + background-color: #f0f4f8; /* Match pre background */ + padding: 0.2em 0.4em; + border-radius: 3px; + font-size: 85%; } -ul.link-list .type { - font-size: 8px; - text-transform: uppercase; - color: white; - background: #969696; - padding: 2px 4px; - -webkit-border-radius: 5px; +em { + text-decoration-color: rgba(52, 48, 64, 0.25); + text-decoration-line: underline; + text-decoration-style: dotted; } -dl.note-list dt { - float: left; - margin-right: 1em; +strong, +em { + background-color: rgba(158, 178, 255, 0.1); } -.calls-super { - background: url(../images/arrow_up.png) no-repeat right center; +/* 14. Specific Component Styles */ +.table-of-contents ul { + margin: 1em; + list-style: none; } -.nav-section details > summary { - display: block; +.table-of-contents ul ul { + margin-top: 0.25em; } -.nav-section details > summary::-webkit-details-marker { - display: none; +.table-of-contents ul :link, +.table-of-contents ul :visited { + font-size: 16px; } -.nav-section details > summary::before { - content: ""; +.table-of-contents li { + margin-bottom: 0.25em; } -.nav-section details > summary::after { - content: "\25B6"; /* BLACK RIGHT-POINTING TRIANGLE */ - font-size: 0.8em; - margin-left: 0.4em; +.table-of-contents li .toc-toggle { + width: 16px; + height: 16px; + background: url(../images/add.png) no-repeat; } -.nav-section details[open] > summary::after { - content: "\25BD"; /* WHITE DOWN-POINTING TRIANGLE */ +.table-of-contents li .toc-toggle.open { + background: url(../images/delete.png) no-repeat; } -/* @end */ - -/* @group Documentation Section */ main { color: #333; } @@ -513,7 +464,7 @@ main h5, main h6 { main p { margin: 0 0 0.5em; - line-height: 1.4em; + line-height: 1.5em; } main pre {