From d4ec7a0005cfa8ce04dfc0abcc9f7b498bb72413 Mon Sep 17 00:00:00 2001 From: greggman Date: Wed, 13 Mar 2024 03:25:20 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=20f174e?= =?UTF-8?q?350df3ec075127300378b2e7dfa69705f81=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/HomePage.css | 41 ++++++++++++++++++++++++++++++++++-- css/MainLayout.css | 12 +++++++++-- css/SampleLayout.css | 50 ++++++++++---------------------------------- css/styles.css | 10 ++------- index.html | 2 +- menu.svg | 14 ++++++++++++- 6 files changed, 76 insertions(+), 53 deletions(-) diff --git a/css/HomePage.css b/css/HomePage.css index 7dd2260e..cbb85899 100644 --- a/css/HomePage.css +++ b/css/HomePage.css @@ -1,4 +1,41 @@ +:root { + color-scheme: light dark; + + /* these are the light colors */ + --background: #eee; + + --code-background: #ccc; + --link: #045b88; + + --panel-color: #000; + --panel-background: #ddd; + --panel-emphasis: rgb(20, 62, 84); + + --tooltip-background: #eee; + --tooltip-border: rgba(0, 0, 0, 0.1); + + --source-tab-color: white; + --source-tab-background: #444; + --source-tab-active-background: #282828; + --source-tab-active-shadow: rgb(167, 167, 167); +} + +@media (prefers-color-scheme: dark) { + :root { + /* these are the dark colors */ + --background: #000; + + --code-background: #555; + --link: #02abff; + + --panel-color: #02abff; + --panel-background: #222; + --panel-emphasis: rgb(115, 206, 255); + + --tooltip-background: #111; + --tooltip-border: rgba(255, 255, 255, 0.1); + } +} + .homePage { - background: white; - color: #222; } diff --git a/css/MainLayout.css b/css/MainLayout.css index 2c65261f..d49f1922 100644 --- a/css/MainLayout.css +++ b/css/MainLayout.css @@ -12,9 +12,10 @@ flex: 1 0 auto; max-width: 300px; height: 100%; - background: #fafafa; overflow-y: auto; position: relative; + color: var(--panel-color); + background-color: var(--panel-background); } .exampleList { @@ -24,7 +25,13 @@ } .exampleList h3 { - color: rgb(43, 126, 171); + color: var(--panel-emphasis); +} + +code { + background-color: var(--code-background); + border: 2px solid var(--code-background); + border-radius: 0.25em; } .exampleList li { @@ -90,5 +97,6 @@ main { .expand { display: inline-block; } + } diff --git a/css/SampleLayout.css b/css/SampleLayout.css index 9ec90d7f..72b1b8f8 100644 --- a/css/SampleLayout.css +++ b/css/SampleLayout.css @@ -13,13 +13,15 @@ height: 100%; border: none; display: block; + /* should should remain white because samples in iframes expect a white background */ + color-scheme: light; background-color: #fff; } .sampleCategory { - margin-top: 5px; - margin-bottom: 5px; - display: inline-block; + margin-top: 0.25em; + margin-bottom: 0.25em; + position: relative; } [data-tooltip] { @@ -29,8 +31,8 @@ [data-tooltip]::after { pointer-events: none; content: attr(data-tooltip); - background-color: rgba(255, 255, 255, 1); - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + background-color: var(--tooltip-background); + box-shadow: 0 0 2px 2px var(--tooltip-border); border-radius: 10px; transition: opacity 0.2s ease-in, transform 0.2s ease-out; padding: 0.5em; @@ -45,9 +47,6 @@ transform: translateY(0.25em); } -nav.sourceFileNav { -} - nav.sourceFileNav ul { box-sizing: border-box; list-style-type: none; @@ -98,39 +97,12 @@ nav.sourceFileNav[data-right=true]::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent); } -nav.sourceFileNav div.sourceFileScrollContainer { - white-space: nowrap; - overflow-x: auto; - scrollbar-width: thin; -} - -nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar { - display: inline; - margin-top: 10px; - margin-bottom: 10px; - height: 11px; - width: 10px; -} - -nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb { - background: rgb(200, 200, 200); - height: 4px; - border-radius: 20px; - -webkit-box-shadow: inset 0px 0px 10px rgb(45, 33, 33); - border: 0.5px solid transparent; - background-clip: content-box; -} - -nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0); -} - nav.sourceFileNav li a { display: block; margin: 0; padding: 10px; - color: white; - background-color: #403e3e; + color: var(--source-tab-color); + background-color: var(--source-tab-background); } nav.sourceFileNav li:hover { @@ -140,11 +112,11 @@ nav.sourceFileNav li:hover { } nav.sourceFileNav li a[data-active=true] { - background-color: #282823; + background-color: var(--source-tab-active-background); } nav.sourceFileNav li:has(a[data-active=true]) { - box-shadow: 0 -10px 0 0 rgb(167, 167, 167); + box-shadow: 0 -10px 0 0 var(--source-tab-active-shadow); border-radius: 10px; } diff --git a/css/styles.css b/css/styles.css index c96b0b41..0c2b4a4f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,7 +2,6 @@ @import url('MainLayout.css'); @import url('SampleLayout.css'); - * { box-sizing: border-box; } @@ -10,6 +9,7 @@ html, body { margin: 0; height: 100%; + background-color: var(--background); } body { @@ -18,11 +18,7 @@ body { a { text-decoration: none; -} - -a:link, -a:visited { - color: #045b88; + color: var(--link) } a:hover { @@ -34,8 +30,6 @@ main { flex-direction: column; position: relative; flex: 1; - background: black; - color: #ddd; padding-left: 15px; padding-right: 15px; } diff --git a/index.html b/index.html index 8d6aac89..064bc904 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@

diff --git a/menu.svg b/menu.svg index c84912cf..27b615b9 100644 --- a/menu.svg +++ b/menu.svg @@ -1,4 +1,16 @@ + + + - +