model for flexible UI

template.css

@charset "UTF-8";

@import "https://fonts.googleapis.com/css?family=Roboto";
@import "https://fonts.googleapis.com/css?family=Raleway";
@import "https://fonts.googleapis.com/css?family=Open-Sans";

:root { --y-axis: 200px }

_:-ms-lang(x), @supports (not (--var: 0)) {
    [class$='\66\78' i]:not(:empty):nth-child(-4+3n)::after, section { width: calc(var(--y-axis) * 100)) }
}

@media screen and (max-width: 540px) { * { --y-axis: 540px } }

* {
    margin:  0;
    border:  0;
    padding: 0;
    outline: 0;

    list-style:             none;
    text-decoration:        none;
    text-rendering:         optimizeLegibility;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-webkit-font-smoothing: subpixel-antialised;
       -moz-webkit-font-smoothing: subpixel-antialised;
        -ms-webkit-font-smoothing: subpixel-antialised;
         -o-webkit-font-smoothing: subpixel-antialised;

    -webkit-user-select: none;
      -webkit-user-drag: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

/* SCROLLBAR */

::-webkit-scrollbar             { width: 2px; background: transparent }
::-webkit-scrollbar-thumb       { background: rgba(255, 255, 255, .5) }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255,  1) }

/* VARIABLES */

@supports (--var: 0) {
    :root {
        /* menu */
        --char  : ">";
        --axis-x: 10px;
        --axis-y: 10px;

        /* colors & shades */
        --accent: #f30201;
        --shadow: rgba(0, 0, 0, .25);
    }
}

/* IE9 FIXES */

@supports (not (animation: _)) { .______ { display: none !importantimportant } }

@supports ((-webkit-animation: _) and (animation: _)) {
    @-webkit-keyframes _ {
        from { top: 0 }
        to { top: 50% }
    }

    @keyframes _ {
        from { top: 0 }
        to { top: 50% }
    }
}

/* RESPONSIVE ADJUSTMENTS */

@media screen and (max-width: 500px) { *:not([class^='_']):not([class^='&']):not([id$='-']) { --accent: #000 } }

@media (max-width: 800px) and (max-width: 1024px) {
    .\&menu, .\&nav { display: block !important }
    html, body      { font-size: 100%  !important}
    main > section  { display: inline-flex !important }
}

/* ELEMENTS */

[class^="_"] {
    top:    calc(var(--axis-x) * 200);
    bottom: calc(var(--axis-y) * 500);

    top:    0;
    left:   0;
    right:  0;
    bottom: 0;
}

/* CENTERED ELEMENTS */

[class*="\2d"] {
    display: flex;
    -webkit-flex-wrap: wrap;
       -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
         -o-flex-wrap: wrap;
            flex-wrap: wrap;

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

/* MAIN PANEL */

._ ul li:nth-child(3n) { background: var(--accent) }

._ ul li:empty { --axis-x: calc(var(--axis-y) / 2) }

._ ul li:not(:empty):hover ~ li:nth-child(0) { margin: var(--axis-x) 10px 0 0 }
._ ul li:not(:empty):hover ~ li:nth-child(1) { margin: var(--axis-x) 20px 0 0 }
._ ul li:not(:empty):hover ~ li:nth-child(2) { margin: var(--axis-x) 30px 0 0 }
._ ul li:not(:empty):hover ~ li:nth-child(3) { margin: var(--axis-x) 40px 0 0 }

._ ul li::after {
    content: attr(date) var(--char);
    color: var(--accent);

    background: -webkit-linear-gradient(bottom, var(--accent) -100px, rgba(255, 255, 255, .15));
    background:      -o-linear-gradient(bottom, var(--accent) -100px, rgba(255, 255, 255, .15));
    background:         linear-gradient(to top, var(--accent) -100px, rgba(255, 255, 255, .15));

    position: absolute;
    border-radius: 50%;
    display: inline-block;
}

._ ul li::after:hover { --char: "->" }

._[name$='.com' i]:not(:empty) { color: var(--accent) }

/* SECTIONS */

main > section {
    -webkit-box-shadow: 2px 0 5px 0 var(--shadow);
            box-shadow: 2px 0 5px 0 var(--shadow);
} 

main > section:hover { --shadow: rgba(0, 0, 0, .35) }

:-webkit-any(a, b) c {

}