FabulaVotes/static_files/style.css

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

.top_bar_side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

.top_bar_side > * {
    padding: 0 0.5em;
}

.truth_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;
}

.individual_truth p {
    padding: 0 0.5em;
}

.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;
}

.truth_edit_form {
    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,
.individual_truth > a, .individual_truth > a:link, .individual_truth > a:visited,
nav > a, nav > a:link, nav > a:visited,
h1 > a, h1 > a:link, h1 > a:visited {
    color: black;
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.week_change:hover, .week_change:focus,
.individual_truth > a:hover, .individual_truth > a:focus,
nav > a:hover, nav > a:focus,
h1 > a:hover, h1 > a: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;
    }
}

.tag_list {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    max-height: 40vh;
    margin-bottom: 1em;
}

@media (orientation: portrait) {
    .tag_list {
        max-height: none;
    }
}

.new_tag {
    display: flex;
    flex-direction: column;
    border: black dashed 1px;
    padding: 0.5em;
    margin-top: 0.5em;
    width: fit-content;
}

.new_tag > button {
    margin-top: 1em;
}

.tag {
    display: flex;
    justify-content: center;
    margin: 0.25em;
    width: fit-content;
    text-decoration: none;
    text-shadow:
            -1px 0 3px black,
             1px 0 3px black,
            0 -1px 3px black,
             0 1px 3px black;
    color: white;
    padding: 0.25em 0.75em 0.25em 0.25em;
    border-bottom-left-radius: 0.4em;
    border-top-left-radius: 0.4em;
    border-bottom-right-radius: 1.5em 0.8em;
    border-top-right-radius: 1.5em 0.8em;

    transition: all .2s ease-in-out;
}

.tag:hover, .tag:focus {
    color: mediumpurple;
}

.truth_tags {
    display: flex;
    flex-flow: wrap;
}

.truth_tags > .tag { /* We want smaller tags, the shadows must follow as well */
    font-size: smaller;
    text-shadow:
            -1px 0 2px black,
            1px 0 2px black,
            0 -1px 2px black,
            0 1px 2px black;
}

.truth_tags > form {
    display: contents;
}

.login {
    display: flex;
    flex-direction: column;
}

.login > * {
    padding-bottom: 0.1em;
}

.login > label {
    align-self: flex-end;
}

.login > b {
    align-self: center;
}

/* 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;
}

nav {
    height: fit-content;
    margin: 0 0.25em;
    border-left: 0.15em solid slategray;
    border-right: 0.15em solid slategray;
}