index.css

:root {
    --primary-color: #021f42;
    --secondary-color: #e40000;
}

* {
    box-sizing: border-box;
    font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--primary-color);
}

html, body {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    flex-direction: column;
}

body > header {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 3fr auto;
}

body > main {
    flex: 1;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
    overflow-y: auto;
}

body > footer {
    display: grid;
    grid-auto-flow: column;
    border-collapse: collapse;
}

.view-switch {
    font-size: 1.5em;
    height: 3em;
    line-height: 3em;
    border: 1px solid var(--primary-color, black);
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

body > footer > input {
    display: none;
}

input[type="radio"]:checked+label.view-switch { 
    font-weight: bold; 
}

h1 {
    text-align: center;
}

details {
    padding: 10px;
}

form {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

form > input[type=submit] {
}

button, input[type=button], input[type=submit], .btn {
    justify-self: center;
    text-transform: uppercase;
    font-size: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
}

code + pre {
    background: lightgray;
    padding: 10px;
}

/* Login */
section.login > input {
    display: none;
}

/* Info field */
.info-field {
    padding: 0.5rem 1rem;
    transform: scaleY(0);
    transition: transform 1s ease-in-out;
}

.info-field::before {
    margin-right: 0.5rem;
}

.info-field.error {
    background-color: var(--color-error-background, red);
    color: var(--color-error, darkred);
    transform: scaleY(1);
}

.info-field.error::before {
    content: '🛑'
}

.info-field.warning {
    background-color: var(--color-warning-background, yellow);
    color: var(--color-warning, orange);
    transform: scaleY(1);
}

.info-field.warning::before {
    content: '⚠️';
}

.info-field.success {
    background-color: var(--color-success-background, lightgreen);
    color: var(--color-success, green);
    transform: scaleY(1);
}

.info-field.success::before {
    content: '✔️';
}

.info-field.info {
    background-color: var(--color-info-background, lightgray);
    color: var(--color-info, darkgray);
    transform: scaleY(1);
}

.info-field.info::before {
    content: 'ℹ️';
}

/* Views */
.view[name=feed]:not([hidden]) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view[name=feed] > .feed {
    flex: 1;
    overflow-y: auto;
}

article {
    padding: 10px;
    margin: 10px;
    display: grid;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    border-radius: 0.33rem;
    grid-template-areas:
        "aside-left header aside-right"
        "aside-left main aside-right"
        "aside-left footer aside-right"
    ;
    grid-auto-columns: auto 1fr max-content;
    grid-template-columns: auto 1fr max-content;
    grid-auto-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
}

article > header {
    grid-area: header;
}

article > aside.right {
    grid-area: aside-right;
    align-self: center;
}

article > main {
    grid-area: main;
}

article > aside.left {
    grid-area: aside-left;
}

article > footer {
    grid-area: footer;
    text-align: center;
    display: grid;
    grid-auto-flow: column;
    font-size: 0.8rem;
    color: #676;
}

.time {
    justify-self: flex-start;
}

.time::before {
    content: '🕗';
    filter: grayscale(1);
}

.comments::before {
    content: '💬';
    filter: grayscale(1);
}

.geolocation {
    justify-self: flex-end;
}

.geolocation::before {
    content: '📍'; /* 🌍 */
    filter: grayscale(1);
}

.votes {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    justify-items: center;
}

.votes button {
    border-radius: 0.33rem;
    border: 1px solid rgba(0, 0, 0, 0.3);
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0;
    line-height: 1rem;
    font-size: 1rem;
    text-align: center;
    text-transform: lowercase;
}

.post-new {
    display: flex;
    flex-direction: row;
}

.post-new > textarea {
    flex: 1;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.3);
}