LibrePages
/
docs
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
sass/_variables.scss
View File

@ -10,4 +10,7 @@ $visited-links:#009;
$font-size: 1.125rem; $font-size: 1.125rem;
$font-family: Segoe UI,system-ui,-apple-system,sans-serif; $font-family: Segoe UI,system-ui,-apple-system,sans-serif;
$line-height: 1.75; $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;

23
sass/main.scss
View File

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