[blog] Fix the look and feel of the media description (mui#36069)

CHANGELOG.old.md

@@ -2192,7 +2192,7 @@ We are proud of the community. Let's keep this trend going 🚀.
 
 ### Core
 
-- [test] Build all `@material-ui/*` packages for Codesandbox CI (#18100) @eps1lon
+- [test] Build all `@material-ui/*` packages for CodeSandbox CI (#18100) @eps1lon
 - [test] Fix tests failing on subsequent runs in watchmode (#18076) @eps1lon
 - [test] Fix tests polluting DOM (#18163) @eps1lon
 - [core] Batch small changes (#18041) @oliviertassinari

CONTRIBUTING.md

@@ -284,9 +284,9 @@ In case you missed something, [we have a real example that can be used as a summ
 
 ## How can I use a change that wasn't released yet?
 
-[Codesandbox CI](https://codesandbox.io/docs/ci) is used to publish a working version of the packages for each pull request, "a preview".
+[CodeSandbox CI](https://codesandbox.io/docs/ci) is used to publish a working version of the packages for each pull request, "a preview".
 
-In practice, you can check the Codesandbox CI status of a pull request to get the URL needed to install these preview packages:
+In practice, you can check the CodeSandbox CI status of a pull request to get the URL needed to install these preview packages:
 
 ```diff
 diff --git a//package.json b//package.json
@@ -302,7 +302,7 @@ index 791a7da1f4..a5db13b414 100644
      "@mui/system": "^5.0.0-alpha.16",
 ```
 
-Alternatively, you can open the Netlify preview of the documentation, and open any demo in Codesandbox. The documentation automatically configures the dependencies to use the preview packages.
+Alternatively, you can open the Netlify preview of the documentation, and open any demo in CodeSandbox. The documentation automatically configures the dependencies to use the preview packages.
 
 You can also package and test your changes locally.
 The following example shows how to package `@mui/material`, but you can package any MUI module with this process:

docs/data/material/getting-started/learn/learn.md

@@ -35,14 +35,14 @@ The following is a curated list of some of the best third-party resources we've
 
 ### Free
 
-- [**Material UI v5 Crash Course**](https://www.youtube.com/watch?v=o1chMISeTC0) video by Laith Harb: everything you need to know to start building with the latest version of Material UI.
+- **[Material UI v5 Crash Course](https://www.youtube.com/watch?v=o1chMISeTC0)** video by Laith Harb: everything you need to know to start building with the latest version of Material UI.
 
-- [**React + Material UI - From Zero to Hero**](https://www.youtube.com/playlist?list=PLDxCaNaYIuUlG5ZqoQzFE27CUOoQvOqnQ) video series by The Atypical Developer: build along with this in-depth series, from basic installation through advanced component implementation.
+- **[React + Material UI - From Zero to Hero](https://www.youtube.com/playlist?list=PLDxCaNaYIuUlG5ZqoQzFE27CUOoQvOqnQ)** video series by The Atypical Developer: build along with this in-depth series, from basic installation through advanced component implementation.
 
-- [**Next.js 11 Setup with Material UI v5**](https://www.youtube.com/watch?v=IFaFFmPYyMI) by Leo Roese: learn how to integrate Material UI into your Next.js app, using Emotion as the style engine.
+- **[Next.js 11 Setup with Material UI v5](https://www.youtube.com/watch?v=IFaFFmPYyMI)** by Leo Roese: learn how to integrate Material UI into your Next.js app, using Emotion as the style engine.
 
-- [**Material UI v5 Crash Course + Intro to React (2022 Edition)**](https://www.youtube.com/watch?v=_W3uuxDnySQ) by Anthony Sistilli: how and why to use Material UI, plus guidance on theming and style customization.
+- **[Material UI v5 Crash Course + Intro to React (2022 Edition)](https://www.youtube.com/watch?v=_W3uuxDnySQ)** by Anthony Sistilli: how and why to use Material UI, plus guidance on theming and style customization.
 
-- [**Material UI v5 Tutorial Playlist**](https://www.youtube.com/playlist?list=PLlR2O33QQkfXnZMMZC0y22gLayBbB1UQd) by Nikhil Thadani (Indian Coders): a detailed playlist covering almost every component of Material UI with Create React App.
+- **[Material UI v5 Tutorial Playlist](https://www.youtube.com/playlist?list=PLlR2O33QQkfXnZMMZC0y22gLayBbB1UQd)** by Nikhil Thadani (Indian Coders): a detailed playlist covering almost every component of Material UI with Create React App.
 
-- [**The Clever Dev**](https://www.youtube.com/channel/UCb6AZy0_D1y661PMZck3jOw) and [**The Smart Devpreneur**](https://smartdevpreneur.com/category/javascript/material-ui/) by Jon M: dozens of high-quality videos and articles digging deep into the nuts and bolts of Material UI.
+- **[The Clever Dev](https://www.youtube.com/channel/UCb6AZy0_D1y661PMZck3jOw)** and **[The Smart Devpreneur](https://smartdevpreneur.com/category/javascript/material-ui/)** by Jon M: dozens of high-quality videos and articles digging deep into the nuts and bolts of Material UI.

docs/data/material/guides/routing/routing-zh.md

@@ -53,7 +53,7 @@ const theme = createTheme({
 
 ## `component` 属性
 
-You can achieve the integration with third-party routing libraries with the `component` prop. You can learn more about this prop in the [**composition guide**](/material-ui/guides/composition/#component-prop).
+You can achieve the integration with third-party routing libraries with the `component` prop. You can learn more about this prop in the [composition guide](/material-ui/guides/composition/#component-prop).
 
 ### Link
 

docs/data/material/guides/routing/routing.md

@@ -63,7 +63,7 @@ In the event you need to provide a richer structure, see the next section.
 ## `component` prop
 
 You can achieve the integration with third-party routing libraries with the `component` prop.
-You can learn more about this prop in the [**composition guide**](/material-ui/guides/composition/#component-prop).
+You can learn more about this prop in the **[composition guide](/material-ui/guides/composition/#component-prop)**.
 
 ### Link
 

docs/pages/blog/2020.md

@@ -60,7 +60,7 @@ We have achieved most of what we could have hoped for.
 ## Looking at 2021
 
 2020 was great, 2021 is going to be even more exciting!
-We will continue in the same direction, it's still [**day one**](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm). Here is a breakdown of our [roadmap](https://v4.mui.com/discover-more/roadmap/).
+We will continue in the same direction, it's still **[day one](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm)**. Here is a breakdown of our [roadmap](https://v4.mui.com/discover-more/roadmap/).
 
 ### Branding
 

docs/pages/blog/2021.md

@@ -104,7 +104,7 @@ I have been involved on MUI for 7 years and almost 3 years full-time now.
 It's amazing to see the progress the library has done [since then](https://v0.mui.com/#/components/app-bar).
 But at the same time, I'm astonished by how far we can still push the mission forward.
 My experience has been that the more we improve the library, the more we envision future ways to do it better.
-It's still [**day 1**](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm).
+It's still **[day 1](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm)**.
 
 What's our mission? To empower as many people as possible to build great UIs, faster.
 

docs/pages/blog/build-layouts-faster-with-grid-v2.md

@@ -120,17 +120,18 @@ With the addition of CSS variables and the removal of the `item` prop, there are
 As a bonus, a grid container automatically inherits row and column spacing values from the root grid container, unless they are specified directly on the component.
 
 ```js
-import Grid from '@mui/material/Unstable_Grid2`;
+import Grid from '@mui/material/Unstable_Grid2';
 
 // root grid container
 <Grid container spacing={2}>
   <Grid>...</Grid>
-  <Grid container> {/* inherits spacing from the root container */}
+  <Grid container>
+    {/* inherits spacing from the root container */}
     <Grid>...</Grid>
     <Grid>...</Grid>
   </Grid>
   <Grid>...</Grid>
-</Grid>
+</Grid>;
 ```
 
 ## Future plan and migration

docs/pages/blog/date-pickers-stable-v5.md

@@ -83,7 +83,8 @@ And the adoption speed across versions is very encouraging.
 Over 40% of users are already using the beta versions.
 
 <img src="/static/blog/date-pickers-stable-v5/date-picker-versions.png" style="width: 796px; margin-top: 16px; aspect-ratio: 168/89;" loading="lazy" alt="Evolution of downloaded version of @mui/x-data-pickers" />
-<p class="blog-description" style="text-align: center;">Relative distribution of `@mui/x-date-pickers` versions between June and August.</p>
+
+<p class="blog-description">Relative distribution of `@mui/x-date-pickers` versions between June and August.</p>
 
 ## Installation and migration from `@mui/lab`
 

docs/pages/blog/december-2019-update.md

@@ -34,15 +34,15 @@ But this summary is just scratching the surface. We have accepted 168 commits fr
 
 _(We'll do our best, no guarantee!)_
 
-- 💄 We will keep working on a new [pagination](https://github.com/mui/material-ui/pull/19049) component. You can already [preview it](https://deploy-preview-19049--material-ui.netlify.app/components/pagination/) (lead by [**@mbrookes**](https://github.com/mbrookes)).
+- 💄 We will keep working on a new [pagination](https://github.com/mui/material-ui/pull/19049) component. You can already [preview it](https://deploy-preview-19049--material-ui.netlify.app/components/pagination/) (lead by **[@mbrookes](https://github.com/mbrookes)**).
 
   ![Pagination](/static/blog/december-2019-update/pagination.png)
 
-- 📅 We will keep working on a major upgrade of the [date/time picker](https://github.com/mui/material-ui-pickers/issues/1293) components. We are working on desktop and range support (lead by [**@dmtrKovalenko**](https://github.com/dmtrKovalenko)).
+- 📅 We will keep working on a major upgrade of the [date/time picker](https://github.com/mui/material-ui-pickers/issues/1293) components. We are working on desktop and range support (lead by **[@dmtrKovalenko](https://github.com/dmtrKovalenko)**).
 
   ![Date picker](/static/blog/december-2019-update/date-picker.png)
 
-- 🧮 We will keep working on a new [data grid](https://github.com/mui/material-ui/pull/18872) component. You can already [preview it](https://deploy-preview-18872--material-ui.netlify.app/components/data-grid/) (lead by [**@oliviertassinari**](https://github.com/oliviertassinari)).
+- 🧮 We will keep working on a new [data grid](https://github.com/mui/material-ui/pull/18872) component. You can already [preview it](https://deploy-preview-18872--material-ui.netlify.app/components/data-grid/) (lead by **[@oliviertassinari](https://github.com/oliviertassinari)**).
 
   ![Data grid](/static/blog/december-2019-update/data-grid.png)
 

docs/pages/blog/first-look-at-joy.md

@@ -67,7 +67,7 @@ We meticulously constructed the CSS variables for each component so you can seam
 One good example is the input component, where the border radius of the input's children automatically adapts to that of the input.
 These small details mean the components adapt to different scenarios, which saves considerable time when customizing the components by avoiding manual adjustments.
 
-<img src="/static/blog/first-look-at-joy/component-integration.png" style="width: 692px; margin-top: 16px; margin-bottom: 8px;" alt="Screenshot of two text inputs, one being native from Joy UI and another with border-radius customized" />
+<img src="/static/blog/first-look-at-joy/component-integration.png" style="width: 692px; margin-top: 16px;" alt="Screenshot of two text inputs, one being native from Joy UI and another with border-radius customized" />
 
 <p class="blog-description">When customizing the input's border radius, the icon button inside of it adapts automatically.</p>
 

docs/pages/blog/lab-date-pickers-to-mui-x.md

@@ -20,7 +20,7 @@ This means we'll be dedicating even more time and effort to these complex compon
 
 Date and time pickers are interface controls that enable the user to select a date (or time) from a menu.
 
-<img src="/static/blog/lab-date-pickers-to-mui-x/date-time-picker.png" style="width: 796px; margin-top: 16px; margin-bottom: 16px;" alt="Date and time picker component" />
+<img src="/static/blog/lab-date-pickers-to-mui-x/date-time-picker.png" style="width: 796px; margin-top: 16px;" alt="Date and time picker component" />
 
 <p class="blog-description">Date and time pickers using the default Material UI design</p>
 
@@ -76,8 +76,9 @@ Follow the [migration steps](/x/react-date-pickers/migration-lab/) by updating t
 +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
 -import { DatePicker, DateRangePicker } from '@mui/lab';
-+import { DatePicker } from '@mui/x-date-pickers'; // DatePicker is also available in `@mui/x-date-pickers-pro`
++import { DatePicker } from '@mui/x-date-pickers';
 +import { DateRangePicker } from '@mui/x-date-pickers-pro';
+ // DatePicker is also available in `@mui/x-date-pickers-pro`
 ```
 
 We have prepared a codemod to help you migrate your codebase from `@mui/lab` to `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`:

docs/pages/blog/material-ui-is-now-mui.md

@@ -11,10 +11,10 @@ card: true
 
 Starting today we are evolving our brand identity to clarifying the difference between our company and our products.
 
-- Material UI: the organization is now called [**MUI**](https://github.com/mui/).
-- Material UI: the set of foundational MIT React components is now called [**MUI Core**](https://github.com/mui/material-ui).
+- Material UI: the organization is now called **[MUI](https://github.com/mui)**.
+- Material UI: the set of foundational MIT React components is now called **[MUI Core](https://github.com/mui/material-ui)**.
 - Material UI: the Material Design components developed by MUI. Also, we ditched the hyphen!
-- Material UI X: the set of advanced React components is now called [**MUI X**](https://github.com/mui/mui-x).
+- Material UI X: the set of advanced React components is now called **[MUI X](https://github.com/mui/mui-x)**.
 
 Our previous name was no longer serving our areas of focus.
 We have grown our product offering.

docs/pages/blog/material-ui-v1-is-out.md

@@ -15,7 +15,7 @@ tags: ['Company']
 It has taken us two years to do it, but Material UI v1 has finally arrived!
 We are so excited about this release, as it's setting a new course for the project. Thank you to _everyone_, especially to [the team](/about/), and to everyone who's contributed code, issue triage, and support. **Thank you.**
 
-✨✨✨ See the [**1.0.0 Release Note**](https://github.com/mui/material-ui/releases/tag/v1.0.0) on GitHub. ✨✨✨
+✨✨✨ See the **[1.0.0 Release Note](https://github.com/mui/material-ui/releases/tag/v1.0.0)** on GitHub. ✨✨✨
 
 <iframe src="https://codesandbox.io/embed/4j7m47vlm4" width="100%" height="300px" frameborder=0></iframe>
 
@@ -31,7 +31,7 @@ Material UI v1 is our second stab at the execution of [the vision](/material-ui/
 We want Material UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. Material UI is not only an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. We are even allowing developers to build non Material themes on top of Material UI components. We will soon open source examples of this.
 
 - **CSS-in-JS**. We have seen [a great potential for **inline-styles** in the past](https://github.com/mui/material-ui/issues/30). It was an opportunity to solve four problems at once: removing the LESS toolchain dependency, allowing dynamic styles, allowing style code splitting and make overrides simpler.
-  Unfortunately, the [**execution didn't deliver**](https://github.com/mui/material-ui/issues/4066). We were lacking key features only available in CSS: media queries, pseudo selectors, pseudo elements, browser prefixes. Debugging was much harder. Overriding styles was very challenging – developers always had to look the implementation, and couldn't use CSS without relying on !important.
+  Unfortunately, the **[execution didn't deliver](https://github.com/mui/material-ui/issues/4066)**. We were lacking key features only available in CSS: media queries, pseudo selectors, pseudo elements, browser prefixes. Debugging was much harder. Overriding styles was very challenging – developers always had to look the implementation, and couldn't use CSS without relying on !important.
   Two years ago, we decided to move away [from inline-styles toward **CSS-in-JS**](https://github.com/oliviertassinari/a-journey-toward-better-style). We are very happy with the outcome. We would like to thank [@kof](https://github.com/kof) for the awesome work he has done with [JSS](https://github.com/cssinjs/jss), the internal solution we use. It's allowing us to be [interoperable](/material-ui/guides/interoperability/) with all the other styling solutions.
 
 - **Theme**. You can't have a good customizability story without a good theming story. We have been redesigning the theme. It's a [JavaScript object](/material-ui/customization/default-theme/) that contains all the variables and utility functions you might need to style your components: a palette, a typography, breakpoints helpers, transition helpers, etc.