From 48ec6afc61a776a93d2fdc5929ea091c165744db Mon Sep 17 00:00:00 2001 From: Davi Date: Wed, 15 May 2024 01:42:11 -0300 Subject: [PATCH 1/2] documentation redesign. --- styles/css3-github-ribbon.css | 56 ++++++- styles/hljs-tomorrow.css | 147 +++++++++++++++---- styles/usejsdoc.css | 267 +++++++++++++++++++--------------- 3 files changed, 324 insertions(+), 146 deletions(-) diff --git a/styles/css3-github-ribbon.css b/styles/css3-github-ribbon.css index 83e6a2eb..72302f90 100644 --- a/styles/css3-github-ribbon.css +++ b/styles/css3-github-ribbon.css @@ -1,2 +1,54 @@ -body{background-color:#fff} -.github-ribbon{background-color:#121621;top:3.2em;right:-3.7em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-moz-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;color:rgba(255,255,255,0.90)!important;display:block;padding:.6em 3.5em;position:absolute;font:bold .82em sans-serif;text-align:center;text-decoration:none;text-shadow:1px -1px 8px rgba(0,0,0,0.60);-webkit-user-select:none;-moz-user-select:none;user-select:none} \ No newline at end of file +:root { + --background-color-light: #ffffff; + --background-color-dark: #1a202c; + --text-color-light: #1e293b; + --text-color-dark: #ffffff; + } + + + body { + background-color: var(--background-color-light); + font-family: 'Inter', sans-serif; + margin: 0; + } + + .github-ribbon { + background-color: #121621; + top: 3.2em; + right: -1em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888; + -moz-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888; + box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888; + color: rgba(255, 255, 255, 0.90)!important; + display: block; + padding: 10px 30px; + position: absolute; + font-weight: bold; + font-size: 0.82em; + text-align: center; + text-decoration: none; + text-shadow: 1px -1px 8px rgba(0, 0, 0, 0.60); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + z-index: 9999; + } + + dd { + margin: 0; + } + + pre { + margin: 0; + } + + + @media (prefers-color-scheme: dark) { + body { + background-color: var(--background-color-dark); + } + } + \ No newline at end of file diff --git a/styles/hljs-tomorrow.css b/styles/hljs-tomorrow.css index 58123fa9..92980c8b 100644 --- a/styles/hljs-tomorrow.css +++ b/styles/hljs-tomorrow.css @@ -1,41 +1,24 @@ -/* - Copyright 2022 the JSDoc Authors. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - https://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ - -/* Tomorrow theme for Highlight.js */ -/* Based on https://github.com/chriskempson/tomorrow-theme */ - :root { - --text-color: #3d3d3c; - --tomorrow-blue: #4271ae; - --tomorrow-gray: #8e908c; - --tomorrow-green: #718c00; - --tomorrow-orange: #f5871f; - --tomorrow-purple: #8959a8; - --tomorrow-red: #c82829; - --tomorrow-yellow: #c99e00; + --text-color-light: #1e293b; + --text-color-dark: #ffffff; + --tomorrow-blue: #6366f1; + --tomorrow-gray: #6b7280; + --tomorrow-green: #48bb78; + --tomorrow-orange: #f59e0b; + --tomorrow-purple: #9f7aea; + --tomorrow-red: #ef4444; + --tomorrow-yellow: #f9ca24; } .hljs, .no-hljs { - color: var(--text-color); + color: var(--text-color-light); + font-family: 'Inter', sans-serif; } .hljs-code, .hljs-formula { - color: var(--text-color); + color: var(--text-color-light); } .hljs-comment, @@ -110,3 +93,109 @@ .hljs-strong { font-weight: bold; } + + +@media (prefers-color-scheme: dark) { + :root { + --text-color-light: #ffffff; + --background-color-light: #1e293b; + } + + body { + background-color: var(--background-color-light); + } + + .github-ribbon { + background-color: #1d212e; + } + + pre { + background-color: #1d212e; + } + .hljs, + .no-hljs { + color: var(--text-color-dark); + font-family: 'Inter', sans-serif; + } + + .hljs-code, + .hljs-formula { + color: var(--text-color-dark); + } + + .hljs-comment, + .hljs-quote { + color: var(--tomorrow-gray); + } + + .hljs-deletion, + .hljs-meta .hljs-keyword, + .hljs-name, + .hljs-property, + .hljs-regexp, + .hljs-selector-attr, + .hljs-selector-class, + .hljs-selector-id, + .hljs-selector-pseudo, + .hljs-substr, + .hljs-tag, + .hljs-template-tag, + .hljs-template-variable, + .hljs-variable, + .hljs-variable.language_ { + color: var(--tomorrow-red); + } + + .hljs-built_in, + .hljs-char.escape_, + .hljs-link, + .hljs-literal, + .hljs-meta, + .hljs-number, + .hljs-operator, + .hljs-params, + .hljs-type { + color: var(--tomorrow-orange); + } + + .hljs-attribute { + color: var(--tomorrow-yellow); + } + + .hljs-addition, + .hljs-attr, + .hljs-bullet, + .hljs-meta .hljs-string, + .hljs-string, + .hljs-subst, + .hljs-symbol, + .hljs-title.class_.inherited__, + .hljs-title.function_ { + color: var(--tomorrow-green); + } + + .hljs-punctuation, + .hljs-section, + .hljs-title { + color: var(--tomorrow-blue); + } + + .hljs-keyword, + .hljs-meta.hljs-keyword, + .hljs-selector-tag, + .hljs-title.class_ { + color: var(--tomorrow-purple); + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-doctag, + .hljs-strong { + font-weight: bold; + } + + +} + diff --git a/styles/usejsdoc.css b/styles/usejsdoc.css index 6c285fa2..03ad02f0 100644 --- a/styles/usejsdoc.css +++ b/styles/usejsdoc.css @@ -1,80 +1,112 @@ -body { - font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif; +:root { + --background-color-light: #ffffff; + --background-color-dark: #1a202c; + --text-color-light: #1e293b; + --text-color-dark: #ffffff; + --tomorrow-blue: #6366f1; + --tomorrow-gray: #6b7280; + --tomorrow-green: #48bb78; + --tomorrow-orange: #f59e0b; + --tomorrow-purple: #9f7aea; + --tomorrow-red: #ef4444; + --tomorrow-yellow: #f9ca24; + } + + + /* Modo Claro */ + body { + font-family: 'Inter', sans-serif; padding: 0; margin: 0; -} - -a, a:visited, a:active { - color: #605C89; -} - -header { - background-color: #EBEBEB; - color: #006FBB; + background-color: var(--background-color-light); + color: var(--text-color-light); + line-height: 1.6; + box-sizing: border-box; + width: 100%; + } + + a, a:visited, a:active { + color: var(--tomorrow-blue); + text-decoration: none; + } + + a:hover { + color: #4338ca; + } + + header { + background-color: #fff; + color: #111827; margin: 0; margin-bottom: 32px; - padding: 18px; + padding: 18px 20px; font-size: 2.4em; font-weight: bold; - border-bottom: 1px #C6C6C6 solid; -} - -header a, header a:visited { - color: #006FBB; - text-decoration: none; -} - -article { - margin: 18px; -} - -footer { + border-bottom: 1px solid #e5e7eb; + text-align: center; + } + + article { + max-width: 1040px; + margin: 0 auto; + padding: 20px; + background-color: #fff; + border-radius: 5px; + } + + footer { margin: 16px; margin-top: 32px; font-style: italic; font-size: 0.8em; -} - -h1, h2, h3, h4, h5, h6 { - color: #B93A38; -} - -h1 { - font-size: 1.428em; - text-indent: 0; -} - -h2 { - font-size: 1.285em; - text-indent: 1%; -} - -h3 { - font-size: 1.142em; - text-indent: 2%; -} - -h4 { - font-size: 1em; - text-indent: 3%; -} - -h5 { - font-size: 0.857em; - text-indent: 4%; -} - -h6 { - font-size: 0.714em; - text-indent: 5%; -} - -p { - text-indent: 2%; -} - -figure pre code { - font-size: 0.857em; + text-align: center; + color: #6b7280; + } + + h1, h2, h3, h4, h5, h6 { + color: #111827; + margin: 0; + margin-top: 24px; + } + + p { + margin: 0 0 16px; + } + + code { + font-family: 'Fira Code', monospace; + background-color: #f9fafb; + padding: 2px 4px; + border-radius: 3px; + } + + pre { + display: block; + border: 1px solid #e5e7eb; + margin: 8px auto 5px; + padding: 10px; + white-space: pre-wrap; + background-color: #f9fafb; + overflow-x: auto; + border-radius: 5px; + } + + table { + width: 100%; + border-collapse: collapse; + } + + th, td { + border: 1px solid #e5e7eb; + padding: 8px; + } + + th { + background-color: #f3f4f6; + color: #1a202c; + } + figure { + margin: 0; } figcaption { @@ -82,61 +114,66 @@ figcaption { } dl { - margin-left: 2%; - padding-left: 0; + margin: 0; + padding: 0; } dt { - margin-left: 16px; - padding-left: 4px; - margin-top: 8px; -} - -dt a, dt a:visited { - color: #3E00B6; + font-weight: bold; } dd { - margin-left: 16px; - padding-left: 4px; -} - -ol, ul { - margin-left: 2%; -} - -code { - font: 0.9em Consolas, "Lucida Console", Monaco, monospace; - background-color: #DEDEDE; -} - -pre { - display: block; - border: 1px solid #999; - margin: 12px; - padding: 8px; - white-space: pre-wrap; - background-color: #DEDEDE; -} - -table { - border-collapse: collapse; -} - -th, td { - border: 1px solid #999; -} - -th { - background-color: #DEDEDE; - color: #B93A38; + margin: 0; + padding: 0; } - -.example dt { + + .example dt { font-weight: bold; -} - -.license-badge { + } + + .license-badge { border-width: 0; text-decoration: none; -} + color: #6366f1; + } + + /* Modo Escuro */ + @media (prefers-color-scheme: dark) { + body, article, header, footer, a, a:visited, a:active, h1, h2, h3, h4, h5, h6, p, code, table, th, td, .example dt, .license-badge { + background-color: var(--background-color-dark); + color: var(--text-color-dark); + } + pre code { + background-color: var(--background-color-dark); + color: #ffffff; + } + + a, a:visited, a:active { + color: var(--tomorrow-purple); + } + + header { + border-bottom-color: #4a5568; + } + + th, td { + border-color: #4a5568; + } + .hljs .language-js { + color: #48bb78; + } + pre { + background-color: var(--background-color-dark); + color: #ffffff; + border-color: #4a5568; + } + + .example dt { + color: #ffffff; + } + + .license-badge { + color: var(--tomorrow-purple); + } + } + \ No newline at end of file From 06b4e3c93664594a28c16d4fe947dddb828e4561 Mon Sep 17 00:00:00 2001 From: Davi Date: Wed, 15 May 2024 01:56:45 -0300 Subject: [PATCH 2/2] restoring improperly deleted license comment. --- styles/hljs-tomorrow.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/styles/hljs-tomorrow.css b/styles/hljs-tomorrow.css index 92980c8b..ea4eac8a 100644 --- a/styles/hljs-tomorrow.css +++ b/styles/hljs-tomorrow.css @@ -1,3 +1,21 @@ +/* + Copyright 2022 the JSDoc Authors. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + https://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +/* Tomorrow theme for Highlight.js */ +/* Based on https://github.com/chriskempson/tomorrow-theme */ + + + :root { --text-color-light: #1e293b; --text-color-dark: #ffffff;