x-markdown-css/src/partials/title.scss

97 lines
1.3 KiB
SCSS

h1 {
margin-top: 0;
margin-bottom: .875rem;
color: var(--xm-c-deeper);
font-weight: 800;
font-size: 2.25rem;
line-height: 1.15;
}
h2 {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--xm-c-deep);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.35;
code {
font-size: .875rem;
}
+ * {
margin-top: 0;
}
}
h3 {
margin-top: 1.6rem;
margin-bottom: .6rem;
color: inherit;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.6;
opacity: .7;
code {
font-size: .9rem;
}
+ * {
margin-top: 0;
}
}
h4 {
margin-top: 1.5rem;
margin-bottom: .5rem;
color: inherit;
font-weight: 600;
line-height: 1.5;
+ * {
margin-top: 0;
}
}
h5,
h6 {
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .5;
}
hr {
width: 50px;
margin-top: 2rem;
margin-bottom: 2rem;
border-color: var(--xm-c-hr-border);
+ * {
margin-top: 0;
}
}
.header-anchor {
float: left;
margin-top: .125rem;
margin-left: -1.25rem;
padding-right: .5rem;
border: 0 !important;
font-size: .875rem;
text-decoration: none;
opacity: 0;
&:hover,
&:focus {
text-decoration: none;
}
}
@for $i from 1 through 6 {
h#{$i} {
&:hover,
&:focus {
.header-anchor {
opacity: .35 + $i * .025;
}
}
}
}