From 6574db29e43aed79005c9ca45fe00d5cd4128ed7 Mon Sep 17 00:00:00 2001
From: benjamin <bwand@c-base.org>
Date: Tue, 15 Dec 2020 17:02:48 +0100
Subject: [PATCH] system font integration
---
public/about.html | 27 +++++++++++++++++++++++---
public/index.html | 27 +++++++++++++++++++++++---
public/main.js | 8 ++++++--
public/speakersdesk.html | 27 +++++++++++++++++++++++---
public/styles/partials/_font-code.scss | 18 +++++++++++++++++
public/styles/style.css | 25 ++++++++++++++++++++----
public/styles/style.scss | 7 +++----
7 files changed, 120 insertions(+), 19 deletions(-)
diff --git a/public/about.html b/public/about.html
index 8107153..75f8986 100644
--- a/public/about.html
+++ b/public/about.html
@@ -33,7 +33,7 @@
name="font"
id="font-AtkinsonHyperlegible"
value="AtkinsonHyperlegible"
- />Atkinson Hyperlegible</label
+ />Atkinson Hyperlegible</label
>
</li>
<li>
@@ -46,7 +46,7 @@
name="font"
id="font-OpenDyslexicThree"
value="OpenDyslexicThree"
- />Open Dyslexic</label
+ />Open Dyslexic</label
>
</li>
<li>
@@ -56,7 +56,7 @@
name="font"
id="font-SylexiadSans"
value="SylexiadSans"
- />Sylexiad Sans</label
+ />Sylexiad Sans</label
>
</li>
<li>
@@ -80,6 +80,27 @@
/>Ubuntu</label
>
</li>
+ <li>
+ <label for="font-serif" class="font-serif"
+ ><input
+ type="radio"
+ name="font"
+ id="font-serif"
+ value="serif"
+ />serif</label
+ >
+ </li>
+ <li>
+ <label for="font-sans" class="font-sans">
+ <input
+ type="radio"
+ name="font"
+ id="font-sans"
+ value="sans"
+ checked
+ />sans-serif</label
+ >
+ </li>
</ul>
</fieldset>
</div>
diff --git a/public/index.html b/public/index.html
index 1a6df08..08bca5a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
name="font"
id="font-AtkinsonHyperlegible"
value="AtkinsonHyperlegible"
- />Atkinson Hyperlegible</label
+ />Atkinson Hyperlegible</label
>
</li>
<li>
@@ -46,7 +46,7 @@
name="font"
id="font-OpenDyslexicThree"
value="OpenDyslexicThree"
- />Open Dyslexic</label
+ />Open Dyslexic</label
>
</li>
<li>
@@ -56,7 +56,7 @@
name="font"
id="font-SylexiadSans"
value="SylexiadSans"
- />Sylexiad Sans</label
+ />Sylexiad Sans</label
>
</li>
<li>
@@ -80,6 +80,27 @@
/>Ubuntu</label
>
</li>
+ <li>
+ <label for="font-serif" class="font-serif"
+ ><input
+ type="radio"
+ name="font"
+ id="font-serif"
+ value="serif"
+ />serif</label
+ >
+ </li>
+ <li>
+ <label for="font-sans" class="font-sans">
+ <input
+ type="radio"
+ name="font"
+ id="font-sans"
+ value="sans"
+ checked
+ />sans-serif</label
+ >
+ </li>
</ul>
</fieldset>
</div>
diff --git a/public/main.js b/public/main.js
index 5f76420..2ea31d5 100644
--- a/public/main.js
+++ b/public/main.js
@@ -18,7 +18,9 @@ const changeFont = event => {
"font-Lora",
"font-AtkinsonHyperlegible",
"font-OpenDyslexicThree",
- "font-Ubuntu"
+ "font-Ubuntu",
+ "font-serif",
+ "font-sans"
);
contentNode.classList.add(`font-${font}`);
window.localStorage.setItem("font", font);
@@ -33,7 +35,9 @@ window.onload = function() {
"font-Lora",
"font-AtkinsonHyperlegible",
"font-OpenDyslexicThree",
- "font-Ubuntu"
+ "font-Ubuntu",
+ "font-serif",
+ "font-sans"
);
contentNode.classList.add(`font-${previousFont}`);
console.log("Previously selected font: ", previousFont);
diff --git a/public/speakersdesk.html b/public/speakersdesk.html
index 44f29d0..55833cc 100644
--- a/public/speakersdesk.html
+++ b/public/speakersdesk.html
@@ -33,7 +33,7 @@
name="font"
id="font-AtkinsonHyperlegible"
value="AtkinsonHyperlegible"
- />Atkinson Hyperlegible</label
+ />Atkinson Hyperlegible</label
>
</li>
<li>
@@ -46,7 +46,7 @@
name="font"
id="font-OpenDyslexicThree"
value="OpenDyslexicThree"
- />Open Dyslexic</label
+ />Open Dyslexic</label
>
</li>
<li>
@@ -56,7 +56,7 @@
name="font"
id="font-SylexiadSans"
value="SylexiadSans"
- />Sylexiad Sans</label
+ />Sylexiad Sans</label
>
</li>
<li>
@@ -80,6 +80,27 @@
/>Ubuntu</label
>
</li>
+ <li>
+ <label for="font-serif" class="font-serif"
+ ><input
+ type="radio"
+ name="font"
+ id="font-serif"
+ value="serif"
+ />serif</label
+ >
+ </li>
+ <li>
+ <label for="font-sans" class="font-sans">
+ <input
+ type="radio"
+ name="font"
+ id="font-sans"
+ value="sans"
+ checked
+ />sans-serif</label
+ >
+ </li>
</ul>
</fieldset>
</div>
diff --git a/public/styles/partials/_font-code.scss b/public/styles/partials/_font-code.scss
index 008fe8d..0359768 100644
--- a/public/styles/partials/_font-code.scss
+++ b/public/styles/partials/_font-code.scss
@@ -58,3 +58,21 @@
font-family: OpenDyslexicThree-Bold, sans-serif;
}
}
+
+.font-serif {
+ font-family: serif;
+ h2,
+ .lang {
+ font-family: serif;
+ font-weight: bold;
+ }
+}
+
+.font-sans {
+ font-family: sans-serif;
+ h2,
+ .lang {
+ font-family: sans-serif;
+ font-weight: bold;
+ }
+}
diff --git a/public/styles/style.css b/public/styles/style.css
index ae21bd5..d09806d 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -190,8 +190,25 @@
font-family: OpenDyslexicThree-Bold, sans-serif;
}
+.font-serif {
+ font-family: serif;
+}
+.font-serif h2,
+.font-serif .lang {
+ font-family: serif;
+ font-weight: bold;
+}
+
+.font-sans {
+ font-family: sans-serif;
+}
+.font-sans h2,
+.font-sans .lang {
+ font-family: sans-serif;
+ font-weight: bold;
+}
+
body {
- font-family: "Ubuntu Regular", sans-serif;
font-size: 13pt;
line-height: 1.45em;
margin: 0 auto;
@@ -315,15 +332,15 @@ footer {
border: 1px solid #6600ea;
}
#font-selection ul {
- -moz-columns: 3 130pt;
- columns: 3 130pt;
+ -moz-columns: 3 150pt;
+ columns: 3 150pt;
margin: 0;
padding: 0;
border: 0;
background: #efefef;
}
#font-selection li {
- min-width: 12em;
+ min-width: 13em;
list-style: none;
line-height: 0;
height: 22pt;
diff --git a/public/styles/style.scss b/public/styles/style.scss
index 26c5f4c..eff3ea8 100644
--- a/public/styles/style.scss
+++ b/public/styles/style.scss
@@ -3,7 +3,6 @@
@use 'partials/_font-code';
body {
- font-family: "Ubuntu Regular", sans-serif;
font-size: 13pt;
line-height: 1.45em;
margin: 0 auto;
@@ -118,15 +117,15 @@ footer {
border-radius: 15px;
border: 1px solid #6600ea;
ul {
- -moz-columns: 3 130pt;
- columns: 3 130pt;
+ -moz-columns: 3 150pt;
+ columns: 3 150pt;
margin: 0;
padding: 0;
border: 0;
background: #efefef;
}
li {
- min-width: 12em;
+ min-width: 13em;
list-style: none;
line-height: 0;
height: 22pt;
--
GitLab