OSP (Open Source Publishing) → you’re traveling towards le75/static/css/main.css in le75

Snapshots | iceberg

Inside this repository

main.css
text/css
/**
 * CONTENTS
 *
 * GLOBAL
 *
 * FONTS
 *
 * GENERAL
 * Structure
 * Toggle button
 *
 * FEEDS
 * Feed filters
 * feed entries
 *
 * MAIN
 * Main Header
 * Main content
 *
 * HELPERS
 * Zig zag lists
 * Bullet-lists
 * Columns
 * Metadata
 * Members
 * Contact
 */





/* ==========================================================================
   #Global
   ========================================================================== */

:root {
    --font-size: 18px;
    --line-height: 21px;
        --font-size2: 14px;
        --line-height2: 15px;
    --border-width: 4px;

    --color-red: crimson;
    --color-green: seagreen;
    --background-color: aquamarine;

    --transition-time: .8s;

    --min-content-distance-right: 50px;

    --expanded-content-width: 67%;
    --collapsed-content-width: 33%;
    --min-content-width: 800px;
}





/* ==========================================================================
   #Fonts
   ========================================================================== */

@font-face {
    font-family: 'EnVogue';
    src: url('/static/fonts/envogue-webfont.eot');
    src: url('/static/fonts/envogue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/envogue-webfont.woff2') format('woff2'),
         url('/static/fonts/envogue-webfont.woff') format('woff'),
         url('/static/fonts/envogue-webfont.ttf') format('truetype'),
         url('/static/fonts/envogue-webfont.svg#envoguebold') format('svg');
        font-weight: normal;
        font-style: normal;

}





/* ==========================================================================
   #General
   ========================================================================== */

html,
body { height: 100%; }

body {
    background-color: var(--background-color);
    color: var(--color-green);

    font-family: EnVogue;
    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: 250%;
}

a { text-decoration: none; }

/* FIXME: too general. Scope under .main__content. */
li {
    text-indent: -12px;
    margin-left: 12px;
}
li:before {
    content: "– ";
}



/* ==========================================================================
   ##Structure
   ========================================================================== */

.main-wrapper { height: 100%; }





/* ==========================================================================
   ##Toggle button
   ========================================================================== */

.btn-toggle {
    box-sizing: border-box;
    position: fixed;
    top: 200px;
    left: calc(var(--expanded-content-width) - var(--border-width));
    padding: 10px 20px;
    transform: rotate(-90deg);
    transform-origin: top left;

    border: var(--border-width) solid var(--color-red);
    background-color: white;

    cursor: pointer;
    z-index: 2;
}

.btn-toggle:before {
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;

    width: 100%;
    height: var(--border-width);

    background-color: white;

    content: "  ";
}

.btn-toggle:after {
    content: "réduire ▲";
    white-space: nowrap;
}

.is-collapsed
    .btn-toggle { left: calc(var(--collapsed-content-width) - var(--border-width)); }

.is-collapsed
    .btn-toggle:after { content: "agrandir ▼"; }





/* ==========================================================================
   #Feeds
   ========================================================================== */

.feeds {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    -ms-flex-flow: row wrap;
    flex-flow: row wrap;

    width: calc(100% - var(--expanded-content-width));
}

.is-collapsed
    .feeds { width: calc(100% - var(--collapsed-content-width)); }

.body--home
    .feeds { width: 100%; }



/* ##Feed filters
   ========================================================================== */

.feeds__filters {
    box-sizing: border-box;
    position: fixed;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - var(--expanded-content-width) - 20px);
    padding: 8px;

    border: var(--border-width) solid var(--color-green);
    background: white;

    font-size: 13px;

    text-transform: uppercase;
    z-index: 2;
}

.is-collapsed
    .feeds__filters { max-width: calc(100 - var(--collapsed-content-width) - 20px); }

.feeds__filters label { cursor: pointer; }

.feeds__filter { display: inline-block; }






/* ##feed entries
   ========================================================================== */

.feeds__feed {
    display: block;
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
}

.feeds__feed--hidden {
    display: none;
}

.feeds__entry {
    position: absolute;
    background-repeat: no-repeat;

    width: 200px;
    margin-bottom: 100px;

    /* FIXME: no need to prefix with postcss cssnext */
    cursor: -webkit-grab;
    cursor:    -moz-grab;
    cursor:         grab;
}

.feeds__entry.dragging {
    /* FIXME: no need to prefix with postcss cssnext */
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

.feeds__feed--satellite
    .feeds__entry h1 {
        position: absolute;
        top: -25px;
        left: -25px;

        color: white;

        font-size: 1.5em;
        line-height: 1.3em;
        text-shadow: 2px 2px 0px var(--color-red);

        text-transform: uppercase;

        display: none;
    }
.feeds__entry a { color: inherit; }

.feeds__feed--satellite
    .feeds__entry img {
        display: block;

        max-width: 200px;
        max-height: 400px;
        visibility: hidden;
    }

.feeds__entry:hover {
    /*background-color: white;*/
    z-index: 1;
}

.feeds__feed--satellite
    .feeds__entry:hover h1 { display: block; }

.feeds__feed--satellite
    .feeds__entry:hover img { visibility: visible; }

.feeds__feed--news
    .feeds__entry,
.feeds__feed--ads
    .feeds__entry {
        position: absolute;

        min-width: 200px;
        max-width: 300px;
        padding: 10px;

        overflow: hidden;

        outline: 4px solid;
    }

.feeds__feed--news
    .feeds__entry a,
.feeds__feed--ads
    .feeds__entry a {
        outline: none;
        color: inherit;
    }

.feeds__feed--news
    .feeds__entry h1,
.feeds__feed--ads
    .feeds__entry h1 {
        text-transform: uppercase;
    }

.feeds__feed--news
    .feeds__entry:hover,
.feeds__feed--ads
    .feeds__entry:hover {
        background: white;
        z-index: 1;
    }

.feeds__feed--news
    .feeds__entry {
        color: white;
}

.feeds__feed--news
    .feeds__entry
            img { display: none; }

.feeds__feed--news
    .feeds__entry:hover
            img { display: block; }

.body--home .feeds__feed--news
    .feeds__entry {
        background-color: var(--color-red);
    }

.feeds__feed--news
    .feeds__entry:hover { color: var(--color-red); }

.body--home .feeds__feed--news
    .feeds__entry:hover { background-color: white; }

.feeds__feed--ads
    .feeds__entry {
        max-height: 300px;
        overflow: hidden;

        /*color: white;*/
        /*background-color: var(--color-green);*/
    }

.body--home .feeds__feed--ads
    .feeds__entry {
        background-color: white;
    }

.feeds__feed--ads
    .feeds__entry:hover { color: var(--color-green); }






/* ==========================================================================
   #Main
   ========================================================================== */

.main {
    box-sizing: border-box;
    padding: var(--line-height);
}

.main--home {
    /* FIXME: centering like creates a bug with Firefox and outlines. Use
     * <https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/>
     * instead.
     */
    position: fixed;
    top: 50%;
    left: 50%;
}

.main--no-home {
    position: relative;

    width: var(--expanded-content-width);
    min-height: 100vh; /* was 100% */
    min-width: calc(var(--min-content-width) - var(--min-content-distance-right));
    padding-bottom: calc(var(--line-height) * 10);

    border-right: var(--border-width) solid var(--color-red);
    background-color: white;
}

.is-collapsed
    .main--no-home {
    width: var(--collapsed-content-width);
    min-width: initial;
}





/* ##Main Header
   ========================================================================== */

.main--home
    .main__header {
        width: 370px;
        height: 150px;
        /* FIXME: centering like creates a bug with Firefox and outlines. Use
         * <https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/>
         * instead.
         */
        transform: translate(-50%, -50%);

        /*outline: 4px solid var(--color-red); */
        border: 4px solid var(--color-red);
        box-sizing: padding-box;
        background-color: white;

        transition: all var(--transition-time);
    }

/* FIXME: do not use element selector */
@media only screen and (min-width: 800px) {
body.no-touch
    .main--home
        .main__header:hover {
            width: 500px;
            height: 300px;
        }
}

.main--no-home .main__header {
    display: flex;
    flex-flow: row;
    align-content: flex-start;
}

.main__logo {
    background-image: url("/static/img/logo-notext.png");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: center center;

    text-indent: -9999px;
}

.main__logo a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.main__lang {
    display: flex;
    justify-content: space-around;
    font-size: 0.75em;
    text-transform: uppercase;

}
.main--home
    .main__lang {
        position: absolute;
        top: 45%;
        width: 100%;
        padding: 0 var(--line-height);
        box-sizing: border-box;
}

.main__lang a { color: var(--color-red); }

.main__lang a:hover { color: var(--color-green); }

.main__nav {
    text-align: center;
    margin-top: calc(var(--line-height) / 2);
}

/* FIXME: should not be necessary if li rules are scoped under .main__content. */
.main__lang li:before,
.main__nav li:before { display: none; }

.main__lang li,
.main__nav li {
    text-indent: 0;
    margin-left: 0;
}
/* END FIXME */

.main--no-home
    .main__nav {
        flex: 1 1 auto;
    }

.main--home .main__logo,
.main--home .main__header__logo__lang {
    height: 100%;
    position: relative;
}

.main--no-home .main__header h1 {
    height: 60px;
    min-width: 95px;
    background-size: 100%;
}

.main--no-home
    .main__nav > ul {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;

        justify-content: space-around;
    }

.main__nav > ul > li {
    position: relative;

    padding: calc(var(--line-height) / 2);

}

.main--no-home
    .main__header {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(var(--expanded-content-width) - 2 * var(--line-height) - var(--border-width));
        z-index: 1;
        padding: var(--line-height);
        background-color: white;
    }

.is-collapsed
    .main--no-home
        .main__header {
            width: calc(var(--collapsed-content-width) - 2 * var(--line-height) - var(--border-width));
        }

.main--home
    .main__nav > ul > li { position: absolute; }

/* Home page menu */

.main--home
    .main__nav > ul > li:nth-child(1) {
        top: 0;
        left: 0;
    }

.main--home
    .main__nav > ul > li:nth-child(2) {
        top: 0;
        right: 0;
    }

.main--home
    .main__nav > ul > li:nth-child(3) {
        right: 0;
        bottom: 0;
    }

.main--home
    .main__nav > ul > li:nth-child(4) {
        bottom: 0;
        left: 0;
    }

.main__nav > ul > li > ul { position: absolute; }

.main--home
    .main__nav > ul > li:nth-child(1) > ul {
        top: -50px;
        left: -50px;
    }

.main--home
    .main__nav > ul > li:nth-child(2) > ul {
        top: -50px;
        right: -50px;
    }

.main--home
    .main__nav > ul > li:nth-child(3) > ul {
        right: -50%;
        bottom: -50%;
    }

.main--home
    .main__nav > ul > li:nth-child(4) > ul {
        bottom: -50px;
        left: -50px;
    }

.main__nav .menu__item {
    color: var(--color-red);
    text-transform: uppercase;
    cursor: s-resize;
}

.main__nav > ul > li ul { display: none; }

.main--home
    .main__nav > ul > li ul {
        padding: calc(var(--line-height) / 2);

        outline: 4px solid var(--color-red);
        background-color: white;
    }

.main__nav > ul > li:active ul,
.main__nav > ul > li:hover ul,
.main__nav > ul > li.child--force_reveal ul { display: block; }

.main--no-home
    .main__nav > ul > li ul {
        cursor: s-resize;
        z-index: 1;
        width: 100%;
        left: 0;
        top: 0;
        outline: 4px solid var(--color-red);
        padding-top: calc(var(--line-height) * 2);
    }

.main--no-home
    .main__nav > ul > li ul li {
        cursor: default;
        background: white;
    }

.main--no-home
    .main__nav > ul > li ul li:last-of-type {
        padding-bottom: var(--line-height);
    }

.main__nav li li:before {
    display: block;

    color: var(--color-red);

    content: "•";
}

.main--home .main__nav li li:first-of-type:before {
    display: none;
}

.main__nav a { color: var(--color-green); }

.main__nav a:hover { color: var(--color-red); }

.main--stick-to-bottom {
    position: fixed;
    bottom: 0;
    overflow: auto;
}

.main--no-home
    .main__header-spacer {
        height: 102px;
        margin-top: -var(--line-height);
    }

.responsive-hamburger {
    display: none;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--color-red);
    line-height: 40px;
}

.responsive-hamburger:before {
    content: "Menu"
}

.reveal-nav .responsive-hamburger:before {
    content: "×";
    font-weight: bold;
}

/*
.reveal-nav {
    overflow: hidden;
}*/

.reveal-nav
    .main__header {
        bottom: 0px; /* Grow menu to cover whole screen */

    }

.reveal-nav
    .main--no-home
        .main__header
            .main__nav {
                display: block;
                position: absolute;
                top: 70px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                overflow: auto;
                padding-bottom: calc(2 * var(--line-height));
            }

.reveal-nav
    .main__header
        .main__nav > ul {
            justify-content: center;
        }

.reveal-nav
    .main__header
        .main__nav > ul > li {
            margin-top: var(--line-height);
            padding: 10px;
            max-width: calc(40% - 20px);
            min-width: 170px;
        }

.reveal-nav
    .main__header
        .main__nav > ul > li ul {
            display: inline-block;
            position: relative;
            padding: 0;
            outline: 0;
        }
.reveal-nav
    .main--home
        .main__nav > ul > li ul li:last-of-type,
.reveal-nav
    .main--no-home
        .main__nav > ul > li ul li:last-of-type {
            padding-bottom: 0px;
        }

.reveal-nav
    .main--home
        .main__nav li li,
.reveal-nav
    .main--no-home
        .main__nav li li {
            margin-top: calc(.5 * var(--line-height));
        }
.reveal-nav
    .main--home
        .main__nav li li:before,
.reveal-nav
    .main--no-home
        .main__nav li li:before {
            display: none;
        }
/* ##Main content
   ========================================================================== */

.main__content { padding: 0px 12.5% 0; }

.main__content__header { margin-bottom: calc(var(--line-height) * 3); }

.main__content__header h1,
.main__content h2,
.main__content h3 {
    margin-right: -15.625%;
    margin-left: -15.625%;
    text-align: center;
    word-break: break-word;
}

.main__content__header h1 {
    color: var(--color-red);

    font-size: calc(3 * var(--font-size));
    line-height: calc(var(--line-height) * 3);

    text-transform: uppercase;
}

.main__content__header .subhead {
    /*font-family: scripte;*/
    font-size: calc(2 * var(--font-size));
    line-height: calc(var(--line-height) * 1.5);

    text-align: center;
}

.main__content h2 {
    padding-top: calc(var(--line-height) * 3);
    margin-top: 0px;
    margin-bottom: calc(var(--line-height) * 1);

    color: var(--color-red);

    font-size: calc(2 * var(--font-size));
    line-height: calc(var(--line-height) * 2);

    text-transform: uppercase;
}

.main__content h3 {
    padding-top: var(--line-height);
    margin-top: 0px;
    margin-bottom: var(--line-height);

    /*font-family: scripte;*/
    /*font-size: calc(2 * var(--font-size));*/
    /*line-height: calc(var(--line-height) * 2);*/
    text-decoration: underline;
}

.main__content p + p,
.main__content p + ul,
.main__content p + ol { margin: var(--line-height) 0; }

.main__content a { color: var(--color-red); }

.main__content a:hover {
    position: relative; /* Avoids the outline to flow into css columns */

    outline: 4px solid;
    outline-offset: 4px;
}

.main__content img { max-width: 100%; }




/* #News
   ========================================================================== */


.news-item__header,
.news-item-detail .main__content__header {
    text-align: center;
}

.news-item__header:after,
.news-item-detail .main__content__header:after {
    content: "•";
    margin: var(--line-height);
    display: block;
    color: var(--color-red);
}

.news-item__header h1 {
    margin-right: -15.625%;
    margin-left: -15.625%;

    padding-top: calc(var(--line-height) / 4);
    margin-top: 0px;
    margin-bottom: calc(var(--line-height) / 2);

    /*font-family: scripte;*/
    font-size: calc(2 * var(--font-size));
    line-height: calc(var(--line-height) * 2);
    text-transform: uppercase;
}

.news-item .subtitle {
    text-decoration: underline;
}

.news-item__header .oneliner,
.news-item-detail .oneliner {
    /*line-height: calc(var(--line-height) + 5px);*/
    max-width: 75%;
    margin: auto;
}

.news-item-detail .main__content__header h1 {
    padding-top: calc(var(--line-height) / 2);
    margin-top: 0px;
    margin-bottom: calc(var(--line-height) / 2);
}




/* ==========================================================================
   #Helpers
   ========================================================================== */



/* ##Pagination
   ========================================================================== */
.pagination {
    text-align: center;
}


/* ##Carousel
   ========================================================================== */
.jcarousel {
    margin-top: var(--line-height);
    outline: none;
    height: auto;
    background-color: azure;
}
.jcarousel-control-prev,
.jcarousel-control-next {
    box-sizing: border-box;
    padding: 5px;
    background-color: white;
}
.main__content .jcarousel-control-prev:hover,
.main__content .jcarousel-control-next:hover {
    background-color: var(--color-red);
    color: white;
    outline: none;
    position: absolute;
}
.jcarousel-item {
    position: relative;
}
.jcarousel-item .filer_image_info .title {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: white;
    text-shadow: 0px 0px 2px black;
}

/* ##Zig zag lists
   ========================================================================== */

.zigzag li {
    text-align: center;
    text-indent: 0;
    margin-left: 0;
}
.zigzag li:before {
    content: "";
}
.zigzag li ul {
    margin-top: calc(var(--line-height) / 2 - 1);

    border-top: 1px solid var(--color-green);
}

.zigzag li li {
    padding: calc(var(--line-height) / 4);

    border-bottom: 1px solid var(--color-red);

    text-transform: none;
}

.zigzag li li:nth-child(odd) {
    border-left: 1px solid var(--color-red);
    text-align: left;
}

.zigzag li li:nth-child(even) {
    border-right: 1px solid var(--color-red);
    text-align: right;
}
.zigzag li:last-child {
    margin-bottom: calc(var(--line-height) * 2);
}

.zigzag li a { display: inline-flex; }





/* ##Bullet-lists
   ========================================================================== */

.bullet-list { text-align: center; }

.bullet-list li:before {
    display: block;

    content: "•";
}
.bullet-list li {
    text-indent: 0;
    margin-left: 0;
}





/* ##Columns
   ========================================================================== */

/* FIXME: declare size specific css in a mediaquery rule */
.column { column-gap: calc(var(--line-height) * 2); }


.column p,
.column li { break-inside: avoid-column; }

.column--small { column-count: 3; }

.column--small {
    margin-right: calc(-15.625% / 2);
    margin-left: calc(-15.625% / 2);
}

.column--big {
    margin-right: calc(-15.625% / 2);
    margin-left: calc(-15.625% / 2);

    column-count: 2;
}

.column--big h1,
.column--big h2,
.column--big h3 {
    margin-right: 0;
    margin-left: 0;
}

.column--big p,
.column--big ul {
    break-inside: avoid-column;
}




/* ##Metadata
   ========================================================================== */

/* FIXME: does not follow BEM notation. */
.course--metadata {
    text-align: center;

    margin-bottom: var(--line-height);
}

.course--metadata dt { display: none; }

.course--metadata .separator + dd:before {
    display: block;

    color: var(--color-red);

    content: "•";
}
.course--description--section {
    break-inside: avoid-column;
}

/* ##Members
   ========================================================================== */

.portrait {
    margin-right: var(--line-height);
    margin-bottom: var(--line-height);
    float: left;
}

/* FIXME: does not follow BEM notation. */
.teachers--list {
    text-align: center;
}

/* FIXME: does not follow BEM notation. */
.teachers--list li:before {
    content: "";
}

/* FIXME: does not follow BEM notation. */
.teachers--list li {
    text-indent: 0;
    margin-left: 0;
}

.orientation {
    display: inline-block;
}


/* ##Contact
   ========================================================================== */

.osm {
    width: 100%;
    height: calc(var(--line-height) * 20);
}
.osm + small a {
    text-align: center;
}


/* ##CMSPlugin file
   ========================================================================== */

[alt="Icon"],
.filesize { display: none; }


/* FIXME: move mediaqueries next to their related declaration */
/* ##Media Queries
   ========================================================================== */
/*# Mobile*/

.is-collapsed
    .main__content {
        /*padding-top: 60px;*/
    }

.is-collapsed
    .column--big {
        column-count: 1;
    }

.is-collapsed
    .column--small {
        column-count: 2;
    }

.is-collapsed
    .main--no-home h1.main__logo {
        height: 30px;
        background-size: contain;
    }

.is-collapsed .main__content__header h1 {
    font-size: calc(var(--font-size) * 2);
    line-height: calc(var(--line-height) * 2);
    margin-bottom: 0px;
}
.is-collapsed header h1 {
    font-size: calc(var(--font-size) * 1.5);
    line-height: calc(var(--line-height) * 1.5);
    /*margin-bottom: 0px;*/
}

.is-collapsed h2 {
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding-top: calc(2 * var(--line-height));
    margin-top: 0px;
}

.is-collapsed h3 {
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding-top: var(--line-height);
    margin-top: 0px;
}

.touch
    .main--no-home
        .main__nav {
            display: none;
        }
.touch
    .main--no-home
        .responsive-hamburger {
            display: block;
            padding: calc(var(--line-height) / 2) var(--line-height);
}

@media only screen and (max-width: 1400px) {
    .is-collapsed
        .main--no-home
            .main__header {
                flex-flow: row wrap;
                justify-content: space-around;
            }

    .is-collapsed
        .main--no-home
            .responsive-hamburger {
                display: block;
            }

    .is-collapsed
        .main--no-home
            .main__nav {
                display: none;
            }
}

@media only screen and (max-width: 1200px) {
    .is-collapsed
        .column--small {
            column-count: 1;
        }
}

/* Style to make collapse button stick when the min-width for the main-content is reached */
@media only screen and (max-width: 1133px) {
    .btn-toggle {
        left: calc(var(--min-content-width) - var(--min-content-distance-right) - var(--border-width));
    }

    .main--no-home
        .main__header {
            width: calc(800px - var(--min-content-distance-right) - 2 * var(--line-height) - var(--border-width));
        }
}

@media only screen and (max-width: 800px) {
    .main--no-home,
    .is-collapsed
        .main--no-home {
            width: calc(100% - var(--min-content-distance-right));
            min-width: initial;
        }

    .btn-toggle { left: calc(100% - var(--min-content-distance-right) - var(--border-width)); }

    .is-collapsed
        .main--no-home {
            left: calc(-100% + 1.5 * var(--min-content-distance-right));
        }

    .main--no-home
        .main__header, q
    .is-collapsed
        .main--no-home
            .main__header {
                width: calc(100% - 2 * var(--line-height) - var(--min-content-distance-right) - var(--border-width));
            }

    .is-collapsed
        .main--no-home
            .main__header {
                left: -100%;
            }

    .is-collapsed
        .btn-toggle { left: calc(.5 * var(--min-content-distance-right) - var(--border-width)); }

    .feeds,
    .is-collapsed
        .feeds { width: calc(100% - .5 * var(--min-content-distance-right)); }

    .feeds__filters {
        display: none;
    }

    .is-collapsed
        .feeds__filters {
            display: inline;
            display: initial;
            max-width: calc(100% - 2 * var(--line-height) - var(--min-content-distance-right));
        }

    .main__header {
        align-items: flex-start;
    }

    .main__content { padding: 0px 10px 0; }

    .main__content__header h1,
    .main__content h2,
    .main__content h3 {
        margin-right: 0;
        margin-left: 0;
    }

    .main__content__header {
        margin-bottom: 0px;
    }


    .main__content__header h1 {
        font-size: calc(var(--font-size) * 2);
        line-height: calc(var(--line-height) * 2);
        margin-bottom: var(--line-height);
    }
    header:not(.main__content__header) h1,
    .main__content .subhead,
    .main__content h2, .main__content h3 {
        font-size: calc(var(--font-size) * 1.25);
        line-height: var(--line-height);
    }

    .main__content h2 {
        padding-top: 0;
        margin-top: 0px;
        margin-bottom: var(--line-height);
    }

    .main__content h3 {
        padding-top: var(--line-height);
        margin-top: 0px;
    }

    .main--no-home
        .main__header h1 {
            height: 30px;
            background-size: contain;
        }

    .main--no-home
        .main__header {
            flex-flow: row wrap;
            justify-content: space-around;
        }

    .main--no-home
        .responsive-hamburger {
            display: block;
        }

    .main--no-home
        .main__nav {
            display: none;
        }

    .column--big,
    .column--small {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .column--small {
        column-count: 2;
    }

    .main__content img {
        max-width: 75%;
        margin: 0 12.5% var(--line-height) 12.5%;
    }
}

@media only screen and (max-width: 650px) {

    .main__content__header .subhead { margin-bottom: var(--line-height); }

    .column--big {
        column-count: 1 !important;
    }
}

@media only screen and (max-width: 480px) {
    body {
        font-size: var(--font-size2);
        line-height: var(--line-height2);
    }

    .main--home {
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .body--home .responsive-hamburger {
        display: block;
        position: absolute;
        top: var(--line-height2);
        left: 0;
        right: 0;
        text-align: center;

    }
    .body--home.reveal-nav .main--home {
        bottom: 0;
    }
    .body--home .main__header {
        min-height: 120px;
    }
    .body--home.reveal-nav .main__header {
        height: auto;
    }
    .body--home
        .main__header
            .main__logo {
                background-position: center calc(var(--line-height)*2);
    }
    .body--home
        .main__header
            .main__logo {
                height: 100px;
            }
    .body--home
        .main__header
            .main__lang {
                top: calc(var(--line-height) * 2.5);
            }
    .body--home.reveal-nav
        .main__header
            .main__nav {
                top: calc(var(--line-height) * 4);
                display: block;
            }
    .body--home.reveal-nav
        .main__header
            .main__nav > ul > li {
                max-width: none;
                position: initial;
    }
    .body--home.reveal-nav
        .main__header
            .main__nav > ul > li > span.menu__item {
            display: block;
    }
    .body--home.reveal-nav
        .main__header
            .main__nav > ul > li ul {
            position: initial;
    }


    .main__content {
        padding-top: var(--line-height);
    }

    .main__content__header h1 {
        font-size: calc(var(--font-size2) * 2);
        line-height: calc(var(--line-height2) * 2);
        margin-bottom: 0;
    }
    .main__content article h1,
    .main__content .subhead,
    .main__content h2, .main__content h3 {
        font-size: calc(var(--font-size2) * 1.25);
        line-height: var(--line-height2);
        margin-bottom: 0;
    }

    .main__content h2 {
        padding-top: var(--line-height2);
        margin-top: 0px;
    }

    .main__content h3 {
        padding-top: var(--line-height2);
        padding-bottom: var(--line-height2);
        margin-top: 0px;
    }
    .main--home {
        top: 0;
        left: 0;
        right: 0;
        padding: calc(var(--line-height) / 2);
    }
    .main--home
        .main__nav {
            display: none;
        /*position: absolute;*/
        left: 0;
        right: 0;

        }

    .main--home
        .main__header {
            transform: none;
            width: auto;
    }
    .main__nav > ul > li {
        padding: var(--line-height);
    }

    .column--small { column-count: 1; }

    a { word-break: break-word; }
}

#debug-info {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 150px;
    z-index: 8;
    background-color: white;
    border: 2px solid blue;
    padding: 5px;
}


@media only print {
    .btn-toggle,
    .main__header,
    .main__header-spacer,
    .feeds { display: none!important; }

    .main--no-home {
        border: none;
        padding-bottom: initial; 
    }

    .course--description {
        column-count: 1;
    }

    .main-wrapper {
        height: initial;
        padding: 2em;
    }
}

 @page { 
     margin: 0;
     size: auto;
}

.logo50 {
    position: fixed;
    width: 140px;
    z-index: 1;
    top: 20px;
    right: 20px;
}

.body--home.touch .logo50 {
    top: auto;
    bottom: 20px;
}

.logo50__link,
.logo50__img {
    width: 100%;
    display: block;
}

.logo50:hover {
    width: 160px;
}
Open Source Publishing

le75 clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

le75
clone your own copy | download snapshot
