diff --git a/.gitignore b/.gitignore
index 4c8e6af3..810bfe1d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ test/*.svg
/*.svg
node_modules/
package-lock.json
+.CondaPkg
\ No newline at end of file
diff --git a/Project.toml b/Project.toml
new file mode 100644
index 00000000..7ebb3919
--- /dev/null
+++ b/Project.toml
@@ -0,0 +1,3 @@
+[deps]
+Franklin = "713c75ef-9fc9-4b05-94a9-213340da978e"
+NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"
diff --git a/README.md b/README.md
index ff2a1fff..becb4d7d 100644
--- a/README.md
+++ b/README.md
@@ -47,9 +47,7 @@ Find the corresponding script, fix it in a PR.
Once all that's done, the remaining things to do are to create the HTML page and a link in the appropriate location. Let's assume you wanted to add an E2E tutorial "Dinosaurs" then in the previous step you'd have `EX-dinosaurs` and you would
* create a file `dinosaurs.md` in `end-to-end/` by duplicating the `end-to-end/wine.md` and changing the reference in it to `\tutorial{EX-dinosaurs}`
-* add links pointing to that tutorial
- * in `index.md` following the template
- * in `_layout/head.html` following the template
+* add a link pointing to that tutorial in `_libs/nav/head.js` following the template so your tutorial shows in the navigation bar
* lastly, to make sections in your tutorial collapsible like other tutorials run the `collapse-script.jl` file via `julia collapse-script.jl`
diff --git a/_css/extra.css b/_css/extra.css
index 6a299e10..808501ec 100644
--- a/_css/extra.css
+++ b/_css/extra.css
@@ -114,7 +114,7 @@ li.pure-menu-sublist-title {
list-style-type: square;
}
-ul#e2e.pure-menu-sublist {
+ul#adv.pure-menu-sublist {
margin-bottom: 7em;
}
diff --git a/_css/franklin.css b/_css/franklin.css
index b3c45dd1..2007abbe 100644
--- a/_css/franklin.css
+++ b/_css/franklin.css
@@ -156,9 +156,9 @@ html {
================================================================== */
.franklin-content img {
- width: 70%;
+ width: 40%;
text-align: center;
- padding-left: 10%; }
+ padding-left: 5%; }
.franklin-content .img-small img {
width: 50%;
diff --git a/_css/nav.css b/_css/nav.css
index 01535e07..1680e860 100644
--- a/_css/nav.css
+++ b/_css/nav.css
@@ -17,11 +17,16 @@
}
/* hide if screen size is from 900 to 1000 */
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1300px) {
.brand {
display: none;
}
}
+
+a#home {
+ border-radius: 3rem;
+}
+
.brand a,
.brand a:visited {
text-decoration: none;
@@ -116,3 +121,38 @@ nav ul li ul li a {
background-color: #f1f1f1;
}
+
+.bottom-nav-container {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 2rem;
+ margin-bottom: -2rem;
+
+}
+
+.bottom-nav {
+ background-color: #f1f1f1;
+ font-weight: 600;
+ padding: 8px 8px;
+ color: #2e2e2e;
+ border-radius: 45px;
+ outline: none;
+ text-align: center;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-decoration: none;
+ width: 200px;
+ border: 2px solid #c1c1c1;
+}
+.bottom-nav:hover {
+ background-color: #9b59b6;
+ color: #f1f1f1;
+}
+.button-label {
+ font-size: 0.9rem;
+ font-weight: 400;
+}
diff --git a/_css/side-menu.css b/_css/side-menu.css
index 3222cddf..874cf531 100644
--- a/_css/side-menu.css
+++ b/_css/side-menu.css
@@ -77,7 +77,7 @@ The content `` is where all your content goes.
height: 40px;
}
/* media queries for header */
- @media only screen and (max-width: 800px) {
+ @media only screen and (max-width: 1200px) {
.header h1::before {
display: none;
}
diff --git a/_layout/foot.html b/_layout/foot.html
index 0c5506a7..ba820816 100644
--- a/_layout/foot.html
+++ b/_layout/foot.html
@@ -1,20 +1,24 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ if hasmath }}
- {{ insert foot_katex.html }}
- {{ end }}
- {{ if hascode }}
- {{ insert foot_highlight.html }}
- {{ end }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{{ if hasmath }}
+{{ insert foot_katex.html }}
+{{ end }}
+{{ if hascode }}
+{{ insert foot_highlight.html }}
+{{ end }}
-