From 84ec91042e93bebbe3f1a5df7b38405a29298e62 Mon Sep 17 00:00:00 2001 From: lqdev Date: Fri, 18 Aug 2023 19:25:38 +0200 Subject: [PATCH] make it look presentable --- content/tree/root.tree | 19 ++++------ static/css/main.css | 82 ++++++++++------------------------------- static/css/tree.css | 36 ++++++++++++++++++ static/svg/collapse.svg | 3 ++ static/svg/expand.svg | 4 ++ static/svg/leaf.svg | 3 ++ template/index.hbs | 1 + 7 files changed, 75 insertions(+), 73 deletions(-) create mode 100644 static/css/tree.css create mode 100644 static/svg/collapse.svg create mode 100644 static/svg/expand.svg create mode 100644 static/svg/leaf.svg diff --git a/content/tree/root.tree b/content/tree/root.tree index 1f8269b..3e8c386 100644 --- a/content/tree/root.tree +++ b/content/tree/root.tree @@ -56,7 +56,9 @@ - also [a link that you have not visited because there is nothing there](https://liquidev.net/nothing-to-see-here-lmfao-did-you-really-expect-me-to-create-such-a-behemoth-of-a-URL) - + here is my favorite fluffy boy ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png) + + here is my favorite fluffy boy + + - ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png) - without a hat is also nice uwu @@ -83,21 +85,16 @@ | yep | that's | a table | | looks | pretty cool | huh | + - sorry for how ugly the table styles look i spent like literally 5 minutes on them please don't jugde them too hard + - well anyways here's a braindump for SVGs - virgin node - - - + - collapsed - - - - + - expanded - - - + diff --git a/static/css/main.css b/static/css/main.css index 336aea7..0ae4c35 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -105,10 +105,10 @@ body { /* Make code examples a little prettier by giving them visual separation from the rest of the page */ pre { - min-width: 70%; - margin-left: 12px; padding: 8px 12px; + margin: 12px 0; background-color: rgba(0, 0, 0, 5%); + border-radius: 8px; } /* Also don't let images get out of hand */ @@ -127,70 +127,28 @@ a:visited { color: #6c2380; } -/* The tree indents shouldn't be too spaced out */ +/* Make blockquotes a bit prettier */ -.tree ul { - padding-left: 24px; +blockquote { + margin: 0; + padding: 2px 12px; + border-left: 4px solid rgba(0, 0, 0, 15%); } -/* Make the tree have + and - instead of the default details/summary arrow */ +/* And tables. */ -.tree details>summary { - list-style: none; - cursor: pointer; + +table, +th, +td { + border: 1px solid rgba(0, 0, 0, 30%); + border-collapse: collapse; + padding: 4px 10px; } -.tree li { - list-style: none; -} - -/* Also, lone paragraphs should have a bullet point beside to give you a bit of a visual anchor */ -.tree li.leaf>p:first-child::before, -/* Lone paragraphs include 
 elements */
-.tree li.leaf>pre:first-child::before {
-    content: 'ยท';
-    opacity: 0.5;
-
-    display: inline-block;
-    height: 0;
-
-    margin-left: -1.5rem;
-    width: 1.5rem;
-
-    --recursive-mono: 1.0;
-    font-size: 14px;
-}
-
-/* Dirty hack to make pres render the way I want this to */
-.tree li.leaf>pre:first-child::before {
-    transform: translateX(-8px);
-}
-
-pre {
-    transform: translateX(8px);
-    border-radius: 6px;
-}
-
-.tree details::before {
-    content: '+';
-    opacity: 0.5;
-
-    display: inline-block;
-    margin-left: -1em;
-
-    margin-left: -1.5rem;
-    width: 1.5rem;
-
-    vertical-align: middle;
-
-    --recursive-mono: 1.0;
-}
-
-.tree details[open]::before {
-    content: '-';
-}
-
-.tree details>*:first-child,
-.tree li.leaf>*:first-child {
-    display: inline-block;
+th {
+    background-color: rgba(0, 0, 0, 5%);
+
+    --recursive-wght: 700;
+    --recursive-casl: 0.5;
 }
diff --git a/static/css/tree.css b/static/css/tree.css
new file mode 100644
index 0000000..72192ce
--- /dev/null
+++ b/static/css/tree.css
@@ -0,0 +1,36 @@
+/* The tree indents shouldn't be too spaced out */
+
+.tree ul {
+    padding-left: 24px;
+}
+
+/* Make the tree have + and - instead of the default details/summary arrow */
+
+.tree details>summary {
+    list-style: none;
+    cursor: pointer;
+}
+
+.tree li {
+    list-style: none;
+}
+
+.tree details>summary {
+    background-image: url('../svg/expand.svg');
+    background-repeat: no-repeat;
+    background-position: 0px 50%;
+    padding-left: 24px;
+    margin-left: -24px;
+}
+
+.tree li.leaf {
+    background-image: url('../svg/leaf.svg');
+    background-repeat: no-repeat;
+    background-position: 0px 50%;
+    padding-left: 24px;
+    margin-left: -24px;
+}
+
+.tree details[open]>summary {
+    background-image: url('../svg/collapse.svg');
+}
diff --git a/static/svg/collapse.svg b/static/svg/collapse.svg
new file mode 100644
index 0000000..4107823
--- /dev/null
+++ b/static/svg/collapse.svg
@@ -0,0 +1,3 @@
+
+    
+
diff --git a/static/svg/expand.svg b/static/svg/expand.svg
new file mode 100644
index 0000000..97e93e0
--- /dev/null
+++ b/static/svg/expand.svg
@@ -0,0 +1,4 @@
+
+    
+
diff --git a/static/svg/leaf.svg b/static/svg/leaf.svg
new file mode 100644
index 0000000..b857405
--- /dev/null
+++ b/static/svg/leaf.svg
@@ -0,0 +1,3 @@
+
+    
+
diff --git a/template/index.hbs b/template/index.hbs
index 0c9367f..f9985ab 100644
--- a/template/index.hbs
+++ b/template/index.hbs
@@ -8,6 +8,7 @@
     {{ config.user.title }}
 
     
+