eye candy 😌
This commit is contained in:
parent
5939db0cc6
commit
41180edb99
11
content/treehouse.tree
Normal file
11
content/treehouse.tree
Normal file
|
|
@ -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?
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
%% title = "what's going on inside the house? (a changelog)"
|
%% title = "what's going on inside the house? (a changelog)"
|
||||||
|
|
||||||
|
% id = "01HP5AKRNJRG1W71MDJ8QY4YFW"
|
||||||
|
- **revision 4:** there's now a thing in the footer
|
||||||
|
|
||||||
% id = "01HP45HV411QDDK8ZBNNBNR6AX"
|
% id = "01HP45HV411QDDK8ZBNNBNR6AX"
|
||||||
- **revision 3:** just a bit more polish :relieved:
|
- **revision 3:** just a bit more polish :relieved:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -361,6 +361,18 @@ h1.page-title {
|
||||||
font-size: 1.25rem;
|
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 */
|
/* Style emojis to be readable */
|
||||||
|
|
||||||
img[is="th-emoji"] {
|
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 {
|
#index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
|
||||||
display: inline;
|
display: inline;
|
||||||
animation: 4s hello-there forwards;
|
animation: 4s hello-there forwards;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,59 @@
|
||||||
<main class="tree">
|
<main class="tree">
|
||||||
{{{ page.tree }}}
|
{{{ page.tree }}}
|
||||||
</main>
|
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue