monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-27 01:06:21 +08:00
Code Issues Projects Releases Packages Wiki Activity

style(settings): rework section links to follow website style

Browse source
This commit is contained in:
Miodec 2025-02-06 12:39:04 +01:00
parent a4b7c00ef9
commit f7df16ac8e
3 changed files with 65 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/html/pages/settings.html
View file

@ -2,6 +2,43 @@
<div class="scrollToTopButton invisible">
<i class="fas fa-angle-double-up"></i>
</div>
<div class="settingsGroup quickNav">
<div class="links">
<a class="textButton" href="#group_behavior">
<i class="fas fa-tools"></i>
behavior
</a>
<a class="textButton" href="#group_input">
<i class="fas icon fa-keyboard"></i>
input
</a>
<a class="textButton" href="#group_sound">
<i class="fas icon fa-volume-up"></i>
sound
</a>
<a class="textButton" href="#group_caret">
<i class="fas icon fa-i-cursor"></i>
caret
</a>
<a class="textButton" href="#group_appearance">
<i class="fas icon fa-eye"></i>
appearance
</a>
<a class="textButton" href="#group_theme">
<i class="fas icon fa-palette"></i>
theme
</a>
<a class="textButton" href="#group_hideElements">
<i class="fas icon fa-eye-slash"></i>
hide elements
</a>
<a class="textButton" href="#group_dangerZone">
<i class="fas icon fa-exclamation-triangle"></i>
danger zone
</a>
</div>
</div>
<div class="tip">
tip: You can also change all these settings quickly using the command line (
<key>ctrl/cmd</key>
@ -13,18 +50,6 @@
<key>esc</key>
)
</div>
<div class="settingsGroup quickNav">
<div class="links">
<a class="textButton" href="#group_behavior">behavior</a>
<a class="textButton" href="#group_input">input</a>
<a class="textButton" href="#group_sound">sound</a>
<a class="textButton" href="#group_caret">caret</a>
<a class="textButton" href="#group_appearance">appearance</a>
<a class="textButton" href="#group_theme">theme</a>
<a class="textButton" href="#group_hideElements">hide elements</a>
<a class="textButton" href="#group_dangerZone">danger zone</a>
</div>
</div>
<div id="ad-settings-1-wrapper" class="ad full-width advertisement ad-h">
<div class="icon"><i class="fas fa-ad"></i></div>

10
frontend/src/styles/media-queries-green.scss
View file

@ -77,9 +77,13 @@
}
}
}
.settingsGroup.quickNav .links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
.settingsGroup.quickNav {
justify-content: unset;
.links {
max-width: unset;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
}
}
.pageAccount {

28
frontend/src/styles/settings.scss
View file

@ -50,13 +50,27 @@
.settingsGroup {
display: grid;
gap: 2rem;
&.quickNav .links {
width: 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
a {
flex-grow: 1;
&.quickNav {
justify-content: center;
.links {
font-size: 0.75rem;
background: var(--sub-alt-color);
border-radius: var(--roundness);
max-width: fit-content;
width: 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
a:first-child {
padding-left: 2em;
}
a:last-child {
padding-right: 2em;
}
a {
padding: 1em;
flex-grow: 1;
}
}
}
}