diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/base.css | 20 | ||||
-rw-r--r-- | css/content.css | 9 | ||||
-rw-r--r-- | css/copyrightNotice.css | 18 | ||||
-rw-r--r-- | css/logotype.css | 10 | ||||
-rw-r--r-- | css/main.css | 6 | ||||
-rw-r--r-- | css/navigationBar.css | 50 | ||||
-rw-r--r-- | css/page.css | 17 | ||||
-rw-r--r-- | css/pageFooter.css | 11 | ||||
-rw-r--r-- | css/pageHeader.css | 67 | ||||
-rw-r--r-- | css/root.css | 6 |
10 files changed, 115 insertions, 99 deletions
diff --git a/css/base.css b/css/base.css index 94b4b59..6459ab0 100644 --- a/css/base.css +++ b/css/base.css @@ -22,20 +22,26 @@ a:hover { } table { - border-collapse:collapse; - border-color: var(--foregroundColour); - border-style: solid; - border-width: calc(1rem / 12); + background-color:var(--foregroundColour); + border-color: var(--foregroundColour); + border-radius: calc(1rem / 3); + border-spacing: 0; + border-style: solid; + border-width: calc(1rem / 3); + color: var(--backgroundColour); } table tr td,table tr th { padding:calc(1rem / 12) calc(2rem / 12); } +table tr td { + background-color:var(--backgroundColour); + color: var(--foregroundColour); +} + table tr th { - background-color:var(--foregroundColour); - color: var(--backgroundColour); - text-align: center; + text-align:center; } ul li,ol li { diff --git a/css/content.css b/css/content.css new file mode 100644 index 0000000..3763889 --- /dev/null +++ b/css/content.css @@ -0,0 +1,9 @@ +div.content { + background-color:var(--foregroundColour); + border-radius: 1rem; + margin: 0 auto; + max-width: var(--maximumPageWidth); + min-width: var(--minimumPageWidth); + padding-bottom: 1rem; + width: 100%; +} diff --git a/css/copyrightNotice.css b/css/copyrightNotice.css new file mode 100644 index 0000000..d98ec70 --- /dev/null +++ b/css/copyrightNotice.css @@ -0,0 +1,18 @@ +div.copyrightNotice { + color: var(--backgroundColour); + font-weight:bold; + margin: 0 auto; + margin-top: 1rem; + text-align: center; + width: fit-content; +} + +div.copyrightNotice p.projectName { + font-size: calc(3rem / 2); + margin-bottom:1rem; + text-align: center; +} + +div.copyrightNotice p.info + p.info { + margin-top:calc(1rem / 2); +} diff --git a/css/logotype.css b/css/logotype.css new file mode 100644 index 0000000..6f01f20 --- /dev/null +++ b/css/logotype.css @@ -0,0 +1,10 @@ +div.logotype { + background-color:var(--foregroundColour); + height: 3rem; + margin: 0 auto; + margin-bottom: 1rem; + mask-image: url("/svg/logotype.svg"); + mask-position: center; + mask-size: 100%; + width: 3rem; +} diff --git a/css/main.css b/css/main.css index c05e8f8..35b7862 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,8 @@ @import "/css/base.css"; -@import "/css/pageHeader.css"; +@import "/css/logotype.css"; +@import "/css/content.css"; +@import "/css/navigationBar.css"; @import "/css/page.css"; -@import "/css/pageFooter.css"; +@import "/css/copyrightNotice.css"; diff --git a/css/navigationBar.css b/css/navigationBar.css new file mode 100644 index 0000000..fb09dc4 --- /dev/null +++ b/css/navigationBar.css @@ -0,0 +1,50 @@ +div.navigationBar { + background-color:var(--foregroundColour); + border-radius: 1rem; + color: var(--backgroundColour); + font-family: var(--sansSerifFont); + font-weight: bold; + 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: 2rem; + margin: 0 auto; + margin-bottom: 1rem; + user-select: none; + width: 3rem; +} + +div.navigationBar p + p { + margin-top:calc(1rem / 2); +} + +div.navigationBar p,div.navigationBar span.link + span::before { + content:"\0020\00B7\0020"; +} + +div.navigationBar p,div.navigationBar span.link a,div.navigationBar span.link a:hover { + color:var(--backgroundColour); +} + +div.navigationBar span.link a:hover { + text-decoration:underline; +} + +div.navigationBar span.deadLink a { + text-decoration:line-through; +} + +div.navigationBar span.deadLink a:hover { + text-decoration:line-through underline; +} diff --git a/css/page.css b/css/page.css index 2fbe4d5..3befd01 100644 --- a/css/page.css +++ b/css/page.css @@ -1,18 +1,13 @@ 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%; + background-color:var(--backgroundColour); + border-radius: 1rem; + padding: 1rem 2rem; + text-align: left; + width: 100%; } div.page p.pageHeading,div.page div.section p.sectionHeading { - font-family:"Helvetica","sans-serif"; + font-family:var(--sansSerifFont); font-weight:bold; } diff --git a/css/pageFooter.css b/css/pageFooter.css deleted file mode 100644 index 2e6afed..0000000 --- a/css/pageFooter.css +++ /dev/null @@ -1,11 +0,0 @@ -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 deleted file mode 100644 index d03a8f1..0000000 --- a/css/pageHeader.css +++ /dev/null @@ -1,67 +0,0 @@ -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 index f2c33d2..fd9e47b 100644 --- a/css/root.css +++ b/css/root.css @@ -13,7 +13,11 @@ --minimumPageWidth:10rem; /* 12rem including body padding. */ --maximumPageWidth:74rem; - font-family:"Liberation Serif","serif"; + --monospaceFont:"Source Code Pro","monospace"; + --sansSerifFont:"Helvetica","sans-serif"; + --serifFont: "Liberation Serif","serif"; + + font-family:var(--serifFont); font-size: calc(1000mm / 1728 * 8); } |