added font customization

This commit is contained in:
corey-b 2020-07-31 21:53:04 -04:00
parent e4064c4b14
commit 0cd7b60fdf
3 changed files with 21 additions and 5 deletions

View file

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Mono&family=Inconsolata&family=Roboto+Mono&family=Source+Code+Pro&display=swap');
:root {
--roundness: 0.25rem;
@ -1813,6 +1813,7 @@ key {
&.languages,
&.layouts,
&.keymapLayout,
&.fontFamily,
&.funbox {
grid-template-columns: 1fr;
grid-template-areas:
@ -2333,4 +2334,4 @@ key {
.r5 {
display: grid;
grid-template-columns: 4fr 7.5fr 4fr;
}
}

View file

@ -1123,6 +1123,17 @@
<div class="buttons">
</div>
</div>
<div class="section fontFamily">
<h1>font family</h1>
<div class="text">Change the font family for the site</div>
<div class="buttons">
<div class="button" style="font-family:Roboto Mono" id="Roboto Mono" fontfamily="Roboto Mono" tabindex="0" onclick="this.blur(); changeFont(this.id);">Roboto Mono</div>
<div class="button" style="font-family:Source Code Pro" id="Source Code Pro" fontfamily="Source Code Pro" tabindex="0" onclick="this.blur(); changeFont(this.id);">Source Code Pro</div>
<div class="button" style="font-family:IBM Plex Mono" id="IBM Plex Mono" fontfamily="IBM Plex Mono" tabindex="0" onclick="this.blur(); changeFont(this.id);">IBM Plex Mono</div>
<div class="button" style="font-family:Inconsolata" id="Inconsolata" fontfamily="Inconsolata" tabindex="0" onclick="this.blur(); changeFont(this.id);">Inconsolata</div>
<div class="button" style="font-family:Fira Code" id="Fira Code" fontfamily="Fira Code" tabindex="0" onclick="this.blur(); changeFont(this.id);">Fira Code</div>
</div>
</div>
<div class="section funbox">
<h1>funbox</h1>
<div class="buttons">
@ -1636,4 +1647,4 @@
<script src="js/account.js?v=46"></script>
<script src="js/script.js?v=46"></script>
</html>
</html>

View file

@ -295,9 +295,9 @@ function verifyUsername() {
$(".nameChangeMessage").click((e) => {
alert(`Im currently preparing the system to be ready for leaderboards and other awesome features - it looks like you need to change your display name.
It either contains special characters, or your display name is the same as someone elses and your account was made later.
Sorry for this inconvenience.
`);
let newName = prompt(
@ -2734,6 +2734,10 @@ function hideCustomTextPopup() {
}
}
function changeFont(font_id) {
document.documentElement.style.setProperty('--font', font_id);
};
$("#customTextPopupWrapper").click((e) => {
if ($(e.target).attr("id") === "customTextPopupWrapper") {
hideCustomTextPopup();