Nest all content into snippets

snippets/css/s/full-width.md

@@ -0,0 +1,59 @@
+---
+title: Full-width image
+type: snippet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: yellow-white-mug-2
+dateModified: 2021-01-07T10:14:46+02:00
+---
+
+Creates a full-width image.
+
+- Use `left: 50%` and `right: 50%` to position the image in the middle of the parent element.
+- Use `margin-left: -50vw` and `margin-right: -50vw` to offset the image on both sides relative to the size of the viewport.
+- Use `width: 100vw` and `max-width: 100vw` to size the image relative to the viewport.
+
+```html
+<main>
+  <h4>Lorem ipsum dolor sit amet</h4>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
+    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
+    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
+    eu, faucibus interdum felis.
+  </p>
+  <p>
+    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
+  </p>
+  <p>
+    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
+    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
+    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
+    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
+  </p>
+</main>
+```
+
+```css
+main {
+  margin: 0 auto;
+  max-width: 640px;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+.full-width {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  max-width: 100vw;
+  width: 100vw;
+}
+```