frontpage/styles/Blog/DiaryPageSelector.module.scss

.sideNav {
    float: right;
    background: transparent;
    /* 50px padding in main */
    margin: -50px -50px 10px 10px;
    padding: 20px;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 1em;
    border: none;
    border-left: 1px solid var(--blog_content-border);
    border-bottom: 1px solid var(--blog_content-border);

    h4 {
        margin: 0 0 10px 0;
    }

    ol {
        list-style-type: "\1405\0020\0020";
        list-style-position: inside;
        margin: 0;
        padding: 0;
    }

    li {
        margin: 0;
        padding: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 200px;
    }

    li:hover {
        &::marker {
            font-weight: bold;
        }
    }

    a:link, a:visited, a:hover, a:active {
        color: inherit;
        text-decoration: none;
    }

    li.thisPage {
        font-weight: bold;
    }

    h4.thisPage, h4:hover {
        text-decoration: underline;
    }
}

.barNav {
    display: grid;
    grid-template-columns: 1fr max-content max-content max-content max-content max-content 1fr;
    align-items: center;
    background: transparent;
    padding: 10px;

    select {
        font-size: 110%;
        padding: 5px;
        border-radius: 1em;
        border: 1px solid var(--blog_content-border);
        background: #333;
    }

    &.top {
        margin: -50px -50px 20px;
        border-bottom: 1px solid var(--blog_content-border);
    }

    &.bottom {
        margin: 20px -50px -50px;
        border-top: 1px solid var(--blog_content-border);
    }

    a:link, a:visited, a:active {
        color: inherit;
        text-decoration: none;
        font-weight: bold;
    }
    a:hover {
        text-decoration: underline;
    }
}

/* TODO: Move to asciidoc footer in Content.module.scss */
.bottom {
    clear: both;
}


/* To bottom as this should override everything */ 

.mobile {
    display: none;
}

.desktop {
    display: block;
}

@media screen and (max-width: 900px) {
  .mobile {
    display: grid;
  }

  .desktop {
    display: none;
  }
}