trotFunky
d79375365d
Style the topbar to make it more useful in the future. Style the login element to make the form vertical and properly aligned, in order for it to fit well on both desktop and mobile. Small adjustment to the truth editor style to space it out a little bit.
149 lines
2.3 KiB
CSS
149 lines
2.3 KiB
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 {
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|