FabulaVotes/static_files/style.css

.top_bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 2em;
}

.page_body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.truth_list {
    display: flex;
    flex-direction: column;
    width: 50vw;
    padding-left: 1eM;
}

.individual_truth {
    padding-bottom: 2em;
}

.individual_truth > h3 {
    text-align: center;
    padding-bottom: 4px;
    border-bottom: slategray solid 0.15em;
}

.editor {
    width: calc(100% - 1.25em); /* The width is calculated *inside* the padding, so adjust for it. */
    height: 6eM;
    font-size: large;
    padding: 0.5em;
    margin-bottom: 1em;
}

.graph {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-right: 2vw;
    width: 45vw;
    height: auto;
}

.graph > div {
    width: 100%;
    height: 80vh;
    position: sticky;
    top: 25%;
}

.week_change:link, .week_change:visited {
    color: black;
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.week_change:hover, .week_change:focus {
    color: mediumpurple;
    text-shadow: 0 2px 2px slategray;
}

.week_change_hidden {
    padding-left: 0.5eM;
    padding-right: 0.5eM;
}

@media (orientation: portrait) {
    .truth_list {
        width: 60vw;
    }

    .graph {
        width: 35vw;
    }
}

/* Global styling */

hr {
    border: none;
    border-top: 2px dotted slategray;
    color: slategray;
    overflow: visible;
    text-align: center;
    height: 5px;
    width: 100%;
}

blockquote {
    border-left: 2px solid #9ec5fe;
    padding-left: 1eM;
    margin-left: 1.5eM
}

blockquote > blockquote {
    margin-left: 0.5em;
}

body {
    margin-bottom: 10eM;
}

body > h2 {
    padding-left: 0.25eM;
}