site_opytex/theme/static/stylesheet/style.less

@import "variables.less";

html, body {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    line-height: 1.1;
}

h1{
    font-size: 2.4em
}

h2 {
    font-size: 2em;
    background-color: @light-grey;
    padding: 4px;
}

h3 {
    font-size: 1.6em
}

h4 {
    font-size: 1.36em
}

h5 {
    font-size: 1.2em
}

h6 {
    font-size: 1.1em
}

body {
    margin: 0;
    padding: 0;
    background-color: @body-bg;
    color: @text-color;
    font-family: @sans;
    font-size: 1.02em;
    line-height: 1.2em;
}

a {
    color: @link-color;
    text-decoration: none;
}

a:hover {
    color: @link-hover-color;
}

hr {
    color: @light-grey;
    background-color: @light-grey;
    height: 1px;
    border: none;
    margin-top: 40px;
    margin-bottom: 40px;
}

img {
    max-width: 100%;
    border: 2px solid @med-light-grey;
    box-shadow: 0px 0px 10px @light-grey;
}

.button {
    margin: 20px;
    border: 3px solid @orange;
    width: 250px;
    height: 150px;
    border-radius: 25px;
    display: inline-flex;
    vertical-align: top;
    padding: 5px 15px;
     * {
         display: flex;
         justify-content: center;
         flex-direction: column;
         gap: 10px;
     }
     a {
         width:100%;
         height:100%;
     }
     .nolink {
         width:100%;
         height:100%;
     }
     h3 {
         margin: 0px;
     }

}

.button:hover {
    background-color: @light-grey;
}

aside {
    background-color: @sidebar-bg;
    color: @sidebar-text-color;
    // text-align: center;

    a {
        color: @sidebar-link-color;
        display: block;
    }

    a:hover {
        color: @sidebar-link-hover-color;
    }

    .title {
        text-align: center;
        //padding-bottom: 20px;
        padding-top: 20px;

        img {
            padding: 20px;
            border-radius: 50%;
            max-width: 140px;
        }

        h1 {
            margin: 15px 0 5px 0;

        }

        p {
            margin: 0 0 15px 0;
            font-size: .92em;
        }
    }
    nav {
        .toctree {
            display: none;
        }
        #toggle {
            display: none;
        }
        #toggle:checked + .toctree {
            display: block;
        }
        label {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            cursor: pointer;
        }
        ul.toctree {
            display: none;
            padding-inline-start: 0px;
            h2 {
                background-color: @navbar-bg;
                margin-bottom: 0;
            }
            ul {
                padding-inline-start: 0px;
                display: block;
                li {
                    padding: 0;
                    display: block;
                }
                a {
                    color: @navbar-text-color;
                    border: none;
                }
            }
            li.toctree-l1 {
                li.current{
                    background-color: @navbar-toctree-l2-sel-bg;
                    color: @navbar-toctree-l2-sel-txt;
                    padding: 10px;
                    border-left: solid 5px @orange;
                }
            }
            li.current{
                a {
                    background-color: @navbar-toctree-l1-sel-bg;
                    color: @navbar-toctree-l1-sel-txt;
                    border-top: solid 1px @light-grey;
                    border-bottom: solid 1px @light-grey;
                    border-left: solid 2px @orange;
                }
                a:hover {
                    color: @orange;
                }
            }
            li.toctree-l2 {
                a {
                    border: none;
                    background-color: @navbar-toctree-l2-bg;
                    color: @navbar-toctree-l2-txt;
                }
            }
            a {
                padding: 10px;
            }
            a:hover {
                color: @orange;
            }
        }
        ul.list {
            li {
                display: inline;
                line-height: 1.6em;
                font-size: 1.28em;
                text-transform: lowercase;
            }
        }
    }
    .tagcloud {
        display: none;
    }

}

main {
    nav {
        display: none;
    }


    article {
        margin: 0 8% 2% 8%;

        header {
            h1, h2 {
                margin-bottom: 0;
            }

            p {
                color: @header-text-color;
                font-size: 0.86em;
            }

            .translations {
                float: right;

                .active {
                    font-weight: 600;
                }
            }
        }

        code, kbd, samp, pre {
            font-family: @mono;
        }

        blockquote, pre {
            background-color: rgba(128,128,128,0.05);
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-left: 8px solid rgba(128,128,128,0.075);
            border-left-width: 10px;
        }

        blockquote {
            padding: 10px 20px;
            font-weight: 300;
            font-size: 1.1em;
        }

        pre {
            padding: 4px;
            font-size: .9em;
            overflow-x: auto;
        }

        samp {
            white-space: pre;
            display: block;
            overflow-x: auto;
        }

        kbd {
            padding: .1em .6em;
            border: 1px solid rgba(63,63,63,0.25);
            box-shadow: 0 1px 0 rgba(63,63,63,0.25);
            background-color: #fff;
            color: #333;
            border-radius: 3px;
            display: inline-block;
            margin: 0 .1em;
            white-space: nowrap;
            font-size: .78em;
        }

        *:not(pre) > code {
            font-size: .8em;
            white-space: nowrap;
            color: #c25;
            padding: 1px 3px;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
            border-radius: 3px;
        }

        .comment-count {
            font-size: .8em;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;

            thead:first-child tr:first-child th {
                border-top: 0;
            }

            th, td {
                padding: 8px;
                line-height: 20px;
                vertical-align: top;
                border-top: 1px solid #ddd;
            }
        }
    }

    footer {
        padding-top: 4px;
        border-top: @footer-border-color 1px solid;

        p {
            margin: 2px;
            text-align: center;
            padding: 0 40px 0 40px;
            color: @footer-text-color;
            font-size: 11px;
        }
    }
}

.about {
    text-align: center;
    border-top: @footer-border-color 1px solid;
    padding-top: 1em;
}

.source {
    text-align: center;
    padding-top: 1em;
    img {
        border: 0;
        box-shadow: none;
    }
    a {
        background-color: @tag-bg;
        padding: .2em .6em .2em;
        font-size: .74em;
        line-height: 1;
        color: @tag-text-color;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
    }

    a:hover {
        background-color: @tag-hover-color;
    }



}

.tag-cloud {
    text-align: center;
    a {
        background-color: @tag-bg;
        padding: .2em .6em .2em;
        font-size: .74em;
        line-height: 1;
        color: @tag-text-color;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
    }

    a:hover {
        background-color: @tag-hover-color;
    }
}

a.btn {
    background-color: @btn-bg;
    padding: .6em .6em;
    font-size: .8em;
    line-height: 1;
    color: @btn-text-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

a.btn:hover {
    background-color: @btn-hover-color;
}

.center, .text-center {
    text-align: center;
}

.img-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

div.related-posts {
    margin: 15px 0 15px 0;
    padding-bottom: 20px;
    border-top: @rel-post-border-color 1px solid;
    border-bottom: @rel-post-border-color 1px solid;

    h4 {
        margin: 20px 0 25px 0;
    }

    ul {
        font-size: 1.1em;
        padding-left: 12px;

        li {
            padding: 4px 0 4px 0;
        }
    }
}

ul.list, ul.social, ul.related-posts {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.list {
    padding: 1em 0 1em 0;

    li {
        padding: 4px;
    }
}

ul.breadcrumb {
    padding: 5px 10px;
    list-style: none;
    background-color: #eee;
    font-size: 0.9em;

    li {
        display: inline;
        font-size: 18px;

        a {
            color: @link-color;
            text-decoration: none;
        }
        a:hover {
            color: @link-hover-color;
        }
    }

    li+li:before {
        padding: 8px;
        color: black;
        content: "/\00a0";
    }
}

ul.social {
    font-size: 1.6em;
    padding-top: 20px;

    li {
        display: inline;
    }

    a:hover {
        z-index: 2;
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    a {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        text-align: center;
        font-size: .8em;
        line-height: 36px;
    }


}


//
// Desktop
//

@media screen and (min-width: 768px) {
    aside {
        width: 20%;
        max-width: 250px;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;

        .title {
            padding-bottom: 50px;
            padding-top: 50px;
        }
        nav {
            background-color: @navbar-bg;
            label, #toggle
            {
                display: none;
            }
            ul {
                padding-inline-start: 0px;
                display: block;
            }
            ul.toctree {
                display: block;
            }
        }

        .tagcloud {
            display: block;
            h2 {
                margin-bottom: 0;
                background-color: @sidebar-bg;
            }

            ul {
                list-style: none;
                padding: 0;
                margin: 10px;
            }

            ul li {
                display: inline-block;
            }

            li.tag-0 {
                font-size: 170%;
            }

            li.tag-1 {
                font-size: 150%;
            }

            li.tag-2 {
                font-size: 120%;
            }

            li.tag-3 {
                font-size: 100%;
            }

            li.tag-4 {
                font-size: 80%;
            }
        }
    }

    main {
        width: 75%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 2.5%;

        nav {
            display: block;
            text-align: center;
            text-transform: uppercase;
            font-size: .72em;
            padding: 14px 0 14px 0;
            border-bottom: @nav-border-color 1px solid;
        }

        nav, .translations {
            a {
                padding: 0 4px 0 4px;
                border-left: @nav-border-color 1px solid;
                border-right: @nav-border-color 1px solid;
            }

            :first-child {
                border-left: none;
            }

            :last-child {
                border-right: none;
            }
        }

        article {

            &.single {
                min-height: 80%;
            }

            ul.list {
                li {
                    padding: 2px;
                }
            }
        }
    }
}