mirror of
https://github.com/dtinth/comic-mono-font.git
synced 2026-02-21 22:43:59 +00:00
Add page-wide serious toggler
This commit is contained in:
kaBeech
25
index.html
25
index.html
@@ -10,7 +10,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="main" class="seriousOriginal">
|
||||
<h1>Serious Sans</h1>
|
||||
<p>
|
||||
A legible monospace font for playful professionals. Comic Sans for
|
||||
@@ -25,7 +25,7 @@
|
||||
(version 1)
|
||||
</p>
|
||||
<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>0123456789.:,;(*!?')</p>
|
||||
@@ -33,7 +33,7 @@
|
||||
<br />
|
||||
<div id="previewButtons">
|
||||
<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="seriousLightButton">Serious Sans Light</button>
|
||||
</div>
|
||||
@@ -48,10 +48,21 @@
|
||||
<br />
|
||||
<form>
|
||||
Apply to
|
||||
<label for="entirePage">entire page:</label>
|
||||
<input type="radio" name="applyTo" id="entirePage" />
|
||||
<label for="newExampleTextButton">example text only:</label>
|
||||
<input type="radio" name="applyTo" id="exampleTextOnly" />
|
||||
<label for="entirePageRadio">entire page:</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="applyTo"
|
||||
id="entirePageRadio"
|
||||
value="entirePage"
|
||||
/>
|
||||
<label for="exampleTextOnlyRadio">example text only:</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="applyTo"
|
||||
id="exampleTextOnlyRadio"
|
||||
value="exampleTextOnly"
|
||||
checked
|
||||
/>
|
||||
</form>
|
||||
<br />
|
||||
<form>
|
||||
|
||||
56
index.js
56
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");
|
||||
|
||||
14
style.css
14
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";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user