site

personal website, served at mordaunt.dev/site
Log | Files | Refs

_navigation_dark.scss (1128B)

      1 @mixin navigation_dark {
      2   .navigation {
      3 
      4     a,
      5     span {
      6       color: $fg-color-dark;
      7     }
      8 
      9     a {
     10 
     11       &:hover,
     12       &:focus {
     13         color: $link-color-dark;
     14       }
     15     }
     16 
     17     .navigation-list {
     18       @media only screen and (max-width: 768px) {
     19         background-color: $bg-color-dark;
     20         border-top: solid 2px $alt-bg-color-dark;
     21         border-bottom: solid 2px $alt-bg-color-dark;
     22       }
     23 
     24       .menu-separator {
     25         @media only screen and (max-width: 768px) {
     26           border-top: 2px solid $fg-color-dark;
     27         }
     28       }
     29     }
     30 
     31     #menu-toggle {
     32       @media only screen and (max-width: 768px) {
     33         &:checked+label>i {
     34           color: $alt-bg-color-dark;
     35         }
     36       }
     37     }
     38 
     39     i {
     40       color: $fg-color-dark;
     41 
     42       &:hover,
     43       &:focus {
     44         color: $link-color-dark;
     45       }
     46     }
     47 
     48     .menu-button {
     49       i {
     50 
     51         &:hover,
     52         &:focus {
     53           color: $alt-fg-color-dark;
     54         }
     55       }
     56     }
     57   }
     58 }
     59 
     60 body.colorscheme-dark {
     61   @include navigation_dark();
     62 }
     63 
     64 body.colorscheme-auto {
     65   @media (prefers-color-scheme: dark) {
     66     @include navigation_dark();
     67   }
     68 }