From 666d3457a657ad0b56a8672c53162bc46a97e250 Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Sat, 18 Apr 2020 15:39:47 -0400 Subject: [PATCH] add a treeview and start the readme --- docs/backup.html | 111 +++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 121 +++++++++++------------------------------------ style.css | 59 +++++++++++++++++++++-- 3 files changed, 193 insertions(+), 98 deletions(-) create mode 100644 docs/backup.html diff --git a/docs/backup.html b/docs/backup.html new file mode 100644 index 0000000..b3cecd9 --- /dev/null +++ b/docs/backup.html @@ -0,0 +1,111 @@ + + + + + + + +
+
+
+ Windows 98 Example +
+ +
+ + + +
+
+
+
This is an example window with some controls.
+ +
+ I think it's +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ Checkboxes +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + +
+
+ +
+ +
+
+

This is some text

+

if there's enough of it

+

it should scroll

+
+
+
+ +
+ + +
+ +
+ Learn more +
+
+
+ + diff --git a/docs/index.html b/docs/index.html index ee5a042..862106c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,105 +7,38 @@ height: 100vh; margin: 0; padding: 0; - background: var(--dialog-blue); + background: var(--surface); display: flex; - align-items: center; - justify-content: center; + } + + body > * { + margin: 4px; + } + + body > * + * { + margin-right: 8px; } -
-
-
- Windows 98 Example -
+ -
- - - -
-
-
-
This is an example window with some controls.
- -
- I think it's -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
- Checkboxes -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - - -
-
- -
- -
-
-

This is some text

-

if there's enough of it

-

it should scroll

-
-
-
- -
- - -
- -
- Learn more -
-
-
+
+ This is the main body! +
diff --git a/style.css b/style.css index 69a209c..426e38c 100644 --- a/style.css +++ b/style.css @@ -349,10 +349,61 @@ a:focus { outline: 1px dotted var(--link-blue); } -#panel { - width: 168px; - height: 120px; - overflow: scroll; +ul.treeview { + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 6px 20px 6px 6px; +} + +ul.treeview li { + list-style-type: none; +} + +ul.treeview a { + text-decoration: none; + color: #000; +} + +ul.treeview a:focus { + background-color: var(--dialog-blue); + color: var(--button-highlight); +} + +ul.treeview ul, +ul.treeview li { + margin-top: 3px; +} + +ul.treeview ul { + margin-left: 16px; + padding-left: 16px; + /* Goes down too far */ + border-left: 1px dotted #808080; +} + +ul.treeview ul > li { + position: relative; +} +ul.treeview ul > li::before { + content: ""; + display: block; + position: absolute; + left: -16px; + top: 6px; + width: 12px; + border-bottom: 1px dotted #808080; +} + +/* Cover the bottom of the left dotted border */ +ul.treeview ul > li:last-child::after { + content: ""; + display: block; + position: absolute; + left: -20px; + top: 7px; + bottom: 0px; + width: 8px; + background: var(--button-highlight); } ::-webkit-scrollbar {