<commit_before>@import 'reset.scss';
@import 'base_layout/css/common.scss';

// desktop screens
$screen-lg-min: 1200px;
// landscape tablets
$screen-md-max: 1199px;
$screen-md-min: 980px;
// tablets
$screen-sm-max: 979px;
$screen-sm-min: 768px;
// landscape phones / small tablets
$screen-xs-max: 480px;
$screen-xs-min: 480px;

@media screen and (min-width: $screen-lg-min) {
    .hidden-lg-up { display: none; }
}
@media screen and (min-width: $screen-md-min) {
    .hidden-md-up { display: none; }
}
@media screen and (min-width: $screen-sm-min) {
    .hidden-sm-up { display: none; }
}
@media screen and (min-width: $screen-xs-min) {
    .hidden-xs-up { display: none; }
}

// note that these are minimum heights
$main-header-height: 225px;
$main-footer-height: 320px;
$main-header-actual: 275px;
$main-footer-actual: $main-footer-height + $spacing-large * 2;
// ugly interpolation syntax because SCSS variables only work inside calc this way
$main-content-height: calc(100vh - #{$main-header-actual} - #{$main-footer-actual});

@import '_general.scss';
@import '_header.scss';
@import '_programme.scss';
@import '_primary.scss';
@import '_sidebar.scss';
@import '_footer.scss';

/* Stream */
.stream-window {
    width: 644px;
    height: 276px;
    margin: 0 auto;
    text-align: center;
}

#page-header nav ul {
    transition: max-height $transition-large ease-in-out;
}

#page-header a,
.btn,
#sidebar-widgets .social-media a,
#page-header nav ul .menu-item a {
    -webkit-transition: all $transition-small ease-in-out;
    transition: all $transition-small ease-in-out;
}

// TODO: Try to separate large-scale layout media queries from the rest.
// - move them to _general.scss?

/* Large desktop */
@media (min-width: 1200px) {
    .container {
        width: 1024px;
        margin: 0 auto;
    }

    #content #primary {
        width: 600px;
        margin-right: 100px;
    }

    #content aside {
        width: 300px;
    }

    #sidebar-widgets {
        width: 300px;
    }
}

@media (max-width: 1199px) {
    #page-footer .sponsors {
        width: 700px;
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    #content #primary {
        width: 560px;
    }
    #page-header .header-bg {
        background-position-x: calc(50% - 20px);
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }

    #content #primary {
        width: 520px;
        margin-right: 10px;
    }

    #sidebar-widgets {
        width: 200px;
    }

    .header-effect {
        display: none;
    }

    #page-footer .sponsors {
        width: 550px;
    }

    form input[type="text"] {
        width: 96%;
        padding: 2%;
    }

    #page-header .header-bg {
        background-position-x: calc(50% + 55px);
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0;
    }

    .snek {
        display: none;
    }

    .header-bg-1 {
        display: none;
    }

    #page-header .header-info {
        .time {
            padding-left: 0;
        }
        &:after {
            margin: 0;
        }
    }

    #content #primary {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 40px;
    }

    #sidebar-widgets {
        width: 100%;
    }

    .header-effect {
        display: none;
    }

    #page-footer {
        bottom: 0px;
        padding-top: 16px;

        .sitemap {
            width: 100%;
            margin: 0px 0px 20px 0px;

            li.menu-item {
                display: inline-block;

                a {
                    padding: 8px;
                }
            }
        }

        .sponsors {
            width: 100%;
            margin: 0;
        }

        .sponsors-container {
            padding-left: 8px; // match sitemap items
        }

        .contact {
            float: none;
        }
    }

    #content {
        padding-bottom: 40px;
    }

    form {
        label {
            min-width: 1px;
            display: block;
        }
<commit_msg>main2017: Improve sitemap layout on small devices<commit_after>@import 'reset.scss';
@import 'base_layout/css/common.scss';

// desktop screens
$screen-lg-min: 1200px;
// landscape tablets
$screen-md-max: 1199px;
$screen-md-min: 980px;
// tablets
$screen-sm-max: 979px;
$screen-sm-min: 768px;
// landscape phones / small tablets
$screen-xs-max: 480px;
$screen-xs-min: 480px;

@media screen and (min-width: $screen-lg-min) {
    .hidden-lg-up { display: none; }
}
@media screen and (min-width: $screen-md-min) {
    .hidden-md-up { display: none; }
}
@media screen and (min-width: $screen-sm-min) {
    .hidden-sm-up { display: none; }
}
@media screen and (min-width: $screen-xs-min) {
    .hidden-xs-up { display: none; }
}

// note that these are minimum heights
$main-header-height: 225px;
$main-footer-height: 320px;
$main-header-actual: 275px;
$main-footer-actual: $main-footer-height + $spacing-large * 2;
// ugly interpolation syntax because SCSS variables only work inside calc this way
$main-content-height: calc(100vh - #{$main-header-actual} - #{$main-footer-actual});

@import '_general.scss';
@import '_header.scss';
@import '_programme.scss';
@import '_primary.scss';
@import '_sidebar.scss';
@import '_footer.scss';

/* Stream */
.stream-window {
    width: 644px;
    height: 276px;
    margin: 0 auto;
    text-align: center;
}

#page-header nav ul {
    transition: max-height $transition-large ease-in-out;
}

#page-header a,
.btn,
#sidebar-widgets .social-media a,
#page-header nav ul .menu-item a {
    -webkit-transition: all $transition-small ease-in-out;
    transition: all $transition-small ease-in-out;
}

// TODO: Try to separate large-scale layout media queries from the rest.
// - move them to _general.scss?

/* Large desktop */
@media (min-width: 1200px) {
    .container {
        width: 1024px;
        margin: 0 auto;
    }

    #content #primary {
        width: 600px;
        margin-right: 100px;
    }

    #content aside {
        width: 300px;
    }

    #sidebar-widgets {
        width: 300px;
    }
}

@media (max-width: 1199px) {
    #page-footer .sponsors {
        width: 700px;
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    #content #primary {
        width: 560px;
    }
    #page-header .header-bg {
        background-position-x: calc(50% - 20px);
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }

    #content #primary {
        width: 520px;
        margin-right: 10px;
    }

    #sidebar-widgets {
        width: 200px;
    }

    .header-effect {
        display: none;
    }

    #page-footer .sponsors {
        width: 550px;
    }

    form input[type="text"] {
        width: 96%;
        padding: 2%;
    }

    #page-header .header-bg {
        background-position-x: calc(50% + 55px);
    }
}

/* Landscape phone to portrait tablet */
/* (this is the size where we drop the main layout columns ) */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0;
    }

    .snek {
        display: none;
    }

    .header-bg-1 {
        display: none;
    }

    #page-header .header-info {
        .time {
            padding-left: 0;
        }
        &:after {
            margin: 0;
        }
    }

    #content #primary {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 40px;
    }

    #sidebar-widgets {
        width: 100%;
    }

    .header-effect {
        display: none;
    }

    #page-footer {
        bottom: 0px;
        padding-top: 16px;

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

        .sitemap {
            width: 100%;
            margin: 0px 0px 20px 0px;

            li.menu-item {
                display: inline-block;

                a {
                    padding: 8px;
                }
            }
        }

        .sponsors {
            width: 100%;
            margin: 0;
        }

        .sponsors-container {
            padding-left: 8px; // match sitemap items
            .sponsor {
                display: inline-block;
                float: none;
            }
        }

        .contact {
            float: none;
        }
    }

    #content {
        padding-bottom: 40px;
    }

    form {
        label {
            min-width: 1px;
            display: block;
        }

{'fraction_non_alphanumeric': 0.13703271028037384, 'fraction_numerical': 0.035981308411214954, 'mean_word_length': 1.7904172099087354, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4325857', 'n_tokens_mistral': 3215, 'n_tokens_neox': 2841, 'n_words': 684}