From cbaf01dd2c7cd29e8a2a8730081aac5e7a45c034 Mon Sep 17 00:00:00 2001 From: Atomos821 Date: Thu, 26 Nov 2020 10:26:47 +0100 Subject: [PATCH] typography update --- docs/assets/css/style.css | 53 ++++++++++++++----------------- docs/assets/css/style.css.map | 2 +- docs/assets/scss/style.scss | 60 +++++++++++++++++------------------ 3 files changed, 53 insertions(+), 62 deletions(-) diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index a2ddd52..b5a7656 100644 --- a/docs/assets/css/style.css +++ b/docs/assets/css/style.css @@ -153,7 +153,6 @@ h5 { h1 { font-size: 4.209rem; - font-weight: 700; } h2 { @@ -312,8 +311,11 @@ main article { padding: 1rem 27.1% 1rem 10.4%; width: 62.5%; } -main article img { - max-width: 100%; +@media (max-width: 64em) { + main article { + padding: 1rem; + width: calc(100% - 2rem); + } } a { @@ -335,11 +337,6 @@ a { line-height: 1.5rem; } - pre, - code { - background: $code !important; - } - blockquote, code, .doc-alert, @@ -370,28 +367,6 @@ a { margin: $margin; } - - blockquote { - background: $blockquote; - color: $on-blockquote; - } - - // for url/links - // span, - a { - color: $accent; - cursor: pointer; - text-decoration: none; - - &:hover { - filter: invert(.15); - } - } - - img { - max-width: 100%; - } - .doc-alert, .doc-info, .doc-warning, @@ -462,5 +437,23 @@ a { .doc-typography blockquote p { margin: 0; } +.doc-typography img { + max-width: 100%; +} +.doc-typography pre, +.doc-typography code { + background: #101010 !important; +} +.doc-typography blockquote { + background: #181818; + color: #ccc; +} +.doc-typography code { + padding: 0.125rem 0.25rem; +} +.doc-typography blockquote, +.doc-typography code { + border-radius: 0.125rem; +} /*# sourceMappingURL=style.css.map */ diff --git a/docs/assets/css/style.css.map b/docs/assets/css/style.css.map index 932d760..2b9c92c 100644 --- a/docs/assets/css/style.css.map +++ b/docs/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/docs/assets/scss/style.scss b/docs/assets/scss/style.scss index a081110..93fc6c0 100644 --- a/docs/assets/scss/style.scss +++ b/docs/assets/scss/style.scss @@ -46,7 +46,7 @@ h5 { h1 { // margin-top: 0; font-size: 4.209rem; - font-weight: 700; + // font-weight: 700; } h2 { @@ -112,7 +112,7 @@ header { display: none; } - // TODO: Redo header media query + // TODO: Redo header media query (vertical res > 768px -> Dropdown) /* @media (max-width: #{$bp-medium}) { &.dropdown { @@ -151,6 +151,7 @@ header { } } +// TODO: media queries (@1024px -> article padding = 1rem; en dessous sidenav en mode toggle) main { display: flex; flex-direction: row; @@ -240,8 +241,9 @@ main { padding: 1rem 27.1% 1rem 10.4%; width: 62.5%; - img { - max-width: 100%; + @media (max-width: #{$bp-medium}) { + padding: 1rem; + width: calc(100% - 2rem); } } } @@ -291,6 +293,29 @@ a { } } + img { + max-width: 100%; + } + + pre, + code { + background: $code !important; + } + + blockquote { + background: $blockquote; + color: $on-blockquote; + } + + code { + padding: .125rem .25rem; + } + + blockquote, + code { + border-radius: $border-radius; + } + /* p, pre ul, @@ -304,11 +329,6 @@ a { line-height: 1.5rem; } - pre, - code { - background: $code !important; - } - blockquote, code, .doc-alert, @@ -339,28 +359,6 @@ a { margin: $margin; } - - blockquote { - background: $blockquote; - color: $on-blockquote; - } - - // for url/links - // span, - a { - color: $accent; - cursor: pointer; - text-decoration: none; - - &:hover { - filter: invert(.15); - } - } - - img { - max-width: 100%; - } - .doc-alert, .doc-info, .doc-warning,