summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/banner.scss12
-rw-r--r--css/base.css164
-rw-r--r--css/base.scss48
-rw-r--r--css/main.css7
-rw-r--r--css/main.scss5
-rw-r--r--css/navigationBar.scss34
-rw-r--r--css/nojs.css11
-rw-r--r--css/page.css25
-rw-r--r--css/page.scss68
-rw-r--r--css/pageFooter.css0
-rw-r--r--css/pageHeader.css64
-rw-r--r--css/root.css31
12 files changed, 167 insertions, 302 deletions
diff --git a/css/banner.scss b/css/banner.scss
new file mode 100644
index 0000000..0cbd08f
--- /dev/null
+++ b/css/banner.scss
@@ -0,0 +1,12 @@
+div.banner {
+ background-color:var(--colour);
+ padding: 1rem;
+ width: 100%;
+
+ img.logotype {
+ display:block;
+ height: 4rem;
+ margin: auto;
+ width: 5rem;
+ }
+}
diff --git a/css/base.css b/css/base.css
deleted file mode 100644
index fc0cd76..0000000
--- a/css/base.css
+++ /dev/null
@@ -1,164 +0,0 @@
-* + div.graphicsPreview,* + img,* + ol,* + ul,* + table {
- margin-top:1rem;
-}
-
-div.graphicsPreview + *,img + *,ol + *,p.large + *,p.small + *,ul + *,table + * {
- margin-top:1rem;
-}
-
-ol ol,ol ul,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;
- font-weight:bold;
-}
-
-p.pageTitle sub {
- font-size:1rem;
-}
-
-p.large {
- font-size: 2rem;
- font-weight: bold;
-}
-
-p.small {
- font-size: calc(7rem / 8);
- font-style: italic;
- font-weight:bold;
- margin-top: 0;
-}
-
-p.small span.data + span.data::before {
- content: "\0020\2014\0020";
- font-weight:normal;
-}
-
-p.math,table tr td.math {
- font-size:calc(3rem / 2);
- margin: calc(3rem / 2 / 2) 0;
-}
-
-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);
- padding: 1rem;
- width: calc(12rem + 1rem * 2 + 1rem / 3 * 2);
-}
-
-div.graphicsPreview img {
- background-color:var(--backgroundColour0);
- border-color: var(--backgroundColour0);
- border-radius: calc(1rem / 3 * 2);
- border-style: solid;
- border-width: calc(1rem / 3);
- margin: auto;
- max-height: 12rem;
- max-width: 12rem;
-}
-
-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.mcBanner {
- background-color:var(--backgroundColour1);
- border-radius: 0;
- border-style: none;
- height: 6rem;
- width: 3rem;
-}
-
-img.subgroup,img.subgroup-mc {
- border-radius:calc(6rem / 24);
- border-style: none;
- margin-bottom:1rem;
- width: 6rem;
-}
-
-img.subgroup-mc,img.subgroup-mc:hover {
- transition:1s;
-}
-
-img.subgroup-mc:hover {
- transform:rotate3d(0,1,0,180deg);
-}
-
-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(--backgroundColour0);
-}
-
-table.data {
- font-family: "Courier New","monospace";
- word-break: break-all;
- letter-spacing:calc(1rem / 12);
-}
-
-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(--backgroundColour0);
- color: var(--foregroundColour);
-}
-
-table tr td.rightAlign,table tr th.rightAlign {
- text-align:right;
-}
diff --git a/css/base.scss b/css/base.scss
new file mode 100644
index 0000000..4415fdc
--- /dev/null
+++ b/css/base.scss
@@ -0,0 +1,48 @@
+$monospaceFont:"Source Code Pro","monospace";
+$sansSerifFont:"Helvetica","sans-serif";
+$serifFont: "Liberation Serif","serif";
+
+:root {
+ --black: #1B1A1A; // 7/32
+ --darkgrey: #232121; // 8/32
+ --lightgrey:#ECEAEA; // 30/32
+ --white: #F6F4F4; // 31/32
+ --red: #A50034; // 207 C
+ --yellow: #FFA400; // 137 C
+ --green: #00965E; // 340 C
+ --blue: #0072CE; // 285 C
+
+ --bodyColour: var(--black);
+ --backgroundColour:var(--darkgrey);
+ --foregroundColour:var(--white);
+ --colour: var(--red);
+ --fadedColour: var(--red);
+
+ --minimumPageWidth:12rem;
+ --maximumPageWidth:48rem;
+
+ font-family:$serifFont;
+ font-size: calc(1000mm / 1728 * 8);
+}
+
+* {
+ box-sizing:border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color:var(--bodyColour);
+ color: var(--foregroundColour);
+}
+
+a {
+ &,&:visited {
+ color: var(--fadedColour);
+ text-decoration:none;
+ }
+
+ &:hover {
+ color:var(--foregroundColour);
+ }
+}
diff --git a/css/main.css b/css/main.css
deleted file mode 100644
index c05e8f8..0000000
--- a/css/main.css
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "/css/root.css";
-
-@import "/css/base.css";
-
-@import "/css/pageHeader.css";
-@import "/css/page.css";
-@import "/css/pageFooter.css";
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..d9dfeff
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,5 @@
+@import "base";
+
+@import "navigationBar";
+@import "banner";
+@import "page";
diff --git a/css/navigationBar.scss b/css/navigationBar.scss
new file mode 100644
index 0000000..838a219
--- /dev/null
+++ b/css/navigationBar.scss
@@ -0,0 +1,34 @@
+div.navigationBar {
+ background-color:var(--foregroundColour);
+ color: var(--backgroundColour);
+ cursor: pointer;
+ margin: 0 auto;
+ max-width: var(--maximumPageWidth);
+ min-width: var(--minimumPageWidth);
+ padding: 1rem 2rem;
+
+ p.links {
+ margin:0 auto;
+ width: fit-content;
+
+ span.link {
+ font-family:$sansSerifFont;
+
+ & + span.link::before {
+ content:"\0020\00B7\0020";
+ }
+
+ a {
+ font-weight:bold;
+
+ &,&:visited {
+ color:var(--backgroundColour);
+ }
+
+ &:hover {
+ text-decoration:underline;
+ }
+ }
+ }
+ }
+}
diff --git a/css/nojs.css b/css/nojs.css
deleted file mode 100644
index a793d2f..0000000
--- a/css/nojs.css
+++ /dev/null
@@ -1,11 +0,0 @@
-img.themeToggler {
- display:none;
-}
-
-div.page {
- padding-bottom:1rem;
-}
-
-div.toTop {
- display:none;
-}
diff --git a/css/page.css b/css/page.css
deleted file mode 100644
index 1a94139..0000000
--- a/css/page.css
+++ /dev/null
@@ -1,25 +0,0 @@
-div.page {
- background-color: var(--backgroundColour1);
- border-bottom-left-radius: 1rem;
- border-bottom-right-radius:1rem;
- border-top-color: var(--foregroundColour);
- border-top-style: solid;
- border-top-width: calc(1rem / 3);
- box-sizing: border-box;
- height: 100%;
- margin: auto;
- margin-bottom: 1rem;
- max-width: var(--maximumPageWidth);
- min-width: var(--minimumPageWidth);
- padding: 1rem 2rem;
- width: 100%;
-}
-
-div.section + div.section::before {
- content: "";
- background-color:var(--colour);
- display: block;
- height: calc(1rem / 3);
- margin: 1rem 0;
- width: calc(100% / 2);
-}
diff --git a/css/page.scss b/css/page.scss
new file mode 100644
index 0000000..76911bc
--- /dev/null
+++ b/css/page.scss
@@ -0,0 +1,68 @@
+div.page {
+ background-color:var(--backgroundColour);
+ border-top-color:var(--foregroundColour);
+ border-top-style:solid;
+ border-top-width:calc(1rem / 3);
+ color: var(--foregroundColour);
+ margin: 0 auto;
+ max-width: var(--maximumPageWidth);
+ min-width: var(--minimumPageWidth);
+ padding: 1rem 2rem;
+
+ p.heading {
+ font-family:$sansSerifFont;
+ font-size: 3rem;
+ font-weight:bold;
+ text-align: center;
+ }
+
+ div.section {
+ & + div.section {
+ margin-top:2rem;
+ }
+
+ img,ol,p:not(.heading,.subheading),ul {
+ & + img,& + ol,& + p,& + ul {
+ margin-top:1rem;
+ }
+ }
+
+ p.heading {
+ font-size: 2rem;
+ margin-bottom:1rem;
+ text-align: left;
+ }
+
+ p.subheading {
+ margin-top: -1rem;
+ margin-bottom:1rem;
+
+ span.data {
+ & + span.data {
+ &::before {
+ content:"\0020\2014\0020";
+ }
+ }
+ }
+ }
+
+ span.emphasis {
+ font-style:italic;
+ }
+
+ img.logo {
+ border-radius:calc(6rem * 16 / 384);
+ width: 6rem;
+ }
+
+ ol,ul {
+ li {
+ margin-left:1rem;
+
+ ol,ul {
+ margin-top:0;
+ }
+ }
+ }
+ }
+}
diff --git a/css/pageFooter.css b/css/pageFooter.css
deleted file mode 100644
index e69de29..0000000
--- a/css/pageFooter.css
+++ /dev/null
diff --git a/css/pageHeader.css b/css/pageHeader.css
deleted file mode 100644
index baeecfd..0000000
--- a/css/pageHeader.css
+++ /dev/null
@@ -1,64 +0,0 @@
-div.navbar {
- background-color:var(--foregroundColour);
- box-sizing: border-box;
- font-family: "Helvetica","sans-serif";
- height: auto;
- margin: auto;
- max-width: var(--maximumPageWidth);
- min-width: var(--minimumPageWidth);
- padding: 1rem 2rem;
- text-align: center;
- width: 100%;
-}
-
-div.navbar p span.section + span.section::before {
- content:"\0020\2014\0020"
-}
-
-div.navbar p,div.navbar p span.section a,div.navbar p span.section a:visited {
- color: var(--backgroundColour0);
- text-decoration:none;
-}
-
-div.navbar p span.section a:hover {
- color:var(--colour);
-}
-
-div.navbar p span.section a + a::before {
- content:"\0020\00B7\0020"
-}
-
-div.navbar p span.section a.mandelbrot-link:hover {
- color:var(--green);
-}
-
-div.navbar img.themeToggler {
- background-color:var(--backgroundColour0);
- border-color: var(--backgroundColour0);
- border-radius: calc(1rem / 3 * 2);
- border-width: calc(1rem / 3);
- border-style: solid;
- color: var(--backgroundColour0);
- cursor: pointer;
- display: block;
- margin: 0 auto;
- margin-top: 1rem;
- user-select: none;
- width: calc(3rem - 1rem / 2 * 2);
-}
-
-div.banner {
- background-color:var(--colour);
- display: flex;
- height: 12rem;
- width: 100%;
-}
-
-div.banner img {
- background-color:inherit;
- border-radius: 0;
- border-style: none;
- height: 8rem;
- margin: auto;
- width: 10rem;
-}
diff --git a/css/root.css b/css/root.css
deleted file mode 100644
index 258c4ea..0000000
--- a/css/root.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {
- --black: #202020;
- --darkgrey: #2B2B2B;
- --lightgrey:#EAEAEA;
- --white: #F4F4F4;
- --red: #A50034; /* 207 C */
- --yellow: #FFA400; /* 137 C */
- --green: #00965E; /* 340 C */
- --blue: #006BA6; /* 307 C */
-
- --backgroundColour0:var(--black);
- --backgroundColour1:var(--darkgrey);
- --foregroundColour: var(--white);
- --colour: var(--red);
-
- --minimumPageWidth:12rem;
- --maximumPageWidth:52rem;
-
- font-family:"Liberation Serif","serif";
- font-size: calc(1000mm / 1728 * 8);
-}
-
-* {
- margin: 0;
- padding:0;
-}
-
-body {
- background-color:var(--backgroundColour0);
- color: var(--foregroundColour);
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 12:46:00 +0100