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, pre,
samp { samp {
font-family: $font-family-monospace; font-family: $font-family-monospace;
font-size: $font-size-mini * 1.1; font-size: $font-size-small;
} }
code, code,
kbd { kbd {
padding: 0.1rem; padding: 0.2rem 0.3rem;
} }
code, code,
samp { samp {
white-space: normal; white-space: normal;
color: inherit; color: inherit;
background-color: rgba($code-bg, 0.05); background-color: $brand-grey-dimmed;
border-radius: $border-radius; border-radius: $border-radius;
:global(.dark) & {
background-color: rgba($code-bg, 0.7);
}
} }
kbd { kbd {
@ -42,6 +46,12 @@ pre {
background-color: $code-bg; background-color: $code-bg;
border-radius: $border-radius; border-radius: $border-radius;
// overwrite Nord theme background color
&,
&:global(.nord) {
background-color: $code-bg;
}
// make 'em scrollable // make 'em scrollable
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -56,6 +66,11 @@ pre {
word-wrap: normal; word-wrap: normal;
word-break: normal; word-break: normal;
&,
:global(.dark) & {
background: none;
}
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
padding: $spacer; 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: $brand-grey;
$text-color-light: $brand-grey-light; $text-color-light: $brand-grey-light;
$text-color--dark: lighten($brand-grey-light, 10%); $text-color--dark: lighten($brand-grey-light, 15%);
$text-color-light--dark: lighten($brand-grey-light, 5%); $text-color-light--dark: darken($brand-grey-light, 5%);
$link-color: $brand-cyan; $link-color: $brand-cyan;
$link-color-hover: lighten($link-color, 10%); $link-color-hover: lighten($link-color, 10%);
@ -53,15 +53,14 @@ $font-size-h4: 1.2rem;
$font-size-h5: $font-size-large; $font-size-h5: $font-size-large;
$font-size-h6: $font-size-base; $font-size-h6: $font-size-base;
$line-height: 1.5; $line-height: 1.6;
$line-height-small: 1.1428571429; $line-height-small: 1.1428571429;
$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
'Helvetica', 'Arial', 'sans-serif'; 'Helvetica', 'Arial', 'sans-serif';
$font-weight-base: 400; $font-weight-base: 400;
$font-family-monospace: 'Fira Code', 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', $font-family-monospace: 'Menlo', 'Consolas', 'Courier New', monospace;
'Courier New', 'monospace';
// Headings // Headings
///////////////////////////////////// /////////////////////////////////////
@ -87,7 +86,7 @@ $stroke-width: 0.125rem;
// Code // Code
///////////////////////////////////// /////////////////////////////////////
$code-bg: #343642; $code-bg: darken($brand-grey, 15%);
$code-color: $brand-light; $code-color: $brand-light;
$kbd-bg: $code-bg; $kbd-bg: $code-bg;
$kbd-color: $code-color; $kbd-color: $code-color;

4
src/styles/global.scss
View File

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