From 6aee67259ce4ca68cfe744d24a2b48043cebcd20 Mon Sep 17 00:00:00 2001
From: Maas Lalani <maas@lalani.dev>
Date: Fri, 5 Aug 2022 01:17:39 -0400
Subject: [PATCH] fix: resize images

---
 README.md | 85 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 70 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 2e67363..ccff10b 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,11 @@ A tool for glamorous shell scripts. Leverage the power of
 Gloss](https://github.com/charmbracelet/lipgloss) in your scripts and aliases
 without writing any Go code!
 
-<img src="https://stuff.charm.sh/gum/demo.gif" width="600" alt="Shell running the ./demo.sh script" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/demo.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/demo.gif">
+  <img alt="Shell running the ./demo.sh script" src="https://stuff.charm.sh/gum/demo.gif">
+</picture>
 
 The above example is running from a single shell script ([source](./examples/demo.sh)).
 
@@ -85,7 +89,11 @@ DESCRIPTION=$(gum write --placeholder "Details of this change")
 gum confirm "Commit changes?" && git commit -m "$SUMMARY" -m "$DESCRIPTION"
 ```
 
-<img src="https://stuff.charm.sh/gum/commit_2.gif" width="600" alt="Running the ./examples/commit.sh script to commit to git" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/commit_2.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/commit_2.gif">
+  <img alt="Running the ./examples/commit.sh script to commit to git" src="https://stuff.charm.sh/gum/commit_2.gif">
+</picture>
 
 ## Installation
 
@@ -144,7 +152,11 @@ gum input --cursor.foreground "#FF0" --prompt.foreground "#0FF" --prompt "* " \
     --placeholder "What's up?" --width 80 --value "Not much, hby?"
 ```
 
-<img src="https://stuff.charm.sh/gum/customization.gif" width="600" alt="Gum input displaying most customization options" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/customization.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/customization.gif">
+  <img alt="Gum input displaying most customization options" src="https://stuff.charm.sh/gum/customization.gif">
+</picture>
 
 ## Interaction
 
@@ -162,7 +174,11 @@ Prompt for sensitive input with the `--password` flag.
 gum input --password > password.text
 ```
 
-<img src="https://stuff.charm.sh/gum/input_1.gif" width="600" alt="Shell running gum input typing Not much, you?" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/input_1.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/input_1.gif">
+  <img src="https://stuff.charm.sh/gum/input_1.gif" alt="Shell running gum input typing Not much, you?" />
+</picture>
 
 #### Write
 
@@ -172,7 +188,11 @@ Prompt for some multi-line text.
 gum write > story.text
 ```
 
-<img src="https://stuff.charm.sh/gum/write.gif" width="600" alt="Shell running gum write typing a story" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/write.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/write.gif">
+  <img src="https://stuff.charm.sh/gum/write.gif" alt="Shell running gum write typing a story" />
+</picture>
 
 #### Filter
 
@@ -185,7 +205,11 @@ echo Cherry >> flavors.text
 cat flavors.text | gum filter > selection.text
 ```
 
-<img src="https://stuff.charm.sh/gum/filter.gif" width="600" alt="Shell running gum filter on different bubble gum flavors" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/filter.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/filter.gif">
+  <img src="https://stuff.charm.sh/gum/filter.gif" alt="Shell running gum filter on different bubble gum flavors" />
+</picture>
 
 #### Choose
 
@@ -212,7 +236,11 @@ echo "What do you need from the grocery store?"
 cat foods.txt | gum choose --no-limit
 ```
 
-<img src="https://stuff.charm.sh/gum/choose.gif" width="600" alt="Shell running gum choose with numbers and gum flavors" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/choose.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/choose.gif">
+  <img src="https://stuff.charm.sh/gum/choose.gif" alt="Shell running gum choose with numbers and gum flavors" />
+</picture>
 
 #### Confirm
 
@@ -223,8 +251,11 @@ Confirm whether to perform an action. Exits with code `0` (affirmative) or `1`
 gum confirm && rm file.txt || echo "File not removed"
 ```
 
-<img src="https://stuff.charm.sh/gum/confirm_2.gif" width="600" alt="Shell running gum confirm" />
-
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/confirm_2.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/confirm_2.gif">
+  <img src="https://stuff.charm.sh/gum/confirm_2.gif" alt="Shell running gum confirm" />
+</picture>
 
 #### Spin
 
@@ -235,7 +266,11 @@ automatically stop after the given command exits.
 gum spin --spinner dot --title "Buying Bubble Gum..." -- sleep 5
 ```
 
-<img src="https://stuff.charm.sh/gum/spin.gif" width="600" alt="Shell running gum spin while sleeping for 5 seconds" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/spin.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/spin.gif">
+  <img src="https://stuff.charm.sh/gum/spin.gif" alt="Shell running gum spin while sleeping for 5 seconds" />
+</picture>
 
 Available spinner types include: `line`, `dot`, `minidot`, `jump`, `pulse`, `points`, `globe`, `moon`, `monkey`, `meter`, `hamburger`.
 
@@ -252,7 +287,11 @@ gum style \
 	'Bubble Gum (1¢)' 'So sweet and so fresh!'
 ```
 
-<img src="https://stuff.charm.sh/gum/style.gif" width="600" alt="Bubble Gum, So sweet and so fresh!" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/style.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/style.gif">
+  <img src="https://stuff.charm.sh/gum/style.gif" alt="Bubble Gum, So sweet and so fresh!" />
+</picture>
 
 ## Layout
 
@@ -275,7 +314,11 @@ BUBBLE_GUM=$(gum join "$BUBBLE" "$GUM")
 gum join --align center --vertical "$I_LOVE" "$BUBBLE_GUM"
 ```
 
-<img src="https://stuff.charm.sh/gum/join.gif" width="600" alt="I LOVE Bubble Gum written out in four boxes with double borders around them." />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/join.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/join.gif">
+  <img src="https://stuff.charm.sh/gum/join.gif" alt="I LOVE Bubble Gum written out in four boxes with double borders around them." />
+</picture>
 
 ## Format
 
@@ -302,7 +345,11 @@ For more information on template helpers, see the [Termenv
 docs](https://github.com/muesli/termenv#template-helpers). For a full list of
 named emojis see the [GitHub API](https://api.github.com/emojis).
 
-<img src="https://stuff.charm.sh/gum/format.gif" width="600" alt="Running gum format for different types of formats" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/format.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/format.gif">
+  <img src="https://stuff.charm.sh/gum/format.gif" alt="Running gum format for different types of formats" />
+</picture>
 
 ## Examples
 
@@ -345,7 +392,11 @@ SESSION=$(tmux list-sessions -F \#S | gum filter --placeholder "Pick session..."
 tmux switch-client -t $SESSION || tmux attach -t $SESSION
 ```
 
-<img src="https://stuff.charm.sh/gum/pick-tmux-session.gif" width="600" alt="Picking a tmux session with gum filter" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/pick-tmux-session.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/pick-tmux-session.gif">
+<img src="https://stuff.charm.sh/gum/pick-tmux-session.gif" alt="Picking a tmux session with gum filter" />
+</picture>
 
 #### Pick commit hash from your Git history
 
@@ -356,7 +407,11 @@ commit hash of the commit you select.
 git log --oneline | gum filter | cut -d' ' -f1 # | copy
 ```
 
-<img src="https://stuff.charm.sh/gum/pick-commit.gif" width="600" alt="Picking a commit with gum filter" />
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/gum/pick-commit.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/gum/pick-commit.gif">
+  <img src="https://stuff.charm.sh/gum/pick-commit.gif" alt="Picking a commit with gum filter" />
+</picture>
 
 #### Choose packages to uninstall