theme: distinguish code better
I found it really hard to read what was actually code, so this change adds a very subtle hint of colour around all the code which has cheeky border radii. I've also cheekily made the font a tiny bit smaller for inline code so that even with the required padding, it does not mess up the line spacing visibly.
This commit is contained in:
parent
89b820798a
commit
128cc81ea1
21
themes/lix/assets/scss/shared/_blockquote.scss
Normal file
21
themes/lix/assets/scss/shared/_blockquote.scss
Normal file
|
@ -0,0 +1,21 @@
|
|||
@use 'sass:color';
|
||||
|
||||
$blockquote-y-padding: 0.7rem;
|
||||
|
||||
blockquote {
|
||||
border-left-color: desaturate($primary, 20%);
|
||||
border-left-width: 0.4rem;
|
||||
border-left-style: solid;
|
||||
padding-left: 0.5rem;
|
||||
padding-top: $blockquote-y-padding;
|
||||
padding-bottom: $blockquote-y-padding;
|
||||
|
||||
>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
12
themes/lix/assets/scss/shared/_code.scss
Normal file
12
themes/lix/assets/scss/shared/_code.scss
Normal file
|
@ -0,0 +1,12 @@
|
|||
$code-colour: darken($light, 5%);
|
||||
pre {
|
||||
background-color: $code-colour;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
:not(pre)>code {
|
||||
background-color: $code-colour;
|
||||
font-size: 0.85em;
|
||||
padding: 0.2em;
|
||||
border-radius: 0.3em;
|
||||
}
|
|
@ -3,6 +3,8 @@
|
|||
@import "fonts";
|
||||
@import "utilities";
|
||||
|
||||
@import "blockquote";
|
||||
@import "code";
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "buttons";
|
||||
|
|
Loading…
Reference in a new issue