diff --git a/index.html b/index.html index d9ac897..021d42f 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ -
+

Serious Sans

A legible monospace font for playful professionals. Comic Sans for @@ -25,7 +25,7 @@ (version 1)

Example Text

-
+

The five tall boxing wizards jump quickly.

THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!

0123456789.:,;(*!?')

@@ -33,7 +33,7 @@
- +
@@ -48,10 +48,21 @@
Apply to - - - - + + + +

diff --git a/index.js b/index.js index 2ce4845..d82b17d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,9 @@ const mainClasses = document.getElementById("main").classList; const exampleText = document.getElementById("exampleText"); const exampleTextClasses = exampleText.classList; -const seriousButton = document.getElementById("seriousButton"); +const entirePageRadio = document.getElementById("entirePageRadio"); +const exampleTextOnlyRadio = document.getElementById("exampleTextOnlyRadio"); +const seriousOriginalButton = document.getElementById("seriousOriginalButton"); const seriousItalicButton = document.getElementById("seriousItalicButton"); const seriousBoldButton = document.getElementById("seriousBoldButton"); const seriousBoldItalicButton = document.getElementById( @@ -14,20 +16,36 @@ const seriousLightItalicButton = document.getElementById( const newExampleTextButton = document.getElementById("newExampleTextButton"); const newExampleText = document.getElementById("newExampleText"); -seriousButton.addEventListener("click", function () { +entirePageRadio.addEventListener("click", function () { + if (this.checked) { + mainClasses.add("serious"); + } else { + mainClasses.remove("serious"); + } +}); + +exampleTextOnlyRadio.addEventListener("click", function () { + if (this.checked) { + mainClasses.remove("serious"); + } else { + mainClasses.add("serious"); + } +}); + +seriousOriginalButton.addEventListener("click", function () { this.classList.add("selected"); seriousItalicButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected"); seriousLightButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected"); - exampleTextClasses.add("serious"); + exampleTextClasses.add("seriousOriginal"); exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLightItalic"); - mainClasses.add("serious"); + mainClasses.add("seriousOriginal"); mainClasses.remove("seriousItalic"); mainClasses.remove("seriousBold"); mainClasses.remove("seriousBoldItalic"); @@ -37,18 +55,18 @@ seriousButton.addEventListener("click", function () { seriousItalicButton.addEventListener("click", function () { this.classList.add("selected"); - seriousButton.classList.remove("selected"); + seriousOriginalButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected"); seriousLightButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected"); - exampleTextClasses.remove("serious"); + exampleTextClasses.remove("seriousOriginal"); exampleTextClasses.add("seriousItalic"); exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLightItalic"); - mainClasses.remove("serious"); + mainClasses.remove("seriousOriginal"); mainClasses.add("seriousItalic"); mainClasses.remove("seriousBold"); mainClasses.remove("seriousBoldItalic"); @@ -58,18 +76,18 @@ seriousItalicButton.addEventListener("click", function () { seriousBoldButton.addEventListener("click", function () { this.classList.add("selected"); - seriousButton.classList.remove("selected"); + seriousOriginalButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected"); seriousLightButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected"); - exampleTextClasses.remove("serious"); + exampleTextClasses.remove("seriousOriginal"); exampleTextClasses.remove("seriousItalic"); exampleTextClasses.add("seriousBold"); exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLightItalic"); - mainClasses.remove("serious"); + mainClasses.remove("seriousOriginal"); mainClasses.remove("seriousItalic"); mainClasses.add("seriousBold"); mainClasses.remove("seriousBoldItalic"); @@ -79,18 +97,18 @@ seriousBoldButton.addEventListener("click", function () { seriousBoldItalicButton.addEventListener("click", function () { this.classList.add("selected"); - seriousButton.classList.remove("selected"); + seriousOriginalButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected"); seriousLightButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected"); - exampleTextClasses.remove("serious"); + exampleTextClasses.remove("seriousOriginal"); exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousBold"); exampleTextClasses.add("seriousBoldItalic"); exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLightItalic"); - mainClasses.remove("serious"); + mainClasses.remove("seriousOriginal"); mainClasses.remove("seriousItalic"); mainClasses.remove("seriousBold"); mainClasses.add("seriousBoldItalic"); @@ -100,18 +118,18 @@ seriousBoldItalicButton.addEventListener("click", function () { seriousLightButton.addEventListener("click", function () { this.classList.add("selected"); - seriousButton.classList.remove("selected"); + seriousOriginalButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected"); - exampleTextClasses.remove("serious"); + exampleTextClasses.remove("seriousOriginal"); exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.add("seriousLight"); exampleTextClasses.remove("seriousLightItalic"); - mainClasses.remove("serious"); + mainClasses.remove("seriousOriginal"); mainClasses.remove("seriousItalic"); mainClasses.remove("seriousBold"); mainClasses.remove("seriousBoldItalic"); @@ -121,18 +139,18 @@ seriousLightButton.addEventListener("click", function () { seriousLightItalicButton.addEventListener("click", function () { this.classList.add("selected"); - seriousButton.classList.remove("selected"); + seriousOriginalButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected"); seriousLightButton.classList.remove("selected"); - exampleTextClasses.remove("serious"); + exampleTextClasses.remove("seriousOriginal"); exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousLight"); exampleTextClasses.add("seriousLightItalic"); - mainClasses.remove("serious"); + mainClasses.remove("seriousOriginal"); mainClasses.remove("seriousItalic"); mainClasses.remove("seriousBold"); mainClasses.remove("seriousBoldItalic"); diff --git a/style.css b/style.css index 22d4390..3f2ab2f 100644 --- a/style.css +++ b/style.css @@ -59,7 +59,6 @@ body { #main { display: flex; flex-direction: column; - padding: 0 1em; } ul, @@ -88,6 +87,7 @@ button { button, input { padding-top: 0.3em; + /* padding: 0.1em; */ align-self: center; font-family: inherit; font-size: 100%; @@ -118,26 +118,26 @@ input { color: #d4d4d4; } -.serious { +.serious.seriousOriginal { font-family: "Serious Sans"; } -.seriousItalic { +.serious.seriousItalic { font-family: "Serious Sans Italic"; } -.seriousBold { +.serious.seriousBold { font-family: "Serious Sans Bold"; } -.seriousBoldItalic { +.serious.seriousBoldItalic { font-family: "Serious Sans Bold Italic"; } -.seriousLight { +.serious.seriousLight { font-family: "Serious Sans Light"; } -.seriousLightItalic { +.serious.seriousLightItalic { font-family: "Serious Sans Light Italic"; }