increase font size for the old people

This commit is contained in:
thecozies 2024-03-03 14:57:19 -06:00
parent 02adf1b5f2
commit 85f88d904d
6 changed files with 62 additions and 16 deletions

View File

@ -75,13 +75,24 @@
<svg src="icons/X.svg" />
</button>
</div>
</div>
<div style="flex:0 1 80dp;display:flex; justify-content: space-between; width:100%; max-width:800dp; align-self:center;">
<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x2424;&#x242B;</span><span style="font-size:24dp;">Navigate</span></label>
<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x242E;</span><span style="font-size:24dp;">Accept</span></label>
<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x242F;</span><span style="font-size:24dp;">Exit</span></label>
<!-- <label><span style="font-family:promptfont;">&#x21F3;</span> Navigate</label>
<label><span style="font-family:promptfont;">&#x21A7;</span> Accept</label> -->
<div
class="centered-page__controls"
>
<label>
<span>Navigate</span>
<span class="prompt-font-sm">&#x2424;&#x242B;</span>
</label>
<label>
<span>Accept</span>
<span class="prompt-font-sm">&#x242E;</span>
</label>
<label>
<span>Exit</span>
<span class="prompt-font-sm">&#x242F;</span>
</label>
<!-- <label><span style="font-family:promptfont;">&#x21F3;</span> Navigate</label>
<label><span style="font-family:promptfont;">&#x21A7;</span> Accept</label> -->
</div>
</div>
</div>
<!-- </handle> -->

File diff suppressed because one or more lines are too long

View File

@ -42,3 +42,33 @@
flex: 1 1 100%;
}
}
.centered-page__controls {
display: flex;
flex-direction: row;
position: absolute;
align-items: center;
justify-content: center;
height: auto;
bottom: space(24);
margin: 0 auto;
width: 100%;
max-width: space($base-modal-max-width);
> label {
@extend %label-sm;
display: inline-block;
align-items: center;
justify-content: space-between;
width: auto;
height: space(24);
&:not(:last-child) {
margin-right: space(40);
}
> span:first-child {
margin-right: space(4);
}
}
}

View File

@ -60,6 +60,10 @@ h3 {
@extend %prompt-font;
}
.prompt-font-sm {
@extend %prompt-font-sm;
}
button {
background-color: $color-primary-d;
}

View File

@ -3,9 +3,10 @@ $font-stack: chiaro;
@mixin set-font-sizing($sz, $spacing) {
// font-family: $font-stack;
font-size: space($sz);
letter-spacing: space($sz * $spacing);
line-height: space($sz);
$sz-add: $sz + 4;
font-size: space($sz-add);
letter-spacing: space($sz-add * $spacing);
line-height: space($sz-add);
}
%header-1 {

View File

@ -67,7 +67,7 @@
flex: 1 1 auto;
height: auto;
width: auto;
max-width: space(600);
max-width: space(800);
padding: 0 space(12);
}
@ -83,7 +83,7 @@
justify-content: flex-start;
flex: 1 1 100%;
width: auto;
max-width: space(600);
max-width: space(800);
height: auto;
padding: space(4);
@ -91,7 +91,7 @@
@extend %label-sm;
padding-right: space(16);
flex: auto;
width: space(144);
width: space(196);
> div {
display: inline;
@ -111,7 +111,7 @@
padding: 0;
flex: 1 1 100%;
width: auto;
height: space(40);
height: space(48);
border-radius: $border-radius-md;
background-color: $color-white-a5;
cursor: pointer;
@ -129,7 +129,7 @@
display: inline;
align-items: center;
justify-content: flex-start;
padding: space(12);
padding: space(14);
margin: auto 0;
height: auto;
}