diff --git a/static/css/notes2.css b/static/css/notes2.css index ad07770..206c04b 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -10,8 +10,6 @@ */ --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); - - --show-tree: 0px; } html { @@ -27,93 +25,26 @@ html { display: grid; grid-template-areas: - "show-tree tree hum crumbs crumbs ding" - "show-tree tree hum name name ding" - "show-tree tree hum sync functions ding" - "show-tree tree hum content content ding" - "show-tree tree hum blank blank ding" + "tree hum crumbs crumbs ding" + "tree hum name name ding" + "tree hum sync functions ding" + "tree hum content content ding" + "tree hum blank blank ding" ; - - grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr); + grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr); grid-template-rows: min-content min-content 48px 1fr; - &.hide-tree { - --show-tree: 32px; - #tree { - border-right: none; - } - n2-tree { - display: none; - } - } - - #show-tree { - grid-area: show-tree; - color: #333; - font-weight: bold; - border-right: 2px solid #ddd; - - display: grid; - justify-items: center; - align-items: start; - - padding-top: 8px; - font-size: 1.25em; - - div div { - display: inline-block; - writing-mode: vertical-rl; - transform: rotate(180deg); - } - } - - n2-nodeui { - .el-functions { - width: calc(100% - 32px); - } - - .el-node-markdown { - overflow-wrap: anywhere; - width: calc(100% - 32px); - } - } - - - -} - -@media only screen and (max-width: 800px) { - #notes2 { + @media only screen and (max-width: 600px) { grid-template-areas: - "show-tree hum crumbs ding" - "show-tree hum name ding" - "show-tree hum functions ding" - "show-tree hum content ding" - "show-tree hum blank ding" - "show-tree hum sync ding" + "crumbs" + "sync" + "name" + "content" + "blank" ; - grid-template-columns: 32px 16px 1fr 16px; - - &.show-tree { - - grid-template-areas: - "tree" - ; - grid-template-columns: 100%; - grid-template-rows: - 1fr; - - #tree { - display: grid; - width: 100%; - } - - #main-page, #show-tree { - display: none; - } - } + grid-template-columns: 1fr; #tree { display: none; @@ -124,18 +55,8 @@ html { top: 4px; } } - - n2-nodeui { - .el-functions { - width: calc(100% - 32px); - } - - .el-node-markdown { - overflow-wrap: anywhere; - width: calc(100% - 32px); - } - } } + } #tree { @@ -180,7 +101,8 @@ html { } &:focus-within { - n2-tree {} + n2-tree { + } } @@ -249,22 +171,11 @@ html { &.storage { #page-storage { display: contents; - n2-pagestorage { grid-area: content; } } } - - &.history { - #page-history { - display: contents; - - n2-pagehistory { - grid-area: content; - } - } - } } #crumbs { @@ -276,10 +187,11 @@ html { margin: 0 16px 16px 16px; n2-crumbs { - background: #eaeaea; + background: #e4e4e4; display: flex; flex-wrap: wrap; padding: 8px 16px; + background: #e4e4e4; color: #333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; @@ -396,7 +308,7 @@ n2-nodeui { color: #333; font-weight: bold; text-align: center; - font-size: 1.5em; + font-size: 1.15em; margin-top: 8px; margin-bottom: 0px; } diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs deleted file mode 100644 index a931faa..0000000 --- a/static/js/page_history.mjs +++ /dev/null @@ -1,15 +0,0 @@ -import { CustomHTMLElement } from './lib/custom_html_element.mjs' - -export class N2PageHistory extends CustomHTMLElement { - static { - this.tmpl = document.createElement('template') - this.tmpl.innerHTML = ` -