Merge pull request #12 from JuliaPluto/lf-footnote

automatically include footnote in all pages

Author: lucaferranti

PlutoPages.jl

@@ -709,7 +709,7 @@ function template_handler(
 			slider_server_url=$(pluto_deploy_settings.Export.slider_server_url)
 			binder_url=$(pluto_deploy_settings.Export.binder_url)
 			disable_ui
-		>
+		></pluto-editor>
 		"""
 
 		frontmatter = Pluto.frontmatter(input.absolute_path)

src/_includes/layout.jlhtml

@@ -188,6 +188,12 @@ $(pluto_head)
                 """) : nothing)
             </div>"""))
         $(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/[email protected]/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>

src/_includes/welcome.jlmd

@@ -13,10 +13,4 @@ $(isempty(get(metadata["homepage"], "disclaimer", "")) ? nothing : @htl("""<bloc
 <main class="homepage">
 $(Base.include(@__MODULE__, joinpath(@__DIR__, "..", "assets", "scripts", "get_highlights.jl")))
 $(Base.include(@__MODULE__, joinpath(@__DIR__, "..", "assets", "scripts", "get_subjects.jl")))
-<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/[email protected]/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>
 </main>

src/assets/styles/homepage.css

@@ -99,6 +99,7 @@ main {
     max-width: 86rem;
     z-index: -1;
     margin: 3em auto 0 auto;
+    padding-bottom: 5rem !important;
 }
 main > div {
     z-index: 4;
@@ -293,10 +294,6 @@ section > div.preview > img {
     width: 100%;
 }
 
-.github-logo {
-    width: 1em;
-}
-
 .homepage,
 .banner {
     color: #3c3c3c;

src/assets/styles/layout.css

@@ -259,3 +259,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;
+}