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 style preview button functionality

Browse Source
This commit is contained in:
kaBeech
2023-03-18 15:44:02 -07:00
parent 113d94990c
commit 39f69b76d4
2 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
index.js Normal file
View File

@@ -0,0 +1,62 @@
const exampleTextClasses = document.getElementById("exampleText").classList;
const seriousButton = document
.getElementById("seriousButton")
.addEventListener("click", function () {
exampleTextClasses.add("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
const seriousItalicButton = document
.getElementById("seriousItalicButton")
.addEventListener("click", function () {
exampleTextClasses.remove("serious");
exampleTextClasses.add("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
const seriousBoldButton = document
.getElementById("seriousBoldButton")
.addEventListener("click", function () {
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.add("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
const seriousBoldItalicButton = document
.getElementById("seriousBoldItalicButton")
.addEventListener("click", function () {
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.add("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
const seriousLightButton = document
.getElementById("seriousLightButton")
.addEventListener("click", function () {
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.add("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
const seriousLightItalicButton = document
.getElementById("seriousLightItalicButton")
.addEventListener("click", function () {
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.add("seriousLightItalic");
});

59
style.css
View File

@@ -1,3 +1,33 @@
@font-face {
font-family: "Serious Sans";
src: url("./SeriousSans/ttf/SeriousSans.ttf");
}
@font-face {
font-family: "Serious Sans Italic";
src: url("./SeriousSans/ttf/SeriousSansItalic.ttf");
}
@font-face {
font-family: "Serious Sans Bold";
src: url("./SeriousSans/ttf/SeriousSansBold.ttf");
}
@font-face {
font-family: "Serious Sans Bold Italic";
src: url("./SeriousSans/ttf/SeriousSansBoldItalic.ttf");
}
@font-face {
font-family: "Serious Sans Light";
src: url("./SeriousSans/ttf/SeriousSansLight.ttf");
}
@font-face {
font-family: "Serious Sans Light Italic";
src: url("./SeriousSans/ttf/SeriousSansLightItalic.ttf");
}
body {
background-color: #1e1e1e;
color: #d4d4d4;
@@ -27,6 +57,11 @@ li {
vertical-align: baseline;
}
button {
width: 12em;
align-self: center;
}
:link {
color: aqua;
}
@@ -34,3 +69,27 @@ li {
:visited {
color: rgb(0, 188, 138);
}
.serious {
font-family: "Serious Sans";
}
.seriousItalic {
font-family: "Serious Sans Italic";
}
.seriousBold {
font-family: "Serious Sans Bold";
}
.seriousBoldItalic {
font-family: "Serious Sans Bold Italic";
}
.seriousLight {
font-family: "Serious Sans Light";
}
.seriousLightItalic {
font-family: "Serious Sans Light Italic";
}