diff --git a/crates/project/src/docs.rs b/crates/project/src/docs.rs index 4b30ebed..eecf87be 100644 --- a/crates/project/src/docs.rs +++ b/crates/project/src/docs.rs @@ -15,7 +15,7 @@ use std::{ time::{Duration, SystemTime}, }; -const MAX_COLUMNS: isize = 80; +const MAX_COLUMNS: isize = 999; const VERSION: &str = env!("CARGO_PKG_VERSION"); #[derive(Debug, PartialEq, Eq, Clone)] @@ -175,6 +175,11 @@ fn generate_module( fn generate_static_assets(search_indexes: Vec) -> Vec { let mut assets: Vec = vec![]; + assets.push(DocFile { + path: PathBuf::from("favicon.svg"), + content: std::include_str!("../templates/favicon.svg").to_string(), + }); + assets.push(DocFile { path: PathBuf::from("css/atom-one-light.min.css"), content: std::include_str!("../templates/css/atom-one-light.min.css").to_string(), diff --git a/crates/project/templates/_layout.html b/crates/project/templates/_layout.html index fb763859..355d7162 100644 --- a/crates/project/templates/_layout.html +++ b/crates/project/templates/_layout.html @@ -4,11 +4,10 @@ {{ page_title }} - - + + + - - @@ -121,7 +120,7 @@

{{ project_name }} - - v{{ project_version }} + v{{ project_version }} - ✨ -
-
Lucy
-
says
-
trans
-
rights
-
now
-
- diff --git a/crates/project/templates/css/index.css b/crates/project/templates/css/index.css index 2109ca84..ce9158d0 100644 --- a/crates/project/templates/css/index.css +++ b/crates/project/templates/css/index.css @@ -1,30 +1,8 @@ -@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Ubuntu+Mono&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Ubuntu+Mono&display=swap"); :root { - /* Colours */ - --black: #2a2020; - --hard-black: #000; - --pink: #ffaff3; - --hot-pink: #d900b8; - --white: #fff; - --pink-white: #fff8fe; - --mid-grey: #dfe2e5; - --light-grey: #f5f5f5; - --boi-blue: #a6f0fc; - - /* Derived colours */ - --text: var(--black); - --background: var(--white); - --accented-background: var(--pink-white); - --code-border: var(--pink); - --code-background: var(--light-grey); - --table-border: var(--mid-grey); - --table-background: var(--pink-white); - --links: var(--hot-pink); - --accent: var(--pink); - /* Sizes */ - --content-width: 680px; + --search-width: 680px; --header-height: 60px; --hash-offset: calc(var(--header-height) * 1.67); --sidebar-width: 240px; @@ -35,10 +13,28 @@ --sidebar-toggle-size: 33px; --search-height: 4rem; + /* Colors */ + --color-text: #4c4f69; + --color-text-accent: #e6e9ef; + --color-inline-code: #ea76cb; + --color-link: #dc8a78; + --color-link-accent: #dd7878; + --color-background: #eff1f5; + --color-background-sidebar: #e6e9ef; + --color-background-accent: #8839ef; + --color-border-accent: #ea76cb; + --color-table-header-background: #bcc0cc; + --color-table-header-text: #4c4f69; + --color-table-background: #e6e9ef; + --color-table-border: #ea76cb; + --color-code-background: #dce0e8; + /* etc */ - --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px #e9ecef, - 0 2px 4px -2px rgba(138, 141, 151, 0.6); --nav-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); + --shadow: + 0 0 0 1px rgba(50, 50, 93, 0.075), + 0 0 1px #e9ecef, + 0 2px 4px -2px rgba(138, 141, 151, 0.6); } * { @@ -49,12 +45,14 @@ body, html { padding: 0; margin: 0; - font-family: "Karla", sans-serif; + font-family: "Nunito Sans", sans-serif; font-size: 17px; line-height: 1.4; position: relative; min-height: 100vh; word-break: break-word; + background-color: var(--color-background); + color: var(--color-text); } html { @@ -64,7 +62,7 @@ html { a, a:visited { - color: var(--links); + color: var(--color-link); text-decoration: none; } @@ -128,7 +126,7 @@ pre, code { font-family: "Ubuntu Mono", monospace; line-height: 1.2; - background-color: var(--code-background); + background-color: var(--color-code-background); } pre { @@ -144,11 +142,12 @@ code.hljs { background: transparent; } +td code, p code { margin: 0 2px; border-radius: 3px; padding: 0 0.2em; - color: var(--inline-code); + color: var(--color-inline-code); } /* Page layout */ @@ -161,7 +160,7 @@ p code { margin-left: var(--sidebar-width); padding: calc(var(--header-height) + var(--gap)) var(--gap) 0 var(--gap); width: calc(100% - var(--sidebar-width)); - max-width: var(--content-width); + max-width: 100%; } .content img { @@ -173,9 +172,8 @@ p code { .page-header { box-shadow: var(--nav-shadow); height: var(--header-height); - color: black; - color: var(--hard-black); - background-color: var(--pink); + color: var(--color-text-accent); + background-color: var(--color-background-accent); display: flex; padding: var(--small-gap) var(--gap); position: fixed; @@ -194,8 +192,7 @@ p code { .page-header a, .page-header a:visited { - color: black; - color: var(--hard-black); + color: var(--color-text-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -216,14 +213,12 @@ p code { } .page-header .sidebar-toggle { - color: white; - color: var(--white); + color: var(--color-background); margin: 0 var(--small-gap) 0 0; } .page-header .search-nav-button { - color: white; - color: var(--white); + color: var(--color-background); margin: 0 var(--small-gap) 0 0; } @@ -278,7 +273,7 @@ p code { } .module-name { - color: var(--hard-black); + color: var(--color-text); margin: 0 0 var(--gap); font-weight: 700; } @@ -286,27 +281,31 @@ p code { /* Sidebar */ .sidebar { - background-color: var(--background); + background-color: var(--color-background-sidebar); font-size: 0.95rem; max-height: calc(100vh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--gap); - padding-bottom: calc(3 * var(--gap)); + padding-bottom: var(--gap); padding-left: var(--gap); position: fixed; top: var(--header-height); transition: transform 0.5s ease; width: var(--sidebar-width); z-index: 100; + height: 100%; + display: flex; + flex-direction: column; } .sidebar h2 { margin: 0; + color: var(--color-link-accent); } .sidebar h3.modules-prefix { - color: var(--pink); + color: var(--color-link); margin-bottom: 0; } @@ -326,7 +325,7 @@ p code { } .sidebar .sidebar-toggle { - color: var(--pink); + color: var(--color-link); font-size: calc(0.8 * var(--sidebar-toggle-size)); } @@ -337,9 +336,11 @@ body.drawer-open .label-closed { .display-controls { display: flex; - flex-wrap: wrap; - margin-top: var(--small-gap); - padding-right: var(--gap); + margin-top: auto; +} + +.display-controls svg.icon { + color: var(--color-text); } .display-controls .control { @@ -365,8 +366,8 @@ body.drawer-open .label-closed { display: flex; } -.label .icon { - margin: 0 0.28rem; +.label .icon + .icon { + margin-left: 0.5rem; } /* Module members (types, functions) */ @@ -377,7 +378,7 @@ body.drawer-open .label-closed { .module-member-kind { font-size: 2rem; - color: var(--text); + color: var(--color-text); } .member { @@ -389,9 +390,10 @@ body.drawer-open .label-closed { display: flex; align-items: center; justify-content: space-between; - border-left: 4px solid var(--accent); + border-left: 4px solid var(--color-border-accent); padding: var(--small-gap) var(--gap); - background-color: var(--accented-background); + color: var(--color-text-accent); + background-color: var(--color-background-accent); } .member-name h2 { @@ -401,7 +403,7 @@ body.drawer-open .label-closed { } .member-name h2 a { - color: var(--text); + color: var(--color-text-accent); } .member-source { @@ -473,59 +475,16 @@ table { table td, table th { padding: 6px 13px; - border: 1px solid var(--table-border); + border: 1px solid var(--color-table-border); +} + +table th { + background-color: var(--color-table-header-background); + color: var(--color-table-header-text); } table tr:nth-child(2n) { - background-color: var(--table-background); -} - -/* Footer */ - -.pride { - width: 100%; - display: none; - flex-direction: row; - position: absolute; - bottom: 0; - z-index: 100; -} - -.show-pride .pride { - display: flex; -} - -.show-pride .sidebar { - margin-bottom: var(--gap); -} - -.pride div { - flex: 1; - text-align: center; - padding: var(--tiny-gap); -} - -.pride .white { - background-color: var(--white); -} -.pride .pink { - background-color: var(--pink); -} -.pride .blue { - background-color: var(--boi-blue); -} - -.pride-button { - position: absolute; - right: 2px; - bottom: 2px; - opacity: 0.2; - font-size: 0.9rem; -} - -.pride-button { - text-decoration: none; - cursor: default; + background-color: var(--color-table-background); } /* Icons */ @@ -556,119 +515,28 @@ body.prewrap-on pre { /* Dark Theme Option */ body.theme-dark { - /* Colour palette adapted from: - * https://github.com/dustypomerleau/yarra-valley - */ + /* Colors */ + --color-text: #cdd6f4; + --color-text-accent: #11111b; + --color-inline-code: #f5c2e7; + --color-link: #f5e0dc; + --color-link-accent: #f2cdcd; + --color-background: #1e1e2e; + --color-background-sidebar: #313244; + --color-background-accent: #cba6f7; + --color-border-accent: #f5c2e7; + --color-table-header-background: #11111b; + --color-table-header-text: #cdd6f4; + --color-table-background: #181825; + --color-table-border: #6c7086; + --color-code-background: #11111b; - --argument-atom: #c651e5; - --class-module: #ff89b5; - --comment: #7e818b; - --escape: #7cdf89; - --function-call: #abb8c0; - --function-definition: #8af899; - --interpolation-regex: #ee37aa; - --keyword-operator: #ff9d35; - --number-boolean: #f14360; - --object: #99c2eb; - --punctuation: #4ce7ff; - --string: #aecc00; - - --inline-code: #ff9d35; - - --bg: #292d3e; - --bg-tint-1: #3e4251; - --bg-tint-2: #535664; - --bg-tint-3: #696c77; - --bg-tint-4: #7e818b; - --bg-shade-1: #242837; - --bg-shade-2: #202431; - --bg-shade-3: #1c1f2b; - --bg-mono-1: #33384d; - --bg-mono-2: #3d435d; - --bg-mono-3: #474e6c; - --bg-mono-4: #51597b; - - --fg: #cac0a9; - --fg-tint-1: #fdf2d8; - --fg-tint-2: #fdf3dc; - --fg-tint-3: #fdf5e0; - --fg-shade-1: #e3d8be; - --fg-shade-2: #cac0a9; - --fg-shade-3: #b1a894; - --fg-shade-4: #97907f; - - --orange-shade-1: #e58d2f; - --orange-shade-2: #cc7d2a; - --orange-shade-3: #b26d25; - - --taupe-mono-1: #fdf1d4; - --taupe-mono-2: #fce9bc; - --taupe-mono-3: #fbe1a3; - - /* Theme Overrides */ - - --accent: var(--pink); - --accented-background: var(--bg-shade-1); - --background: var(--bg); - --code-background: var(--bg-shade-2); - --table-background: var(--bg-mono-1); - --hard-black: var(--taupe-mono-1); - --links: var(--pink); - --text: var(--taupe-mono-1); - - --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px var(--fg-shade-3), - 0 2px 4px -2px rgba(138, 141, 151, 0.2); + /* etc */ --nav-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1); -} - -body.theme-dark { - background-color: var(--bg); - color: var(--fg-shade-1); -} - -body.theme-dark .page-header { - background-color: var(--bg-mono-1); -} - -body.theme-dark .page-header h2 { - color: var(--fg-shade-1); -} - -body.theme-dark .page-header a, -body.theme-dark .page-header a:visited { - color: var(--pink); -} - -body.theme-dark .page-header .sidebar-toggle { - color: var(--fg-shade-1); -} -body.theme-dark .page-header .search-nav-button { - color: var(--fg-shade-1); -} - -body.theme-dark #project-version select, -body.theme-dark .control { - color: var(--fg-shade-1); -} - -body.theme-dark .module-name { - color: var(--taupe-mono-1); -} - -body.theme-dark .pride { - color: var(--bg-shade-3); -} - -body.theme-dark .pride .white { - background-color: var(--fg-shade-1); -} - -body.theme-dark .pride .pink { - background-color: var(--argument-atom); -} - -body.theme-dark .pride .blue { - background-color: var(--punctuation); + --shadow: + 0 0 0 1px rgba(50, 50, 93, 0.075), + 0 0 1px var(--fg-shade-3), + 0 2px 4px -2px rgba(138, 141, 151, 0.2); } /* Medium and larger displays */ @@ -768,7 +636,7 @@ body.theme-dark .pride .blue { .search-input-wrap { position: absolute; width: 100%; - max-width: calc(var(--content-width) - var(--gap) - var(--gap)); + max-width: calc(var(--search-width) - var(--gap) - var(--gap)); height: 100% !important; border-radius: 0; box-shadow: none; @@ -783,7 +651,7 @@ body.theme-dark .pride .blue { padding: 0.5rem 1rem; font-size: 16px; background-color: transparent; - color: var(--text); + color: var(--color-text); border-top: 0; border-right: 0; border-bottom: 0; @@ -795,7 +663,7 @@ body.theme-dark .pride .blue { .search-input { padding: 1rem; font-size: 14px; - background-color: transparent; + background-color: var(--color-background); transition: padding-left linear 200ms; } } @@ -804,10 +672,6 @@ body.theme-dark .pride .blue { outline: 0; } -.search-input:focus + .search-label .search-icon { - color: var(--pink); -} - .search-label { position: absolute; right: 0; @@ -828,7 +692,7 @@ body.theme-dark .pride .blue { width: 1.2rem; height: 1.2rem; align-self: center; - color: var(--text); + color: var(--color-text); } .search-results { @@ -838,7 +702,8 @@ body.theme-dark .pride .blue { width: 100%; max-height: calc(100% - var(--search-height)); overflow-y: auto; - background-color: var(--background); + color: var(--color-text); + background-color: var(--color-background); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -847,7 +712,7 @@ body.theme-dark .pride .blue { @media (min-width: 919px) { .search-results { top: 100%; - width: calc(var(--content-width) - var(--gap) - var(--gap)); + width: calc(var(--search-width) - var(--gap) - var(--gap)); max-height: calc(100vh - 200%) !important; } } @@ -943,24 +808,26 @@ body.theme-dark .pride .blue { width: 1rem; height: 1rem; margin-right: 0.5rem; - color: var(--pink); + color: var(--color-link-accent); flex-shrink: 0; } .search-result-doc .search-result-doc-title { overflow: auto; + color: var(--color-link-accent); } .search-result-section { margin-left: 1.5rem; word-wrap: break-word; + color: var(--color-link-accent) } .search-result-rel-url { display: block; margin-left: 1.5rem; overflow: hidden; - color: var(--text); + color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; font-size: 9px !important; @@ -978,7 +845,7 @@ body.theme-dark .pride .blue { padding-bottom: 0.5rem; padding-left: 1rem; margin-left: 0.5rem; - color: var(--text); + color: var(--color-text); word-wrap: break-word; border-left: 1px solid; border-left-color: #eeebee; @@ -1032,7 +899,7 @@ body.theme-dark .pride .blue { display: flex; width: 3.5rem; height: 3.5rem; - background-color: var(--background); + background-color: var(--color-background); border: 1px solid rgba(114, 83, 237, 0.3); border-radius: 1.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -1069,13 +936,13 @@ body.theme-dark .pride .blue { @media (min-width: 919px) { .search-active .search-input-wrap { - width: calc(var(--content-width) - var(--gap) - var(--gap)); + width: calc(var(--search-width) - var(--gap) - var(--gap)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); } } .search-active .search-input { - background-color: var(--background); + background-color: var(--color-background); } @media (min-width: 919px) { diff --git a/crates/project/templates/favicon.svg b/crates/project/templates/favicon.svg new file mode 100644 index 00000000..bb04fa41 --- /dev/null +++ b/crates/project/templates/favicon.svg @@ -0,0 +1,3 @@ + + +