Skip to content

Commit bb3a7e0

Browse files
orvnorvn
authored
Merge pull request #44 from data-preservation-programs/feat-cross-browser-audit
feat: cross browser audit
2 parents 583a11f + 2ed0580 commit bb3a7e0

38 files changed

+36052
-95
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
33

44

5-
<img src="/public/images/singularity-open-graph.jpg" alt="package graph image" width="500">
5+
<img src="/public/images/singularity-open-graph.jpg" alt="package graph image">
66

77
## Overview
88

‎assets/fonts/suisse-intl-mono/SuisseIntlMono-Regular.eot

39.3 KB
Binary file not shown.

‎assets/fonts/suisse-intl-mono/SuisseIntlMono-Regular.svg

+971
Loading

‎assets/fonts/suisse-intl-mono/SuisseIntlMono-Regular.woff2

12.9 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Bold.eot

185 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Bold.otf

100755100644
37.5 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Bold.svg

+10,255
Loading

‎assets/fonts/suisse-intl/SuisseIntl-Bold.woff2

51.7 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Light.eot

111 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Light.otf

100755100644
-57.7 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Light.svg

+3,773
Loading

‎assets/fonts/suisse-intl/SuisseIntl-Light.woff2

30.2 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Medium.eot

50.9 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Medium.otf

100755100644
-112 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Medium.svg

+5,314
Loading

‎assets/fonts/suisse-intl/SuisseIntl-Medium.woff2

17.6 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Regular.eot

193 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Regular.otf

100755100644
31.7 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-Regular.svg

+7,516
Loading

‎assets/fonts/suisse-intl/SuisseIntl-Regular.woff2

50.4 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-SemiBold.eot

191 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-SemiBold.otf

100755100644
31.6 KB
Binary file not shown.

‎assets/fonts/suisse-intl/SuisseIntl-SemiBold.svg

+8,017
Loading

‎assets/fonts/suisse-intl/SuisseIntl-SemiBold.woff2

51.1 KB
Binary file not shown.

‎assets/scss/theme/theme.scss

+18
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,24 @@ code {
2626
}
2727
}
2828

29+
ul {
30+
li {
31+
list-style: none;
32+
padding-left: toRem(24);
33+
&:before {
34+
content: '';
35+
display: inline-block;
36+
position: relative;
37+
left: calc(toRem(-24) + 2px + 9px);
38+
width: toRem(6);
39+
height: toRem(6);
40+
margin-left: -9px;
41+
border-radius: 50%;
42+
background-color: var(--primary-text-color);
43+
}
44+
}
45+
}
46+
2947
///////////////////////////////////////////////////////////////////// Components
3048
// -----------------------------------------------------------------------------
3149
/*

‎assets/scss/theme/typography.scss

+34-9
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,22 @@ $fontAssetPath: 'assets/fonts';
1212
// -------------------------------------------------------- Suisse International
1313
@font-face {
1414
font-family: 'SuisseIntl';
15-
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.otf') format('opentype');
15+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.eot');
16+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.eot?#iefix') format('embedded-opentype'),
17+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.woff2') format('woff2'),
18+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.otf') format('opentype'),
19+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.svg#SuisseIntl-Light') format('svg');
1620
font-weight: 300;
1721
font-style: normal;
1822
}
1923

2024
@font-face {
2125
font-family: 'SuisseIntl';
22-
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.otf') format('opentype');
26+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.eot');
27+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.eot?#iefix') format('embedded-opentype'),
28+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.woff2') format('woff2'),
29+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.otf') format('opentype'),
30+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.svg#SuisseIntl-Regular') format('svg');
2331
font-weight: 400;
2432
font-style: normal;
2533
}
@@ -33,9 +41,13 @@ $fontAssetPath: 'assets/fonts';
3341

3442
@font-face {
3543
font-family: 'SuisseIntl';
36-
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.otf') format('opentype');
44+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.eot');
45+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.eot?#iefix') format('embedded-opentype'),
46+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.woff2') format('woff2'),
47+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.otf') format('opentype'),
48+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.svg#SuisseIntl-Medium') format('svg');
3749
font-weight: 500;
38-
font-style: bold;
50+
font-style: normal;
3951
}
4052

4153
@font-face {
@@ -47,26 +59,39 @@ $fontAssetPath: 'assets/fonts';
4759

4860
@font-face {
4961
font-family: 'SuisseIntl';
50-
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.otf') format('opentype');
62+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.eot');
63+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.eot?#iefix') format('embedded-opentype'),
64+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.woff2') format('woff2'),
65+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.otf') format('opentype'),
66+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.svg#SuisseIntl-SemiBold') format('svg');
5167
font-weight: 600;
52-
font-style: bold;
68+
font-style: normal;
5369
}
5470

5571
@font-face {
5672
font-family: 'SuisseIntl';
57-
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.otf') format('opentype');
73+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.eot');
74+
src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.eot?#iefix') format('embedded-opentype'),
75+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.woff2') format('woff2'),
76+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.otf') format('opentype'),
77+
url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.svg#SuisseIntl-Bold') format('svg');
5878
font-weight: 700;
59-
font-style: bold;
79+
font-style: normal;
6080
}
6181

6282
// --------------------------------------------------- Suisse International Mono
6383
@font-face {
6484
font-family: 'SuisseIntlMono';
65-
src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.otf') format('opentype');
85+
src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.eot');
86+
src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.eot?#iefix') format('embedded-opentype'),
87+
url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.woff2') format('woff2'),
88+
url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.otf') format('opentype'),
89+
url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.svg#Suisse-Intl-Mono-Regular') format('svg');
6690
font-weight: 400;
6791
font-style: normal;
6892
}
6993

94+
7095
// ///////////////////////////////////////////////////////// Basic Styles Mixins
7196
// -----------------------------------------------------------------------------
7297

‎components/blocks/accordion-block.vue

+1-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@
2424
</div>
2525

2626
<div class="accordion-content">
27-
<div class="text">
28-
{{ section.content }}
29-
</div>
27+
<div class="text" v-html="section.content" />
3028
</div>
3129

3230
</div>

‎components/blocks/code-block.vue

+7
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@ const lines = computed(() => {
4444
padding: toRem(24);
4545
background-color: $codeBlack;
4646
border-radius: toRem(6);
47+
ul {
48+
li {
49+
&::before {
50+
display: none;
51+
}
52+
}
53+
}
4754
@include mini {
4855
padding: toRem(7) toRem(13);
4956
}

‎components/blocks/text-block.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
:variant="ctaVariant || cta.variant"
3737
:disabled="cta.disabled">
3838
<template #button-content>
39-
{{ cta.text }}
39+
<span class="text" v-html="cta.text" />
4040
<span
4141
v-if="cta.caption"
4242
class="caption">
@@ -198,12 +198,19 @@ export default {
198198
@include mini {
199199
height: toRem(33);
200200
padding: toRem(8) toRem(28) toRem(8) toRem(10);
201+
@include iOSonly {
202+
height: toRem(29);
203+
padding: 0 toRem(17);
204+
}
201205
}
202206
}
203207
.detail-wrapper {
204208
@include mini {
205209
left: toRem(-19);
206210
width: calc(100% + toRem(19) - toRem(2));
211+
@include iOSonly {
212+
display: none;
213+
}
207214
}
208215
}
209216
}

‎components/button/cta.vue

+46-8
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@
2121
:d="path"
2222
stroke="#FFC582"
2323
stroke-width="2"
24-
shape-rendering="crispEdges"
24+
shape-rendering="auto"
2525
class="stroke-path" />
2626
</svg>
2727
</div>
2828

2929
<div :class="['button-content', { hide: loading }]">
3030
<slot name="button-content" />
31+
<IconArrow v-if="theme === 'secondary'" :class="['arrow', arrowDirection]" />
3132
</div>
3233

3334
<slot name="loader" :loading="loading" />
@@ -78,6 +79,11 @@ const props = defineProps({
7879
type: String,
7980
required: false,
8081
default: ''
82+
},
83+
arrowDirection: { // 'left' or 'right', for theme secondary
84+
type: String,
85+
required: false,
86+
default: 'right'
8187
}
8288
})
8389
@@ -169,7 +175,7 @@ const detailHeight = computed(() => {
169175
170176
.detail {
171177
.fill-path {
172-
opacity: 0.2;
178+
opacity: 0.5;
173179
fill: #070707;
174180
@include transitionDefault;
175181
}
@@ -179,7 +185,7 @@ const detailHeight = computed(() => {
179185
.theme__primary {
180186
display: block;
181187
width: fit-content;
182-
filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
188+
filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.42));
183189
padding-left: toRem(25);
184190
cursor: pointer;
185191
&:before {
@@ -197,6 +203,17 @@ const detailHeight = computed(() => {
197203
border-bottom-right-radius: 2px;
198204
@include transitionDefault;
199205
}
206+
@include iOSonly {
207+
border: solid 2px $chardonnay;
208+
border-radius: toRem(2);
209+
padding-left: 0;
210+
&::before {
211+
content: none;
212+
}
213+
.detail-wrapper {
214+
display: none;
215+
}
216+
}
200217
&.large {
201218
&:before {
202219
top: 0.5px;
@@ -207,6 +224,9 @@ const detailHeight = computed(() => {
207224
position: relative;
208225
height: toRem(41);
209226
padding: toRem(10) toRem(17) toRem(10) toRem(3);
227+
@include iOSonly {
228+
padding: toRem(10) toRem(17);
229+
}
210230
}
211231
.button-content {
212232
display: flex;
@@ -243,19 +263,30 @@ const detailHeight = computed(() => {
243263
@include transitionDefault;
244264
.button-content {
245265
position: relative;
266+
display: flex;
267+
align-items: center;
246268
@include b2;
247269
color: $chardonnay;
248-
&:after {
249-
content: '↗';
270+
.arrow {
250271
position: absolute;
251-
margin-left: 0.5rem;
272+
right: toRem(-18);
273+
height: toRem(10);
274+
width: toRem(10);
252275
@include transitionDefault;
276+
&.left {
277+
right: unset;
278+
left: toRem(-18);
279+
transform: scaleX(-1);
280+
}
253281
}
254282
}
255283
&:hover,
256284
&:focus-visible {
257-
.button-content::after {
258-
transform: translateX(0.5rem);
285+
.arrow {
286+
right: toRem(-26);
287+
&.left {
288+
left: toRem(-26);
289+
}
259290
}
260291
}
261292
&:focus-visible {
@@ -301,6 +332,13 @@ const detailHeight = computed(() => {
301332
:deep(.button-content) {
302333
@include h1;
303334
color: $sageGreen;
335+
.text {
336+
position: relative;
337+
sup {
338+
top: -0.5rem;
339+
line-height: leading(63, 48);
340+
}
341+
}
304342
.caption {
305343
display: block;
306344
@include h4;

‎components/icon/arrow.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="none">
3+
<path fill="#FFC582" d="M2.584.392H9.64v7.056H7.768V3.64L1.784 9.576.424 8.248l5.968-6H2.584V.392Z" />
4+
</svg>
5+
</template>

‎components/signup-card.vue

+8-10
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div class="signup-form">
2222

2323
<div class="name-fields">
24-
<div class="field-wrapper row">
24+
<div class="field-wrapper">
2525
<input
2626
:class="['first-name input-field form-field', { error: fieldError.firstName }]"
2727
type="text"
@@ -33,7 +33,7 @@
3333
</span>
3434
</div>
3535

36-
<div class="field-wrapper row">
36+
<div class="field-wrapper">
3737
<input
3838
:class="['last-name input-field form-field', { error: fieldError.lastName }]"
3939
type="text"
@@ -298,6 +298,7 @@ const submitForm = async () => {
298298
--border-gradient-angle: 0deg;
299299
@include cardPanel(var(--border-gradient-angle));
300300
padding: clamp(toRem(32), 3.5vw, toRem(58)) clamp(toRem(14), 7vw, toRem(103)) clamp(toRem(32), 6.3vw, toRem(93));
301+
margin-bottom: toRem(76);
301302
.content {
302303
position: relative;
303304
z-index: 2;
@@ -418,9 +419,6 @@ const submitForm = async () => {
418419
.name-fields {
419420
display: flex;
420421
justify-content: space-between;
421-
.field-wrapper.row {
422-
margin-bottom: toRem(24);
423-
}
424422
@include medium {
425423
flex-flow: row wrap;
426424
.field-wrapper {
@@ -452,6 +450,7 @@ const submitForm = async () => {
452450
}
453451
454452
.toggle-button {
453+
position: relative;
455454
display: flex;
456455
align-items: center;
457456
justify-content: space-between;
@@ -460,8 +459,7 @@ const submitForm = async () => {
460459
&.open {
461460
border-color: var(--secondary-text-color);
462461
border-bottom-color: transparent;
463-
border-bottom-left-radius: 0;
464-
border-bottom-right-radius: 0;
462+
background-color: $codGray;
465463
}
466464
}
467465
.toggle-button-label {
@@ -478,24 +476,24 @@ const submitForm = async () => {
478476
top: calc(100% - 8px);
479477
padding-top: 0;
480478
height: 0;
479+
background-color: $codGray;
481480
@include transitionDefault;
482481
border: var(--secondary-text-color) 1px solid;
483482
overflow-y: scroll;
484-
border-top-color: transparent;
483+
border-top: none;
485484
border-bottom-left-radius: toRem(5);
486485
border-bottom-right-radius: toRem(5);
487486
&:not(.open) {
488487
transform: (translate(-50%, 0));
489488
}
490489
&.open {
491-
height: toRem(93);
490+
height: toRem(217);
492491
}
493492
}
494493
.option {
495494
@include formFieldPlaceholder;
496495
cursor: pointer;
497496
padding: 0 toRem(20) toRem(4);
498-
background-color: #121212;
499497
@include transitionDefault;
500498
&:hover {
501499
background-color: var(--secondary-text-color);

0 commit comments

Comments
 (0)