kolibrios.org/static/style.scss

/*  VARIABLES  */

$c-body-bg-img:    url(img/bg.png);
$c-body-bg:        #E2E2E2;
$c-text:           #333333;
$c-white:          #FFFFFF;
$c-gray:           #888888;
$c-black:          #000000;

$c-menu-bg:        #161617CC;
$c-menu-hover:     #FFE36A;
$c-menu-shadow:    #00000040;

$c-shadow-soft:    #1C1A281F;

$c-article-bd:     #C0B9C491;

$c-primary:        #609A21;

$c-banner:         #F9AB00;
$c-banner-ink:     #F9AB00AA;

$c-link:           #0472D8;
$c-link-hover:     #0053B9;
$c-text-link:      #1F1F1F;

$c-lang-panel:     #333333D8;
$c-lang-sep-top:   #FFFFFF0F;
$c-lang-sep-bot:   #00000012;
$c-lang-grad-start:#C20D2C7D;
$c-lang-grad-end:  #3928C78A;
$c-hover-bot-bd:   #34312E;
$c-hover-top-bd:   #484848;

$c-dot:            #CCCCCC;
$c-screen-border:  #182028;

/*  STYLES  */

body {
    margin: 0;
    font-family: "Source Sans Pro", "Open Sans", sans-serif;
    background: $c-body-bg $c-body-bg-img repeat fixed 0 0;
}

#menu {
    background: $c-menu-bg;
    color: $c-white;
    cursor: default;
    line-height: 2em;
    padding: 0.5em 0;
    text-align: center;
    text-shadow: 2px 2px 2px $c-menu-shadow;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9000;

    & > * {
        color: $c-white;
        cursor: pointer;
        margin: 0 1em;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    a:hover,
    a.a-sel {
        color: $c-menu-hover;
    }

    img {
        filter: drop-shadow(2px 2px 2px $c-menu-shadow);
    }
}

#lang-butt {
    background: transparent;
    border: none;
}

/*  LANG-DROPDOWN  */

#lang-dropdown {
    position: fixed;
    z-index: 9100;
    display: none;
    opacity: 0;

    &::before {
        content: '';
        display: block;
        position: absolute;
        border: 10px solid $c-lang-panel;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 0;
        top: -10px;
        left: 50%;
        margin-left: -6px;
    }

    & > div {
        display: block;
        margin-left: 4px;
        border-radius: 4px;
        border: 1px solid $c-text;
        box-shadow: 0 0 10px $c-menu-shadow;
        overflow: hidden;
        background: $c-lang-panel;
        backdrop-filter: saturate(180%) blur(6px);

        a {
            display: block;
            padding: 0 3em 0 1em;
            font-size: 90%;
            line-height: 2.5;
            border-top: 1px solid $c-lang-sep-top;
            border-bottom: 1px solid $c-lang-sep-bot;
            text-decoration: none;
            color: $c-white !important;

            &:hover {
                border-bottom: 1px solid $c-hover-bot-bd;
                border-top: 1px solid $c-hover-top-bd;
                background-color: $c-hover-top-bd;
                background-image: linear-gradient(328deg, $c-lang-grad-start, $c-lang-grad-end);
            }

            &.a-sel {
                color: $c-gray !important;

                img {
                    color: $c-gray !important;
                    filter: brightness(0.5);
                }
            }

            img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                margin-top: -3px;
                width: 16px;
                height: 11px;
                filter: drop-shadow(1px 2px 2px $c-menu-shadow);
            }

            &:first-child {
                border-top: none;
            }

            &:last-child {
                border-bottom: none;
            }
        }
    }
}

/*  ARTICLE  */

#article {
    background: $c-white;
    border: 1px solid $c-article-bd;
    border-radius: 4px;
    box-shadow: $c-shadow-soft 0 4px 4px -2px;
    margin: 2em auto;
    max-width: 910px;
    padding: 2em;
    text-align: justify;
    color: $c-text;
}

#banner {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px $c-menu-shadow;
    transition: box-shadow 0.3s ease;
    display: block;
    margin: 0px 0px 1em;
    padding: 1.25em;
    text-decoration: none;

    &:hover {
        box-shadow: inset 0 0 0 4px $c-banner-ink;
    }

    table {
        table-layout: fixed;
    }

    td {
        text-align: center;
        vertical-align: middle;

        &:first-child,
        &:last-child {
            width: 128px;
        }
    }

    img {
        height: 7em;
    }

    h1 {
        color: $c-banner;
        font-size: 2.5em;
        margin: 0 0 16px;
    }

    p {
        margin: 0em;
    }

    a {
        display: block;
        margin-top: 16px;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-weight: bold;
        color: $c-banner;
        border: none;
    }
}

h1 {
    font-size: 125%;
    padding: 0;
    margin: 0 0 16px;
}

a {
    color: $c-text-link;

    &:hover {
        color: $c-black;
    }
}

p {
    line-height: 1.5;
}

.p {
    &-socials {
        text-align: center;
        margin-bottom: 0px;

        a {
            margin: 1em 1em;
            text-decoration: none;
        }

        br {
            margin: 0em 0em 1em;
            display: none;
        }

        img {
            height: 1em;
            margin-right: 0.5em;
            margin-bottom: -0.15em;
        }
    }

    &-subscription {
        text-align: center;
    }

    &-warn {
        img {
            margin-bottom: -2px;
            margin-right: 0.25em;
        }
    }
}

/*  DOWNLOADS  */

table {
    width: 100%;
    border-spacing: 0;

    a {
        padding-bottom: 1px;
        border-bottom: 1px solid;
        text-decoration: none;
        color: $c-link;

        &:hover {
            color: $c-link-hover;
        }
    }
}

tr {
    vertical-align: middle;
}

.tr {
    &-header {
        b {
            display: inline;
        }
    }

    &-margin {
        &-bot > td {
            padding-bottom: 1em;
        }

        &-top > td {
            padding-top: 1em;
        }
    }
}

td {
    vertical-align: middle;

    img {
        vertical-align: middle;
    }
}

.td {
    &-image {
        width: 3em;
    }

    &-description {
        text-align: left;
        width: 40%;

        .beta {
            border: 1px solid $c-gray;
            color: $c-gray;
            font-size: 0.75em;
            font-weight: bold;
            border-radius: 0.25em;
            padding: 0.25em;
        }
    }

    &-languages {
        text-align: right;
        padding-left: 2em;

        a {
            display: inline-block;
            white-space: nowrap;
        }

        a + a {
            margin-left: 1em;
        }
    }

    &-info {
        img {
            margin-right: 0.25em;
        }
    }
}

hr {
    margin: 0;
}

.help-button {
    cursor: pointer;
    display: inline-block;
    color: $c-primary;

    img {
        padding-bottom: 1px;
    }
}

acronym {
    border-bottom: 1px dashed $c-dot;
    text-decoration: none;
    cursor: help;
}

/*  SCREENS.CSS  */

#show {
    max-width: 1280px;
    max-height: 800px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid $c-screen-border;
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;

    img {
        display: none;
        max-width: 100%;

        &.visible {
            display: block;
        }
    }
}

iframe {
    width: 100%;
    border: none;
    border-radius: 4px;
    aspect-ratio: 16 / 9;
}

#carousel {
    text-align: center;
    margin: 1.25em auto 1em;
}

#dots {
    text-align: center;
    line-height: 1;
}

.dot {
    display: inline-block;
    width: 0.625em;
    height: 0.625em;
    background: $c-dot;
    border-radius: 50%;
    margin: 0 0.25em;
    cursor: pointer;

    &.active {
        background: $c-text;
    }
}

/*  FOOTER  */

#footer {
    margin: 2em auto;
    text-align: center;
    color: $c-gray;
    display: block;
    width: 100%;
    text-shadow: $c-white 1px 1px 0px;
    font-size: 90%;

    img {
        margin-bottom: 0.5em;
        height: 7em;
    }

    p {
        margin: 0;
    }
}

/*  ADAPTIVE LAYOUT  */

@media (max-width:864px) {
    #article {
        margin: 0 0 1em;
        padding: 1em 1em 1.5em;
        border-radius: 0;
    }

    #banner {
        max-width: calc(100% - 2px);
        margin: 1px 0 1em;
        outline: 1px solid $c-body-bg;

        table td {
            &:first-child,
            &:last-child {
                display: none;
            }
        }

        h1 {
            font-size: 1.5em;
            margin-bottom: 0;
        }

        p {
            margin-top: 0.5em;
        }
    }

    .p-socials a {
        display: block;
        margin: 1em 0 0;
    }

    #menu > * {
        margin: 0 0.5em;
    }

    .tr {
        &-header {
            b {
                display: block;
            }
        }
    }

    .td {
        &-description {
            width: auto;
        }

        &-languages a {
            display: block;
            width: max-content;
            margin-left: auto;
          }

        &-languages a + a {
            margin-top: 0.5em;
            margin-left: auto;
        }
    }

    #footer {
        margin: 1em auto;
    }
}