Archive outdated images, update image paths in documentation, and add a new "Material Wallpapers" section with corresponding visuals.

Author: mallowigi

docs/configuration/features-settings.md

@@ -28,7 +28,7 @@ wallpapers:
     alttext: Dark Violet
   - filename: shades.png
     alttext: Shades of Purple
-  - filename: sakura2
+  - filename: sakura2.png
     alttext: Sakura
 ---
 
@@ -130,10 +130,13 @@ This setting allows you to fine-tune the opacity of overlays. The default is 40%
 This setting replaces the _empty frame_ of the IDE, e.g., the background of the IDE when there are no open files, with a custom wallpaper that sports the logo of the plugin with colors matching the current theme. This is a purely aesthetic feature that adds a touch of personality to your IDE, reminiscent of what you can find in other editors such as Atom or VScode.
 
 <div class="masonry" markdown="0">
-  {% for wallpaper in page.wallpapers %}
-    <div class="masonry-brick">
-      <img src="/img/screens/wallpapers/{{ wallpaper.filename }}"
-           alt="{{ wallpaper.alttext }}">
-    </div>
-  {% endfor %}
+
+{% include figure.html content="https://images.material-theme.com/mariosmilax/image/upload/c_thumb,w_400,g_face/v1694951877/walls/oceanic.png" caption="Oceanic" %}
+
+{% include figure.html content="https://images.material-theme.com/mariosmilax/image/upload/c_thumb,w_400,g_face/v1694951877/walls/darker.png" caption="Darker" %}
+
+{% include figure.html content="https://images.material-theme.com/mariosmilax/image/upload/c_thumb,w_400,g_face/v1694951877/walls/palenight.png" caption="Palenight" %}
+
+{% include figure.html content="https://images.material-theme.com/mariosmilax/image/upload/c_thumb,w_400,g_face/v1694951877/walls/lighter.png" caption="Lighter" %}
+
 </div>