From 139e6509babe42333d08c0231940fb5d9d5d1205 Mon Sep 17 00:00:00 2001
From: Fabian Greimel <fabgrei@gmail.com>
Date: Fri, 4 Oct 2024 12:04:10 +0200
Subject: [PATCH] Footnote that refers to MIT Computational Thinking

copied from https://github.com/JuliaPluto/computational-thinking-template/pull/12
---
 src/_includes/layout.jlhtml  |  6 +++++
 src/assets/styles/layout.css | 45 ++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/_includes/layout.jlhtml b/src/_includes/layout.jlhtml
index ebb3f26b..ad97bbdd 100644
--- a/src/_includes/layout.jlhtml
+++ b/src/_includes/layout.jlhtml
@@ -180,6 +180,12 @@ $(pluto_head)
             </div>
             """) : nothing)
         $(content)
+        <div class="page-foot">
+            <div class="copyright">
+                <a href="$(metadata["course_info"]["repo"])"><b>Edit this page on <img class="github-logo" src="https://unpkg.com/ionicons@5.1.2/dist/svg/logo-github.svg"></b></a><br>
+                Website based on the MIT course <a href="https://computationalthinking.mit.edu"><em><b>Computational Thinking</b>, a live online Julia/Pluto textbook</em></a> and built with <a href="https://plutojl.org/">Pluto.jl</a> and the <a href="https://julialang.org">Julia programming language</a>.
+            </div>
+        </div>
         </div>
     </div>
 </body>
diff --git a/src/assets/styles/layout.css b/src/assets/styles/layout.css
index 4aa64eaf..fc086700 100644
--- a/src/assets/styles/layout.css
+++ b/src/assets/styles/layout.css
@@ -225,3 +225,48 @@
     margin-right: auto;
     margin-top: 5rem;
 }
+
+/* footnote */
+
+main {
+    padding-bottom: 5rem !important;
+}
+
+.github-logo {
+    width: 1em;
+}
+
+.page-foot {
+    z-index: 4;
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0px 0px 10px 5px #1c12120d;
+
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-block-end: 5rem;
+    margin-bottom: 10em;
+}
+
+.page-foot a {
+    text-decoration: none;
+    /* background: #f3f3ff; */
+    /* border: 3px solid; */
+    color: black;
+    /* border-bottom: 0.2em solid rgba(0, 0, 0, 0.3); */
+}
+.page-foot a:not(.no-decoration) {
+    background-position: 0 0.83em;
+    background-repeat: repeat-x;
+    background-size: 2px 8px;
+    background-image: linear-gradient(to bottom, rgba(165, 213, 235, 0.3) 33%, rgba(165, 213, 235, 0.3));
+    /* text-shadow: 2px 2px white, 2px -2px white, -2px 2px white, -2px -2px white; */
+    transition: background-position 50ms linear, background-size 50ms linear;
+}
+
+.page-foot a:hover {
+    background-position: 0 0em;
+    background-size: 2px auto;
+}