glittergallery/GlitterGallery

@media screen and (min-width: 0em){
  body{
    .wrapper{
      nav{
        @include cf();
        position: fixed;
        width: 100%;
        background-color: $map_blue;
        padding: 0.25em 0;
        div{
          img{
            @include border-radius(0.1em);
            width: 1.3em;
            height: auto;
            float: left;
            margin: auto 0.25em;
          }
        }
        div.right{
          display: none;
        }
      }
      article{
        section{
          div{
            aside{
              h1{
                margin: 0.5em auto;
                a{
                  text-decoration: none;
                  color: $map_blue;
                }
                a:hover{
                  text-decoration: underline;
                }
              }
              @include col(1/3);
              nav{
                padding: 0;
                position: initial;
                background-color: initial;
                ul{
                  box-shadow: 0 0 0.08em 0 $map_blue;
                  list-style-type: none;
                  li{
                    font-size: 0.8em;
                    border-right: solid 0.1em $dark_geometry_gray;
                    background-color: $dark_geometry_gray;
                    padding: 0.5em;
                    a{
                      text-decoration: none;
                      color: $map_blue;
                    }
                  }
                  li:hover, li.active{
                    background-color: white;
                    font-weight: 700;
                    border-left: solid 0.1em $map_blue;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


@media screen and (min-width: 60.063em){
  body{
    .wrapper{
      nav{
        @include cf();
        div.left{
          @include col(3/4);
        }
        div.right{
          display: initial;
          margin-top: 0.30em;
          @include col(1/4);
          a{
            text-decoration: none;
            color: $geometry_gray;
            font-weight: 700;
          }
          a:hover{
            color: red;
          }
          img{
            padding-left: 2em;
          }
          span{
            text-align: right;
            color: $geometry_gray;
            font-weight: 300;
            font-height: 1.2em;
          }
        }
      }
    }
  }
}