mirror of
				https://github.com/jaandrle/deka-dom-el
				synced 2025-11-04 07:09:15 +01:00 
			
		
		
		
	🔤 ui/ux
This commit is contained in:
		@@ -5,7 +5,6 @@ ${host} {
 | 
				
			|||||||
	grid-column: full-main;
 | 
						grid-column: full-main;
 | 
				
			||||||
	width: calc(100% - .75em);
 | 
						width: calc(100% - .75em);
 | 
				
			||||||
	height: calc(4/6 * var(--body-max-width));
 | 
						height: calc(4/6 * var(--body-max-width));
 | 
				
			||||||
	margin: 2rem auto;
 | 
					 | 
				
			||||||
	border-radius: var(--border-radius);
 | 
						border-radius: var(--border-radius);
 | 
				
			||||||
	box-shadow: var(--shadow);
 | 
						box-shadow: var(--shadow);
 | 
				
			||||||
	border: 1px solid var(--border);
 | 
						border: 1px solid var(--border);
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -208,12 +208,6 @@ pre code {
 | 
				
			|||||||
	background-color: transparent;
 | 
						background-color: transparent;
 | 
				
			||||||
	padding: 0;
 | 
						padding: 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.illustration:not(:has( .comparison)) pre {
 | 
					 | 
				
			||||||
	background: none;
 | 
					 | 
				
			||||||
	border-style: dashed !important;
 | 
					 | 
				
			||||||
	width: fit-content;
 | 
					 | 
				
			||||||
	padding: 1em 2em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* Layout */
 | 
					/* Layout */
 | 
				
			||||||
@media (min-width: 768px) {
 | 
					@media (min-width: 768px) {
 | 
				
			||||||
@@ -272,11 +266,27 @@ body > main h3, body > main h4 {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* Boxes */
 | 
					/* Boxes */
 | 
				
			||||||
 | 
					.illustration{
 | 
				
			||||||
 | 
						grid-column: full-main;
 | 
				
			||||||
 | 
						width: calc(100% - .75em);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.illustration:not(:has( .comparison)) pre {
 | 
				
			||||||
 | 
						background: none;
 | 
				
			||||||
 | 
						border-style: dashed !important;
 | 
				
			||||||
 | 
						width: fit-content;
 | 
				
			||||||
 | 
						padding: 1em 2em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.comparison {
 | 
					.comparison {
 | 
				
			||||||
	display: grid;
 | 
						display: grid;
 | 
				
			||||||
	grid-template-columns: 1fr;
 | 
						grid-template-columns: 1fr;
 | 
				
			||||||
	gap: 1.5rem;
 | 
						gap: calc(.75em / 2);
 | 
				
			||||||
	margin: 1.5rem 0;
 | 
						margin: 1.5rem 0;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						> div {
 | 
				
			||||||
 | 
							width: 100%;
 | 
				
			||||||
 | 
							overflow: hidden;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@media (min-width: 768px) {
 | 
					@media (min-width: 768px) {
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										4
									
								
								index.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										4
									
								
								index.d.ts
									
									
									
									
										vendored
									
									
								
							@@ -76,7 +76,7 @@ export function el<
 | 
				
			|||||||
	A extends ddeComponentAttributes,
 | 
						A extends ddeComponentAttributes,
 | 
				
			||||||
	EL extends SupportedElement | ddeDocumentFragment
 | 
						EL extends SupportedElement | ddeDocumentFragment
 | 
				
			||||||
>(
 | 
					>(
 | 
				
			||||||
	component: (attr: A)=> EL,
 | 
						component: (attr: A, ...rest: any[])=> EL,
 | 
				
			||||||
	attrs?: NoInfer<A>,
 | 
						attrs?: NoInfer<A>,
 | 
				
			||||||
	...addons: ddeElementAddon<EL>[]
 | 
						...addons: ddeElementAddon<EL>[]
 | 
				
			||||||
): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 | 
					): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 | 
				
			||||||
@@ -86,7 +86,7 @@ export function el<
 | 
				
			|||||||
	A extends { textContent: ddeStringable },
 | 
						A extends { textContent: ddeStringable },
 | 
				
			||||||
	EL extends SupportedElement | ddeDocumentFragment
 | 
						EL extends SupportedElement | ddeDocumentFragment
 | 
				
			||||||
>(
 | 
					>(
 | 
				
			||||||
	component: (attr: A)=> EL,
 | 
						component: (attr: A, ...rest: any[])=> EL,
 | 
				
			||||||
	attrs?: NoInfer<A>["textContent"],
 | 
						attrs?: NoInfer<A>["textContent"],
 | 
				
			||||||
	...addons: ddeElementAddon<EL>[]
 | 
						...addons: ddeElementAddon<EL>[]
 | 
				
			||||||
): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 | 
					): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user