cv.css

@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

:root {
    --side-color: darkslategray;
    --side-width: 6cm;
    --font-size: 11pt;
    --padding-h: 1.9cm;
    --padding-top: 2.54cm;
}

a {
    color: inherit;
}

html {
    font-family: "Source Sans Pro";
}

body {
    display: flex;
    justify-content: stretch;
    flex-direction: row;
    font-size: var(--font-size);
    max-width: 22cm;
    line-height: 14pt;
    padding-top: var(--padding-top);
}

strong {
    font-weight: bolder;
}

p {
    margin-bottom: .5em;
    text-align: justify;
}

aside,
main {
    margin-top: calc(-1*var(--padding-top));
    padding-top: var(--padding-top);
}


sub {
    font-size: var(--font-size);
    opacity: .7;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

h1 {
    margin-top: em;
    margin-bottom: 1em;
    font-size: 18pt;
    font-weight: bolder;
}

h2 {
    margin-top: 2em;
    margin-bottom: .5em;
    font-size: 14pt;
    font-weight: bolder;
}


aside {
    background-color: var(--side-color);
    color: white;
    text-align: center;

    width: var(--side-width);
    min-width: var(--side-width);
    max-width: var(--side-width);
    text-align: left;
    padding-left: var(--padding-h);


    & figure {

        & img {
            border-radius: 50%;
            width: 8em;
        }
    }

    & dl {
        & dd {
            color: var(--side-color);
            font-size: 1pt;
            height: 1mm;
            display: inline-block;
            width: calc(var(--side-width) - var(--padding-h));

            &.expert {
                background-color: white;
            }

            &.proficient {
                background-image: linear-gradient(90deg, white 0%, white 80%, rgba(255, 255, 255, 0.5) 81%, rgba(255, 255, 255, 0.5) 100%);
            }

            &.experienced {
                background-image: linear-gradient(90deg, white 0%, white 60%, rgba(255, 255, 255, 0.5) 61%, rgba(255, 255, 255, 0.5) 100%);
            }
        }


    }
}

section {
    margin-bottom: 2em;
}

main {
    padding-left: 1cm;
    padding-right: 1cm;

}

ul {
    list-style-type: none;
}

@media only screen and (max-width: 800px) {
    body {
        flex-direction: column;
    }

    aside {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        text-align: center;
        padding-left: 0;
    }

    main {
        margin-top: 0;
    }
}

@media only print {
    .page {
        height: calc(100vh - var(--padding-top));
        min-height: calc(100vh - var(--padding-top));
        max-height: calc(100vh - var(--padding-top));
    }

    .page+.page {
        padding-top: var(--padding-top);
    }

    .hide-print {
        display: none;
    }

    @page {
        size: A4;
        /* DIN A4 standard, Europe */
        margin: 0;
    }

}