Skip to content

Commit

Permalink
Getting started: dark mode for button icons
Browse files Browse the repository at this point in the history
fonsp committed Oct 30, 2023
1 parent 04e4558 commit f9fc366
Showing 1 changed file with 18 additions and 6 deletions.
24 changes: 18 additions & 6 deletions src/basic/Getting started.jl
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
# v0.19.27
# v0.19.30

#> [frontmatter]
#> image = "https://user-images.githubusercontent.com/6933510/174066314-d338f28b-36cf-48e0-981f-dd0f140ad66c.png"
@@ -43,11 +43,11 @@ cat = "Ks*;lj"
if cat == "Ks*;lj"
md"Oh no! Someone messed with my pretty introduction. Change the code above to give our cat a proper name!"
else
HTML("""<p><b>Well done, your cat is called $cat now.</b> This text gets updated every time you change the name. To see how the magic works, click on the <img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/eye-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> to the left of this text.</p>""")
HTML("""<p><b>Well done, your cat is called $cat now.</b> This text gets updated every time you change the name. To see how the magic works, click on the <img class="pluto-button-inline-icon" src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/eye-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> to the left of this text.</p>""")
end

# ╔═╡ 611c28fa-9542-11ea-1751-fbdedcfb7690
html"""<p>To edit any code, just click on it. When you're done programming, press the <img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/caret-forward-circle-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> in the lower-right corner of a cell to run the code. You can also use `Shift+Enter` if you are in a hurry.</p>"""
html"""<p>To edit any code, just click on it. When you're done programming, press the <img class="pluto-button-inline-icon" src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/caret-forward-circle-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> in the lower-right corner of a cell to run the code. You can also use <kbd>Shift+Enter</kbd> if you are in a hurry.</p>"""

# ╔═╡ 6f7eecec-9543-11ea-1284-dd52fce3ecca
md"I feel like our cat needs a friend. Let's call them $(friend)."
@@ -60,7 +60,7 @@ else
end

# ╔═╡ f112b662-9543-11ea-3dcb-2906a99b2188
html"""<p>A cell is a container for code & output. To add one, click on the <img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/add-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> above or below another cell. You can do it wherever you like. After you're done writing code in your cell, remember to run it!</p>"""
html"""<p>A cell is a container for code & output. To add one, click on the <img class="pluto-button-inline-icon" src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/add-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> above or below another cell. You can do it wherever you like. After you're done writing code in your cell, remember to run it!</p>"""

# ╔═╡ e0642f42-9545-11ea-14ee-fde52cb54ccc
md"## Feeding neighbors
@@ -105,7 +105,7 @@ else
end

# ╔═╡ 36cd006a-9551-11ea-3c0c-df8b7f2843c1
HTML("""<p>To delete a cell like the one defining $scary_dog, click on the <img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/close-circle-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> on the right of its code.</p>""")
HTML("""<p>To delete a cell like the one defining $scary_dog, click on the <img class="pluto-button-inline-icon" src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/close-circle-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> on the right of its code.</p>""")

# ╔═╡ fb4e471c-9551-11ea-1ab5-41bbd5de76b8
md"""
@@ -137,7 +137,7 @@ else
end

# ╔═╡ 5edadcd2-9554-11ea-1714-b5b7692c4797
html"""<p>We're almost done! It's time to share your amazing story. Scroll to the top of the notebook, and click on <img src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/share-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> to see the export options - or you can always share this notebook's save file. (The file is pure Julia, by the way, and it's runnable! You'll learn more about this in the advanced introduction.)</p>"""
html"""<p>We're almost done! It's time to share your amazing story. Scroll to the top of the notebook, and click on <img class="pluto-button-inline-icon" src="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/share-outline.svg" style="width: 1em; height: 1em; margin-bottom: -.2em;"> to see the export options - or you can always share this notebook's save file. (The file is pure Julia, by the way, and it's runnable! You'll learn more about this in the advanced introduction.)</p>"""

# ╔═╡ 4634c856-9553-11ea-008d-3539195970ea
md"## Final notes"
@@ -170,6 +170,17 @@ md"**Have fun using Pluto!**
_~ Fons van der Plas & Nicholas Bochenski_"

# ╔═╡ f7588ff8-4eac-4c5a-bc06-0983bc4d5ee1
html"""
<style>
@media (prefers-color-scheme: dark) {
.pluto-button-inline-icon {
filter: invert(1) hue-rotate(180deg) contrast(0.8);
}
}
</style>
"""

# ╔═╡ Cell order:
# ╟─b129ba7c-953a-11ea-3379-17adae34924c
# ╟─4d88b926-9543-11ea-293a-1379b1b5ae64
@@ -206,3 +217,4 @@ _~ Fons van der Plas & Nicholas Bochenski_"
# ╟─d736e096-9553-11ea-3ba5-277afde1afe7
# ╟─7366f1b6-954c-11ea-3f68-b12444c902c3
# ╟─1deaaf36-9554-11ea-3dae-85851f73dbc6
# ╟─f7588ff8-4eac-4c5a-bc06-0983bc4d5ee1

0 comments on commit f9fc366

Please sign in to comment.