m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00
Code

code display tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-03-04 14:56:24 +01:00
parent 233d370eab
commit 2ef598c07a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/styles/_code.scss
View File

@ -5,20 +5,24 @@ kbd,
pre,
samp {
font-family: $font-family-monospace;
font-size: $font-size-mini * 1.1;
font-size: $font-size-small;
}
code,
kbd {
padding: 0.1rem;
padding: 0.2rem 0.3rem;
}
code,
samp {
white-space: normal;
color: inherit;
background-color: rgba($code-bg, 0.05);
background-color: $brand-grey-dimmed;
border-radius: $border-radius;
:global(.dark) & {
background-color: rgba($code-bg, 0.7);
}
}
kbd {
@ -42,6 +46,12 @@ pre {
background-color: $code-bg;
border-radius: $border-radius;
// overwrite Nord theme background color
&,
&:global(.nord) {
background-color: $code-bg;
}
// make 'em scrollable
overflow: auto;
-webkit-overflow-scrolling: touch;
@ -56,6 +66,11 @@ pre {
word-wrap: normal;
word-break: normal;
&,
:global(.dark) & {
background: none;
}
@media (min-width: $screen-sm) {
padding: $spacer;
}

11
src/styles/_variables.scss
View File

@ -29,8 +29,8 @@ $body-background-color--dark: darken($brand-grey, 22%);
$text-color: $brand-grey;
$text-color-light: $brand-grey-light;
$text-color--dark: lighten($brand-grey-light, 10%);
$text-color-light--dark: lighten($brand-grey-light, 5%);
$text-color--dark: lighten($brand-grey-light, 15%);
$text-color-light--dark: darken($brand-grey-light, 5%);
$link-color: $brand-cyan;
$link-color-hover: lighten($link-color, 10%);
@ -53,15 +53,14 @@ $font-size-h4: 1.2rem;
$font-size-h5: $font-size-large;
$font-size-h6: $font-size-base;
$line-height: 1.5;
$line-height: 1.6;
$line-height-small: 1.1428571429;
$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
'Helvetica', 'Arial', 'sans-serif';
$font-weight-base: 400;
$font-family-monospace: 'Fira Code', 'Fira Mono', 'Menlo', 'Monaco', 'Consolas',
'Courier New', 'monospace';
$font-family-monospace: 'Menlo', 'Consolas', 'Courier New', monospace;
// Headings
/////////////////////////////////////
@ -87,7 +86,7 @@ $stroke-width: 0.125rem;
// Code
/////////////////////////////////////
$code-bg: #343642;
$code-bg: darken($brand-grey, 15%);
$code-color: $brand-light;
$kbd-bg: $code-bg;
$kbd-color: $code-color;

4
src/styles/global.scss
View File

@ -209,13 +209,13 @@ img {
figcaption {
font-size: $font-size-small;
color: $brand-grey-light;
color: $text-color-light;
font-style: italic;
text-align: center;
margin-top: ($spacer / 4);
.dark & {
color: $brand-grey;
color: $text-color-light--dark;
}
}