137 строки
2.5 KiB
SCSS
137 строки
2.5 KiB
SCSS
// Styling for generic Markdown. I want Markdown-derived HTML to look
|
|
// reasonable without any extra futzing or applying CSS classes, so these
|
|
// rules try to set up a nice, coherent appearance that will work well in a
|
|
// variety of contexts.
|
|
|
|
.content {
|
|
p {
|
|
// Note use of "em", not "rem", units here.
|
|
margin: 0.3em 0 1em 0;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
li {
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
pre {
|
|
font-size: 70%;
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
blockquote {
|
|
font-size: 85%;
|
|
font-family: "Noto Sans";
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 2rem;
|
|
}
|
|
|
|
a {
|
|
color: #115;
|
|
|
|
&:hover {
|
|
color: #11D;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 150%;
|
|
margin: 1.7rem 0 0 0;
|
|
}
|
|
|
|
h2 {
|
|
// Looks like we need to manually specify these font sizes to cascade down
|
|
// relative to h1.
|
|
font-size: 110%;
|
|
margin: 1.2rem 0 1rem 0;
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
// Todo: use techniques other than font-sizing to distinguish h4 and below
|
|
// from h3.
|
|
font-size: 100%;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1;
|
|
}
|
|
|
|
// We configure Zola to insert anchor links for headers in the Markdown.
|
|
// These show up as `a.zola-anchor` tags inside the <hN> tag to the left
|
|
// of the header text.
|
|
|
|
a.zola-anchor {
|
|
visibility: hidden;
|
|
text-decoration: none;
|
|
font-size: 80%;
|
|
margin-left: 0.2em; // note: intentionally `em` here
|
|
}
|
|
|
|
h1:hover a.zola-anchor,
|
|
h2:hover a.zola-anchor,
|
|
h3:hover a.zola-anchor,
|
|
h4:hover a.zola-anchor,
|
|
h5:hover a.zola-anchor,
|
|
h6:hover a.zola-anchor {
|
|
visibility: visible;
|
|
}
|
|
|
|
// Flexboxes for cards linking to docs
|
|
|
|
.flex-cards {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
|
|
.flex-card {
|
|
flex: 1 1;
|
|
min-width: 10rem;
|
|
margin: 0.8rem;
|
|
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
font-size: 90%;
|
|
line-height: 1.3;
|
|
border-left: 2px solid #000;
|
|
padding-left: 0.5rem;
|
|
|
|
p {
|
|
margin: 0 0 1rem 0;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
width: 100%;
|
|
margin-top: auto;
|
|
|
|
background-color: $button-color;
|
|
@include border-radius(6px);
|
|
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.3rem;
|
|
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
color: $button-link-color;
|
|
border: 2px solid transparent;
|
|
@include border-radius(6px);
|
|
|
|
&:hover {
|
|
color: $button-link-hover-color;
|
|
border: 2px solid #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|