Finalises image overhaul

en/Contributing to Obsidian/Style guide.md

@@ -1,11 +1,15 @@
+---
+aliases:
+  - Obsidian Style Guide
+---
 The Obsidian documentation uses the [Google developer documentation style guide](https://developers.google.com/style). For any topics not covered by the Google style guide, use the [Microsoft Style Guide](https://learn.microsoft.com/en-us/style-guide/).
 
 This page lists any deviances from the Google style guide, or terminology worth highlighting.
 
 > [!tip] Contribute
 > Most of the documentation existed before this style guide did. If you find any violations of this style guide, please [create an issue](https://github.com/obsidianmd/obsidian-docs/issues/new) or submit a pull request to [obsidianmd/obsidian-docs](https://github.com/obsidianmd/obsidian-docs).
 
-## Terminology
+## Terminology and grammar
 
 - Prefer "keyboard shortcut" over "hotkey". Use Hotkey when referring to the specific feature.
 - Prefer "the Obsidian app" on mobile, and "the Obsidian application" on desktop.
@@ -43,7 +47,7 @@ When referring to multiple UI interactions in a sequence, use the → (U+2192) s
 
 When moving between notes, use "open" if the destination is hidden, and "switch" if both source and destination notes are open in separate splits.
 
-## Reference documentation for settings
+### Reference documentation for settings
 
 When possible, any settings should be documented within Obsidian using a descriptive text. Avoid documenting a specific setting in Obsidian Help unless:
 
@@ -53,7 +57,7 @@ When possible, any settings should be documented within Obsidian using a descrip
 
 Consider using a tip callout if you want to draw attention to a specific setting.
 
-## Directional terms
+### Directional terms
 
 Hyphenate directional terms when using them as adjectives. Avoid hyphenation when direction is used as a noun.
 
@@ -79,7 +83,7 @@ Don't indicate a direction when referring to settings. The location of the setti
 
 - To the right of **Pick remote vault**, click **Choose**.
 
-## Sentence case
+### Sentence case
 
 Prefer *sentence case* over *title case* for headings, buttons, and titles. When referencing UI elements always match the case of the text in the UI.
 
@@ -92,7 +96,7 @@ Prefer *sentence case* over *title case* for headings, buttons, and titles. When
 - How Obsidian Stores Data
 
 
-## Examples
+### Examples
 
 Prefer realistic examples over nonsense terms.
 
@@ -104,7 +108,7 @@ Prefer realistic examples over nonsense terms.
 
 - `task:(foo OR bar)`
 
-## Key names
+### Key names
 
 When referring to a character on the keyboard by name, add the character between parentheses right after the name:
 
@@ -117,7 +121,7 @@ When referring to a character on the keyboard by name, add the character between
 - Add a hyphen in front of the word.
 - Add a `-` in front of the word.
 
-## Markdown
+### Markdown
 
 Use newlines between Markdown blocks:
 
@@ -143,10 +147,66 @@ This is a section.
 3. Third item
 ```
 
-## Images
+### Images
 
 Use "**width** x **height** pixels" for describing image or screen dimensions.
 
 **Example:**
 
 Recommended image dimensions: 1920 x 1080 pixels.
+
+## Icons and images
+
+Include images when they make it easier to explain things that are hard to describe with words, or when you need to show important parts of the Obsidian application. You can save images in the `Attachments` folder.
+
+Here are the guidelines for images:
+
+- If an image looks too big in the note, make it smaller outside of Obsidian, or adjust its dimensions as explained in [[Embedding files#Embed an image in a note|embedding an image in a note]].
+- The image should make the text it accompanies easier to understand.
+
+> [!example]
+> Once enabled, the [[Word count]] plugin will create a new entry on your bottom statusbar.
+> 
+> ![[Style-guide-zoomed-example.png|300]]
+
+- For pop-up windows or modals, the image should show the entire Obsidian application window.
+
+![[Style-guide-modal-example.png|500]]
+
+- Images should be in either `.png` or `.svg` format.
+- Optimize images to make them take up less storage space.
+
+> [!success]- Tools for optimizing images
+> Here are a some recommended programs for reducing the size of your images.
+> - **Windows:** [FileOptimizer](https://sourceforge.net/projects/nikkhokkho/)
+> - **macOS:** [ImageOptim](https://imageoptim.com/)
+> - **Linux/Unix** [Trimage](https://trimage.org)
+> 
+> We recommend an optimization rate of 65-75%.
+
+### Lucide icons
+
+[Lucide](https://lucide.dev/icons/) icons can be used alongside detailed elements to provide a visual representation of a feature.
+
+**Example:** In the ribbon on the left, select **Create new canvas** ![[lucide-layout-dashboard.svg|icon]] to create a canvas in the same folder as the active file.
+
+**Guidelines for Lucide Icons**
+
+- Store icons in the `Attachments/icons` folder.
+- Add the prefix `lucide-` before the Lucide icon name.
+
+**Example:** The icon for creating a new canvas should be named `lucide-layout-dashboard`.
+
+- Use the SVG version of the icons available.
+- Icons should be `18` pixels in width, `18` pixels in height, and have a stroke width of `1.5`. You can adjust these settings in the SVG data.
+
+> [!info]- Adjusting size and stroke in an SVG
+> ```html
+> <svg xmlns="http://www.w3.org/2000/svg" width="WIDTH" height="HEIGHT" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="STROKE-WIDTH" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+>```
+
+- Utilize the `icon` alias to tweak the spacing around the icon so that it aligns neatly with the text in the vicinity.
+
+**Example**: `![[image.svg|icon]]`
+
+Remember to optimize icons in the same way you optimize images.

en/Getting started/Glossary.md

@@ -1,50 +1,50 @@
 This glossary includes common Obsidian terminology.
 
-## alias
+## Alias
 
 An **alias** is a type of [[#property]] that defines alternative names for a [[#note]].
 
-## attachment
+## Attachment
 
 An **attachment** is an [[Accepted file formats|accepted file format]] that was created outside of the vault and added later.
 
-## command
+## Command
 
 A **command** is an action that can be performed either by selecting it from the [[Command palette]] or by assigning it to a [[#hotkey]].
 
-## embed
+## Embed
 
 **Embedding** means replacing a reference to external content with the content itself, for example to include an image in your note. See also [[Embedding files]].
 
-## frontmatter
+## Frontmatter
 
 Frontmatter is a way to define [[#property|properties]] by adding [YAML](https://yaml.org/) or [JSON](https://www.json.org/) at the top of the note. See also [[Properties#Property format|Property format]].
 
-## graph
+## Graph
 
 A **graph** is a visualization that highlights connections between [[#note|notes]]. See also [[Graph view]].
 
-## hotkey
+## Hotkey
 
 A **hotkey** is a keyboard shortcut for a [[#command]]. See also [[Custom hotkeys]] and [[Custom hotkeys|How to/Use hotkeys]].
 
-## link
+## Link
 
 A **link** references another note or file. An [[Internal links|internal link]] points to a file located in the current vault. An [[Basic formatting syntax#External links|external link]] points to a location outside the vault, typically a web page.
 
-## main area
+## Main area
 
 The **main area** is the central area of the Obsidian app, where you primarily edit [[#note|notes]].
 
 ## Markdown
 
 Markdown is a markup language for formatting text and the primary file format used for notes in Obsidian, `.md` files. See also [[Basic formatting syntax]].
 
-## note
+## Note
 
 A **note** is a Markdown file inside a [[#vault]].
 
-## plugin
+## Plugin
 
 A **plugin** extends Obsidian with additional features.
 
@@ -53,53 +53,55 @@ A **plugin** extends Obsidian with additional features.
 
 You can [build your own plugin](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin).
 
-## pop-out window
+## Pop-out window
 
 By default, all notes within a vault opens in the same app window. A **pop-out window** lets you open notes from the same vault in separate windows, for example to display on a second screen.
 
 See also [[Pop-out windows]].
 
-## property
+## Property
 
 [[Properties|Properties]] define additional information about a note, such as a due date or author.
 
-## ribbon
+## Ribbon
 
-The **ribbon** is a vertical area that's located on the far left of the Obsidian app. The ribbon contains icons for frequently used actions.
+The **ribbon** functions as a container for frequently used action icons. In the desktop version, it's the vertical area situated on the far left. In the mobile version, it's represented by a menu button (![[lucide-menu.svg|icon]]) on the [[#status bar|status bar]].
+## Sidebar
 
-## sidebar
+An area that contains supporting [[#view|views]] organized as [[#tab|tabs]]. A sidebar can be split into multiple [[#tab group|tab groups]]. 
 
-An area that contains supporting [[#view|views]] organized as [[#tab|tabs]]. A sidebar can be split into multiple [[#tab group|tab groups]]. Obsidian has two sidebars, one on each side of the [[#main area]].
+Obsidian desktop has two sidebars, one on each side of the [[#main area]]. Obsidian's mobile interface features a single hidden sidebar on the left.
 
-## snippet
+## Snippet
 
 A **snippet**, or [[CSS snippets|CSS snippet]], changes the appearance of Obsidian, just like a [[#theme]]. Unlike themes, you can apply multiple snippets at the same time.
 
-## status bar
+## Status bar
 
-The **status bar** is located in the bottom-right corner of the Obsidian app and displays at-a-glance statistics and statuses.
+The **status bar** in the Obsidian application shows you essential statistics and statuses. In the desktop version, you'll find it in the bottom-right corner, while on mobile devices, it's positioned along the bottom of the app.
 
-## tab
+
+## Tab
 
 A **tab** contains a [[#view]]. Tabs can be repositioned within the [[#main area]] and the [[#sidebar|sidebars]]. See also [[Use tabs in Obsidian]].
 
-## tab group
+## Tab group
 
 A **tab group** is a collection of [[#tab|tabs]] in the [[#main area]]. Tabs in a tab group can be stacked.
 
-## tag
+## Tag
 
 A **tag** is a word that starts with a hashtag (#), for example `#book`. Tags are primarily used to find related [[#note|notes]].
 
-## theme
+## Theme
 
 A **theme** changes the appearance of the Obsidian app using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). You can override parts of a theme using [[#snippet|snippets]].
 
-## vault
+## Vault
 
 A **vault** is a folder on your file system which contains [[#note|notes]] and an `.obsidian` folder with Obsidian-specific configuration. See also [[How Obsidian stores data]].
 
-## view
+## View
 
 A **view** displays information, for example the [[Search|Search view]].
 

en/Linking notes and files/Internal links.md

@@ -53,8 +53,8 @@ For example, `[[My note#Heading 1#Heading 2]]`.
 
 > [!tip]- Heading links across the vault
 > You can search for headers to link to from across your vault using the `[[##header]]` syntax. 
-> 
-> ![[linking-to-a-header-with-double-hashtags.png]]
+> ![[internal-links-header.png]]
+
 
 ## Link to a block in a note
 
@@ -76,7 +76,7 @@ Block identifiers can only consist of letters, numbers, and dashes.
 
 > [!tip]- Block links across the vault
 > You can search for blocks to link to from across your vault using the `[[^^block]]` syntax. However, more items qualify as blocks in comparison to [[#Link to a heading in a note|heading links]] so this list will be much longer in comparison.
-> ![[link-to-a-double-block.png]]
+> ![[link-block-heading.png]]
 
 > [!warning] Interoperability
 > Block references are specific to Obsidian and not part of the standard Markdown format. Links containing block references won't work outside of Obsidian.
@@ -102,4 +102,4 @@ For example, `[custom display text](Internal%20links.md)` appears as [custom dis
 > [!note]
 > To preview linked files, you first need to enable [[Page preview]].
 
-To preview a linked file, press `Ctrl` (or `Cmd` on macOS) while hovering the cursor over the link. A preview of the file content appears next to the cursor.
+To preview a linked file, press `Ctrl` (or `Cmd` on macOS) while hovering the cursor over the link. A preview of the file content appears next to the cursor.

en/Obsidian Publish/Customize your site.md

@@ -31,6 +31,8 @@ We recommend that you provide one or more of the following dimensions:
 - `favicon-192x192.png`
 - `favicon-196x196.png`
 
+You have flexibility in placing favicons anywhere within the vault, as long as they are published to your site.
+
 ## Use a community theme
 
 To use one of the community themes for your site:

en/Plugins/Canvas.md

@@ -8,7 +8,7 @@ To start using Canvas, you first need to create a file to hold your canvas. You
 
 **Ribbon:**
 
-- In the ribbon on the left, select **Create new canvas** (four rectangles icon) to create a canvas in the same folder as the active file.
+- In the ribbon on the left, select **Create new canvas** ![[lucide-layout-dashboard.svg|icon]] to create a canvas in the same folder as the active file.
 
 **Command palette:**
 
@@ -240,4 +240,4 @@ To change the zoom level back to the default, select **Reset zoom** in the zoom
 
 We have made some quick videos to demonstrate some advanced use cases of Canvas.
 
-You can [check out all 72 tips here](https://obsidian.md/canvas#protips). Please note that the tip videos are only visible on desktop.
+You can [check out all 72 tips here](https://obsidian.md/canvas#protips). Please note that the tip videos are only visible on desktop.

en/Plugins/Daily notes.md

@@ -10,8 +10,10 @@ By default, Obsidian creates a new empty note named after today's date in the YY
 
 > [!tip] If you prefer to have your daily notes in a separate folder, you can set the <u>New file location</u> under plugin options to change where Obsidian creates new daily notes.
 
-> [!example]- Automated note sorting
-> You can automatically organize your daily notes into folders using the **New File Location** feature. For instance, if you set the file location as `Journal/YYYY/MMMM/YYYY-MMM-DD`, your notes will be created as `Journal/2023/January/2023-Jan-01`. 
+> [!example]- Automatic subfolders
+> You can automatically organize your daily notes into folders using the **Date format** feature.
+> 
+> For instance, if you set the file location as `Journal/YYYY/MMMM/YYYY-MMM-DD`, your notes will be created as `Journal/2023/January/2023-Jan-01`. 
 > 
 > You can explore more formatting options on the [momentJS](https://momentjs.com/docs/#/displaying/format/) documentation site.
 

en/User interface/Workspace/Ribbon.md

@@ -2,7 +2,7 @@ The ribbon is a space for common commands.
 
 On desktop, it occupies the vertical space at the very left of the interface. It’s part of the left [[Sidebar]] and is always visible, even if the left sidebar is closed.
 
-On mobile, when you’re not editing a note, you can access the ribbon by tapping the **Menu option** (three vertical bar icon) at the bottom right corner of the app.
+On mobile, when you’re not editing a note, you can access the ribbon by tapping the **Menu option** (![[lucide-menu.svg|icon]]) at the bottom right corner of the app.
 
 ## Actions
 

en/publish.css

@@ -7,6 +7,12 @@ img {
 	border-radius: 4px;
 }
 
+img[alt*="icon"] {
+	vertical-align: text-bottom;
+	margin-left: -0.1em;
+	margin-right: -0.1em;
+}
+
 .site-body-left-column-site-logo {
 	text-align: left;
 	margin-bottom: 24px;
@@ -157,4 +163,3 @@ img {
 		display: none;
 	}
 }
-