aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 22:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

light mode complete

Browse Source
This commit is contained in:
dmc
2024-01-09 20:26:27 +01:00
parent 7b9d96b21b
commit fb669bc31e
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
lib/docs-viewer.js
View File

@@ -11,16 +11,17 @@
customElements.define('docs-viewer', class extends HTMLElement { customElements.define('docs-viewer', class extends HTMLElement {
constructor () { constructor () {
super() super()
const lightMode = document.documentElement.classList.contains('light')
this.template = document.createElement('template') this.template = document.createElement('template')
this.template.innerHTML = ` this.template.innerHTML = `
<div> <div>
<style> <style>
ul { list-style-type: none; } ul { list-style-type: none; }
ul li::before { content: '❥ '; margin-right: 0.5em; } ul li::before { content: '❥ '; margin-right: 0.5em; }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none } a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
#panel.light a, #panel.light a:visited, #panel.light a:active { color: #7c9735; font-weight: bold; }
h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; } h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
code { background: #333; color: #eee; padding: .25rem; } code { background: #333; color: #efeaea; padding: .25rem; }
pre > code { display: block; line-height: 1.025rem; padding-left: 1em; } pre > code { display: block; line-height: 1.025rem; padding-left: 1em; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 1.6rem; } h1 { font-size: 1.6rem; }
@@ -34,7 +35,7 @@ customElements.define('docs-viewer', class extends HTMLElement {
img { display: block; max-width: 63em; margin: 0 auto; margin-block-start: 1.625rem; margin-block-end: 1.625rem; box-shadow: rgb(123 115 168 / 15%) 0px 13px 24px 0px; } img { display: block; max-width: 63em; margin: 0 auto; margin-block-start: 1.625rem; margin-block-end: 1.625rem; box-shadow: rgb(123 115 168 / 15%) 0px 13px 24px 0px; }
</style> </style>
<header></header> <header></header>
<div id="panel"><slot></slot></div> <div id="panel" class="${lightMode ? 'light' : ''}"><slot></slot></div>
</div> </div>
` `
this.root = this.attachShadow({ mode: 'open' }) this.root = this.attachShadow({ mode: 'open' })
@@ -46,6 +47,12 @@ customElements.define('docs-viewer', class extends HTMLElement {
this.page = 'readme.md' this.page = 'readme.md'
const observer = new MutationObserver(() => {
if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
else this.panel.classList.remove('light')
})
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
this.panel.addEventListener('click', (evt) => { this.panel.addEventListener('click', (evt) => {
if (evt.target?.tagName !== 'A') return if (evt.target?.tagName !== 'A') return
const href = evt.target.href const href = evt.target.href

13
pulse.html
View File

@@ -20,23 +20,24 @@
border-radius: 8px; border-radius: 8px;
font-family:'overpass-mono'; font-family:'overpass-mono';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: #eee; color: #efeaea;
transition: background-color .4s, color .4s; transition: background-color .4s, color .4s;
} }
html, body { overflow: scroll; } html, body { overflow: scroll; }
html.light body { html.light body {
background: hsl(0deg, 1.59%, 52.42%); background: #efeaea;
color: #151517; color: #151517;
} }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
#logo { #logo {
float: left; float: left;
margin-right: 2rem; margin-right: 2rem;
margin-left: 0.65rem; margin-left: 0.65rem;
margin-top: 0.45rem; margin-top: -0.45rem;
} }
nav { nav {
@@ -85,10 +86,6 @@
width: 72rem; width: 72rem;
margin: 0 auto; margin: 0 auto;
} }
html.light header {
background: hsla(0deg, 1.59%, 52.42%, 0.9)
}
h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; } h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem } blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }