From e883113f1ba47c9990fd8b5abc9e71874d6611d6 Mon Sep 17 00:00:00 2001 From: Chris Troutner Date: Sat, 8 Aug 2020 07:55:43 -0700 Subject: [PATCH] Minor edit --- docs/visual-settings.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/visual-settings.md b/docs/visual-settings.md index 86b00e6..5852b1a 100644 --- a/docs/visual-settings.md +++ b/docs/visual-settings.md @@ -4,20 +4,20 @@ # Setup - > We can stablish global CSS variables that would allow us to use - > those variables in the different components, to make them + > We can establish global CSS variables that would allow us to use + > those variables in the different components, to make them > customizable and dynamic ### Example: -``` +``` const myColor = 'black' const footerH = '500px' const styles = document.documentElement.style styles.setProperty('--main-color', myColor) styles.setProperty('--footer-height', footerH) ``` -This way we can create dynamic variables to change different CSS -properties, to see the use of the global variables we can check +This way we can create dynamic variables to change different CSS +properties, to see the use of the global variables we can check the the [/components/app-colors.css](https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet/blob/master/src/components/app-colors.css) ### Example: @@ -26,7 +26,7 @@ the the [/components/app-colors.css](https://github.com/Permissionless-Software- body[0].style.fontFamily = 'Courier New' body[0].style.fontSize = '25px' ``` -This way we could change some styles of everything covered by the `` +This way we could change some styles of everything covered by the `` tag, it is basically the whole app. ### Example: @@ -36,16 +36,16 @@ The following example is to customize the color of the warning message: :root { --warning-alert-bg-color:'red'; --warning-alert-txt-color:'white'; - + } - + # layout.css - + .version-status div{ color: var(--warning-alert-txt-color); background-color: var(--warning-alert-bg-color); } - + # JS // We change the values of the CSS variables const styles = document.documentElement.style