site

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

_navigation.scss (2517B)

      1 .navigation {
      2   height: 6rem;
      3   width: 100%;
      4 
      5   a,
      6   span {
      7     display: inline;
      8     font-size: 1.7rem;
      9     font-family: $font-family;
     10     font-weight: 600;
     11     color: $fg-color;
     12   }
     13 
     14   a {
     15 
     16     &:hover,
     17     &:focus {
     18       color: $link-color;
     19     }
     20   }
     21 
     22   .navigation-title {
     23     letter-spacing: 0.1rem;
     24     text-transform: uppercase;
     25   }
     26 
     27   .navigation-list {
     28     float: right;
     29     list-style: none;
     30     margin-bottom: 0;
     31     margin-top: 0;
     32 
     33     @media only screen and (max-width: 768px) {
     34       position: relative;
     35       top: 2rem;
     36       right: 0;
     37       z-index: 5;
     38       visibility: hidden;
     39       opacity: 0;
     40       padding: 0;
     41       max-height: 0;
     42       width: 100%;
     43       background-color: $bg-color;
     44       border-top: solid 2px $alt-bg-color;
     45       border-bottom: solid 2px $alt-bg-color;
     46       transition: opacity 0.25s, max-height 0.15s linear;
     47     }
     48 
     49     .navigation-item {
     50       float: left;
     51       margin: 0;
     52       position: relative;
     53 
     54       @media only screen and (max-width: 768px) {
     55         float: none !important;
     56         text-align: center;
     57 
     58         a,
     59         span {
     60           line-height: 5rem;
     61         }
     62       }
     63 
     64       a,
     65       span {
     66         margin-left: 1rem;
     67         margin-right: 1rem;
     68       }
     69     }
     70 
     71     .separator {
     72       @media only screen and (max-width: 768px) {
     73         display: none;
     74       }
     75     }
     76 
     77     .menu-separator {
     78       @media only screen and (max-width: 768px) {
     79         border-top: 2px solid $fg-color;
     80         margin: 0 8rem;
     81 
     82         span {
     83           display: none;
     84         }
     85       }
     86     }
     87   }
     88 
     89   #dark-mode-toggle {
     90     margin: 1.7rem 0;
     91     font-size: 2.4rem;
     92     line-height: inherit;
     93     bottom: 2rem;
     94     left: 2rem;
     95     z-index: 100;
     96     position: fixed;
     97   }
     98 
     99   #menu-toggle {
    100     display: none;
    101 
    102     @media only screen and (max-width: 768px) {
    103       display: initial;
    104       position: relative;
    105       visibility: hidden;
    106 
    107       &:checked+label>i {
    108         color: $alt-bg-color;
    109       }
    110 
    111       &:checked+label+ul {
    112         visibility: visible;
    113         opacity: 1;
    114         max-height: 100rem;
    115       }
    116 
    117       &:focus-visible+label {
    118         outline-style: auto;
    119       }
    120     }
    121   }
    122 
    123   .menu-button {
    124     display: none;
    125 
    126     @media only screen and (max-width: 768px) {
    127       position: relative;
    128       display: block;
    129       font-size: 2.4rem;
    130       font-weight: 400;
    131     }
    132 
    133     i {
    134 
    135       &:hover,
    136       &:focus {
    137         color: $alt-fg-color;
    138       }
    139     }
    140   }
    141 
    142   i {
    143     color: $fg-color;
    144     cursor: pointer;
    145 
    146     &:hover,
    147     &:focus {
    148       color: $link-color;
    149     }
    150   }
    151 }