Update page_code_base.html

Author: lumosframework

page_code_base.html

@@ -1,6 +1,43 @@
 <style>
 /* variables */
 :root {
+	/* grid */
+	--column-count: 12;
+	--grid-main: repeat(var(--column-count), minmax(0, 1fr));
+	--grid-1: repeat(1, minmax(0, 1fr));
+	--grid-2: repeat(2, minmax(0, 1fr));
+	--grid-3: repeat(3, minmax(0, 1fr));
+	--grid-4: repeat(4, minmax(0, 1fr));
+	--grid-5: repeat(5, minmax(0, 1fr));
+	--grid-6: repeat(6, minmax(0, 1fr));
+	--grid-7: repeat(7, minmax(0, 1fr));
+	--grid-8: repeat(8, minmax(0, 1fr));
+	--grid-9: repeat(9, minmax(0, 1fr));
+	--grid-10: repeat(10, minmax(0, 1fr));
+	--grid-11: repeat(11, minmax(0, 1fr));
+	--grid-12: repeat(12, minmax(0, 1fr));
+	--grid-gap-total: calc(var(--grid-gap--main) * (var(--column-count) - 1));
+	--grid-width: calc(min(var(--max-width--main), 100vw) - (var(--padding-horizontal--main) * 2));
+	--column-width: calc((var(--grid-width) - var(--grid-gap-total)) / var(--column-count) + var(--grid-gap--main));
+	--column-width--1: calc(var(--column-width) * 1 - var(--grid-gap--main));
+	--column-width--2: calc(var(--column-width) * 2 - var(--grid-gap--main));
+	--column-width--3: calc(var(--column-width) * 3 - var(--grid-gap--main));
+	--column-width--4: calc(var(--column-width) * 4 - var(--grid-gap--main));
+	--column-width--5: calc(var(--column-width) * 5 - var(--grid-gap--main));
+	--column-width--6: calc(var(--column-width) * 6 - var(--grid-gap--main));
+	--column-width--7: calc(var(--column-width) * 7 - var(--grid-gap--main));
+	--column-width--8: calc(var(--column-width) * 8 - var(--grid-gap--main));
+	--column-width--9: calc(var(--column-width) * 9 - var(--grid-gap--main));
+	--column-width--10: calc(var(--column-width) * 10 - var(--grid-gap--main));
+	--column-width--11: calc(var(--column-width) * 11 - var(--grid-gap--main));
+	--column-width--12: calc(var(--column-width) * 12 - var(--grid-gap--main));
+	--breakout-gutter: minmax(calc(var(--padding-horizontal--main) - var(--grid-gap--main)), 1fr);
+	--breakout-remaining: calc(var(--max-width--main) - (var(--padding-horizontal--main) * 2));
+	--breakout-start: [full-start] var(--breakout-gutter) [content-start];
+	--breakout-end: [content-end] var(--breakout-gutter) [full-end];
+	--grid-breakout-single: var(--breakout-start) minmax(0, var(--breakout-remaining)) var(--breakout-end);
+	--grid-breakout: var(--breakout-start) repeat(var(--column-count), minmax(0, calc((var(--breakout-remaining) - var(--grid-gap-total)) / var(--column-count)))) var(--breakout-end);
+	/* others */
 	--font-weight--inherit: inherit;
 	--font-weight--100: 100;
 	--font-weight--200: 200;
@@ -21,15 +58,15 @@
 
 /* default styles */
 body {
+	font-weight: var(--text-main--font-weight);
+	text-transform: var(--text-main--text-transform);
 	font-smoothing: antialiased;
 	-webkit-font-smoothing: antialiased;
 }
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, p, label, figure, blockquote {
 	font-size: inherit;
 	line-height: inherit;
 	font-weight: inherit;
-}
-h1, h2, h3, h4, h5, h6, p, label, blockquote {
 	margin-top: 0;
 	margin-bottom: 0;
 }
@@ -42,15 +79,21 @@
 img::selection {
 	background: transparent;
 }
-:is(h1, h2, h3, h4, h5, h6, p) a {
+a:not([class]) {
 	text-decoration: underline;
 }
-.w-richtext > *:first-child {
+.u-rich-text > *:first-child,
+.u-rich-text .w-richtext > *:first-child {
 	margin-top: 0;
 }
-.w-richtext > *:last-child {
+.u-rich-text > *:last-child,
+.u-rich-text .w-richtext > *:last-child {
 	margin-bottom: 0;
 }
+.w-richtext a {
+	position: relative;
+  z-index: 4;
+}
 video {
 	width: 100%;
 	object-fit: cover;
@@ -64,6 +107,11 @@
 section, header, footer {
 	position: relative;
 }
+@media (prefers-color-scheme: light) {
+	option {
+		color: black;
+	}
+}
 
 /* line clamp */
 .u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 {
@@ -76,7 +124,19 @@
 .u-line-clamp-3 { -webkit-line-clamp: 3; }
 .u-line-clamp-4 { -webkit-line-clamp: 4; }
 
-/* component attributes */
+/* focus states */
+[tabindex]:focus-visible,
+a:focus-visible,
+button:focus-visible,
+.w-checkbox-input--inputType-custom.w--redirected-focus,
+.w-form-formradioinput--inputType-custom.w--redirected-focus {
+	outline: 2px solid var(--theme--text);
+	outline-offset: 4px;
+}
+.w-checkbox-input--inputType-custom.w--redirected-focus,
+.w-form-formradioinput--inputType-custom.w--redirected-focus {
+	box-shadow: none;
+}
 
 /* section padding */
 [data-padding-top="none"] { padding-top: var(--padding-vertical--none); }
@@ -91,9 +151,22 @@
 [data-padding-top="large"] { padding-top: var(--padding-vertical--large); }
 [data-padding-bottom="large"] { padding-bottom: var(--padding-vertical--large); }
 
-/* hide section if it has no cms items */
-[data-cms-check="true"]:not(:has(.w-dyn-item)) {
-	display: none;
+[data-hide-if-empty]:empty,
+[data-hide-if-empty]:not(:has(> *:not(.w-condition-invisible))),
+[data-hide-if-empty-cms]:not(:has(.w-dyn-item)),
+[data-hide-rich-text-media] > *:not(h1,h2,h3,h4,h5,h6,p,blockquote),
+.u-embed-js,
+.u-embed-css {
+	display: none !important;
 }
 
+.wf-design-mode .g_clickable_wrap {
+	z-index: 0;
+}
+.g_clickable_wrap a[href="#"] {
+	display: none;
+}
+.g_clickable_wrap a[href="#"] ~ button {
+	display: block;
+}
 </style>