Updated README with images

README.md

@@ -6,16 +6,40 @@ Custom CSS bits for the Jellyfin WebUI and a (VERY WIP) custom theme
 
 ---
 
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/rounded-cards.css');
+Static Left Drawer
 
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/rounded-drawer-buttons.css');
+<img src="./images/static-left-drawer-demo.png" alt="static left drawer" width="80%"/>
 
 @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/static-left-drawer.css');
 
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/transparent-header.css');
+---
 
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/transparent-header-alt.css');
+Rounded Cards
+
+<img src="./images/rounded-cards-demo.png" alt="rounded cards" width="80%"/>
+
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/rounded-cards.css');
 
 ---
 
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/css-scyfin/scyfin-theme.css');
+Rounded Drawer Buttons
+
+<img src="./images/rounded-drawer-buttons-demo.png" alt="rounded drawer buttons" width="80%"/>
+
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/rounded-drawer-buttons.css');
+
+---
+
+Transparent Header
+
+<img src="./images/transparent-header-demo.png" alt="transparent header" width="80%"/>
+
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/transparent-header.css');
+
+---
+
+Transparent Header Alternative
+
+<img src="./images/transparent-header-alt-demo.png" alt="transparent header alt" width="80%"/>
+
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin/CSS/transparent-header-alt.css');