danderson/lix-website
0
0
Fork 0
forked from lix-project/lix-website
Code Pull requests Activity

theme: distinguish code better

Browse source 
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:
jade 2024-08-09 21:56:37 -07:00
parent f332f4d226
commit c103690644
3 changed files with 35 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
themes/lix/assets/scss/shared/_blockquote.scss Normal file
View 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
View 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;
}

2
themes/lix/assets/scss/shared/shared.scss
View file

@ -3,6 +3,8 @@
@import "fonts";
@import "utilities";
@import "blockquote";
@import "code";
@import "header";
@import "footer";
@import "buttons";