trotFunky
4e1e9facc6
Users might want to share specific truths, or it might be useful to link to them in the future. Set the id of the h3 element for each truth to its number in the week and add an anchor link to the full h3 element, to be able to click anywhere. Update the stylesheet to hide the link color and decorations, add animation an hover color as with the week navigation arrows.
121 lines
2 KiB
CSS
121 lines
2 KiB
CSS
.top_bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.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 > a, .individual_truth > a:link, .individual_truth > a:visited {
|
|
color: black;
|
|
text-decoration: none;
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
.individual_truth > a:hover, .individual_truth > a:focus {
|
|
color: mediumpurple;
|
|
text-shadow: 0 2px 2px slategray;
|
|
}
|
|
|
|
.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;
|
|
}
|