diff options
| -rw-r--r-- | scss/_browser.scss | 5 | ||||
| -rw-r--r-- | scss/_content.scss | 16 | ||||
| -rw-r--r-- | scss/_defs.scss | 1 | ||||
| -rw-r--r-- | scss/_reset.scss | 2 |
4 files changed, 20 insertions, 4 deletions
diff --git a/scss/_browser.scss b/scss/_browser.scss index b843916..da49f71 100644 --- a/scss/_browser.scss +++ b/scss/_browser.scss @@ -30,6 +30,7 @@ margin: 0; padding: 0; display: flex; + align-self: stretch; background: $gray-darker; > * { @@ -101,6 +102,10 @@ flex: 1 1 auto; overflow: auto; padding: 1em 2em; + margin: 0 1em; + align-self: flex-start; + min-width: 30vw; + background: var(--white); position: relative; } diff --git a/scss/_content.scss b/scss/_content.scss index 66b9f42..6993fef 100644 --- a/scss/_content.scss +++ b/scss/_content.scss @@ -4,11 +4,17 @@ height: inherit; } + .markdown { + max-width: 640px; + position: relative; + } + .markdown, .markdown > p, - .markdown > p > a, - .markdown > a { - max-width: 100%; + .markdown > p > a { + p, a { + max-width: 100%; + } > img, > video { display: block; @@ -39,6 +45,10 @@ margin: 0.2em; background: $gray-bright; } + + > *:not(.description) { + max-width: 100%; + } } pre > code { diff --git a/scss/_defs.scss b/scss/_defs.scss index 7806420..40804b2 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -22,6 +22,7 @@ $break-large: 768px; } :root { + --white: #{$white}; --gray-bright: #{$gray-bright}; --gray-dark: #{$gray-dark}; --gray-darker: #{$gray-darker}; diff --git a/scss/_reset.scss b/scss/_reset.scss index 0f4fa6e..859f96f 100644 --- a/scss/_reset.scss +++ b/scss/_reset.scss @@ -27,7 +27,7 @@ body { flex-direction: column; justify-content: space-between; - background: $white; + background: var(--gray-bright); font-family: sans-serif; min-height: 100vh; |