style.scss

$desktop: "min-width:631px";
$mobile: "max-width:630px";

*{
    margin:0;
    border:0;
    padding:0;
    font-size:inherit;
    font-family:inherit;
    font-weight:inherit;
    font-style:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    text-decoration:inherit;
    text-transform:inherit;
    text-align:inherit;
    color:inherit;
    list-style:none;
    background-color:transparent;
}
*:focus{
    outline:none;
}

html{
    font-size:14px;
    font-family:"Helvetica Neue", Helvetica, sans-serif;
    background-color:#eee;
}
body{
    color:#444;
}
a{
    &:hover{
        cursor:pointer;
    }
}
p{
    line-height:24px;
}

.asc:after{
    content:"(a-z)";
}
.desc:after{
    content:"(z-a)";
}

input{
    &[type=radio],
    &[type=checkbox]{
        display:none;
    }
    &[type=text]{
        display:block;
        width:100%;
        box-sizing:border-box;
        border-right-width:3px;
        border-style:solid;
        border-color:rgba(0,0,0,0);
        animation: flash 1s infinite steps(2,end);
    }
}
@keyframes flash{
    from{border-color:rgba(0,0,0,0);}
    to  {border-color:rgba(0,0,0,1);}
}

@mixin button{
    display:block;
    width:100%;
    background-color:#9cf;
    color:#369;
    cursor:pointer;
    &:hover{
        background-color:#8be;
    }
}
nav{
    background-color:#fff;
    font-size:10px;
    line-height:28px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center;
    overflow-y:scroll;
    direction:rtl;

    & > *{
        direction:ltr;
    }
    button,
    .button{
        @include button;
    }
    fieldset > *{
        @include button;
        display:inline-block;
        width:50%;
        float:left;
        &.asc,
        &.desc{
            background-color:#69c;
            color:#bdf;
        }
    }
    .taglist li{
        text-align:left;
        border-bottom:1px solid #eee;
        padding:0 5px;
        cursor:pointer;
        &:hover{
            background-color:#eef;
        }
        span{
            float:right;
        }
    }
    .selected {
        background-color: #ddebf9;
    }
}


.repos{
    color:#999;
    line-height:28px;
    border-collapse:separate;
    width:100%;
    text-align:left;

    th{
        font-weight:bold;
        color:#369;
        cursor:pointer;
        &:hover{
            text-decoration:underline;
        }
    }
    .header > *{
        padding-top:10px;
        padding-bottom:10px;
        white-space:nowrap;
    }
    .homepage{
        color:#666;
        text-decoration:underline;
        padding-left:1em;
        word-break:break-all;
        white-space:normal;
    }
    .repo{
        border-top:1px dashed #ccc;
    }
    .tags{
        font-size:0;
        line-height:0;
        margin:10px 0;
        li{
            display:inline-block;
            padding-right:20px;
            cursor:pointer;
            font-size:10px;
            line-height:20px;
            font-weight:bold;
            text-transform:uppercase;
            letter-spacing:1px;

            &:hover{
                color:#69c;
            }
        }
    }
}

@media (#{$desktop}){
    nav{
        position:fixed;
        top:0;
        left:0;
        width:180px;
        height:100vh;
    }
    body{
        min-width:480px;
        border-left:180px solid #fff;
        box-sizing:border-box;
        padding:0 10px;
    }
}

@media (#{$mobile}){
    nav{
        overflow-y:visible;
    }
    [colspan]{
        padding:0 5px;
    }
    .homepage{
        float:right;
    }
}