youtube-maze/public/style.css

/**
 * Font loading
 */

@font-face
{
    font-family: 'Equity';
    src: url('fonts/equity/equity_text_b_regular.woff2') format('woff2'),
         url('fonts/equity/equity_text_b_regular.woff') format('woff');
}

@font-face
{
    font-family: 'Equity';
    font-style: italic;
    src: url('fonts/equity/equity_text_b_italic.woff2') format('woff2'),
         url('fonts/equity/equity_text_b_italic.woff') format('woff');
}

@font-face
{
    font-family: 'Concourse';
    src: url('fonts/concourse/concourse_c3_regular.woff2') format('woff2'),
         url('fonts/concourse/concourse_c3_regular.woff') format('woff');
}


/**
 * Common values
 */

:root
{
    /* text and element colors */
    --text-color: #333;
    --text-accent-color: #675148;

    --background-color: #f0f0f0;
    --background-lighter-color: #fafafa;

    /* grid base */
    --base-unit: 30px;

    /* fonts */
    --size-m1: .8rem;
    --size-0: 21px;
    --size-1: 1.666rem;
    --size-2: 3rem;

    --font-display: 'Concourse';
    --font-main: 'Equity';
}

/**
 * Common elements
 */

body
{
    font-family: var(--font-main);
    font-size: var(--size-0);
    line-height: var(--base-unit);
    color: var(--text-color);

    width: 16cm;
    margin: calc(4 * var(--base-unit)) auto;
    background: var(--background-color);

    text-align: justify;
    hyphens: auto;
}

@media screen and (max-width: 900px)
{
    body
    {
        width: 100%;
        padding: 0 calc(4 * var(--base-unit));
    }

    br.flexible
    {
        display: none;
    }
}

@media screen and (max-width: 500px)
{
    body
    {
        padding: 0 calc(2 * var(--base-unit));
    }
}

h1, h2
{
    font-family: var(--font-display);
    text-transform: lowercase;
}

h3, h4, h5, h6
{
    font-family: var(--font-main);
}

h1, h2, h3, h4, h5, h6
{
    text-align: left;
    hyphens: none;
    font-weight: normal;
    color: var(--text-accent-color);
}

h1
{
    font-size: var(--size-2);
    line-height: calc(2 * var(--base-unit));
    margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}

h2
{
    font-size: var(--size-1);
    line-height: calc(1.5 * var(--base-unit));
    margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}

h3
{
    font-size: var(--size-0);
    line-height: var(--base-unit);
    margin: var(--base-unit) 0 calc(.5 * var(--base-unit)) 0;
}

h4, h5, h6
{
    margin: var(--base-unit) 0 0 0;
}

a
{
    color: inherit;
    text-underline-offset: 4px;
}

a:hover
{
    color: var(--text-accent-color);
}

p, ul, ol
{
    margin: 0 0 var(--base-unit) 0;
}

.note
{
    font-size: var(--size-m1);
    line-height: calc(var(--base-unit) * 0.7);
}

ul, ol
{
    padding: 0;
    list-style-position: outside;
}

ul
{
    list-style: none;
}

input, textarea
{
    display: block;
    width: 100%;

    font-family: var(--font-main);
    font-size: var(--size-0);
    line-height: var(--base-unit);

    background: var(--background-lighter-color);
    color: var(--text-color);

    border: 1px solid currentColor;
    padding:
        calc(.25 * var(--base-unit))
        calc(.5 * var(--base-unit));
    margin:
        calc(.25 * var(--base-unit))
        0 0 0;
}

textarea
{
    resize: vertical;
    height: 8em;
}

input:focus, textarea:focus
{
    outline: 1px solid currentColor;
}

input[type="submit"], button
{
    cursor: pointer;
}

blockquote, .blockstrong
{
    margin: calc(2 * var(--base-unit)) 0
            calc(2 * var(--base-unit)) 0;

    padding: var(--base-unit);
    border-radius: 2px;
    background: white;

    position: relative;
}

@media screen and (min-width: 501px)
{
    blockquote::before
    {
        content: "“";
        display: inline-block;
        position: absolute;

        top: var(--base-unit);
        left: calc(-2.5 * var(--base-unit));

        font-size: var(--size-2);
    }

    blockquote:lang(fr)::before
    {
        content: "«";
    }

    blockquote::after
    {
        content: "”";
        display: inline-block;
        position: absolute;

        bottom: var(--base-unit);
        right: calc(-2.5 * var(--base-unit));

        font-size: var(--size-2);
    }

    blockquote:lang(fr)::after
    {
        content: "»";
    }
}

@media screen and (max-width: 500px)
{
    blockquote p:first-of-type::before
    {
        content: "“";
    }

    blockquote:lang(fr) p:first-of-type::before
    {
        content: "« ";
    }

    blockquote p:last-of-type::after
    {
        content: "”";
    }

    blockquote:lang(fr) p:last-of-type::after
    {
        content: " »";
    }
}

blockquote footer
{
    margin-top: var(--base-unit);
}

.blockstrong :last-child
{
    margin-bottom: 0;
}

*, *::before, *::after
{
    box-sizing: border-box;
}

/**
 * Language switcher
 */

.language-switcher
{
    float: right;

    padding-left: calc(2 * var(--base-unit));
    margin-top: .8rem;
}

.language-switcher .active
{
    color: var(--text-accent-color);
}

/**
 * Name and avatar
 */

.avatar
{
    width: calc(4 * var(--base-unit));
    border-radius: 100%;
    float: left;

    margin:
        .3rem /* to improve alignment with neighboring title */
        0 0
        calc(-6 * var(--base-unit));
}

@media screen and (max-width: 900px)
{
    .avatar
    {
        display: block;
        float: none;

        margin: 0 0 var(--base-unit) 0;
    }
}

/**
 * Columns
 */

.columns
{
    display: flex;
    justify-content: space-between;
}

.column
{
    width: 45%;
}

@media screen and (max-width: 500px)
{
    .columns
    {
        display: block;
    }

    .column
    {
        width: 100%;
    }
}

/* Workaround no margin collapsing for flex items */
@media screen and (min-width: 501px)
{
    .column :first-child
    {
        margin-top: 0;
    }

    .column :last-child
    {
        margin-bottom: 0;
    }
}

/**
 * Boids
 */


#boids-canvas
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/**
 * Books
 */

.book
{
    display: flex;
    text-align: left;
    align-items: top;
}

.book-cover
{
    line-height: 0px;
    margin: 0 var(--base-unit) 0 0;
    flex: 0 0 calc(4 * var(--base-unit));
}

.book-cover img
{
    width: 100%;
}

.book-details dt
{
    font-family: "Concourse";
    text-transform: lowercase;
}

.book-details dt, .book-details dd
{
    display: block;
    margin: 0;
    float: left;
}

.book-details dt
{
    width: 7ch;
    clear: both;
}

.book-details dt:lang(en)::after
{
    content: ":";
}

.book-details dt:lang(fr)::after
{
    content: " :";
}

.book-details::after
{
    content: "";
    display: block;
    clear: both;
}

.book-description h3
{
    margin: 0;
}

.book-description address
{
    margin-bottom: var(--base-unit);
}

@media screen and (max-width: 500px)
{
    .book
    {
        flex-direction: column;
        align-items: stretch;
    }

    .book-cover
    {
        margin: 0 0 var(--base-unit) 0;
    }
}