From 41180edb995be35221913b3385281b938245f8ea Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Thu, 8 Feb 2024 22:41:01 +0100
Subject: [PATCH] eye candy :relieved:

---
 content/treehouse.tree           | 11 +++++++
 content/treehouse/changelog.tree |  3 ++
 static/css/main.css              | 14 +++++++-
 template/tree.hbs                | 55 +++++++++++++++++++++++++++++++-
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 content/treehouse.tree

diff --git a/content/treehouse.tree b/content/treehouse.tree
new file mode 100644
index 0000000..cc8e6e0
--- /dev/null
+++ b/content/treehouse.tree
@@ -0,0 +1,11 @@
+%% title = "treehouse"
+
+% id = "01HP5AKRNQY9TCEHCQDM09YH64"
+- ## welcome to the Construct
+
+    % id = "01HP5AKRNQM1W672XM435DPDJD"
+    - you managed to click on the tree, hooray!
+
+    % id = "treehouse/changelog"
+      content.link = "treehouse/changelog"
+    + what's going on inside the house?
diff --git a/content/treehouse/changelog.tree b/content/treehouse/changelog.tree
index b970199..ee80f44 100644
--- a/content/treehouse/changelog.tree
+++ b/content/treehouse/changelog.tree
@@ -1,5 +1,8 @@
 %% title = "what's going on inside the house? (a changelog)"
 
+% id = "01HP5AKRNJRG1W71MDJ8QY4YFW"
+- **revision 4:** there's now a thing in the footer
+
 % id = "01HP45HV411QDDK8ZBNNBNR6AX"
 - **revision 3:** just a bit more polish :relieved:
 
diff --git a/static/css/main.css b/static/css/main.css
index cd74ea6..0575714 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -361,6 +361,18 @@ h1.page-title {
     font-size: 1.25rem;
 }
 
+/* Style the footer */
+
+footer {
+    margin-top: 4rem;
+    text-align: right;
+    opacity: 40%;
+
+    & #footer-icon {
+        color: var(--text-color);
+    }
+}
+
 /* Style emojis to be readable */
 
 img[is="th-emoji"] {
@@ -450,4 +462,4 @@ img[is="th-emoji"] {
 #index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
     display: inline;
     animation: 4s hello-there forwards;
-}
\ No newline at end of file
+}
diff --git a/template/tree.hbs b/template/tree.hbs
index 1293eb9..99aee82 100644
--- a/template/tree.hbs
+++ b/template/tree.hbs
@@ -90,6 +90,59 @@
     <main class="tree">
         {{{ page.tree }}}
     </main>
+
+    {{#if (ne page.tree_path 'treehouse')}}
+    <footer>
+        <a href="{{ config.site }}/treehouse.html">
+            <svg id="footer-icon" width="32" height="32" viewBox="0 0 32 32" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <g id="all">
+                    <mask id="mask">
+                        <rect width="32" height="32" fill="black" />
+
+                        <clipPath id="treehouse">
+                            <path fill-rule="evenodd" clip-rule="evenodd" fill="white" transform="translate(0 12)"
+                                d="M2.95266 3.95816C2.74074 1.83892 4.40494 0 6.53475 0C8.68036 0 10.3496 1.86501 10.1127 3.9975L10.0568 4.5L10.352 4.37352C11.7717 3.76506 13.316 4.92718 13.1244 6.45988L13.0568 7C14.1537 6.56127 15.3084 7.4907 15.1142 8.65595L15.0449 9.07153C14.7633 10.7614 13.3012 12 11.588 12H4.05892C2.0541 12 0.358966 10.5159 0.0940032 8.52866L0.0241185 8.00452C-0.210422 6.24546 1.30006 4.74903 3.05685 5L2.95266 3.95816ZM4.55685 7H2.55685V8H4.55685V7ZM4.55685 9H2.55685V10H4.55685V9ZM5.55685 7H7.55685V8H5.55685V7ZM7.55685 9H5.55685V10H7.55685V9ZM5.55685 13H7.55685L8.05685 16L9.55685 13H10.5569L9.49201 16.5495C9.21835 17.4617 9.39407 18.4496 9.96549 19.2115L10.5569 20H7.55685V18H6.55685V20H4.55685L5.35542 18.9352C5.80652 18.3338 6.01534 17.5848 5.94053 16.8367L5.55685 13Z" />
+                        </clipPath>
+
+                        <clipPath id="rectangleClip">
+                            <rect id="rectangle1" width="16" height="16" />
+                        </clipPath>
+
+                        <clipPath id="rectangleTreehouseClip" clip-path="url(#treehouse)">
+                            <rect id="rectangle2" width="16" height="16" />
+                        </clipPath>
+
+                        <g transform="translate(3 0)">
+                            <rect width="32" height="32" fill="white" clip-path="url(#treehouse)" />
+                            <rect width="32" height="32" fill="white" clip-path="url(#rectangleClip)" />
+                            <rect width="32" height="32" fill="black" clip-path="url(#rectangleTreehouseClip)" />
+                        </g>
+                    </mask>
+
+                    <rect width="32" height="32" fill="currentColor" mask="url(#mask)" />
+                </g>
+
+                <style>
+                    #rectangle1,
+                    #rectangle2 {
+                        transform: translate(16px, 12px) rotate(15deg) translate(-8px, -8px);
+                        rx: 0px;
+                        transition: all 1s;
+                    }
+
+                    #all:hover #rectangle1,
+                    #all:hover #rectangle2 {
+                        transform: translate(22px, 24px) rotate(360deg) translate(-2px, -2px);
+                        width: 4px;
+                        height: 4px;
+                        rx: 4px;
+                    }
+                </style>
+            </svg>
+        </a>
+    </footer>
+    {{/if}}
 </body>
 
-</html>
\ No newline at end of file
+</html>