Skip to content

Commit 2113cb3

Browse files
lumosframeworklumosframework
authored
Update page_code_base.html
1 parent dab5056 commit 2113cb3

File tree

1 file changed

+75
-80
lines changed

1 file changed

+75
-80
lines changed

‎page_code_base.html‎

Lines changed: 75 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,56 @@
11
<style>
22
:root {
3-
--site--max-width: min(var(--site--width), 100vw);
4-
--container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
5-
--container--full: calc(100vw - var(--site--margin) * 2);
6-
--container--small: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 2) - var(--site--gutter));
7-
--site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
8-
--column-width--1: calc((var(--container--main) - var(--site--gutter-total)) / var(--site--column-count));
9-
--column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
10-
--column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
11-
--column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
12-
--column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
13-
--column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
14-
--column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
15-
--column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
16-
--column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
17-
--column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
18-
--column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
19-
--column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
20-
--column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
21-
--column-margin--1: calc(var(--column-width--plus-gutter) * 1);
22-
--column-margin--2: calc(var(--column-width--plus-gutter) * 2);
23-
--column-margin--3: calc(var(--column-width--plus-gutter) * 3);
24-
--column-margin--4: calc(var(--column-width--plus-gutter) * 4);
25-
--column-margin--5: calc(var(--column-width--plus-gutter) * 5);
26-
--column-margin--6: calc(var(--column-width--plus-gutter) * 6);
27-
--column-margin--7: calc(var(--column-width--plus-gutter) * 7);
28-
--column-margin--8: calc(var(--column-width--plus-gutter) * 8);
29-
--column-margin--9: calc(var(--column-width--plus-gutter) * 9);
30-
--column-margin--10: calc(var(--column-width--plus-gutter) * 10);
31-
--column-margin--11: calc(var(--column-width--plus-gutter) * 11);
32-
--column-margin--12: calc(var(--column-width--plus-gutter) * 12);
33-
--breakout-start: [full-start] minmax(0, 1fr) [content-start];
34-
--breakout-end: [content-end] minmax(0, 1fr) [full-end];
35-
--grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end);
36-
--grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end);
37-
--grid-main: repeat(var(--site--column-count), minmax(0, 1fr));
38-
--grid-1: repeat(1, minmax(0, 1fr));
39-
--grid-2: repeat(2, minmax(0, 1fr));
40-
--grid-3: repeat(3, minmax(0, 1fr));
41-
--grid-4: repeat(4, minmax(0, 1fr));
42-
--grid-5: repeat(5, minmax(0, 1fr));
43-
--grid-6: repeat(6, minmax(0, 1fr));
44-
--grid-7: repeat(7, minmax(0, 1fr));
45-
--grid-8: repeat(8, minmax(0, 1fr));
46-
--grid-9: repeat(9, minmax(0, 1fr));
47-
--grid-10: repeat(10, minmax(0, 1fr));
48-
--grid-11: repeat(11, minmax(0, 1fr));
49-
--grid-12: repeat(12, minmax(0, 1fr));
50-
--_typography---text-transform--none: none;
51-
--_typography---text-transform--uppercase: uppercase;
52-
--_typography---text-transform--captialize: capitalize;
53-
--_typography---text-transform--lowercase: lowercase;
54-
--align--flex-start: flex-start;
55-
--align--flex-center: center;
56-
--align--flex-end: flex-end;
57-
--align--text-left: left;
58-
--align--text-center: center;
59-
--align--text-right: right;
3+
--site--max-width: min(var(--site--width), 100vw);
4+
--container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
5+
--container--full: calc(100vw - var(--site--margin) * 2);
6+
--container--small: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 2) - var(--site--gutter));
7+
--site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
8+
--column-width--1: calc((var(--container--main) - var(--site--gutter-total)) / var(--site--column-count));
9+
--column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
10+
--column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
11+
--column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
12+
--column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
13+
--column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
14+
--column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
15+
--column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
16+
--column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
17+
--column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
18+
--column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
19+
--column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
20+
--column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
21+
--column-margin--1: calc(var(--column-width--plus-gutter) * 1);
22+
--column-margin--2: calc(var(--column-width--plus-gutter) * 2);
23+
--column-margin--3: calc(var(--column-width--plus-gutter) * 3);
24+
--column-margin--4: calc(var(--column-width--plus-gutter) * 4);
25+
--column-margin--5: calc(var(--column-width--plus-gutter) * 5);
26+
--column-margin--6: calc(var(--column-width--plus-gutter) * 6);
27+
--column-margin--7: calc(var(--column-width--plus-gutter) * 7);
28+
--column-margin--8: calc(var(--column-width--plus-gutter) * 8);
29+
--column-margin--9: calc(var(--column-width--plus-gutter) * 9);
30+
--column-margin--10: calc(var(--column-width--plus-gutter) * 10);
31+
--column-margin--11: calc(var(--column-width--plus-gutter) * 11);
32+
--column-margin--12: calc(var(--column-width--plus-gutter) * 12);
33+
--breakout-start: [full-start] minmax(0, 1fr) [content-start];
34+
--breakout-end: [content-end] minmax(0, 1fr) [full-end];
35+
--grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end);
36+
--grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end);
37+
--_typography---text-transform--none: none;
38+
--_typography---text-transform--uppercase: uppercase;
39+
--_typography---text-transform--captialize: capitalize;
40+
--_typography---text-transform--lowercase: lowercase;
41+
--align--start: start;
42+
--align--center: center;
43+
--align--end: end;
6044
}
6145
* {
6246
vertical-align: bottom;
6347
}
6448
::before, ::after {
6549
box-sizing: border-box;
6650
}
51+
html {
52+
background-color: var(--_theme---background);
53+
}
6754
button {
6855
background-color: unset;
6956
padding: unset;
@@ -86,9 +73,7 @@
8673
position: relative;
8774
}
8875
@media (prefers-color-scheme: light) {
89-
option {
90-
color: black;
91-
}
76+
option { color: black; }
9277
}
9378
img::selection {
9479
background: transparent;
@@ -99,6 +84,7 @@
9984
font-smoothing: antialiased;
10085
-webkit-font-smoothing: antialiased;
10186
}
87+
/* Clear Defaults */
10288
a:not([class]) {
10389
text-decoration: underline;
10490
}
@@ -113,64 +99,63 @@
11399
margin-top: 0;
114100
margin-bottom: 0;
115101
}
102+
/* Margin Trim */
116103
:is(.u-margin-trim, .u-rich-text) > :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)) {
117104
margin-top: 0;
118105
}
119106
:is(.u-margin-trim, .u-rich-text) > :not(:has(~ :not(.w-condition-invisible))) {
120107
margin-bottom: 0;
121108
}
122-
.w-richtext a {
123-
position: relative;
124-
z-index: 4;
125-
}
126-
:is([class*="u-text-style-"], .u-rich-text :is(h1,h2,h3,h4,h5,h6,p))::before {
109+
/* Line Height Trim */
110+
:is([class*="u-text-style-"],h1,h2,h3,h4,h5,h6,p):not(.w-richtext,.u-text-trim-off)::before {
127111
content: "";
128112
display: table;
129113
margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
130114
}
131-
:is([class*="u-text-style-"], .u-rich-text :is(h1,h2,h3,h4,h5,h6,p))::after {
115+
:is([class*="u-text-style-"],h1,h2,h3,h4,h5,h6,p):not(.w-richtext,.u-text-trim-off)::after {
132116
content: "";
133117
display: table;
134118
margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
135119
}
120+
/* Rich Text Links */
121+
.w-richtext a {
122+
position: relative;
123+
z-index: 4;
124+
}
125+
/* Line Clamp */
136126
.u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 {
137127
-webkit-line-clamp: 1;
138128
-webkit-box-orient: vertical;
139129
}
140130
.u-line-clamp-2 { -webkit-line-clamp: 2; }
141131
.u-line-clamp-3 { -webkit-line-clamp: 3; }
142132
.u-line-clamp-4 { -webkit-line-clamp: 4; }
143-
133+
/* Child Contain */
134+
.u-child-contain > * {
135+
width: 100%;
136+
max-width: inherit !important;
137+
margin-inline: 0 !important;
138+
margin-top: 0 !important;
139+
}
144140
/* Hide */
145141
.u-hide-if-empty:empty,
146142
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
147143
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
148-
.w-richtext[class*="u-text-style-"] > :not(h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,span),
149144
.u-embed-js,
150145
.u-embed-css {
151146
display: none !important;
152147
}
153-
154148
/* Focus State */
155-
a, button, [tabindex],
156-
.w-checkbox-input--inputType-custom,
157-
.w-form-formradioinput--inputType-custom {
149+
a, button, :where([tabindex]) {
158150
outline-offset: var(--focus--offset-outer);
159151
}
160152
a:focus-visible,
161153
button:focus-visible,
162-
[tabindex]:focus-visible,
163-
.w-checkbox:has(:focus-visible) .w-checkbox-input--inputType-custom,
164-
.w-radio:has(:focus-visible) .w-form-formradioinput--inputType-custom {
154+
[tabindex]:focus-visible {
165155
outline-color: var(--_theme---text);
166156
outline-width: var(--focus--width);
167157
outline-style: solid;
168158
}
169-
.w-checkbox-input--inputType-custom.w--redirected-focus,
170-
.w-form-formradioinput--inputType-custom.w--redirected-focus {
171-
box-shadow: none;
172-
}
173-
174159
/* Global / Clickable Component */
175160
.wf-design-mode .g_clickable_wrap {
176161
z-index: 0;
@@ -181,4 +166,14 @@
181166
.g_clickable_wrap a[href="#"] ~ button {
182167
display: block;
183168
}
169+
/* Responsive */
170+
@container (width < 62em) {
171+
.u-grid-from-large { display: flex; }
172+
}
173+
@container (width < 48em) {
174+
.u-grid-from-medium { display: flex; }
175+
}
176+
@container (width < 30em) {
177+
.u-grid-from-small { display: flex; }
178+
}
184179
</style>

0 commit comments

Comments
 (0)