31:T611,md`# Changing the Observable CSS settings. Tables, Heading and P text area's where too narrow for my liking so made them wider. A larger font would make streaming/youtube presentations better as they are often 720p and the text is difficult to read for people with vision disabilities. **currently** looking at using a [custom bootstrap theme](https://bootstrap.build/) as I have seen [others link to bootstrap](https://observablehq.com/@pbrockmann/animation-controls) css. That worked a little but didn't effect the **.observablehq** css used in the code cells. Bootstrap also has a lot of other stuff that isn't used so really is a bit bloated. ~~~html ~~~ Changing all the fonts is on my todo list as well as considering patching the white space on the left / right as it's huge on a 4k monitor. todo: https://angrytools.com/bootstrap/editor/ *import { style } from "@hellonearthis/changing-the-css-as-it-looks-ugly-on-my-screen"* *import { bootstrap } from "@hellonearthis/changing-the-css-as-it-looks-ugly-on-my-screen"* The CSS below is how the width is managed. the default is 64rem but 98rem looks ok. https://vanseodesign.com/css/custom-properties-and-javascript/ to change the variable value :/


root{  
--max-width-8: 64rem  
}  
// it could be change to   
--max-width-8: 98rem  
// or  --max-width-9

max-width-8 is used by .mw8


.mw8{
	max-width:var(--max-width-8)

--- `32:[{"id":"b426f5f30958ee3d702ffc65160dd1fd8db83cb158bbef03490ee3e9c733ae2e5265e6c8e54d4cdd0db93f11e1be977b9bd6cbdd82e7e2e6513b0bcfcdd206ad","href":"https://static.observableusercontent.com/files/b426f5f30958ee3d702ffc65160dd1fd8db83cb158bbef03490ee3e9c733ae2e5265e6c8e54d4cdd0db93f11e1be977b9bd6cbdd82e7e2e6513b0bcfcdd206ad","name":"bootstrap@1.css","type":"text/css","lastModified":1600377838695.021,"size":180368}] 2f:{"title":"Changing the Observable CSS settings.","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"{\n var styles = getComputedStyle(document.documentElement);\n var teWidth = styles.getPropertyValue('width');\n console.log('styles ',styles)\n\n console.log('teWidth ',teWidth)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`selector #app > div > main > div.flex.w-100.mw8.center \nneeds to be changed to \n#app > div > main > div.flex.w-100.mw9.center \n\n/html/body/div[1]/div/main/div[8] (xpath)\n\ndocument.querySelector(\"#app > div > main > div.flex.w-100.mw9.center\") \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"parent.document.getElementById('app')","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"window.document.getElementById('app')","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"// #app > div > main > div.flex.w-100.mw9.center\n\n// document.documentElement.style.setProperty('width', '98rem');","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":138,"value":"md`font-size in the custom bootstrap below is set to 1.2em, which is a bit big.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"bootstrap = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`# table styles\n\n~~~js\nimport {Table} from \"@observablehq/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"import {Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"import {penguins} from \"@observablehq/input-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"Table(penguins)","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}