secluded/themes/secluded/assets/scss/_single.scss

133 lines
3.1 KiB
SCSS

.toc {
padding-bottom: 5px;
border-bottom: 2px solid $dark;
a {
color: $dark;
text-decoration: underline;
}
}
.frontmatter {
padding: 15px 0;
border-bottom: 2px solid $dark;
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
background-repeat: no-repeat;
background-size: 0 0;
background-position: 100% 21%;
transition: .15s ease-out;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
font-size: 90%;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
.post-title {
margin: 10px 0;
a {
text-decoration: none;
background-image: none;
&::after {
content: "";
}
&:hover {
background-size: 0 0;
color: $dark;
}
}
}
p {
margin: 0 0;
}
}
.content {
h2, h3 {
margin-top: 20px;
margin-bottom: -10px;
}
h2, h3, p, li, td {
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
background-repeat: no-repeat;
background-size: 0 0;
background-position: 100% 21%;
transition: .15s ease-out;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
font-size: 90%;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
}
.footnote-ref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.footnote-backref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.highlight {
a {
background-image: none;
&::after {
content: "";
}
}
}
.anchor-tag {
font-size: 70%;
position: relative;
bottom: 2.6px;
background-size: 100% 0;
background-position: 0 150%;
&::after {
content: "";
}
}
}