indymedia-reboot/styles.css

/* Global variables */

:root {
    --shade0: #dddddd;
    --shade1: #bbbbbb;
    --shade2: #999999;
    --shade3: #777777;
    --shade4: #555555;
    --shade5: #333333;
    --shade6: #111111;

    --primary:              var(--shade1);
    --primary_background:   var(--shade4);
    --secondary:            var(--shade2);
    --secondary_background: var(--shade5);
    --tertiary:             var(--shade1);
    --tertiary_background:  var(--shade3);

    /* TODO: Replace colours with variables */
    --nav_bg:           var(--secondary_background);
    --link_bg:          green;
    --newswire_bg:      red;
    --feature_bg:       yellow;

    --newswire_border:  var(--shade1);

    --h1_size:          2em;
    --icon_sml:         32px;
    --icon_tiny:        16px;

    --space_default:    0.5em;
    --line_height:      1.3em;

    --image_feature:    calc(4 * var(--line_height) - .2em);

    --header_height:    4em;
    --container_height: calc(100vh - var(--header_height));

    --nav_width: 65%;
    --nav-width-tablet: 40%;

    --font-size-default:    18px;
    --font-family-default: "Georgia", serif;

    /* DEBUG TMP */
    --debug-border: 0px solid black;
}


/* Base defaults */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    color: var(--primary);

    font-size: var(--font-size-default);
    font-family: var(--font-family-default);

    text-decoration: none;
    line-height: var(--line_height);
}

/* Legacy Tweaks */

main, nav, aside, article, section, header, footer {
    display: block;
}


/* Universal */

h1 {
    font-size: var(--h1_size);
}
h2 {
    font-size: 1.6em;
}
h3 {
    font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica", "Arial", sans-serif;
}

li {
    list-style-type: none;
}

body > header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    position: sticky;
    top: 0;

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

    padding: 1em;

    background-color: var(--secondary_background);
}
body > header h1 {
    white-space: nowrap;
    overflow: hidden;
}

#main-wrapper {
    display: flex;

    width: 100%;
    min-height: var(--container_height);

    background-color: var(--primary_background);
}

#nav-check {
    display: none;
}
nav a,
#link a {
    display: block;
}

#feature > article:not(:last-child) {
    margin-bottom: calc(var(--space_default) * 2);
    border-bottom: 1px solid var(--primary);
}

#newswire {
    padding: var(--space_default);
}
#newswire .newswire-item:not(:last-child) {
    margin-bottom: var(--space_default);
}

.feature-image {
    float: left;
    margin-right: var(--space_default);

    width: var(--image_feature);
    height: var(--image_feature);
}
.feature-description {
    margin-top: var(--space_default);
}
.feature-links {
    margin-top: var(--space_default);
}

.horizontal-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--space_default);
    row-gap: calc(var(--space_default) / 2);
}
.horizontal-list li {
    width: calc(33% - var(--space_default));
    padding: calc(var(--space_default) / 2) var(--space_default);

    background-color: var(--tertiary_background);
}
.horizontal-list li div {
    display: flex;
    flex: initial;
    align-items: center;
}
.horizontal-list li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--tertiary);
}

.feature-item,
.newswire-item,
.link-section {
    padding: var(--space_default);
}

.newswire-item,
.link-section ul {
    padding: var(--space_default);

    background-color: var(--tertiary_background);
}
.newswire-item *,
.link-section ul * {
    color: var(--tertiary);
}

.source-document,
.source-photo,
.source-video {
    display: flex;
    align-items: center;
}

.source-document::before,
.source-photo::before,
.source-video::before {
    content: '';
    display: flex;

    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;
    margin-right: calc(var(--space_default) / 2);

    /* DEBUG TMP */
    border: 1px solid black;
    background-color: var(--secondary_background);
    color: var(--shade0);
    font-size: calc(var(--font-size-default) * 0.75);
    font-family: var(--font-family-default);
    font-weight: normal;
}

/* DEBUG TMP */
.source-document::before {
    content: 'T';
}
.source-photo::before {
    content: 'P';
}
.source-video::before {
    content: 'V';
}


/* Mobile and Tablet */
@media only screen and (max-width: 960px) {
    #main-wrapper {
        justify-content: flex-start;
        flex-direction: column;
    }

    menu {
        overflow: hidden;
    }

    #nav-toggle {
        display: block;
        z-index: 99;

        width: var(--icon_sml);
        height: var(--icon_sml);

        /* DEBUG TMP */
        background-color: orange;
    }
    #nav-check:not(:checked) ~ nav {
        right: calc(-1 * var(--nav_width));
    }

    nav {
        display: block;
        position: fixed;
        z-index: 99;

        top: var(--header_height);
        right: 0;
        width: var(--nav_width);
        padding: var(--space_default);

        height: calc(100vh - var(--header_height));

        background-color: var(--nav_bg);

        transition: right .3s ease;
    }
    nav li:not(:last-child) {
        margin-bottom: var(--space_default);
    }

    #link,
    #newswire,
    #feature {
        display: flex;
        flex-direction: column;

        width: 100%;
    }

    #link {
        order: 3;
        border: var(--debug-border);
        border-color: var(--link_bg);
    }

    #newswire {
        order: 2;
        border: var(--debug-border);
        border-color: var(--newswire_bg);
    }

    #feature {
        order: 1;
        border: var(--debug-border);
        border-color: var(--feature_bg);
    }
}


/* Tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
    nav {
        width: var(--nav-width-tablet);
    }

    .horizontal-list li {
        width: calc(25% - var(--space_default));
    }
}
@media only screen and (min-width: 640px) and (max-width: 960px) {
    #link,
    #newswire ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #link section,
    #newswire li {
        width: 50%;
    }
    #newswire li {
        padding: var(--space_default);
    }
}


/* Desktop */
@media only screen and (min-width: 961px) {
    #main-wrapper {
        flex-direction: row;
        justify-content: flex-start;
    }

    nav {
        display: flex;
        flex-direction: row;
    }
    nav li {
        padding: 0 var(--space_default);
    }
    nav li:not(:last-child) {
        border-right: 1px solid var(--secondary);
    }

    aside {
        overflow: scroll;
    }

    #link {
        order: 1;
        width: 15%;
    }
    #newswire {
        order: 3;
        width: 30%;
    }
    #feature {
        order: 2;
        width: 55%;
    }

    #link,
    #newswire {
        position: sticky;
        top: var(--header_height);
        overflow: auto;

        height: fit-content;
        max-height: calc(100vh - var(--header_height));
    }

    .horizontal-list li {
        width: calc(20% - var(--space_default));
    }
}

.clippable * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}