summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css53
-rw-r--r--css/base.scss61
-rw-r--r--css/content.scss (renamed from css/content.css)0
-rw-r--r--css/copyrightNotice.scss (renamed from css/copyrightNotice.css)18
-rw-r--r--css/logotype.scss (renamed from css/logotype.css)0
-rw-r--r--css/main.css10
-rw-r--r--css/main.scss9
-rw-r--r--css/navigationBar.css41
-rw-r--r--css/navigationBar.scss42
-rw-r--r--css/noJavaScript.css4
-rw-r--r--css/noJavaScript.scss5
-rw-r--r--css/page.css92
-rw-r--r--css/page.scss83
-rw-r--r--css/root.css38
-rw-r--r--css/root.scss44
15 files changed, 256 insertions, 244 deletions
diff --git a/css/base.css b/css/base.css
deleted file mode 100644
index 99031a3..0000000
--- a/css/base.css
+++ /dev/null
@@ -1,53 +0,0 @@
-div.page * + p,* + ol,* + table,* + ul {
- margin-top:1rem;
-}
-
-li p + ul,li p + ol {
- margin-top:0;
-}
-
-p.math,span.math,td.math {
- font-size: calc(3rem / 2);
- padding: calc(1rem / 3) 0;
- user-select:none;
-}
-
-a,a:visited {
- color: var(--colour);
- text-decoration:none;
-}
-
-a:hover {
- color:var(--foregroundColour);
-}
-
-span.emphasis {
- font-style:italic;
-}
-
-table {
- 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 {
- text-align:center;
-}
-
-ul li,ol li {
- margin-left:1rem;
-}
diff --git a/css/base.scss b/css/base.scss
new file mode 100644
index 0000000..f38c10b
--- /dev/null
+++ b/css/base.scss
@@ -0,0 +1,61 @@
+div.page * + p,* + ol,* + table,* + ul {
+ margin-top:1rem;
+}
+
+li p + ul,li p + ol {
+ margin-top:0;
+}
+
+a {
+ &,&:visited {
+ color: var(--colour);
+ text-decoration:none;
+ }
+
+ &:hover {
+ color:var(--foregroundColour);
+ }
+}
+
+span.emphasis {
+ font-style:italic;
+}
+
+p.math,span.math,td.math {
+ font-size: calc(3rem / 2);
+ padding: calc(1rem / 3) 0;
+ user-select:none;
+}
+
+table {
+ @include invertedTheme();
+ border-radius: calc(1rem / 3);
+ border-spacing:0;
+ border-style: solid;
+ border-width: calc(1rem / 3);
+
+ tr {
+ &.small {
+ font-size:calc(2rem / 3);
+ }
+
+ td,th {
+ padding:calc(1rem / 12) calc(2rem / 12);
+ }
+
+ td {
+ background-color:var(--backgroundColour);
+ color: var(--foregroundColour);
+ }
+
+ th {
+ text-align:center;
+ }
+ }
+}
+
+ul,ol {
+ li {
+ margin-left:1rem;
+ }
+}
diff --git a/css/content.css b/css/content.scss
index 4208b4d..4208b4d 100644
--- a/css/content.css
+++ b/css/content.scss
diff --git a/css/copyrightNotice.css b/css/copyrightNotice.scss
index ba2b5c7..aff74a4 100644
--- a/css/copyrightNotice.css
+++ b/css/copyrightNotice.scss
@@ -5,14 +5,16 @@ div.copyrightNotice {
margin-top: 1rem;
text-align: center;
width: fit-content;
-}
-div.copyrightNotice p.projectName {
- font-size: calc(3rem / 2);
- margin-bottom:1rem;
- text-align: center;
-}
+ p.projectName {
+ font-size: calc(3rem / 2);
+ margin-bottom:1rem;
+ text-align: center;
+ }
-div.copyrightNotice p.info + p.info {
- margin-top:calc(1rem / 2);
+ p.info {
+ & + p.info {
+ margin-top:calc(1rem / 2);
+ }
+ }
}
diff --git a/css/logotype.css b/css/logotype.scss
index 6f01f20..6f01f20 100644
--- a/css/logotype.css
+++ b/css/logotype.scss
diff --git a/css/main.css b/css/main.css
index 35b7862..3f70242 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,9 +1 @@
-@import "/css/root.css";
-
-@import "/css/base.css";
-
-@import "/css/logotype.css";
-@import "/css/content.css";
-@import "/css/navigationBar.css";
-@import "/css/page.css";
-@import "/css/copyrightNotice.css";
+:root{--black: #1B1A1A;--darkgrey: #232121;--lightgrey:#ECEAEA;--white: #F6F4F4;--blue: #5F7C9C;--bodyColour: var(--black);--backgroundColour:var(--darkgrey);--foregroundColour:var(--white);--colour: var(--blue);--minimumPageWidth:10rem;--maximumPageWidth:74rem;font-family:"Liberation Serif","serif";font-size:calc(1000mm / 1728 * 8)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bodyColour);color:var(--foregroundColour);padding:1rem}p{line-height:1em}div.page *+p,*+ol,*+table,*+ul{margin-top:1rem}li p+ul,li p+ol{margin-top:0}a,a:visited{color:var(--colour);text-decoration:none}a:hover{color:var(--foregroundColour)}span.emphasis{font-style:italic}p.math,span.math,td.math{font-size:calc(3rem / 2);padding:calc(1rem / 3) 0;user-select:none}table{background-color:var(--foregroundColour);border-color:var(--foregroundColour);color:var(--backgroundColour);border-radius:calc(1rem / 3);border-spacing:0;border-style:solid;border-width:calc(1rem / 3)}table tr.small{font-size:calc(2rem / 3)}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{text-align:center}ul li,ol li{margin-left:1rem}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}div.content{background-color:var(--foregroundColour);border-radius:1rem;color:var(--backgroundColour);margin:0 auto;max-width:var(--maximumPageWidth);min-width:var(--minimumPageWidth);padding-bottom:1rem;width:100%}div.navigationBar{background-color:none;border-radius:1rem;font-family:"Helvetica","sans-serif";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;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 span.link+span::before{content:"\0020\00B7\0020"}div.navigationBar p p,div.navigationBar p span.link a,div.navigationBar p span.link a:hover{color:var(--backgroundColour)}div.navigationBar p span.link a:hover{text-decoration:underline}div.page{background-color:var(--backgroundColour);border-radius:1rem;color:var(--foregroundColour);padding:1rem 2rem;text-align:left;width:100%}div.page p.heading{font-family:"Helvetica","sans-serif";font-size:3rem;font-weight:bold;margin-bottom:1rem;text-align:right}div.page span.footnote{font-size:calc(2rem / 3);vertical-align:sub}div.page span.footnote::before{content:"\0020"}div.page p.vocable{font-style:italic;margin-top:calc(1rem / 2)}div.page p.note{font-style:italic}div.page p.note::before{content:"\002E\002E\002E\0020"}div.page p.note span.emphasis{font-weight:bold}div.page p.footnote{font-size:calc(2rem / 3);font-style:italic;margin-top:calc(1rem / 2)}*+div.page div.group{margin-top:1rem}div.page div.group *{margin-top:0}div.page div.section+div.section{margin-top:1rem}div.page div.section p.heading{border-top-style:solid;border-top-width:calc(1rem / 3);font-size:2rem;padding-top:1rem;width:fit-content}div.page div.section p.subheading{font-size:calc(2rem / 3);font-weight:bold;margin-top:0}div.page div.section p.subheading::before{content:"\0020\2014\0020";font-weight:normal}div.copyrightNotice{background-color:none;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/main.scss b/css/main.scss
new file mode 100644
index 0000000..82f4bd2
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,9 @@
+@import "root.scss";
+
+@import "base.scss";
+
+@import "logotype.scss";
+@import "content.scss";
+@import "navigationBar.scss";
+@import "page.scss";
+@import "copyrightNotice.scss";
diff --git a/css/navigationBar.css b/css/navigationBar.css
deleted file mode 100644
index 7494ff1..0000000
--- a/css/navigationBar.css
+++ /dev/null
@@ -1,41 +0,0 @@
-div.navigationBar {
- background-color:none;
- border-radius: 1rem;
- 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;
-}
diff --git a/css/navigationBar.scss b/css/navigationBar.scss
new file mode 100644
index 0000000..521d694
--- /dev/null
+++ b/css/navigationBar.scss
@@ -0,0 +1,42 @@
+div.navigationBar {
+ background-color:none;
+ border-radius: 1rem;
+ font-family: $sansSerifFont;
+ font-weight: bold;
+ padding: 1rem 2rem;
+ text-align: center;
+ width: 100%;
+
+ img.themeToggler {
+ background-color:var(--backgroundColour);
+ border-color: var(--backgroundColour);
+ border-radius: calc(1rem / 3 * 2);
+ border-width: calc(1rem / 3);
+ border-style: solid;
+ cursor: pointer;
+ display: block;
+ height: 2rem;
+ margin: 0 auto;
+ margin-bottom: 1rem;
+ user-select: none;
+ width: 3rem;
+ }
+
+ p {
+ & + p {
+ margin-top:calc(1rem / 2);
+ }
+
+ span.link + span::before {
+ content:"\0020\00B7\0020";
+ }
+
+ p,span.link a,span.link a:hover {
+ color:var(--backgroundColour);
+ }
+
+ span.link a:hover {
+ text-decoration:underline;
+ }
+ }
+}
diff --git a/css/noJavaScript.css b/css/noJavaScript.css
index beac2c0..f5cf95f 100644
--- a/css/noJavaScript.css
+++ b/css/noJavaScript.css
@@ -1,3 +1 @@
-div.navigationBar img.themeToggler {
- display:none;
-}
+div.navigationBar img.themeToggler{display:none}
diff --git a/css/noJavaScript.scss b/css/noJavaScript.scss
new file mode 100644
index 0000000..1b6ebfe
--- /dev/null
+++ b/css/noJavaScript.scss
@@ -0,0 +1,5 @@
+div.navigationBar {
+ img.themeToggler {
+ display:none;
+ }
+}
diff --git a/css/page.css b/css/page.css
deleted file mode 100644
index 3280281..0000000
--- a/css/page.css
+++ /dev/null
@@ -1,92 +0,0 @@
-div.page {
- background-color:var(--backgroundColour);
- border-radius: 1rem;
- color: var(--foregroundColour);
- padding: 1rem 2rem;
- text-align: left;
- width: 100%;
-}
-
-div.page span.footnote {
- font-size: calc(2rem / 3);
- vertical-align:sub;
-}
-
-div.page span.footnote::before {
- content:"\0020";
-}
-
-div.page p.pageHeading,div.page div.section p.sectionHeading {
- font-family:var(--sansSerifFont);
- font-weight:bold;
-}
-
-div.page p.pageHeading {
- font-size: 3rem;
- letter-spacing:calc(1rem / 12);
- margin-bottom: 1rem;
- text-align: right;
-}
-
-div.page p.vocable + p.vocable {
- margin-top:calc(1rem / 2);
-}
-
-div.page p.vocable span.vocable {
- font-style:italic;
-}
-
-div.page p.vocable span.vocable + span.vocable::before {
- content: "\0020\2014\0020";
- font-style:normal;
-}
-
-div.page p.note {
- font-style:italic;
-}
-
-div.page p.note::before {
- content:"\002E\002E\002E\0020";
-}
-
-div.page p.note span.emphasis {
- font-weight:bold;
-}
-
-div.page p.footnote {
- font-size: calc(2rem / 3);
- font-style:italic;
- margin-top:calc(1rem / 2);
-}
-
-div.page p + p.footnote {
- margin-top:1rem;
-}
-
-div.page table tr.small {
- font-size:calc(2rem / 3);
-}
-
-div.page div.section + div.section {
- margin-top:1rem;
-}
-
-div.page div.section p.sectionHeading {
- border-top-color:var(--foregroundColour);
- border-top-style:solid;
- border-top-width:calc(1rem / 3);
- font-size: 2rem;
- padding-top: 1rem;
- width: fit-content;
-}
-
-div.page div.section p.subHeading {
- font-size: calc(2rem / 3);
- font-weight:bold;
- margin-top: 0;
-}
-
-div.page div.section p.subHeading::before {
- content: "\0020\2014\0020";
- font-weight:normal;
-}
diff --git a/css/page.scss b/css/page.scss
new file mode 100644
index 0000000..4134e56
--- /dev/null
+++ b/css/page.scss
@@ -0,0 +1,83 @@
+div.page {
+ background-color:var(--backgroundColour);
+ border-radius: 1rem;
+ color: var(--foregroundColour);
+ padding: 1rem 2rem;
+ text-align: left;
+ width: 100%;
+
+ p.heading {
+ font-family: $sansSerifFont;
+ font-size: 3rem;
+ font-weight: bold;
+ margin-bottom:1rem;
+ text-align: right;
+ }
+
+ span.footnote {
+ font-size: calc(2rem / 3);
+ vertical-align:sub;
+
+ &::before {
+ content:"\0020";
+ }
+ }
+
+ p.vocable {
+ font-style:italic;
+ margin-top:calc(1rem / 2);
+ }
+
+ p.note {
+ font-style:italic;
+
+ &::before {
+ content:"\002E\002E\002E\0020";
+ }
+
+ span.emphasis {
+ font-weight:bold;
+ }
+ }
+
+ p.footnote {
+ font-size: calc(2rem / 3);
+ font-style:italic;
+ margin-top:calc(1rem / 2);
+ }
+
+ div.group {
+ * + & {
+ margin-top:1rem;
+ }
+
+ * {
+ margin-top:0;
+ }
+ }
+
+ div.section {
+ & + div.section {
+ margin-top:1rem;
+ }
+
+ p.heading {
+ border-top-style:solid;
+ border-top-width:calc(1rem / 3);
+ font-size: 2rem;
+ padding-top: 1rem;
+ width: fit-content; // We don't need to change alignement with this.
+ }
+
+ p.subheading {
+ font-size: calc(2rem / 3);
+ font-weight:bold;
+ margin-top: 0;
+
+ &::before {
+ content: "\0020\2014\0020";
+ font-weight:normal;
+ }
+ }
+ }
+}
diff --git a/css/root.css b/css/root.css
deleted file mode 100644
index fd9e47b..0000000
--- a/css/root.css
+++ /dev/null
@@ -1,38 +0,0 @@
-:root {
- --black: #1B1A1A; /* 7/32 */
- --darkgrey: #232121; /* 8/32 */
- --lightgrey:#ECEAEA; /* 30/32 */
- --white: #F6F4F4; /* 31/32 */
- --blue: #5F7C9C; /* oklch(62.5% 0.118 259.065) */
-
- --bodyColour: var(--black);
- --backgroundColour:var(--darkgrey);
- --foregroundColour:var(--white);
- --colour: var(--blue);
-
- --minimumPageWidth:10rem; /* 12rem including body padding. */
- --maximumPageWidth:74rem;
-
- --monospaceFont:"Source Code Pro","monospace";
- --sansSerifFont:"Helvetica","sans-serif";
- --serifFont: "Liberation Serif","serif";
-
- font-family:var(--serifFont);
- font-size: calc(1000mm / 1728 * 8);
-}
-
-* {
- box-sizing:border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- background-color:var(--bodyColour);
- color: var(--foregroundColour);
- padding: 1rem;
-}
-
-p {
- line-height:1em;
-}
diff --git a/css/root.scss b/css/root.scss
new file mode 100644
index 0000000..090d420
--- /dev/null
+++ b/css/root.scss
@@ -0,0 +1,44 @@
+$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
+ --blue: #5F7C9C; // oklch(62.5% 0.118 259.065)
+
+ --bodyColour: var(--black);
+ --backgroundColour:var(--darkgrey);
+ --foregroundColour:var(--white);
+ --colour: var(--blue);
+
+ --minimumPageWidth:10rem; // 12rem including body padding.
+ --maximumPageWidth:74rem;
+
+ 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);
+ padding: 1rem;
+}
+
+p {
+ line-height:1em;
+}
+
+@mixin invertedTheme {
+ background-color:var(--foregroundColour);
+ border-color: var(--foregroundColour);
+ color: var(--backgroundColour);
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:32:39 +0100