hugo-theme-paradox/assets/styles/shortcodes/ref.scss

69 lines
1.1 KiB
SCSS

.ref-link {
background: var(--ui-overlay);
color: var(--ui-overlay-text);
&:link, &:visited {
color: var(--ui-overlay-text);
}
&:hover {
background: var(--primary-accent);
color: var(--primary-accent-text);
}
transition:
background var(--color-crossfade-duration) var(--color-crossfade-ease),
color var(--color-crossfade-duration) var(--color-crossfade-ease);
display: grid;
align-items: center;
gap: 1em;
@media (min-width: 20rem) {
grid-template-columns: 3em 1fr;
}
margin: 1em 0;
padding: 1em;
border-radius: 6px;
text-decoration: none;
&__icon {
height: 3em;
width: 3em;
grid-column: 1;
background: var(--primary-accent);
color: var(--primary-accent-text);
display: grid;
place-items: center;
border-radius: 8px;
}
&__text {
grid-column: 2 / -1;
}
svg {
height: 1.5em;
width: 1.5em;
}
}
.page-ref {
font-weight: 700;
&__title {
}
&__section {
}
}
.source-ref {
word-break: break-all;
&__name {
font-weight: 700;
}
&__path {
margin-top: 8px;
display: block;
font-family: monospace;
}
}
.section-ref {
&__title {
font-weight: 700;
}
}