feat: image alignment options

__tests__/fixtures/image-tests.mdx

@@ -1,35 +1,21 @@
-We're excited you're here! :blue_heart:
+We’re excited you're here! :blue_heart:
 
-<Image src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png">
-  Owlbert!
+<Image src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png" width="200px">
+  Caption
 </Image>
 
-<Table align={["left","left","left"]}>
-  <thead>
-    <tr>
-      <th style={{ textAlign: "left" }} />
-
-      <th style={{ textAlign: "left" }} />
-
-      <th style={{ textAlign: "left" }} />
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td style={{ textAlign: "left" }} />
-
-      <td style={{ textAlign: "left" }} />
-
-      <td style={{ textAlign: "left" }} />
-    </tr>
+<Image align="alignLeft" src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png" width="200px">
+  Align Left
+</Image>
 
-    <tr>
-      <td style={{ textAlign: "left" }} />
+<Image align="alignRight" src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png" width="200px">
+  Align Right
+</Image>
 
-      <td style={{ textAlign: "left" }} />
+<Image align="floatLeft" src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png" width="200px">
+  Float Left
+</Image>
 
-      <td style={{ textAlign: "left" }} />
-    </tr>
-  </tbody>
-</Table>
+<Image align="floatRight" src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png" width="200px">
+  Float Right
+</Image>

components/Embed/style.scss

@@ -6,26 +6,30 @@
     border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
     border-radius: 3px;
     background: transparent;
-    box-shadow: inset 0 0 0 1px rgba(black, .15);
-    transition: .3s ease;
+    box-shadow: inset 0 0 0 1px rgba(black, 0.15);
+    transition: 0.3s ease;
     &:hover {
       background: var(--md-code-background, #f6f8fa);
-      box-shadow: inset 0 0 0 1px rgba(black, .1);
+      box-shadow: inset 0 0 0 1px rgba(black, 0.1);
     }
     @at-root .markdown-body > #{$B}_hasImg:nth-of-type(odd) {
       margin-right: 30px;
       padding-right: 0;
-      #{$B}-link { flex-direction: row-reverse }
+      #{$B}-link {
+        flex-direction: row-reverse;
+      }
       #{$B}-img {
-        margin-left: .88em;
+        margin-left: 0.88em;
         margin-right: -30px;
-        box-shadow: -.3em .3em .9em -.3em rgba(black, .15);
+        box-shadow: -0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
       }
     }
     @at-root .markdown-body > #{$B}_hasImg:nth-of-type(even) {
       margin-left: 30px;
       padding-left: 0;
-      #{$B}-img { margin-left: -30px }
+      #{$B}-img {
+        margin-left: -30px;
+      }
     }
   }
   &:empty {
@@ -35,7 +39,7 @@
   &-media {
     display: flex;
     justify-content: center;
-    >:only-child {
+    > :only-child {
       flex: 1;
       margin: -15px;
       border-radius: 0 !important;
@@ -52,7 +56,8 @@
   &-body {
     flex: 1;
     line-height: 1.3;
-    &, #{$B}-title {
+    &,
+    #{$B}-title {
       font-size: 1.15em;
       overflow: hidden;
       white-space: nowrap;
@@ -61,10 +66,10 @@
     #{$B}-provider {
       display: block;
       text-decoration-color: transparent !important;
-      opacity: .88;
+      opacity: 0.88;
     }
     &-url {
-      opacity: .75;
+      opacity: 0.75;
     }
   }
 
@@ -84,28 +89,28 @@
       padding: 0;
       font-size: inherit !important;
     }
-    transition: .2 ease;
+    transition: 0.2 ease;
     code {
       opacity: 0.8;
     }
-   }
+  }
 
   &-img {
     width: 5em;
     max-width: 5em;
-    margin: 0 .88em 0 0;
+    margin: 0 0.88em 0 0;
     padding: 4px;
     background: white;
-    border: 1px solid rgba(black, .15);
+    border: 1px solid rgba(black, 0.15);
     border-radius: 3px;
     transition: inherit;
-    box-shadow: .3em .3em .9em -.3em rgba(black, .15);
+    box-shadow: 0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
   }
   &:not(:hover) #{$B}-img {
-    box-shadow: 0 .25em 1em -.5em rgba(black, .133);
+    box-shadow: 0 0.25em 1em -0.5em rgba(black, 0.133);
   }
   &:hover #{$B}-img {
-    border: 1px solid rgba(black, .2);
+    border: 1px solid rgba(black, 0.2);
   }
 
   &-favicon {
@@ -115,4 +120,4 @@
     margin-right: 6px;
     margin-bottom: 12px;
   }
-}
+}

components/Image/index.tsx

@@ -62,7 +62,7 @@ const Image = (Props: ImageProps) => {
 
   if (children || caption) {
     return (
-      <figure>
+      <figure className={`figure-align-${align}`} style={{ maxWidth: width }}>
         <span
           aria-label={alt}
           className={`img lightbox ${lightbox ? 'open' : 'closed'}`}

components/Image/style.scss

@@ -28,45 +28,81 @@
     outline: none !important;
     vertical-align: middle;
 
+    &.img-align-floatRight,
     &.img-align-right,
     &[align='right'],
     &[alt~='align-right'] {
       @extend %img-align-right;
     }
 
+    &.img-align-floatLeft,
     &.img-align-left,
     &[align='left'],
     &[alt~='align-left'] {
       @extend %img-align-left;
-
     }
+
+    &.img-align-alignCenter,
     &.img-align-center,
     &[align='middle'], // hack to fix Firefox; see: https://stackoverflow.com/a/45901819/1341949
     &[align='center'],
     &[alt~='align-center'] {
       @extend %img-align-center;
     }
 
+    &.img-align-alignLeft {
+      display: block;
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &.img-align-alignRight {
+      display: block;
+      margin-right: 0;
+      margin-left: auto;
+    }
+
     &[width='smart'] {
       max-height: 450px;
       max-width: 100%;
       width: auto;
     }
 
     &.border {
-      border: 1px solid rgba(0, 0, 0, 0.2);
+      border: 1px solid var(--color-border-default);
+      border-radius: var(--border-radius);
     }
   }
 
   figure {
     margin: 15px auto;
 
     figcaption {
-      font-size: 0.93em;
-      font-style: italic;
+      color: var(--color-text-minimum);
+      font-size: 0.8em;
       margin-top: 8px;
       text-align: center;
     }
+
+    &.figure-align-floatRight {
+      @extend %img-align-right;
+    }
+
+    &.figure-align-floatLeft {
+      @extend %img-align-left;
+    }
+
+    &.figure-align-alignLeft {
+      display: block;
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &.figure-align-alignRight {
+      display: block;
+      margin-right: 0;
+      margin-left: auto;
+    }
   }
 
   > .img,
@@ -82,7 +118,8 @@
 
   .lightbox.open {
     align-items: center;
-    background: rgba(white, 0.966);
+    backdrop-filter: blur(var(--xs));
+    background-color: rgba(var(--color-bg-page-rgb), 0.95);
     display: flex;
     flex-flow: nowrap column;
     height: 100vh;
@@ -100,6 +137,7 @@
 
     // Close Button
     &::after {
+      color: var(--color-text-muted);
       content: '\f00d';
       cursor: pointer;
       display: inline-block;
@@ -110,7 +148,7 @@
       right: 1em;
       text-rendering: auto;
       top: 1em;
-      transform: scale(1.5);
+      transform: scale(1);
       transition: 0.3s 0.3s ease-in;
     }
 
@@ -123,9 +161,10 @@
       align-items: center;
       box-sizing: content-box;
       display: inline-flex;
+      flex-direction: column;
       justify-content: center;
       margin: auto;
-      min-height: calc(100vh + 8px);
+      min-height: 100vh;
       padding: 0;
       position: relative;
     }
@@ -139,7 +178,11 @@
 
       &.border,
       &:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
-        box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 0.2);
+        border-radius: var(--xs);
+        box-shadow:
+          0 0 0 1px var(--color-border-default),
+          0 2px 6px rgba(black, 0.05),
+          0 4px 12px rgba(black, 0.05);
       }
 
       &[src$='svg'] {

docs/images.md

@@ -1,16 +1,17 @@
 ---
-title: "Images"
+title: 'Images'
 category: 5fdf7610134322007389a6ed
 hidden: false
 ---
+
 ## Syntax
+
 ```
 ![Alt text](https://cdn.path.to/some/image.jpg "This is some image...")
 ```
 
 ## Examples
 
-![Bro eats pizza and makes an OK gesture.](https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg "Pizza Face")
-
+![Bro eats pizza and makes an OK gesture.](https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg 'Pizza Face')
 
-<Image src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" caption="lol he's eating pizza!" height="100px" align="center" border="true" />
+<Image src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" caption="lol he’s eating pizza!" height="100px" align="center" border="true" />

styles/main.scss

@@ -16,5 +16,5 @@
 .markdown-body {
   @include gfm;
 
-  font-size: var(--markdown-font-size, 14px);
+  font-size: var(--markdown-font-size, 15px);
 }