diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/base.css | 188 | ||||
-rw-r--r-- | css/content.css | 156 | ||||
-rw-r--r-- | css/main.css | 2 | ||||
-rw-r--r-- | css/pghdr.css | 9 |
4 files changed, 203 insertions, 152 deletions
diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..2f86b92 --- /dev/null +++ b/css/base.css @@ -0,0 +1,188 @@ +* + img,* + ol,* + ul,* + table { + margin-top:1rem; +} + +img + *,ol + *,p.imageText + *,p.large + *,p.small + *,ul + *,table + * { + margin-top:1rem; +} + +ol ol,ol ul,p.large + p.small,p.small + p.small,ul ol, ul ul { + margin-top:0; +} + +br { + line-height:1rem; +} + +p a,p a:visited { + color: var(--colour); + font-weight: bold; + text-decoration:none; +} + +p a:hover { + color:var(--foregroundColour); +} + +p.pageTitle,p.large { + font-family:"Helvetica","sans-serif"; +} + +p.pageTitle { + margin-bottom:1rem; +} + +p.pageTitle { + font-size: 3rem; + text-align: center; +} + +p.pageTitle sub { + font-size: 1rem; + font-style:italic; +} + +p.large { + font-size: 2rem; + font-weight: bold; +} + +p.small,p.imageText { + font-size:calc(11rem / 12); +} + +p.small { + font-weight:bold; +} + +p.small span.data + span.data::before { + content: "\0020\2014\0020"; + font-weight:normal; +} + +p.math { + font-size:calc(3rem / 2); + margin: calc(3rem / 2 / 2) 0; +} + +p.imageText { + font-style: italic; + margin-top: calc(1rem / 2); +} + +img { + background-color:var(--foregroundColour); + border-color: var(--foregroundColour); + border-radius: calc(1rem / 3 * 2); + border-style: solid; + border-width: calc(1rem / 3); + display: block; + max-height: 12rem; + max-width: 12rem; +} + +p img { + border-style:none; + display: inline-block; + height: 1em; +} + +img.subgroup,img.subgroup-mc { + border-radius:calc(6rem / 24); + border-style: none; + margin: 0; + margin-bottom:1rem; + width: 6rem; +} + +img.subgroup-mc,img.subgroup-mc:hover { + transition:1s; +} + +img.subgroup-mc:hover { + transform:rotate3d(0,1,0,180deg); +} + +img.mcBanner { + background-color:var(--backgroundColour); + border-radius: 0; + border-style: none; + height: 6rem; + width: 3rem; +} + +ul li,ol li { + margin-left:2rem; +} + +table { + background-color:var(--foregroundColour); + border-collapse: collapse; + border-color: var(--foregroundColour); + border-style: solid; + border-width: calc(1rem / 12); + color: var(--backgroundColour); +} + +table tr.small { + font-size:calc(2rem / 3); +} + +table tr td,table tr th { + box-sizing:border-box; + padding: calc(1rem / 12) calc(1rem / 3); +} + +table tr td { + background-color:var(--backgroundColour); + color: var(--foregroundColour); +} + +table tr td + td,table tr td + th,table tr th + td { + border-left-color:var(--foregroundColour); + border-left-style:solid; + border-left-width:calc(1rem / 12); +} + +table tr td.rightAligne { + text-align:right; +} + +table.data { + font-family: "Courier New","monospace"; + word-break: break-all; + letter-spacing:calc(1rem / 12); +} + +table.data tr + tr { + border-top-color:var(--foregroundColour); + border-top-style:solid; + border-top-width:calc(1rem / 12); +} + +div.graphicsPreview { + align-items: center; + background-color:var(--foregroundColour); + border-radius: calc(1rem); + box-sizing: border-box; + display: flex; + height: calc(12rem + 1rem * 2 + 1rem / 3 * 2); + margin-top: 1rem; + padding: 1rem; + width: calc(12rem + 1rem * 2 + 1rem / 3 * 2); +} + +div.graphicsPreview + * { + margin-bottom:1rem; +} + +div.graphicsPreview img { + background-color:var(--backgroundColour); + border-color: var(--backgroundColour); + border-radius: calc(1rem / 3 * 2); + border-style: solid; + border-width: calc(1rem / 3); + margin: auto; + max-height: 12rem; + max-width: 12rem; +} diff --git a/css/content.css b/css/content.css index 53b9be9..08b5b8b 100644 --- a/css/content.css +++ b/css/content.css @@ -13,48 +13,7 @@ div.content { width: 100%; } -div.content img { - border-color: var(--foregroundColour); - border-radius:calc(1rem / 3 * 2); - border-style: solid; - border-width: calc(1rem / 3); - display: block; - margin: auto; - max-height: 12rem; -} - -div.content p a,div.content p a:visited { - color: var(--colour); - font-weight: bold; - text-decoration:none; -} - -div.content p a:hover { - color:var(--foregroundColour); -} - -div.content p img { - border-style:none; - display: inline-block; - height: 1em; -} - -div.content p.pageTitle,div.content p.large { - font-family:"Helvetica","sans-serif"; -} - -div.content p.pageTitle { - font-size: 3rem; - margin-bottom:1rem; - text-align: center; -} - -div.content p.pageTitle sub { - font-size: 1rem; - font-style:italic; -} - -div.content div.section + div.section::before { +div.section + div.section::before { content: ""; background-color:var(--colour); display: block; @@ -63,114 +22,13 @@ div.content div.section + div.section::before { width: calc(100% / 2); } -div.content div.section p.large { - font-size: 2rem; - font-weight: bold; -} - -div.content div.section p.small { - font-size: calc(11rem / 12); - font-weight:bold; -} - -div.content div.section p.small span.data + span.data::before { - content: "\0020\2014\0020"; - font-weight:normal; -} - -div.content div.section p.math { - margin:calc(1rem / 2) 0; -} - -div.content div.section ul li,div.content div.section ol li { - margin-left:2rem; -} - -div.content div.section table { - background-color:var(--foregroundColour); - border-collapse: collapse; - border-color: var(--foregroundColour); - border-style: solid; - border-width: calc(1rem / 12); - color: var(--backgroundColour); - margin: auto; -} - -div.content div.section table tr.small { - font-size:calc(2rem / 3); -} - -div.content div.section table tr td,div.content div.section table tr th { - box-sizing:border-box; - padding: calc(1rem / 12) calc(1rem / 3); -} - -div.content div.section table tr td { - background-color:var(--backgroundColour); - color: var(--foregroundColour); -} - -div.content div.section table tr td + td,div.content div.section table tr td + th,div.content div.section table tr th + td { - border-left-color:var(--foregroundColour); +div.subsection { + border-left-color:var(--colour); border-left-style:solid; - border-left-width:calc(1rem / 12); -} - -div.content div.section table tr td.rightAligne { - text-align:right; -} - -div.content div.section table.data { - font-family: "Courier New","monospace"; - word-break: break-all; - letter-spacing:calc(1rem / 12); -} - -div.content div.section table.data tr + tr { - border-top-color:var(--foregroundColour); - border-top-style:solid; - border-top-width:calc(1rem / 12); -} - -div.content div.section div.graphicsPreview { - align-items: center; - background-color:var(--foregroundColour); - border-radius: calc(1rem); - box-sizing: border-box; - display: flex; - height: calc(12rem + 1rem * 2 + 1rem / 3 * 2); - margin-top: 1rem; - padding: 1rem; - width: calc(12rem + 1rem * 2 + 1rem / 3 * 2); -} - -div.content div.section div.graphicsPreview + * { - margin-bottom:1rem; -} - -div.content div.section div.graphicsPreview img { - background-color:var(--backgroundColour); - border-color: var(--backgroundColour); - border-radius: calc(1rem / 3 * 2); - border-style: solid; - border-width: calc(1rem / 3); - margin: auto; - max-height: 12rem; - max-width: 12rem; -} - -div.content div.section img.subgroup,div.content div.section img.subgroup-mc { - border-radius:calc(6rem / 24); - border-style: none; - margin: 0; - margin-bottom:1rem; - width: 6rem; -} - -div.content div.section img.subgroup-mc,div.content div.section img.subgroup-mc:hover { - transition:1s; + border-left-width:calc(1rem / 3); + padding: 0 1rem; } -div.content div.section img.subgroup-mc:hover { - transform:rotate3d(0,1,0,180deg); +div.subsection + div.subsection { + margin-top:1rem; } diff --git a/css/main.css b/css/main.css index 285e24a..d1980d8 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,7 @@ @import "/css/root.css"; +@import "/css/base.css"; + @import "/css/pghdr.css"; @import "/css/content.css"; @import "/css/pgftr.css"; diff --git a/css/pghdr.css b/css/pghdr.css index 59401f7..39bbc4f 100644 --- a/css/pghdr.css +++ b/css/pghdr.css @@ -47,7 +47,10 @@ div.banner { } div.banner img { - height:8rem; - margin:auto; - width: 10rem; + background-color:inherit; + border-radius: 0; + border-style: none; + height: 8rem; + margin: auto; + width: 10rem; } |