diff --git a/README.md b/README.md index 1a5295c..3289eea 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Most themes should be available through the Community Themes pane in Obsidian's [Behave dark](https://gitlab.com/chrismettal/obsidian-behave-dark) | A port of the eye friendly `Behave` theme by Christian Petersen, available for `VSCode`, `FreeCAD`, `KiCAD`, and now `Obsidian`! | ![BehaveDark](https://raw.githubusercontent.com/Chrismettal/Obsidian-Behave-dark/main/Screenshot.png) | [Chrismettal](https://gitlab.com/chrismettal)| -# CSS Snippets +# 🔗 CSS Snippets Small tweaks to add to your `vault/.obsidian/snippets` folder. @@ -628,22 +628,11 @@ Credits to Echo --- -### Image cards +## [Image Cards](code/css-snippets/image-cards.css) by [@TClark1011](https://github.com/TClark1011) +Give your images a shadow and rounded corners. -
-CSS -

+![](media/css-snippets/image-cards-1.png)
 
-img {
-border-radius: 4px;
-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-background-color: var(--background-secondary); /* Background color so PNGs with transparent backgrounds don't look weird */
-}
-
-
- -
- -Credits to [TClark1011](https://github.com/TClark1011) +[📁 image-cards.css](code/css-snippets/image-cards.css) --- diff --git a/code/css-snippets/image-cards.css b/code/css-snippets/image-cards.css new file mode 100644 index 0000000..28ff876 --- /dev/null +++ b/code/css-snippets/image-cards.css @@ -0,0 +1,11 @@ +/* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ +/* author: https://github.com/TClark1011 */ +/* source: https://github.com/kmaasrud/awesome-obsidian */ + +img { + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + background-color: var( + --background-secondary + ); /* Background color so PNGs with transparent backgrounds don't look weird */ +} diff --git a/media/css-snippets/image-cards-1.png b/media/css-snippets/image-cards-1.png new file mode 100644 index 0000000..5995b01 Binary files /dev/null and b/media/css-snippets/image-cards-1.png differ