website/static/src/scss/_content.scss

72 lines
1.1 KiB
SCSS

section.content {
font-size: 1.25rem;
padding-top: 0.5rem;
h2,
h3,
h4,
h5,
h6 {
.heading-anchor {
scroll-margin-top: var(--hero-height); // hero height (ish)
margin-right: 0.5rem;
font-weight: 100;
}
@include dark-mode {
color: $dark-mode-text;
}
}
}
.content-details {
.icon-text {
margin-right: $icon-text-spacing * 3;
align-items: center;
.icon a {
color: inherit;
&:hover {
color: $link;
}
}
span:not(.icon) + span {
margin-left: $icon-text-spacing * 1.5;
}
}
}
.container {
@include touch {
// Keep a little padding around the content
max-width: calc(100% - $gap);
}
}
.gslide-description {
background-color: transparent !important;
.gslide-title {
color: $dark-mode-text !important;
}
}
.gslide-image img {
object-fit: contain !important;
// Manually set sizes, as mermaid images are very small
width: 80vw !important;
&[src*="mermaid.ink"] {
@include dark-mode {
filter: invert(100%);
}
}
}
#comments {
scroll-margin-top: var(--hero-height); // hero height (ish)
}