diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/base.css | 43 | ||||
| -rw-r--r-- | css/main.css | 7 | ||||
| -rw-r--r-- | css/noJavaScript.css | 3 | ||||
| -rw-r--r-- | css/page.css | 52 | ||||
| -rw-r--r-- | css/pageFooter.css | 11 | ||||
| -rw-r--r-- | css/pageHeader.css | 67 | ||||
| -rw-r--r-- | css/root.css | 34 |
7 files changed, 217 insertions, 0 deletions
diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..94b4b59 --- /dev/null +++ b/css/base.css @@ -0,0 +1,43 @@ +div.page * + p,* + ol,* + table,* + ul { + margin-top:1rem; +} + +li p + ul,li p + ol { + margin-top:0; +} + +p.math,span.math,td.math { + font-size: calc(3rem / 2); + padding: calc(1rem / 3) 0; + user-select:none; +} + +a,a:visited { + color: var(--colour); + text-decoration:none; +} + +a:hover { + color:var(--foregroundColour); +} + +table { + border-collapse:collapse; + border-color: var(--foregroundColour); + border-style: solid; + border-width: calc(1rem / 12); +} + +table tr td,table tr th { + padding:calc(1rem / 12) calc(2rem / 12); +} + +table tr th { + background-color:var(--foregroundColour); + color: var(--backgroundColour); + text-align: center; +} + +ul li,ol li { + margin-left:1rem; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c05e8f8 --- /dev/null +++ b/css/main.css @@ -0,0 +1,7 @@ +@import "/css/root.css"; + +@import "/css/base.css"; + +@import "/css/pageHeader.css"; +@import "/css/page.css"; +@import "/css/pageFooter.css"; diff --git a/css/noJavaScript.css b/css/noJavaScript.css new file mode 100644 index 0000000..beac2c0 --- /dev/null +++ b/css/noJavaScript.css @@ -0,0 +1,3 @@ +div.navigationBar img.themeToggler { + display:none; +} diff --git a/css/page.css b/css/page.css new file mode 100644 index 0000000..2fbe4d5 --- /dev/null +++ b/css/page.css @@ -0,0 +1,52 @@ +div.page { + background-color: var(--backgroundColour); + border-radius: 1rem; + border-top-left-radius: 0; + border-top-right-radius:0; + margin: 0 auto; + max-width: var(--maximumPageWidth); + min-width: var(--minimumPageWidth); + padding: 1rem 2rem; + text-align: left; + width: 100%; +} + +div.page p.pageHeading,div.page div.section p.sectionHeading { + font-family:"Helvetica","sans-serif"; + font-weight:bold; +} + +div.page p.pageHeading { + font-size: 3rem; + letter-spacing:calc(1rem / 12); + margin-bottom: 1rem; + text-align: right; +} + +div.page table tr.small { + font-size:calc(2rem / 3); +} + +div.page div.section + div.section { + margin-top:1rem; +} + +div.page div.section p.sectionHeading { + border-top-color:var(--foregroundColour); + border-top-style:solid; + border-top-width:calc(1rem / 3); + font-size: 2rem; + padding-top: 1rem; + width: fit-content; +} + +div.page div.section p.subHeading { + font-size: calc(2rem / 3); + font-weight:bold; + margin-top: 0; +} + +div.page div.section p.subHeading::before { + content: "\0020\2014\0020"; + font-weight:normal; +} diff --git a/css/pageFooter.css b/css/pageFooter.css new file mode 100644 index 0000000..2e6afed --- /dev/null +++ b/css/pageFooter.css @@ -0,0 +1,11 @@ +div.copyrightNotice { + font-weight:bold; + margin: 0 auto; + margin-top: 1rem; + text-align: center; + width: fit-content; +} + +div.copyrightNotice p + p { + margin-top:calc(1rem / 2); +} diff --git a/css/pageHeader.css b/css/pageHeader.css new file mode 100644 index 0000000..d03a8f1 --- /dev/null +++ b/css/pageHeader.css @@ -0,0 +1,67 @@ +div.logotype { + background-color: var(--colour); + border-radius: calc(6rem * 12/60); + border-top-left-radius:0; + height: 6rem; + margin: 0 auto; + margin-bottom: 1rem; + width: 6rem; +} + +div.logotype img { + border-bottom-right-radius:0; + border-top-left-radius: 0; + height:100%; + width: 100%; +} + +p.title { + font-size: 4rem; + letter-spacing:calc(1rem / 6); + margin-bottom: 1rem; + text-align: center; +} + +div.navigationBar { + background-color: var(--foregroundColour); + color: var(--backgroundColour); + font-weight: bold; + margin: 0 auto; + max-width: var(--maximumPageWidth); + min-width: var(--minimumPageWidth); + padding: 1rem 2rem; + text-align: center; + width: 100%; +} + +div.navigationBar img.themeToggler { + background-color:var(--backgroundColour); + border-color: var(--backgroundColour); + border-radius: calc(1rem / 3 * 2); + border-width: calc(1rem / 3); + border-style: solid; + color: var(--backgroundColour); + cursor: pointer; + display: block; + height: calc(3rem - 1rem / 2 * 2); + margin: 0 auto; + margin-bottom: 1rem; + user-select: none; + width: calc(6rem - 1rem / 2 * 2); +} + +div.navigationBar p + p { + margin-top:calc(1rem / 2); +} + +div.navigationBar p,div.navigationBar span + span::before { + content:"\0020\00B7\0020"; +} + +div.navigationBar p,div.navigationBar span a,div.navigationBar span a:hover { + color:var(--backgroundColour); +} + +div.navigationBar span a:hover { + text-decoration:underline; +} diff --git a/css/root.css b/css/root.css new file mode 100644 index 0000000..f2c33d2 --- /dev/null +++ b/css/root.css @@ -0,0 +1,34 @@ +:root { + --black: #1B1A1A; /* 7/32 */ + --darkgrey: #232121; /* 8/32 */ + --lightgrey:#ECEAEA; /* 30/32 */ + --white: #F6F4F4; /* 31/32 */ + --blue: #5F7C9C; /* oklch(62.5% 0.118 259.065) */ + + --bodyColour: var(--black); + --backgroundColour:var(--darkgrey); + --foregroundColour:var(--white); + --colour: var(--blue); + + --minimumPageWidth:10rem; /* 12rem including body padding. */ + --maximumPageWidth:74rem; + + font-family:"Liberation Serif","serif"; + font-size: calc(1000mm / 1728 * 8); +} + +* { + box-sizing:border-box; + margin: 0; + padding: 0; +} + +body { + background-color:var(--bodyColour); + color: var(--foregroundColour); + padding: 1rem; +} + +p { + line-height:1em; +} |