alvierahman90/comic-mono-font
1
0
Fork 0
mirror of https://github.com/dtinth/comic-mono-font.git synced 2026-02-21 22:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add page-wide serious toggler

Browse Source
This commit is contained in:
kaBeech
2023-03-18 18:10:35 -07:00
parent 23e6e86e4d
commit 8a4606b6d4
3 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div id="main"> <div id="main" class="seriousOriginal">
<h1>Serious Sans</h1> <h1>Serious Sans</h1>
<p> <p>
A legible monospace font for playful professionals. Comic Sans for A legible monospace font for playful professionals. Comic Sans for
@@ -25,7 +25,7 @@
(version 1) (version 1)
</p> </p>
<h2>Example Text</h2> <h2>Example Text</h2>
<div id="exampleText" class="serious"> <div id="exampleText" class="serious seriousOriginal">
<p>The five tall boxing wizards jump quickly.</p> <p>The five tall boxing wizards jump quickly.</p>
<p>THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!</p> <p>THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!</p>
<p>0123456789.:,;(*!?')</p> <p>0123456789.:,;(*!?')</p>
@@ -33,7 +33,7 @@
<br /> <br />
<div id="previewButtons"> <div id="previewButtons">
<div class="flex column"> <div class="flex column">
<button id="seriousButton">Serious Sans</button> <button id="seriousOriginalButton">Serious Sans</button>
<button id="seriousBoldButton">Serious Sans Bold</button> <button id="seriousBoldButton">Serious Sans Bold</button>
<button id="seriousLightButton">Serious Sans Light</button> <button id="seriousLightButton">Serious Sans Light</button>
</div> </div>
@@ -48,10 +48,21 @@
<br /> <br />
<form> <form>
Apply to Apply to
<label for="entirePage">entire page:</label> <label for="entirePageRadio">entire page:</label>
<input type="radio" name="applyTo" id="entirePage" /> <input
<label for="newExampleTextButton">example text only:</label> type="radio"
<input type="radio" name="applyTo" id="exampleTextOnly" /> name="applyTo"
id="entirePageRadio"
value="entirePage"
/>
<label for="exampleTextOnlyRadio">example text only:</label>
<input
type="radio"
name="applyTo"
id="exampleTextOnlyRadio"
value="exampleTextOnly"
checked
/>
</form> </form>
<br /> <br />
<form> <form>

56
index.js
View File

@@ -1,7 +1,9 @@
const mainClasses = document.getElementById("main").classList; const mainClasses = document.getElementById("main").classList;
const exampleText = document.getElementById("exampleText"); const exampleText = document.getElementById("exampleText");
const exampleTextClasses = exampleText.classList; 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 seriousItalicButton = document.getElementById("seriousItalicButton");
const seriousBoldButton = document.getElementById("seriousBoldButton"); const seriousBoldButton = document.getElementById("seriousBoldButton");
const seriousBoldItalicButton = document.getElementById( const seriousBoldItalicButton = document.getElementById(
@@ -14,20 +16,36 @@ const seriousLightItalicButton = document.getElementById(
const newExampleTextButton = document.getElementById("newExampleTextButton"); const newExampleTextButton = document.getElementById("newExampleTextButton");
const newExampleText = document.getElementById("newExampleText"); 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"); this.classList.add("selected");
seriousItalicButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected");
seriousLightButton.classList.remove("selected"); seriousLightButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.add("serious"); exampleTextClasses.add("seriousOriginal");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
mainClasses.add("serious"); mainClasses.add("seriousOriginal");
mainClasses.remove("seriousItalic"); mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold"); mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic"); mainClasses.remove("seriousBoldItalic");
@@ -37,18 +55,18 @@ seriousButton.addEventListener("click", function () {
seriousItalicButton.addEventListener("click", function () { seriousItalicButton.addEventListener("click", function () {
this.classList.add("selected"); this.classList.add("selected");
seriousButton.classList.remove("selected"); seriousOriginalButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected");
seriousLightButton.classList.remove("selected"); seriousLightButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousOriginal");
exampleTextClasses.add("seriousItalic"); exampleTextClasses.add("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious"); mainClasses.remove("seriousOriginal");
mainClasses.add("seriousItalic"); mainClasses.add("seriousItalic");
mainClasses.remove("seriousBold"); mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic"); mainClasses.remove("seriousBoldItalic");
@@ -58,18 +76,18 @@ seriousItalicButton.addEventListener("click", function () {
seriousBoldButton.addEventListener("click", function () { seriousBoldButton.addEventListener("click", function () {
this.classList.add("selected"); this.classList.add("selected");
seriousButton.classList.remove("selected"); seriousOriginalButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected");
seriousLightButton.classList.remove("selected"); seriousLightButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousOriginal");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousItalic");
exampleTextClasses.add("seriousBold"); exampleTextClasses.add("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious"); mainClasses.remove("seriousOriginal");
mainClasses.remove("seriousItalic"); mainClasses.remove("seriousItalic");
mainClasses.add("seriousBold"); mainClasses.add("seriousBold");
mainClasses.remove("seriousBoldItalic"); mainClasses.remove("seriousBoldItalic");
@@ -79,18 +97,18 @@ seriousBoldButton.addEventListener("click", function () {
seriousBoldItalicButton.addEventListener("click", function () { seriousBoldItalicButton.addEventListener("click", function () {
this.classList.add("selected"); this.classList.add("selected");
seriousButton.classList.remove("selected"); seriousOriginalButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected");
seriousLightButton.classList.remove("selected"); seriousLightButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousOriginal");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.add("seriousBoldItalic"); exampleTextClasses.add("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious"); mainClasses.remove("seriousOriginal");
mainClasses.remove("seriousItalic"); mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold"); mainClasses.remove("seriousBold");
mainClasses.add("seriousBoldItalic"); mainClasses.add("seriousBoldItalic");
@@ -100,18 +118,18 @@ seriousBoldItalicButton.addEventListener("click", function () {
seriousLightButton.addEventListener("click", function () { seriousLightButton.addEventListener("click", function () {
this.classList.add("selected"); this.classList.add("selected");
seriousButton.classList.remove("selected"); seriousOriginalButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousOriginal");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.add("seriousLight"); exampleTextClasses.add("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious"); mainClasses.remove("seriousOriginal");
mainClasses.remove("seriousItalic"); mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold"); mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic"); mainClasses.remove("seriousBoldItalic");
@@ -121,18 +139,18 @@ seriousLightButton.addEventListener("click", function () {
seriousLightItalicButton.addEventListener("click", function () { seriousLightItalicButton.addEventListener("click", function () {
this.classList.add("selected"); this.classList.add("selected");
seriousButton.classList.remove("selected"); seriousOriginalButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected"); seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected"); seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected"); seriousBoldItalicButton.classList.remove("selected");
seriousLightButton.classList.remove("selected"); seriousLightButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousOriginal");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.add("seriousLightItalic"); exampleTextClasses.add("seriousLightItalic");
mainClasses.remove("serious"); mainClasses.remove("seriousOriginal");
mainClasses.remove("seriousItalic"); mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold"); mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic"); mainClasses.remove("seriousBoldItalic");

14
style.css
View File

@@ -59,7 +59,6 @@ body {
#main { #main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 1em;
} }
ul, ul,
@@ -88,6 +87,7 @@ button {
button, button,
input { input {
padding-top: 0.3em; padding-top: 0.3em;
/* padding: 0.1em; */
align-self: center; align-self: center;
font-family: inherit; font-family: inherit;
font-size: 100%; font-size: 100%;
@@ -118,26 +118,26 @@ input {
color: #d4d4d4; color: #d4d4d4;
} }
.serious { .serious.seriousOriginal {
font-family: "Serious Sans"; font-family: "Serious Sans";
} }
.seriousItalic { .serious.seriousItalic {
font-family: "Serious Sans Italic"; font-family: "Serious Sans Italic";
} }
.seriousBold { .serious.seriousBold {
font-family: "Serious Sans Bold"; font-family: "Serious Sans Bold";
} }
.seriousBoldItalic { .serious.seriousBoldItalic {
font-family: "Serious Sans Bold Italic"; font-family: "Serious Sans Bold Italic";
} }
.seriousLight { .serious.seriousLight {
font-family: "Serious Sans Light"; font-family: "Serious Sans Light";
} }
.seriousLightItalic { .serious.seriousLightItalic {
font-family: "Serious Sans Light Italic"; font-family: "Serious Sans Light Italic";
} }