summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css188
-rw-r--r--css/content.css156
-rw-r--r--css/main.css2
-rw-r--r--css/pghdr.css9
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;
}