From 516f632b84bc418486538a2183564fe94b89097e Mon Sep 17 00:00:00 2001 From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com> Date: Tue, 1 Jul 2025 17:01:45 +0900 Subject: init --- static/style.css | 333 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 333 insertions(+) create mode 100644 static/style.css (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..00b5710 --- /dev/null +++ b/static/style.css @@ -0,0 +1,333 @@ +/* Since this site is about teaching web concepts, even this file is a learning + * opportunity. */ + +body { + color: beige ; + background: #111 ; + margin-bottom: 200px ; + font-family: sans-serif ; +} + +h1 { + text-align: center ; + color: lightgreen ; +} + +header h1 { + font-size: 40px ; +} + +h2 { + text-align: center ; + color: deeppink ; + font-size: 24pt ; + border-bottom: dashed #ddd 1px ; + max-width: 500px ; + margin: 1em auto ; +} + +h3 { + color: gold ; + clear: both ; +} + +/* "a" is for links. */ +a { + color: lightblue ; +} + +/* The "hover" option, which can be used with pretty much anything, allows you + * to set different settings if someone hovers over something with their mouse. + * */ +a:hover { + color: white ; +} + +dt { + font-weight: bold ; +} + +/* code and pre are for formatting monospace text commands. Use code generally, + * but pre is for separate code blocks. pre is also sensitive to whitespace, + * unlike most of HTML. */ +code { + border-radius: 5px ; +} +pre { + background: #111222 ; + border: 1px solid lime ; + border-radius: 20px ; + padding: 1em ; + white-space: pre-wrap; + overflow-wrap: break-word ; + max-width: 600px ; + margin: auto ; +} + +.wide { max-width: inherit ; } + +p img, li img, h1 img, h2 img, h3 img, h4 img, dt img, .inline { + vertical-align: middle ; + max-width: 1em; + max-height: 1em; + border: none ; + display: inline ; +} + +p img, li img, h1 img, h2 img, h3 img, h4 img, dt img, .inline { + vertical-align: middle ; + max-width: 1em; + max-height: 1em; + border: none ; + display: inline ; +} + +img { + max-width: 90% ; + margin: auto ; + display: block ; + border: solid 5px beige ; +} +.titleimg { + border: none ; + height: 150px ; +} +strong { + color: orange ; +} + +footer { + text-align: center ; + font-variant: small-caps ; + clear: both ; + padding: 2em 0 ; +} +footer li { + display: inline-block ; + padding: 0 .5em ; + font-size: x-large ; +} +footer li:hover { + background: lightblue ; +} + +nav { font-size: small ;} + +footer { font-size: large ; } + +nav ul, footer ul, #taglist { + padding: 0; +} + +main { + margin: auto ; +} + +/* asides are used for minor tangential notes. I have them shrunk down in + * softer colors in a box with soft corners (border-radius). */ + +aside { + border: solid 1px black ; + border-radius: 20px ; + padding: 0 1em 0 1em ; + font-size: small ; +} + +aside p { + color: gray ; +} + +aside code { + color: green ; +} + +/* .callout here is refencing any aside given the class name callout + * An example being: