/* - - - - - - + + + - - - - - - // // site.css // // - - - - - - + + + - - - - - - */ .trid_blue {color: #0054A6;} /* or #05a */ .trid_green {background: #00AB4E;} /* or #0a4 */ .trid_lblue {background: #E6F2FF;} .trid_orange {color: #f81;} @font-face { font-family: 'tridentityregular'; src: url('../fonts/tridentity-webfont.woff2') format('woff2'), url('../fonts/tridentity-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ethnocentricbook'; src: url('../fonts/ethnocentric_bk.woff2') format('woff2'), url('../fonts/ethnocentric_bk.woff') format('woff'); font-weight: normal; font-style: normal; } .trifontregular { font-family: 'tridentityregular', 'Open Sans', sans-serif; font-size: 1.8em; } .ethnofontregular { font-family: 'ethnocentricbook', 'Open Sans', sans-serif; font-size: 1.8em; } .monospace { /* https://fonts.google.com/specimen/PT+Mono */ /* font-family: 'Lucida Console', 'PT Mono', monospace; */ font-family: 'PT Mono', 'Lucida Console', monospace; font-size: 0.9em; font-weight: normal; font-style: normal; } .mono { font-family: 'Menlo', 'Lucida Console', monospace; /* font-family: 'PT Mono', 'Lucida Console', monospace; */ font-size: 0.9em; color: #0000FF; /* font-weight: normal; font-style: normal; */ } .tso { color: #0a4; } .trb { font-weight: bold; color: red; } .ti { font-style: italic; } .tit { font-family: 'tridentityregular', 'Open Sans', sans-serif; font-size: 1.8em; } body { /* position: relative; margin: 0; border: 0; text-align: left; font-size: 100%; */ /* https://fonts.google.com/specimen/Open+Sans */ /* font-family: 'Open Sans', sans-serif; */ /* color: black; */ color: #0054A6; /* background: #E6F2FF; */ /* background: white; */ background-color: white; /* min-height: 100vh; */ height: 100%; } /* bootstrap */ .dark-mode { background-color: white; color: #0054A6; } /* https://css-tricks.com/dark-modes-with-css/ */ @media screen and (prefers-color-scheme: light) { body { background-color: white; color: black; } } .red_border { border: 1px solid red; } /* - - - - - - + + + - - - - - - // // https://stackoverflow.com/questions/24034588/static-html-website-bootstrap-multi-language-support // - - - - - - + + + - - - - - - */ div.en, div.nl { display:none; } /* hide all elements with a language class */ div.en:lang(en), div.nl:lang(nl) { display:block; } /* show those elements */ span.en, span.nl { display:none; } span.en:lang(en), span.nl:lang(nl) { display:inline; } /* - - - - - - + + + - - - - - - // # HTML: # use class to decorate multiple kinds of elements # us id to decorate one unique element # CSS: .class {} #id {} element.class {} element#id {} # from the Lynda.com CSS course: # box model +------------------------------------------------------------------+ |margin | | +---[ border of 'border-box' ]--------------------------+ | | |padding | | | | +---[ width/height of 'content-box' ]-------+ | | | | |content | | | | | +-------------------------------------------+ | | | | | | | +-------------------------------------------------------+ | | | +------------------------------------------------------------------+ TOTAL-width = left-border + left-padding + CONTENT-width + right-padding + right-border # NOTE: margin is outside the box, vertical-margin is collapsed between multiple elements box-sizing: content-box; # this is default: content-size is set directly and total-size is calculated (add border/padding) box-sizing: border-box; # total-size is set directly and content-size is calculated (substract border/padding) .cbox{ width: 300px; padding: 10px; border 1px solid black; box-sizing: content-box; } # total-width = 322px .bbox{ width: 300px; padding: 10px; border 1px solid black; box-sizing: border-box; } # total-width = 300px # marging/padding: padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; # shorthand notation: padding: top right bottom left; # all individual seperated with spaces in direction of clock padding: top (right+left) bottom; padding: (top+bottom) (right+left); padding: (top+bottom+right+left); # unit of measurement: px = pixels em = normal size of text (1em) p {font-size: 1em;} # suggested way to size fonts relative to user-device-setting: body {font-size: 100%; } h1 {font-size: 1.6em; } h2 {font-size: 1.4em; } h3 {font-size: 1.2em; } p {font-size: 1em; } # Positioning: - Normal flow # position: static|relative|absolute|fixed|inherit (static='normal flow', inherit='from parent element') - Element floating # - absolute positioning # .trid_blue {background: #0054A6;} .trid_green {background: #00AB4E;} .trid_lblue {background: #E6F2FF;} // - - - - - - + + + - - - - - - */