mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-07-28 18:40:09 +00:00
website: add docs to website (#2080)
* website: add fontmatter & improve image URLs where necessary * website: add docs to website * website: add prismjs for code highlighting * website: change npm install position in web.sh * website: fix an image URL in lang/cs/README.md * website: improve image paths in lang/cs/translations.md * website: add responsiveness & improve stylings of docs * website: add dir to navbar in blog & docs * website: remove scroll in mobile dropdown menu * website: remove rfcs & add guide docs to website * website: remove file renaming script from web.sh * website: add menu to docs in nav * website: add hash list & add scroll to headers * website: customize docs frontmatter through JS * website: remove supported_languages.json * website: move merge_translations.js to JS folder * website: add the following changes to docs - add frontmatter to new doc merged from master - add ignoreForWeb property to frontmatter of README.md docs * website: remove package-lock.json from .gitignore * website: add package-lock.json from .gitignore * website: add no docs message to docs dropdown * website: improve the sidebar of docs * website: add revision date to docs * website: add script to add version to docs frontmatter * website: add layout to display message in docs if its version is old * website: improve nav responsiveness * website: remove frontmatter form main README & rfcs * website: remove rfcs from website folder * website: add ignore condition for rfcs in .eleventy * website: remove frontmatter from lang README docs * website: remove README from website's lang docs * website: add guides menu in nav * website: following changes - add docs_dropdown.json - extend reference menu in nav - remove docs menu from nav * website: fix in docs sidebar * website: revert main docs README.md files * website: revert main docs README.md files * website: move scripts out of js that are for build * website: remove displayAt form guide docs * website: create a docs_sidebar.json & shift to that approach * update navigation * website: set navbar * website: add icons to external links * website: change the approach for docs sidebar creation * website: update docs template * website: add some strings to en.json and map them accordingly * remove icon --------- Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
co-authored by
Evgeny Poberezkin
Evgeny Poberezkin
parent
315d830357
commit
f97a1fcedf
@@ -0,0 +1,412 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
header {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#doc {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#doc code,
|
||||
#doc kbd,
|
||||
#doc pre,
|
||||
#doc samp {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#doc p {
|
||||
margin: 0 0 16px;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dark #doc p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#doc h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
background: -webkit-linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
|
||||
background: linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
|
||||
position: relative;
|
||||
margin: 0px 0px 16px;
|
||||
padding: 0px 0px 9.6px;
|
||||
}
|
||||
|
||||
#doc h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #3F484B;
|
||||
position: relative;
|
||||
margin: 24px 0px 16px;
|
||||
padding: 0 0 7.2px;
|
||||
}
|
||||
|
||||
#doc h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #606C71;
|
||||
margin: 24px 0px 16px;
|
||||
}
|
||||
|
||||
#doc h1::after,
|
||||
#doc h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: rgb(216, 222, 228);
|
||||
}
|
||||
|
||||
.dark #doc h1::after,
|
||||
.dark #doc h2::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dark #doc h1 {
|
||||
background: -webkit-linear-gradient(to bottom, #70F0F9 100%, #70F0F9 100%);
|
||||
background: linear-gradient(to bottom, #70F0F9 100%, #70F0F9 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.dark #doc h2,
|
||||
.dark #doc h3,
|
||||
.dark #doc h4 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#doc img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#doc article ul {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#doc ul,
|
||||
#doc ol {
|
||||
list-style-position: inside;
|
||||
overflow: auto;
|
||||
margin: 1rem 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#doc ul li,
|
||||
#doc ol li {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
-webkit-margin-start: 1.1rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dark #doc ul li,
|
||||
.dark #doc ol li {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#doc ul li::marker,
|
||||
#doc ol li::marker {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dark #doc ul li::marker,
|
||||
.dark #doc ol li::marker {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#doc ul li a,
|
||||
#doc ol li a {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#doc ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#doc ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
#doc a {
|
||||
color: #0053D0;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
#doc h1 a {
|
||||
-webkit-text-fill-color: #0053D0;
|
||||
text-fill-color: #0053D0;
|
||||
}
|
||||
|
||||
.dark #doc a {
|
||||
color: #70F0F9;
|
||||
}
|
||||
|
||||
.dark #doc h1 a {
|
||||
-webkit-text-fill-color: #70F0F9;
|
||||
text-fill-color: #70F0F9;
|
||||
}
|
||||
|
||||
#doc pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dark #doc pre {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#doc table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #e1e4e8;
|
||||
}
|
||||
|
||||
#doc table th,
|
||||
#doc table td {
|
||||
border: 1px solid #e1e4e8;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
#doc table td a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#doc table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#doc table tbody tr:nth-child(odd) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#doc table tbody tr:nth-child(even) {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
.dark #doc table tr,
|
||||
.dark #doc table th {
|
||||
color: white;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#doc main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#doc main aside {
|
||||
width: 320px;
|
||||
height: calc(100vh - 66px);
|
||||
position: sticky;
|
||||
top: 66px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dark #doc main aside {
|
||||
background-color: #17203D;
|
||||
}
|
||||
|
||||
#doc main aside ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#doc main aside ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#doc main aside ul li a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: rgb(60, 60, 60);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#doc main aside ul li a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dark #doc main aside ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#doc main aside ul li a.active {
|
||||
color: #0053D0;
|
||||
}
|
||||
|
||||
.dark #doc main aside ul li a.active {
|
||||
color: #70F0F9;
|
||||
}
|
||||
|
||||
#doc main aside p {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: .8px;
|
||||
margin-top: 1.2rem;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
#doc main article {
|
||||
width: calc(100vw - 320px);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#doc main aside {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
transition: all ease .3s;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
#doc main.overlay aside {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#doc main.overlay::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #F3F6F7;
|
||||
opacity: 0.9;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.dark #doc main.overlay::after {
|
||||
background-color: #0C0B13;
|
||||
}
|
||||
|
||||
#doc main article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#doc article>div {
|
||||
max-width: 870px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 32px 32px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#doc article>div {
|
||||
max-width: 600px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#doc .hash-link {
|
||||
opacity: 0;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none !important;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 0;
|
||||
transition: all ease .3s;
|
||||
}
|
||||
|
||||
#doc h1 a.hash-link {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
#doc h1:hover .hash-link,
|
||||
#doc h2:hover .hash-link,
|
||||
#doc h3:hover .hash-link,
|
||||
#doc h4:hover .hash-link,
|
||||
#doc h5:hover .hash-link,
|
||||
#doc h6:hover .hash-link,
|
||||
#doc .hash-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#doc .hash-link:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
#doc .hash-list {
|
||||
padding: 1.5rem 2rem !important;
|
||||
}
|
||||
|
||||
#doc .hash-list li {
|
||||
list-style: none !important;
|
||||
width: 100%;
|
||||
-webkit-margin-start: 0 !important;
|
||||
}
|
||||
|
||||
#doc .hash-list li a {
|
||||
text-decoration: none !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.dark #doc .hash-list li a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#doc .sub-menu.hash-list {
|
||||
max-height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
#doc #back-to-top {
|
||||
color: #0053D0 !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark #doc #back-to-top {
|
||||
color: #70F0F9 !important;
|
||||
}
|
||||
|
||||
#doc #back-to-top::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -12px;
|
||||
height: 1px;
|
||||
background-color: rgb(216, 222, 228);
|
||||
}
|
||||
|
||||
.dark #doc #back-to-top::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+c+csharp+cpp+css-extras+dart+docker+ejs+git+linker-script+gradle+haskell+http+java+javadoclike+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+kotlin+makefile+markdown+markup-templating+n1ql+nginx+plsql+powerquery+powershell+python+sql+swift+typescript+typoscript+xml-doc+xquery+yaml&plugins=normalize-whitespace+toolbar+copy-to-clipboard */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
|
||||
@@ -182,6 +182,14 @@ img{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-link ul li a.active{
|
||||
color: #0053D0;
|
||||
|
||||
}
|
||||
.dark .nav-link ul li a.active{
|
||||
color: #66D9E2;
|
||||
}
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.nav-link-text,
|
||||
.menu-link {
|
||||
@@ -229,8 +237,13 @@ img{
|
||||
color: #505158;
|
||||
}
|
||||
|
||||
.dark .sub-menu {
|
||||
color: #fff;
|
||||
.sub-menu .no-hover{
|
||||
color: #505158 !important;
|
||||
}
|
||||
|
||||
.dark .sub-menu,
|
||||
.dark .sub-menu .no-hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.dark .sub-menu li:hover {
|
||||
@@ -282,7 +295,7 @@ header nav {
|
||||
}
|
||||
|
||||
.active .sub-menu {
|
||||
max-height: 200px;
|
||||
max-height: 600px;
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
Reference in New Issue
Block a user