Style updates fix #27

JuliaPluto · Nov 27, 2024 · 0b7ca05 · 0b7ca05
1 parent 9c43f19
commit 0b7ca05
Show file tree

Hide file tree

Showing 19 changed files with 104 additions and 98 deletions.
diff --git a/src/_includes/docsnotebook.jlmd b/src/_includes/docsnotebook.jlmd
diff --git a/src/_includes/layout.jlhtml b/src/_includes/layout.jlhtml
@@ -40,6 +40,13 @@ end)
 
 
 $(pluto_head)
+
+$(if "docs" in get(page.output.frontmatter, "tags", String[])
+    @htl("""
+    <link rel="stylesheet" href="$(root_url)/assets/styles/docs.css" type="text/css" />
+    """)
+end)
+
 </head>
 <body>
     <div id="pages-layout">

diff --git a/src/_includes/md.jlmd b/src/_includes/md.jlmd
@@ -2,8 +2,8 @@
 layout: "layout.jlhtml"
 ---
 
-<div class="pages-markdown">
+<pluto-output class="pages-markdown rich_output">
 <main>
 $(content)
 </main>
-</div>
+</pluto-output>
diff --git a/src/_includes/welcome.jlhtml b/src/_includes/welcome.jlhtml
@@ -48,7 +48,7 @@
                     <h1>
                         We are on a mission to make <em>scientific computing</em> more <em>accessible and fun</em>.
                     </h1>
-                    <p>Simple, reactive programming environment for the Julia Langauge</p>
+                    <p>Simple, reactive programming environment for the Julia Language</p>
                     <div class="bannerlinks">
                         <a class="roundbutton" href="#try"><img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/flash.svg" aria-hidden="true"> Try online</a>
 

diff --git a/src/assets/styles/docs.css b/src/assets/styles/docs.css
@@ -0,0 +1,38 @@
+@import url("https://fonts.googleapis.com/css2?family=Jaldi:wght@400;700&display=swap");
+
+pluto-output {
+    font-family: "Jaldi", sans-serif;
+    font-size: 17px;
+    overflow-y: hidden;
+}
+
+pluto-output h1,
+pluto-output h2,
+pluto-output h3,
+pluto-output h4,
+pluto-output h5,
+pluto-output h6 {
+    font-family: Jaldi, sans-serif;
+    line-height: 1;
+}
+
+pluto-output .pluto-docs-binding h1 {
+    font-size: 1.4em;
+}
+
+pluto-output > div > div > h1 {
+    margin-block-start: 3.5em !important;
+}
+pluto-cell:first-child pluto-output > div > div > h1:first-child {
+    margin-block-start: 0 !important;
+}
+
+pluto-output .pluto-docs-binding h2 {
+    font-size: 1.3em;
+}
+pluto-output .pluto-docs-binding h3,
+pluto-output .pluto-docs-binding h4,
+pluto-output .pluto-docs-binding h5,
+pluto-output .pluto-docs-binding h6 {
+    font-size: 1.1em;
+}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
@@ -57,13 +57,6 @@ h2 {
     margin-block-end: 0;
 }
 
-blockquote {
-    opacity: 0.8;
-    border-inline-start: 3px solid var(--a-underline);
-    padding-inline-start: 1em;
-    margin-inline-start: 0.2em;
-}
-
 pre {
     tab-size: 4;
     white-space: pre-wrap;

diff --git a/src/assets/styles/layout.css b/src/assets/styles/layout.css
@@ -103,6 +103,7 @@ body:not(.adsfasdfasdf):not(.sdfsdfdsffdsfds) {
         background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/menu-outline.svg);
         background-size: var(--size) var(--size);
         filter: var(--image-filters);
+        transform: scaleX(0.9);
     }
     #pages-sidebar {
         position: fixed;

diff --git a/src/assets/styles/welcome.css b/src/assets/styles/welcome.css
@@ -237,6 +237,13 @@ header #topnav .navlinks a img {
     margin-right: 0.3em;
 }
 
+blockquote {
+    opacity: 0.8;
+    border-inline-start: 3px solid var(--a-underline);
+    padding-inline-start: 1em;
+    margin-inline-start: 0.2em;
+}
+
 h1,
 h2 {
     font-weight: 800;

diff --git a/src/en/docs/AbstractPlutoDingetjes.jl b/src/en/docs/AbstractPlutoDingetjes.jl
@@ -4,7 +4,7 @@
 #> [frontmatter]
 #> image = "https://media.giphy.com/media/l3vRfDn9ca5PVkHv2/giphy.gif"
 #> title = "AbstractPlutoDingetjes.jl – develop enhanced Pluto widgets"
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> tags = ["docs", "widgets", "AbstractPlutoDingetjes", "advanced"]
 #> date = "2023-11-21"
 #> description = "AbstractPlutoDingetjes allows you to write more advanced widgets to be used inside Pluto.jl."

diff --git a/src/en/docs/ExpressionExplorer.jl b/src/en/docs/ExpressionExplorer.jl
@@ -4,7 +4,7 @@
 #> [frontmatter]
 #> image = "https://media.giphy.com/media/242BaXJnCfe7hOVrsE/giphy.gif"
 #> title = "ExpressionExplorer.jl – documentation "
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> license = "MIT"
 #> description = "Find all variables referenced and assigned in a Julia expression. Used internally by Pluto.jl."
 #> tags = ["docs", "internals", "reactivity", "advanced", "ExpressionExplorer"]

diff --git a/src/en/docs/PlutoDependencyExplorer.jl b/src/en/docs/PlutoDependencyExplorer.jl
@@ -8,7 +8,7 @@
 #> license = "Unlicense"
 #> description = "Given a list of cell codes, PlutoDependencyExplorer can tell you in which order these cells should run. Used internally by Pluto.jl."
 #> tags = ["docs", "PlutoDependencyExplorer", "internals", "reactivity", "ExpressionExplorer", "advanced"]
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> 
 #>     [[frontmatter.author]]
 #>     name = "Pluto.jl"

diff --git a/src/en/docs/advanced-widgets.jl b/src/en/docs/advanced-widgets.jl
@@ -8,7 +8,7 @@
 #> date = "2024-04-22"
 #> tags = ["docs", "advanced", "widgets", "AbstractPlutoDingetjes", "JavaScript"]
 #> description = "Pluto provides a framework for advances input and display widgets."
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> license = "Unlicense"
 #> 
 #>     [[frontmatter.author]]

diff --git a/src/en/docs/configuration.jl b/src/en/docs/configuration.jl
@@ -6,7 +6,7 @@
 #> date = "2024-04-22"
 #> tags = ["docs", "introduction"]
 #> description = "How to change settings of the Pluto.jl Julia notebook"
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> license = "MIT"
 #> 
 #>     [[frontmatter.author]]
@@ -121,8 +121,8 @@ Docs.Binding(Pluto.Configuration, categories[3])
 Docs.Binding(Pluto.Configuration, categories[4])
 
 # ╔═╡ Cell order:
-# ╟─5a7dc99c-4229-4c7d-8464-8a57d9fcb517
 # ╟─efda32af-e2e8-4793-b553-9c73706ea659
+# ╟─5a7dc99c-4229-4c7d-8464-8a57d9fcb517
 # ╟─a0da0b14-566e-4adc-bf23-702699e02c72
 # ╟─6606f0f0-e42d-4eef-bf57-fa02f165851d
 # ╟─cde195ce-fe33-48a7-9567-b4dc614a2e6f

diff --git a/src/en/docs/export-html.jlmd b/src/en/docs/export-html.jlmd
@@ -15,18 +15,18 @@ This is a snapshot of your notebook with all outputs in a standalone HTML file.
 For some examples of HTML export files, check out our [featured notebooks](https://featured.plutojl.org/).
 
 
-### Step 1
-Open your notebook in Pluto, and wait for all cells to finish running.
-
-### Step 2
-Press the **Share** button in the top right.
-
-![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
-
-### Step 3
-Choose "Static HMTL".
-
-![Screenshot of the export options](https://github.com/user-attachments/assets/8664ff5d-4891-449d-b762-ee9dfb809587)
+> ### Step 1
+> Open your notebook in Pluto, and wait for all cells to finish running.
+> 
+> ### Step 2
+> Press the **Share** button in the top right.
+> 
+> ![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
+> 
+> ### Step 3
+> Choose "Static HMTL".
+> 
+> ![Screenshot of the export options](https://github.com/user-attachments/assets/8664ff5d-4891-449d-b762-ee9dfb809587)
 
 
 

diff --git a/src/en/docs/export-julia.jlmd b/src/en/docs/export-julia.jlmd
@@ -16,18 +16,18 @@ When you send your `.jl` notebook file to someone else, they can open the notebo
 
 
 
-### Step 1
-Open your notebook in Pluto, and wait for all cells to finish running.
-
-### Step 2
-Press the **Share** button in the top right.
-
-![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
-
-### Step 3
-Choose "Notebook file".
-
-![Screenshot of the export options](https://github.com/user-attachments/assets/18fa2a41-ab15-43aa-9ffa-c11f77079ba2)
+> ### Step 1
+> Open your notebook in Pluto, and wait for all cells to finish running.
+> 
+> ### Step 2
+> Press the **Share** button in the top right.
+> 
+> ![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
+> 
+> ### Step 3
+> Choose "Notebook file".
+> 
+> ![Screenshot of the export options](https://github.com/user-attachments/assets/18fa2a41-ab15-43aa-9ffa-c11f77079ba2)
 
 
 !!! info

diff --git a/src/en/docs/export-pdf.jlmd b/src/en/docs/export-pdf.jlmd
@@ -13,18 +13,18 @@ If you want to print your notebook, or submit it as homework assignment, it migh
 *When possible, we recommend sharing an HTML file instead of a PDF file. HTML files are great for **reproducibility**!*
 
 
-### Step 1
-Open your notebook in Pluto, and wait for all cells to finish running.
-
-### Step 2
-Press the **Share** button in the top right.
-
-![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
-
-### Step 3
-Choose "PDF".
-
-![Screenshot of the export options](https://github.com/user-attachments/assets/3c4652c6-18e5-4f83-bac1-9738e88a4bc8)
+> ### Step 1
+> Open your notebook in Pluto, and wait for all cells to finish running.
+> 
+> ### Step 2
+> Press the **Share** button in the top right.
+> 
+> ![Screenshot of the Share button](https://github.com/user-attachments/assets/82e1e878-e0e5-4386-a4fa-fd0337e28161)
+> 
+> ### Step 3
+> Choose "PDF".
+> 
+> ![Screenshot of the export options](https://github.com/user-attachments/assets/3c4652c6-18e5-4f83-bac1-9738e88a4bc8)
 
 
 ## Page layout

diff --git a/src/en/docs/index.jlmd b/src/en/docs/index.jlmd
@@ -7,4 +7,4 @@ order: 0
 
 # Welcome to Pluto!
 
-Welcome to the docs! We are still working on this website ☺️
+Welcome to the docs! Take a look at the sidebar on the left. ☺️
diff --git a/src/en/docs/javascript-api.jl b/src/en/docs/javascript-api.jl
@@ -10,7 +10,7 @@
 #> license = "Unlicense"
 #> description = "Use JavaScript to make your own interactive visualizations!"
 #> date = "2024-04-24"
-#> layout = "docsnotebook.jlmd"
+#> layout = "layout.jlhtml"
 #> 
 #>     [[frontmatter.author]]
 #>     name = "Pluto.jl"

diff --git a/src/en/docs/update.jlmd b/src/en/docs/update.jlmd
@@ -18,11 +18,10 @@ This should update Pluto to the latest version <span id="latesthere">(check our
 ## Not the latest version?
 Sometimes, it is not possible to install the latest version of Pluto because of **compatibility issues with other packages** that you have installed in your environment. 
 
-First, use `Pkg.status()` to find out which packages you have installed, and remove any packages that you are no longer using. Now try to update again.
-
-If this did not work, try updating all packages (not just Pluto) with `Pkg.update()`.
-
-Finally, you could use `Pkg.status(outdated=true, mode=Pkg.PKGMODE_MANIFEST)` to see the compatibility bounds. [Here is an example](https://discourse.julialang.org/t/package-is-not-updating-but-why/88338).
+Some tips to fix it:
+1. First, use `Pkg.status()` to find out which packages you have installed, and remove any packages that you are no longer using. Now try to update again.
+2. If this did not work, try updating all packages (not just Pluto) with `Pkg.update()`.
+3. Finally, you could use `Pkg.status(outdated=true, mode=Pkg.PKGMODE_MANIFEST)` to see the compatibility bounds. [Here is an example](https://discourse.julialang.org/t/package-is-not-updating-but-why/88338).
 
 <script defer>
 const latest = fetch("https://api.github.com/repos/fonsp/Pluto.jl/releases", {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ order: 0

		# Welcome to Pluto!

		Welcome to the docs! We are still working on this website ☺️
		Welcome to the docs! Take a look at the sidebar on the left. ☺️