diff --git a/_sass/overrides.scss b/_sass/overrides.scss new file mode 100644 index 0000000..21e9527 --- /dev/null +++ b/_sass/overrides.scss @@ -0,0 +1,3 @@ +// +// Custom overrides from a user. +// diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 57d03aa..199ad89 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -46,3 +46,4 @@ $logo: "{{ site.logo | absolute_url }}"; @import "./tables"; @import "./code"; @import "./utilities/utilities"; +@import "./overrides"; diff --git a/docs/customization.md b/docs/customization.md index eccb4bc..a3d5b6f 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -69,3 +69,20 @@ $link-color: $blue-000; ``` _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail. + +## Override styles + +To add your own CSS at the end of the cascade, edit `_sass/overrides.scss` to add in your own custom CSS. This will allow for all overrides to be kept in a single file, and allow for any upstream changes to still be allowed. + +For example, if you'd like to add your own styles for printing a page, you could add the following styles. + +#### Example +{: .no_toc } + +```scss +// Print-only styles. +@media print { + .side-bar, .page-header { display: none; } + .main-content { max-width: auto; margin: 1em;} +} +```