Add style for blockquotes

Adds a CSS style for rendering blockquotes. The style can be adjusted
using SASS variables.

Fixes codeandmedia/zola_easydocs_theme#9
This commit is contained in:
Rémy Greinhofer 2022-07-02 16:22:38 -05:00
parent 279ec384da
commit 91eb49b71f
2 changed files with 19 additions and 9 deletions

View file

@ -10,4 +10,7 @@ $visited-links:#009;
$font-size: 1.125rem;
$font-family: Segoe UI,system-ui,-apple-system,sans-serif;
$line-height: 1.75;
$code_font: 400 1.125rem/1.75 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
$code_font: 400 1.125rem/1.75 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
$quote-bg: #dcdcdc;
$quote-border: #808080 8px solid;

View file

@ -77,7 +77,7 @@ pre {
code {
background:transparent;
&::after {
content: attr(data-lang);
font-style: italic;
@ -120,7 +120,7 @@ nav {
height: 92vh;
top:$baseline;
left:$baseline;
bottom: $baseline;
bottom: $baseline;
padding-right: $baseline;
width: 20rem;
@ -143,10 +143,10 @@ nav {
li {
color:$color;
margin-left: $font-size;
&::before {
display: inline-block;
content:"";
content:"";
}
ul {
@ -214,7 +214,7 @@ main {
.tree-toggle-label {
user-select:none;
cursor:pointer;
cursor:pointer;
}
.tree-toggle-label::before {
@ -260,12 +260,12 @@ main {
animation-duration:0.25s;
animation-fill-mode:both;
}
.subtree li {
list-style-type: none;
margin-left: $baseline;
a {
color:$color;
@ -299,7 +299,7 @@ article {
}
@media screen and (max-width: 1023px) {
@media screen and (max-width: 1023px) {
main {
flex-flow: column nowrap;
@ -342,5 +342,12 @@ article {
}
}
blockquote {
border-left: $quote-border;
margin: 0;
background-color: $quote-bg;
padding: 0 20px;
}
@import "fabric-icons-inline";
@import "search";