From 0a50edeb52ac36f04f256cb2bdc5cfeb74c5e234 Mon Sep 17 00:00:00 2001 From: emmaramirez Date: Sun, 25 Oct 2020 19:51:05 -0600 Subject: [PATCH] fix(design): add overflow on x-axis for code --- docs/bundle.js | 2 +- src/global.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/bundle.js b/docs/bundle.js index e09b71f..c656aec 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -94,4 +94,4 @@ /*!******************************************************************************************************************************************!*\ !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./src/global.scss ***! \******************************************************************************************************************************************/ -/*! no static exports found */function(module,exports,__webpack_require__){eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ 6);\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"::-moz-selection {\\n color: #242830;\\n background: #42f4f4;\\n}\\n\\n::selection {\\n color: darkc-olor;\\n background: #42f4f4;\\n}\\n\\nbody {\\n font-family: 'Open Sans', sans-serif;\\n overflow-x: hidden;\\n}\\n\\nbody.dark {\\n background: #242830;\\n color: #eee;\\n}\\n\\n@media screen and (max-width: 640px) {\\n body {\\n font-size: 20px;\\n }\\n}\\n\\na {\\n color: #121212;\\n text-decoration: none;\\n}\\n\\n@media screen and (max-width: 640px) {\\n .palm-trees {\\n width: 100%;\\n }\\n}\\n\\nh2 {\\n font-size: 1.5rem;\\n font-weight: lighter;\\n margin: 0.25rem;\\n}\\n\\n.posts {\\n margin: 0 auto;\\n max-width: 40rem;\\n}\\n\\n@media screen and (max-width: 640px) {\\n .posts {\\n width: 100%;\\n }\\n}\\n\\n.button-container {\\n background: #eee;\\n display: flex;\\n margin: 0 auto;\\n justify-content: center;\\n max-width: 20rem;\\n padding: 0.5rem;\\n}\\n\\n.monospace {\\n font-family: monospace;\\n margin: 0.5rem;\\n}\\n\\n.elsewhere-link {\\n opacity: 0.85;\\n}\\n\\n.elsewhere-link:hover {\\n opacity: 1;\\n}\\n\\n.dark .elsewhere-link {\\n filter: invert(100%);\\n}\\n\\n.cp_embed_wrapper {\\n box-shadow: 0 0 0.25rem #b9b9b9;\\n}\\n\\n.blog-post {\\n font-size: 1.15rem;\\n margin: 0 auto;\\n max-width: 55rem;\\n padding: 0 1rem;\\n padding-bottom: 5rem;\\n}\\n\\n.blog-post h1 {\\n font-size: 2rem;\\n font-weight: light;\\n margin-bottom: 1rem;\\n margin-left: 1rem;\\n margin-top: 3rem;\\n}\\n\\n.blog-post h2 {\\n margin-top: 2rem;\\n margin-left: 1rem;\\n}\\n\\n.blog-post blockquote {\\n color: #444;\\n border-left: 0.25rem solid #ccc;\\n}\\n\\n.blog-post blockquote p {\\n padding: 0.25rem;\\n}\\n\\n.blog-post p {\\n font-size: 1.25rem;\\n line-height: 1.4;\\n margin: 1rem;\\n}\\n\\n.blog-post p code {\\n background: #eee;\\n}\\n\\n.blog-post code {\\n font-family: 'Fira Code' !important;\\n font-size: 1.25rem;\\n}\\n\\n.blog-post pre {\\n border: 1px solid #cccccc;\\n border-radius: 0.25rem;\\n line-height: 1.5;\\n margin-left: 2rem;\\n padding: 0.5rem;\\n width: calc(100% - 5rem);\\n}\\n\\n.blog-post pre code {\\n color: #111;\\n}\\n\\n.markdown-body ul {\\n font-size: 1.15rem;\\n line-height: 1.4;\\n padding-left: 4rem;\\n}\\n\\n.markdown-body img {\\n width: 100%;\\n}\\n\\n.markdown-body .caption {\\n color: #bbb;\\n font-size: 80%;\\n text-align: center;\\n}\\n\\n.markdown-body .blog-post a {\\n color: #4286f4;\\n}\\n\\n.dark .blog-post code {\\n background: #0e1013;\\n color: #fff;\\n outline: 1px solid #2e2c2c;\\n}\\n\\n.stats {\\n background: #efefef;\\n display: flex;\\n bottom: 0;\\n left: 0;\\n justify-content: center;\\n position: fixed;\\n text-align: center;\\n width: 100%;\\n}\\n\\n.stats img {\\n width: auto;\\n}\\n\\n.dark .stats {\\n background: rgba(0, 0, 0, 0.3);\\n}\\n\\n#disqus_thread {\\n margin: 0 auto;\\n max-width: 50rem;\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/global.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js")}]); \ No newline at end of file +/*! no static exports found */function(module,exports,__webpack_require__){eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ 6);\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"::-moz-selection {\\n color: #242830;\\n background: #42f4f4;\\n}\\n\\n::selection {\\n color: darkc-olor;\\n background: #42f4f4;\\n}\\n\\nbody {\\n font-family: 'Open Sans', sans-serif;\\n overflow-x: hidden;\\n}\\n\\nbody.dark {\\n background: #242830;\\n color: #eee;\\n}\\n\\n@media screen and (max-width: 640px) {\\n body {\\n font-size: 20px;\\n }\\n}\\n\\na {\\n color: #121212;\\n text-decoration: none;\\n}\\n\\n@media screen and (max-width: 640px) {\\n .palm-trees {\\n width: 100%;\\n }\\n}\\n\\nh2 {\\n font-size: 1.5rem;\\n font-weight: lighter;\\n margin: 0.25rem;\\n}\\n\\n.posts {\\n margin: 0 auto;\\n max-width: 40rem;\\n}\\n\\n@media screen and (max-width: 640px) {\\n .posts {\\n width: 100%;\\n }\\n}\\n\\n.button-container {\\n background: #eee;\\n display: flex;\\n margin: 0 auto;\\n justify-content: center;\\n max-width: 20rem;\\n padding: 0.5rem;\\n}\\n\\n.monospace {\\n font-family: monospace;\\n margin: 0.5rem;\\n}\\n\\n.elsewhere-link {\\n opacity: 0.85;\\n}\\n\\n.elsewhere-link:hover {\\n opacity: 1;\\n}\\n\\n.dark .elsewhere-link {\\n filter: invert(100%);\\n}\\n\\n.cp_embed_wrapper {\\n box-shadow: 0 0 0.25rem #b9b9b9;\\n}\\n\\n.blog-post {\\n font-size: 1.15rem;\\n margin: 0 auto;\\n max-width: 55rem;\\n padding: 0 1rem;\\n padding-bottom: 5rem;\\n}\\n\\n.blog-post h1 {\\n font-size: 2rem;\\n font-weight: light;\\n margin-bottom: 1rem;\\n margin-left: 1rem;\\n margin-top: 3rem;\\n}\\n\\n.blog-post h2 {\\n margin-top: 2rem;\\n margin-left: 1rem;\\n}\\n\\n.blog-post blockquote {\\n color: #444;\\n border-left: 0.25rem solid #ccc;\\n}\\n\\n.blog-post blockquote p {\\n padding: 0.25rem;\\n}\\n\\n.blog-post p {\\n font-size: 1.25rem;\\n line-height: 1.4;\\n margin: 1rem;\\n}\\n\\n.blog-post p code {\\n background: #eee;\\n}\\n\\n.blog-post code {\\n font-family: 'Fira Code' !important;\\n font-size: 1.25rem;\\n}\\n\\n.blog-post pre {\\n border: 1px solid #cccccc;\\n border-radius: 0.25rem;\\n line-height: 1.5;\\n margin-left: 2rem;\\n overflow-x: auto;\\n padding: 0.5rem;\\n width: calc(100% - 5rem);\\n}\\n\\n.blog-post pre code {\\n color: #111;\\n}\\n\\n.markdown-body ul {\\n font-size: 1.15rem;\\n line-height: 1.4;\\n padding-left: 4rem;\\n}\\n\\n.markdown-body img {\\n width: 100%;\\n}\\n\\n.markdown-body .caption {\\n color: #bbb;\\n font-size: 80%;\\n text-align: center;\\n}\\n\\n.markdown-body .blog-post a {\\n color: #4286f4;\\n}\\n\\n.dark .blog-post code {\\n background: #0e1013;\\n color: #fff;\\n outline: 1px solid #2e2c2c;\\n}\\n\\n.stats {\\n background: #efefef;\\n display: flex;\\n bottom: 0;\\n left: 0;\\n justify-content: center;\\n position: fixed;\\n text-align: center;\\n width: 100%;\\n}\\n\\n.stats img {\\n width: auto;\\n}\\n\\n.dark .stats {\\n background: rgba(0, 0, 0, 0.3);\\n}\\n\\n#disqus_thread {\\n margin: 0 auto;\\n max-width: 50rem;\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/global.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js")}]); \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index d166c9c..18e9aeb 100644 --- a/src/global.scss +++ b/src/global.scss @@ -120,6 +120,7 @@ h2 { border-radius: 0.25rem; line-height: 1.5; margin-left: 2rem; + overflow-x: auto; padding: 0.5rem; width: calc(100% - 5rem); code {