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

Adjust button styling

Browse Source
This commit is contained in:
kaBeech
2023-03-18 21:00:10 -07:00
parent 701e81a433
commit d780aa52ff
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.js
View File

@@ -13,16 +13,17 @@ const seriousLightButton = document.getElementById("seriousLightButton");
const seriousLightItalicButton = document.getElementById( const seriousLightItalicButton = document.getElementById(
"seriousLightItalicButton" "seriousLightItalicButton"
); );
const newExampleTextButton = document.getElementById("newExampleTextButton");
const newExampleText = document.getElementById("newExampleText"); const newExampleText = document.getElementById("newExampleText");
const newExampleTextButton = document.getElementById("newExampleTextButton");
const seriousButtons = [ const buttons = [
seriousOriginalButton, seriousOriginalButton,
seriousItalicButton, seriousItalicButton,
seriousBoldButton, seriousBoldButton,
seriousBoldItalicButton, seriousBoldItalicButton,
seriousLightButton, seriousLightButton,
seriousLightItalicButton, seriousLightItalicButton,
newExampleTextButton,
]; ];
const seriousStyles = [ const seriousStyles = [
@@ -39,7 +40,7 @@ const clearClasses = () => {
exampleTextClassList.remove(seriousStyle); exampleTextClassList.remove(seriousStyle);
mainClassList.remove(seriousStyle); mainClassList.remove(seriousStyle);
} }
for (seriousButton of seriousButtons) { for (seriousButton of buttons) {
seriousButton.classList.remove("selected"); seriousButton.classList.remove("selected");
} }
}; };
@@ -51,14 +52,14 @@ const clearClassesAndSelectThisButton = (button) => {
entirePageRadio.addEventListener("click", () => { entirePageRadio.addEventListener("click", () => {
mainClassList.add("serious"); mainClassList.add("serious");
for (seriousButton of seriousButtons) { for (seriousButton of buttons) {
seriousButton.classList.add("serious"); seriousButton.classList.add("serious");
} }
}); });
exampleTextOnlyRadio.addEventListener("click", () => { exampleTextOnlyRadio.addEventListener("click", () => {
mainClassList.remove("serious"); mainClassList.remove("serious");
for (seriousButton of seriousButtons) { for (seriousButton of buttons) {
seriousButton.classList.remove("serious"); seriousButton.classList.remove("serious");
} }
}); });

13
style.css
View File

@@ -86,7 +86,7 @@ button {
button, button,
input { input {
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%;
@@ -96,6 +96,11 @@ input {
text-transform: none; text-transform: none;
} }
button.serious,
input.serious {
padding-top: 0.3em;
}
:link { :link {
color: #3ec0aa; color: #3ec0aa;
text-decoration: none; text-decoration: none;
@@ -145,24 +150,30 @@ input {
#seriousOriginalButton { #seriousOriginalButton {
font-family: "Serious Sans"; font-family: "Serious Sans";
padding-top: 0.3em;
} }
#seriousItalicButton { #seriousItalicButton {
font-family: "Serious Sans Italic"; font-family: "Serious Sans Italic";
padding-top: 0.3em;
} }
#seriousBoldButton { #seriousBoldButton {
font-family: "Serious Sans Bold"; font-family: "Serious Sans Bold";
padding-top: 0.3em;
} }
#seriousBoldItalicButton { #seriousBoldItalicButton {
font-family: "Serious Sans Bold Italic"; font-family: "Serious Sans Bold Italic";
padding-top: 0.3em;
} }
#seriousLightButton { #seriousLightButton {
font-family: "Serious Sans Light"; font-family: "Serious Sans Light";
padding-top: 0.3em;
} }
#seriousLightItalicButton { #seriousLightItalicButton {
font-family: "Serious Sans Light Italic"; font-family: "Serious Sans Light Italic";
padding-top: 0.3em;
} }