Spacing: Add .figure--image to the list of blocks with large vertical margins
This commit is contained in:
		
							parent
							
								
									54de36f31b
								
							
						
					
					
						commit
						5cf12c7a39
					
				
					 1 changed files with 12 additions and 3 deletions
				
			
		| 
						 | 
				
			
			@ -61,7 +61,7 @@ p + p {
 | 
			
		|||
 | 
			
		||||
/* Figures */
 | 
			
		||||
 | 
			
		||||
{{- $elementsWithXLBlockMargins := "blockquote, figure, .codeblock, .highlight" -}}
 | 
			
		||||
{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .codeblock, .highlight" -}}
 | 
			
		||||
 | 
			
		||||
p + :is({{ $elementsWithXLBlockMargins }}) {
 | 
			
		||||
    margin-block-start: var(--space-xl);
 | 
			
		||||
| 
						 | 
				
			
			@ -74,9 +74,18 @@ p + :is({{ $elementsWithXLBlockMargins }}) {
 | 
			
		|||
.codeblock {
 | 
			
		||||
  --padding: var(--space-m);
 | 
			
		||||
 | 
			
		||||
  margin-inline-start: calc(-1 * var(--padding));
 | 
			
		||||
  margin-inline: calc(-1 * var(--padding));
 | 
			
		||||
  padding: var(--padding);
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.figure--image {
 | 
			
		||||
  --padding: var(--space-m);
 | 
			
		||||
  margin-inline-start: calc(-1 * var(--padding));
 | 
			
		||||
  width: calc(100% + 2 * var(--padding));
 | 
			
		||||
 | 
			
		||||
  figcaption {
 | 
			
		||||
    margin-inline: var(--padding);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Blockquotes */
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue