diff options
Diffstat (limited to 'reference/css')
| -rw-r--r-- | reference/css/base.css | 43 | ||||
| -rw-r--r-- | reference/css/main.css | 7 | ||||
| -rw-r--r-- | reference/css/noJavaScript.css | 3 | ||||
| -rw-r--r-- | reference/css/page.css | 37 | ||||
| -rw-r--r-- | reference/css/pageFooter.css | 0 | ||||
| -rw-r--r-- | reference/css/pageHeader.css | 66 | ||||
| -rw-r--r-- | reference/css/root.css | 34 |
7 files changed, 190 insertions, 0 deletions
diff --git a/reference/css/base.css b/reference/css/base.css new file mode 100644 index 0000000..16de65a --- /dev/null +++ b/reference/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 a,p a:visited { + color: var(--colour); + font-weight: bold; + text-decoration:none; +} + +p a:hover { + color:var(--foregroundColour); +} + +p.math,span.math,td.math { + font-size:calc(3rem / 2); + padding: calc(1rem / 3) 0; +} + +table { + border-collapse:collapse; + border-color: var(--foregroundColour); + border-style: solid; + border-width: calc(1rem / 12); +} + +td,th { + padding:calc(1rem / 12) calc(1rem / 4); +} + +th { + background-color:var(--foregroundColour); + color: var(--backgroundColour1); + text-align: center; +} + +ul li,ol li { + margin-left:1rem; +} diff --git a/reference/css/main.css b/reference/css/main.css new file mode 100644 index 0000000..c05e8f8 --- /dev/null +++ b/reference/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/reference/css/noJavaScript.css b/reference/css/noJavaScript.css new file mode 100644 index 0000000..beac2c0 --- /dev/null +++ b/reference/css/noJavaScript.css @@ -0,0 +1,3 @@ +div.navigationBar img.themeToggler { + display:none; +} diff --git a/reference/css/page.css b/reference/css/page.css new file mode 100644 index 0000000..7b6354e --- /dev/null +++ b/reference/css/page.css @@ -0,0 +1,37 @@ +div.page { + background-color: var(--backgroundColour1); + 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.pageTitle,div.page div.section p.sectionTitle { + font-family:"Helvetica","sans-serif"; + font-weight:bold; +} + +div.page p.pageTitle { + font-size: 3rem; + letter-spacing:calc(1rem / 12); + margin-bottom: 1rem; + text-align: center; +} + +div.page div.section p.sectionTitle { + 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 + div.section { + margin-top:1rem; +} diff --git a/reference/css/pageFooter.css b/reference/css/pageFooter.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/reference/css/pageFooter.css diff --git a/reference/css/pageHeader.css b/reference/css/pageHeader.css new file mode 100644 index 0000000..23321f5 --- /dev/null +++ b/reference/css/pageHeader.css @@ -0,0 +1,66 @@ +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(--backgroundColour1); + 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(--backgroundColour1); + border-color: var(--backgroundColour1); + border-radius: calc(1rem / 3 * 2); + border-width: calc(1rem / 3); + border-style: solid; + color: var(--backgroundColour1); + 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 p span + span::before { + content:"\0020\00B7\0020"; +} + +div.navigationBar p,div.navigationBar p span a,div.navigationBar p span a:hover { + color:var(--backgroundColour1); +} + +div.navigationBar p span a:hover { + text-decoration:underline; +} diff --git a/reference/css/root.css b/reference/css/root.css new file mode 100644 index 0000000..b7d29e9 --- /dev/null +++ b/reference/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) */ + + --backgroundColour0:var(--black); + --backgroundColour1: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(--backgroundColour0); + color: var(--foregroundColour); + padding: 1rem; +} + +p { + line-height:1em; +} |