Skip to content

Commit 9866960

Browse files
BenedictLangBenedictLang
committed
fix(Mobile): make some tweaks to the slider, typography adapting to screen size and 3D representation
1 parent c04903c commit 9866960

15 files changed

+82
-43
lines changed

‎.env

-1
This file was deleted.

‎src/components/3D/Objects/ParticleCloud.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const ParticleCloud = () => {
4545
const pointsRef = useRef();
4646
const materialRef = useRef();
4747
const [geometrySize, setGeometrySize] = useState(4);
48+
const [geometryResolutionFactor, setGeometryResolutionFactor] = useState(1);
4849
const [geometryIndex, setGeometryIndex] = useState(0);
4950
const mouse = useMouse();
5051
const { isMobile } = useViewport();
@@ -64,7 +65,9 @@ const ParticleCloud = () => {
6465

6566
useEffect(() => {
6667
const adjustedGeometrySize = isMobile ? 3 : 4;
68+
const adjustedGeometryResolutionFactor = isMobile ? 0.5 : 1;
6769
setGeometrySize(adjustedGeometrySize);
70+
setGeometryResolutionFactor(adjustedGeometryResolutionFactor);
6871

6972
if (materialRef.current) {
7073
materialRef.current.uniforms.u_interactionRadius.value = isMobile ? radiusRef.current * 0.75 : radiusRef.current;
@@ -158,7 +161,7 @@ const ParticleCloud = () => {
158161
// State for object geometries
159162
const geometries = [
160163
// eslint-disable-next-line react/jsx-key
161-
<icosahedronGeometry args={[geometrySize, 30]} />,
164+
<icosahedronGeometry args={[geometrySize, Math.round(20 * geometryResolutionFactor)]} />,
162165
// eslint-disable-next-line react/jsx-key
163166
<torusKnotGeometry args={[geometrySize, 0.4, 128, 64, 1, 2]} />,
164167
// eslint-disable-next-line react/jsx-key

‎src/components/3D/Scene/THREEScene.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@
1919

2020
@include only-mobile {
2121
.canvasOverlay {
22-
opacity: 0;
22+
opacity: 1;
2323
}
2424
}

‎src/components/Audio/ButtonAudio/ButtonAudio.module.css

+16-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Audio/ButtonAudio/ButtonAudio.module.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Audio/ButtonAudio/ButtonAudio.module.scss

+19-7
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
height: 1px;
3535
max-height: 20px;
3636
width: 2px;
37-
background-color: $color-text-passive;
37+
background-color: $color-primary;
3838
opacity: 1;
3939
animation-play-state: running;
4040
animation-direction: alternate;
@@ -68,17 +68,29 @@
6868
}
6969
}
7070

71-
.noSound > .soundBar {
72-
transition: all ease-out $duration-middle;
73-
max-height: 1px;
74-
}
75-
7671
&:hover {
7772
span {
78-
color: $color-primary;
73+
color: $color-text;
7974
}
8075
.soundBars {
8176
.soundBar {
77+
background-color: $color-text;
78+
}
79+
}
80+
}
81+
82+
& .noSound {
83+
.soundBar {
84+
transition: all ease-out $duration-middle;
85+
max-height: 1px;
86+
background-color: $color-text-passive;
87+
}
88+
&:hover {
89+
span {
90+
color: $color-primary;
91+
}
92+
.soundBar {
93+
max-height: 4px;
8294
background-color: $color-primary;
8395
}
8496
}

‎src/components/Sections/Header/Header.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.header {
44
position: fixed;
5-
z-index: 1;
5+
z-index: 1000;
66
display: flex;
77
justify-content: space-between;
88
align-items: center;

‎src/components/Sections/Heros/Hero/Hero.module.scss

+5-8
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,25 @@
55
width: 100%;
66
height: 100vh;
77
align-items: center;
8+
padding-top: 20vh;
89

910
.textBox {
1011
display: flex;
1112
flex-direction: column;
12-
align-items: end;
13+
align-items: start;
1314
gap: $space-small;
1415

1516
hr {
1617
width: 4rem;
1718
}
1819
h1 {
1920
margin: 0;
20-
line-height: 1.15;
21-
font-size: 6em;
22-
font-weight: 600;
2321
}
2422
h2 {
25-
font-size: 1.5em;
2623
color: $color-text-transparent-light;
27-
font-weight: 700;
2824
}
2925
p {
30-
font-size: 1.4em;
26+
font-size: clamp(0.7em, calc(0.5em + 3vw), 1.5em);
3127
}
3228
.btn {
3329
align-self: center;
@@ -37,12 +33,13 @@
3733

3834
@include from-tablet {
3935
.hero {
36+
padding-top: 20vh;
4037
.textBox {
4138
p {
4239
max-width: 50%;
4340
}
4441
.btn {
45-
align-self: end;
42+
align-self: start;
4643
}
4744
}
4845
}

‎src/components/Sections/Section/Section.module.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22

33
.section {
44
width: 100%;
5-
padding: 2rem 0;
6-
margin: 3rem 0;
5+
padding: 0;
6+
margin: 0;
77
}

‎src/components/Slider/LogoSlider/LogoSlider.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ const LogoSlider = ({ children }) => {
6262
className={styles.sliderWrapper}
6363
style={{
6464
'--logo-cards': childCount,
65-
'--logo-margin': 'calc(6vh + 5vw)',
66-
'--logo-width': 'calc(7vh + 5vw)',
65+
'--logo-margin': 'calc(5vh + 5vw)',
66+
'--logo-width': 'calc(9vh + 4vw)',
6767
}}
6868
ref={sliderRef}
6969
onMouseDown={handleMouseDown}

‎src/components/Slider/LogoSlider/LogoSlider.module.scss

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@import '../../../styles/settings/__settings';
22

3-
$animationSpeed: 50s;
4-
53
.container {
4+
--animationSpeed: 30s;
65
position: relative;
76
width: 100%;
87
height: fit-content;
9-
background: $color-bg-transparent;
8+
background: $color-bg-transparent-light;
109

1110
&:before {
1211
content: '';
@@ -52,7 +51,7 @@ $animationSpeed: 50s;
5251
height: 100%;
5352
align-items: center;
5453
cursor: grab;
55-
animation: scroll $animationSpeed linear infinite;
54+
animation: scroll var(--animationSpeed) linear infinite;
5655

5756
&:hover {
5857
// reduce speed to half

‎src/pages/home.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ export default function Home({ posts, pagination, customers }) {
2727
useEffect(() => {
2828
const newTarget = new Vector3();
2929
if (isMobile) {
30-
newTarget.y = 3;
30+
newTarget.y = -7;
3131
} else {
32-
newTarget.x = -5;
32+
newTarget.x = 5;
3333
}
3434
setCameraTarget(newTarget);
3535
}, [isMobile, setCameraTarget]);
@@ -49,7 +49,7 @@ export default function Home({ posts, pagination, customers }) {
4949
);
5050
})}
5151
</LogoSlider>
52-
<Section className={styles.heroSection}></Section>
52+
<Section className={styles.tileSection}></Section>
5353
<Section>
5454
<Container>
5555
<h2 className="sr-only">Posts</h2>

‎src/styles/globals.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,19 @@ body {
5757
}
5858

5959
h1 {
60+
font-size: $font-size-h1;
6061
font-family: Geologica, sans-serif;
62+
line-height: 1.15;
63+
font-weight: 600;
64+
}
65+
h2 {
66+
font-size: $font-size-h2;
67+
font-weight: 700;
6168
}
6269

6370
p {
64-
line-height: 1.6;
71+
font-size: $font-size-p;
72+
line-height: clamp(0.5rem, calc(1.5rem + 1vw), 3rem);
6573
margin: 1.2em 0;
6674
}
6775

‎src/styles/pages/Home.module.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
@import '../../styles/settings/__settings';
22

33
.customerLink {
4-
margin: 0 20px;
4+
margin: 0;
55
user-select: none;
66
-webkit-user-drag: none;
77
pointer-events: auto;
88
}
99

1010
.customerLogo {
11-
filter: grayscale(100%);
1211
display: flex;
1312
align-items: center;
1413
justify-content: center;
@@ -22,6 +21,12 @@
2221
}
2322
}
2423

24+
.tileSection {
25+
background: $color-bg-transparent;
26+
backdrop-filter: blur(10em);
27+
height: 100vh;
28+
}
29+
2530
.description {
2631
text-align: center;
2732
line-height: 1.5;

‎src/styles/settings/_typography.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
/* ================ FONT FAMILY ================ */
12
@font-face {
23
font-family: Geologica;
3-
src: url('/fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('ttf');
4+
src: url('public/fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('ttf');
45
font-weight: 500;
56
font-display: swap;
67
}
@@ -15,5 +16,10 @@ $font-family-default:
1516
Bitstream Vera Sans Mono,
1617
Courier New,
1718
monospace;
18-
$font-size: 1em;
19-
$font-size-passive: 0.9em;
19+
20+
/* ================ FONT SIZE ================ */
21+
$font-size-h1: clamp(0.9em, 0.5em + 13vw, 6em);
22+
$font-size-h2: clamp(0.4em, 7vw, 1.5em);
23+
$font-size-p: clamp(0.7em, calc(0.5em + 3vw), 1em);
24+
25+
$font-size-passive: clamp(0.6em, calc(0.1em + 3vw), 0.9em);

0 commit comments

Comments
 (0)