@openwarelabs/blocks 0.10.1 → 0.11.0

package/dist/styles.css

@@ -1433,6 +1433,20 @@
     margin: 48px 0 0 224px;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-blog03__body > img,
+.ow-blog03__body > video,
+.ow-blog03__body > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 760px) {
     .ow-blog03 {
         padding: 72px var(--ow-page-gutter);
@@ -2070,6 +2084,20 @@
     color: var(--ow-primary-text);
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-cta03__inner > img,
+.ow-cta03__inner > video,
+.ow-cta03__inner > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-cta03__inner {
         grid-template-columns: minmax(0, 1fr);
@@ -4132,6 +4160,20 @@
     flex: 1;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-error-page02__visual > img,
+.ow-error-page02__visual > video,
+.ow-error-page02__visual > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-error-page02__main {
         grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
@@ -4827,6 +4869,20 @@
     max-width: 480px;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-features02__stage > img,
+.ow-features02__stage > video,
+.ow-features02__stage > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-features02__row,
     .ow-features02__row:nth-child(even) {
@@ -4970,6 +5026,20 @@
     padding: 32px 32px 0;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-features03__visual > img,
+.ow-features03__visual > video,
+.ow-features03__visual > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-features03__header {
         grid-template-columns: minmax(0, 1fr);
@@ -5057,6 +5127,20 @@
     margin-top: 28px;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-features04__panel > img,
+.ow-features04__panel > video,
+.ow-features04__panel > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 760px) {
     .ow-features04 {
         padding: 72px var(--ow-page-gutter);
@@ -5137,6 +5221,20 @@
     margin-top: 40px;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-features05__visual > img,
+.ow-features05__visual > video,
+.ow-features05__visual > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-features05__inner {
         grid-template-columns: minmax(0, 1fr);
@@ -6088,6 +6186,9 @@
 }
 
 .ow-header01__brand {
+    /* The name stays on one line beside the buttons, however narrow the screen. */
+    flex-shrink: 0;
+    white-space: nowrap;
     display: inline-flex;
     align-items: center;
     gap: 9px;
@@ -6208,6 +6309,9 @@
 }
 
 .ow-header02__brand {
+    /* The name stays on one line beside the buttons, however narrow the screen. */
+    flex-shrink: 0;
+    white-space: nowrap;
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -6490,6 +6594,9 @@
 }
 
 .ow-header03__brand {
+    /* The name stays on one line beside the buttons, however narrow the screen. */
+    flex-shrink: 0;
+    white-space: nowrap;
     display: inline-flex;
     align-items: center;
     gap: 10px;
@@ -6737,6 +6844,9 @@
 }
 
 .ow-header04__brand {
+    /* The name stays on one line beside the buttons, however narrow the screen. */
+    flex-shrink: 0;
+    white-space: nowrap;
     display: inline-flex;
     align-items: center;
     justify-self: start;
@@ -6880,6 +6990,9 @@
 }
 
 .ow-header05__brand {
+    /* The name stays on one line beside the buttons, however narrow the screen. */
+    flex-shrink: 0;
+    white-space: nowrap;
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -7099,6 +7212,20 @@
     mask-image: linear-gradient(to bottom, #000 70%, transparent);
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-hero01__visual > img,
+.ow-hero01__visual > video,
+.ow-hero01__visual > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 760px) {
     .ow-hero01 {
         padding-top: 72px;
@@ -7177,6 +7304,20 @@
     color: var(--ow-primary-text);
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-hero02__inner > img,
+.ow-hero02__inner > video,
+.ow-hero02__inner > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 960px) {
     .ow-hero02 {
         padding-top: 88px;
@@ -7322,6 +7463,20 @@
     }
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-hero03__inner > img,
+.ow-hero03__inner > video,
+.ow-hero03__inner > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 760px) {
     .ow-hero03 {
         padding: 72px var(--ow-page-gutter) 80px;
@@ -7576,6 +7731,20 @@
     vertical-align: middle;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-hero06__inner > img,
+.ow-hero06__inner > video,
+.ow-hero06__inner > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 960px) {
     .ow-hero06 {
         padding-top: 88px;
@@ -9633,6 +9802,19 @@
     padding-top: 1px;
 }
 
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-onboarding03__dialog .ow-dialog__body > img,
+.ow-onboarding03__dialog .ow-dialog__body > video,
+.ow-onboarding03__dialog .ow-dialog__body > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 /* page-headings/PageHeading01/PageHeading01.css */
 .ow-page-heading01,
 .ow-page-heading01 *,
@@ -11970,6 +12152,20 @@
     padding: 1px 8px;
 }
 
+
+/* A screenshot passed as the picture (an <img>, <picture> or <video>) fills its place, keeps its proportions and
+   takes the card's corners. Drawn pictures are left as they are. */
+
+.ow-sign-in02__plate-inner > img,
+.ow-sign-in02__plate-inner > video,
+.ow-sign-in02__plate-inner > picture > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+}
+
 @media (max-width: 1024px) {
     .ow-sign-in02__form-side {
         padding: 24px 28px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwarelabs/blocks",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Openware UI blocks: whole page sections (heroes and more) as React components that take their content as props.",
   "license": "MIT",
   "author": "Alexander Silver",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@openwarelabs/ui": "^0.10.1",
+    "@openwarelabs/ui": "^0.11.0",
     "react": ">=18",
     "react-dom": ">=18"
   },