summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css20
-rw-r--r--css/content.css9
-rw-r--r--css/copyrightNotice.css18
-rw-r--r--css/logotype.css10
-rw-r--r--css/main.css6
-rw-r--r--css/navigationBar.css50
-rw-r--r--css/page.css17
-rw-r--r--css/pageFooter.css11
-rw-r--r--css/pageHeader.css67
-rw-r--r--css/root.css6
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);
}