Add a hover effect to the home link in the page header.
This commit is contained in:
		
							parent
							
								
									0250aa106e
								
							
						
					
					
						commit
						0420f58d02
					
				@ -27,6 +27,8 @@
 | 
			
		||||
  --header-nav-regular-background-color: var(--site-background-color);
 | 
			
		||||
  --header-nav-hover-font-color: var(--site-background-color);
 | 
			
		||||
  --header-nav-hover-background-color: var(--site-text-color);
 | 
			
		||||
  --header-home-regular-font-color: var(--site-text-color);
 | 
			
		||||
  --header-home-hover-font-color: #6ccff6;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (prefers-color-scheme: light) {
 | 
			
		||||
@ -55,6 +57,8 @@
 | 
			
		||||
    --header-nav-regular-background-color: var(--site-background-color);
 | 
			
		||||
    --header-nav-hover-font-color: var(--site-background-color);
 | 
			
		||||
    --header-nav-hover-background-color: var(--site-text-color);
 | 
			
		||||
    --header-home-regular-font-color: var(--site-text-color);
 | 
			
		||||
    --header-home-hover-font-color: #933009;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -95,10 +99,18 @@ body {
 | 
			
		||||
    font-size: 2rem;
 | 
			
		||||
    font-weight: 600;
 | 
			
		||||
    text-decoration: none;
 | 
			
		||||
    color: var(--header-home-regular-font-color);
 | 
			
		||||
    transition-property: color;
 | 
			
		||||
    transition-duration: 0.1s;
 | 
			
		||||
    transition-timing-function: ease-out;
 | 
			
		||||
 | 
			
		||||
    &:hover {
 | 
			
		||||
      color: var(--header-home-hover-font-color) !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:link,
 | 
			
		||||
    &:visited {
 | 
			
		||||
      color: var(--site-text-color);
 | 
			
		||||
      color: inherit;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user