Use position sticky for the heading! Thanks @hober!
This commit is contained in:
		
							parent
							
								
									a68540a5c5
								
							
						
					
					
						commit
						413a49067a
					
				
					 1 changed files with 3 additions and 4 deletions
				
			
		| 
						 | 
				
			
			@ -210,7 +210,7 @@ img.circular {
 | 
			
		|||
main {
 | 
			
		||||
    max-width: var(--content-width);
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    margin-block-start: 10.5rem;
 | 
			
		||||
    margin-block-start: var(--body-item-spacing);
 | 
			
		||||
    width: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -244,7 +244,7 @@ h1, h2, h3, h4, h5, h6 {
 | 
			
		|||
header.site {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    position: sticky;
 | 
			
		||||
    top: 0.5rem;
 | 
			
		||||
    visibility: hidden;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
| 
						 | 
				
			
			@ -274,9 +274,8 @@ header.site h1 {
 | 
			
		|||
header.site .grid {
 | 
			
		||||
    align-items: baseline;
 | 
			
		||||
    display: grid;
 | 
			
		||||
    gap: 0.5em;
 | 
			
		||||
    gap: 0 0.5em;
 | 
			
		||||
    grid-template-columns: max-content auto max-content;
 | 
			
		||||
    grid-template-rows: minmax(2em, min-content);
 | 
			
		||||
    grid-template-areas:
 | 
			
		||||
        "title menu social";
 | 
			
		||||
    max-width: var(--content-width);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue