mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2026-07-31 08:39:04 +02:00
Compare commits
61 Commits
v2.0.3
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
699cb564dd | ||
|
|
9c94a351ee | ||
|
|
9de39752f3 | ||
|
|
2499582f66 | ||
|
|
ad26dd62ad | ||
|
|
0a026baa9b | ||
|
|
a2b8f3620a | ||
|
|
06b940b7c9 | ||
|
|
c75d81eb43 | ||
|
|
529d1acbb6 | ||
|
|
e7e295cad1 | ||
|
|
10e8752bca | ||
|
|
6eb5785bfd | ||
|
|
6c912c37e4 | ||
|
|
d37c7326c3 | ||
|
|
4c1a6f92b9 | ||
|
|
1f3868fc3a | ||
|
|
632b2ad1ef | ||
|
|
9519a19b5c | ||
|
|
a438f81c72 | ||
|
|
6b3d44796f | ||
|
|
c272df6397 | ||
|
|
1eae9e0017 | ||
|
|
94c5a822fe | ||
|
|
509ca975bd | ||
|
|
43f3c4f4ac | ||
|
|
171a64da44 | ||
|
|
01aaf66e55 | ||
|
|
0e456bee91 | ||
|
|
6bc2994a91 | ||
|
|
716d306a87 | ||
|
|
cf0f472c70 | ||
|
|
3159a86e8f | ||
|
|
71fb6c565e | ||
|
|
254d29fe6d | ||
|
|
13f621f17b | ||
|
|
337c39935c | ||
|
|
d3cc20d58b | ||
|
|
cf5c0ae705 | ||
|
|
69db8c5bcc | ||
|
|
fd2863b355 | ||
|
|
8ffbe023eb | ||
|
|
a9edeec900 | ||
|
|
3e5ec1862e | ||
|
|
34ffedc294 | ||
|
|
6d7ee8905b | ||
|
|
442e8f05e6 | ||
|
|
f30cd26393 | ||
|
|
f0761c40b7 | ||
|
|
ef442f10e0 | ||
|
|
ce7bd90362 | ||
|
|
61f6651a57 | ||
|
|
1d9b6de814 | ||
|
|
751fad72f4 | ||
|
|
4eb61d3b96 | ||
|
|
7fd2e2aafa | ||
|
|
33786d7366 | ||
|
|
1a5b231d1e | ||
|
|
232bca2bbc | ||
|
|
0b74390d2e | ||
|
|
d16e80a48d |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"printWidth": 180,
|
||||
"printWidth": 120,
|
||||
"singleQuote": false,
|
||||
"semi": true
|
||||
}
|
||||
|
||||
12
README.md
12
README.md
@@ -3,7 +3,7 @@
|
||||
This is an overlay for OBS to show the current talking clients in your TeamSpeak5 Channel.
|
||||
This App uses the new "Remote Apps" feature of TeamSpeak5.
|
||||
|
||||
This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
|
||||
This overlay uses the [TeamSpeak Remote App API](https://github.com/DerTyp7/react-teamspeak-remote-app-api).
|
||||
|
||||
|
||||
|
||||
@@ -20,16 +20,16 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
|
||||
|
||||
### Quick instructions
|
||||
|
||||
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
|
||||
1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
|
||||
2. Follow the instructions on the website
|
||||
3. Accept overlay inside TeamSpeak5
|
||||
|
||||
|
||||
|
||||
### Detailed instructions
|
||||
|
||||
Try this instruction if you have problems with the quick instructions above.
|
||||
|
||||
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
|
||||
1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
|
||||
|
||||
2. Follow the instructions on the website
|
||||
|
||||
@@ -41,9 +41,9 @@ Try this instruction if you have problems with the quick instructions above.
|
||||
|
||||
|
||||
5. Enter the in step 1 generated URL into the URL field of the Browser Source
|
||||
|
||||
|
||||
|
||||
6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
|
||||
6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
|
||||
|
||||
7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)
|
||||
|
||||
|
||||
@@ -5,10 +5,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay"
|
||||
content="An OBS overlay for TeamSpeak5/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
|
||||
/>
|
||||
<meta name="author" content="DerTyp7" />
|
||||
<title>TS5-OBS-Overlay</title>
|
||||
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
||||
<title>TeamSpeak-OBS-Overlay</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
2877
package-lock.json
generated
2877
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
@@ -1,17 +1,20 @@
|
||||
{
|
||||
"name": "ts5-obs-overlay",
|
||||
"name": "teamspeak-obs-overlay",
|
||||
"private": false,
|
||||
"version": "2.0.3",
|
||||
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
|
||||
"version": "2.2.0",
|
||||
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
|
||||
"author": "DerTyp7",
|
||||
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
|
||||
"homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/DerTyp7/ts5-obs-overlay"
|
||||
"url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
|
||||
},
|
||||
"keywords": [
|
||||
"ts5",
|
||||
"ts6",
|
||||
"teamspeak6",
|
||||
"teamspeak",
|
||||
"teamspeak5",
|
||||
"overlay",
|
||||
"remote app",
|
||||
"obs",
|
||||
@@ -20,7 +23,7 @@
|
||||
"vite"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/DerTyp7/ts5-obs-overlay/issues"
|
||||
"url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -30,24 +33,24 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^20.8.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"react-ts5-remote-app-api": "^1.1.1",
|
||||
"sass": "^1.68.0"
|
||||
"@types/node": "^22.10.10",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-teamspeak-remote-app-api": "^2.0.0",
|
||||
"sass": "^1.83.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^29.5.2",
|
||||
"@types/react": "^18.2.35",
|
||||
"@types/react-dom": "^18.2.14",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
"@typescript-eslint/parser": "^6.9.1",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.5.0"
|
||||
"@types/jest": "^29.5.14",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
||||
"@typescript-eslint/parser": "^8.21.0",
|
||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.18",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.11"
|
||||
}
|
||||
}
|
||||
|
||||
23
public/logo.svg
Normal file
23
public/logo.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="307.000000pt" height="339.000000pt" viewBox="0 0 307.000000 339.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,339.000000) scale(0.100000,-0.100000)"
|
||||
fill="#008080" stroke="none">
|
||||
<path d="M1297 3382 c-3 -4 -7 -61 -11 -127 -20 -341 -120 -616 -370 -1010
|
||||
-158 -251 -306 -436 -331 -415 -7 6 -18 52 -24 103 -22 170 -77 377 -101 377
|
||||
-5 0 -21 -38 -35 -86 -27 -89 -79 -213 -212 -504 -201 -438 -244 -657 -180
|
||||
-901 52 -198 102 -290 232 -427 137 -145 345 -310 474 -376 l34 -18 -5 24 c-3
|
||||
12 -18 63 -32 113 -64 213 -19 418 154 701 106 173 164 314 194 474 16 82 30
|
||||
120 45 120 13 0 55 -59 94 -131 45 -83 81 -198 102 -329 9 -57 18 -106 20
|
||||
-108 7 -7 122 231 144 298 34 104 49 202 63 403 6 103 15 186 20 185 4 -2 79
|
||||
-72 167 -155 257 -247 392 -414 501 -625 97 -187 102 -205 107 -413 6 -223 -1
|
||||
-265 -73 -418 -31 -65 -53 -121 -50 -124 7 -7 188 122 295 212 210 176 368
|
||||
383 455 598 149 370 117 760 -98 1193 -110 220 -245 417 -434 633 l-39 45 -7
|
||||
-183 c-5 -106 -14 -203 -22 -230 -14 -46 -80 -144 -99 -145 -14 -1 -59 92
|
||||
-101 209 -121 342 -331 651 -579 854 -130 107 -287 203 -298 183z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -1,6 +1,6 @@
|
||||
import "@styles/App.scss";
|
||||
|
||||
import { Navigate, Route, Routes, useSearchParams } from "react-router-dom";
|
||||
import { Route, Routes, useSearchParams } from "react-router-dom";
|
||||
import Viewer from "./Viewer";
|
||||
import Generator from "./Generator";
|
||||
|
||||
@@ -17,6 +17,7 @@ export default function App() {
|
||||
showChannelName={searchParams.get("showChannelName") === "true"}
|
||||
hideNonTalking={searchParams.get("hideNonTalking") === "true"}
|
||||
clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
|
||||
alignRight={searchParams.get("alignRight") === "true"}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { ChangeEvent, useRef, useState, useEffect } from "react";
|
||||
import { ChangeEvent, useRef, useState, useEffect } from "react";
|
||||
import "@styles/Generator.scss";
|
||||
import Viewer from "./Viewer";
|
||||
|
||||
@@ -9,13 +9,14 @@ export default function Generator() {
|
||||
|
||||
const [remoteAppPort, setRemoteAppPort] = useState(5899);
|
||||
const [showChannelName, setShowChannelName] = useState(true);
|
||||
const [alignRight, setAlignRight] = useState(false);
|
||||
const [hideNonTalking, setHideNonTalking] = useState(false);
|
||||
const [clientLimit, setClientLimit] = useState(0);
|
||||
|
||||
// Effect to generate URL when dependencies change
|
||||
useEffect(() => {
|
||||
generateUrl();
|
||||
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
|
||||
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]);
|
||||
|
||||
// Function to generate the output URL
|
||||
function generateUrl() {
|
||||
@@ -26,12 +27,11 @@ export default function Generator() {
|
||||
url.searchParams.set("showChannelName", showChannelName.toString());
|
||||
url.searchParams.set("hideNonTalking", hideNonTalking.toString());
|
||||
url.searchParams.set("clientLimit", clientLimit.toString());
|
||||
url.searchParams.set("alignRight", alignRight.toString());
|
||||
|
||||
if (url.hostname === "dertyp7.github.io") {
|
||||
url.pathname = url.pathname + "ts5-obs-overlay/";
|
||||
}
|
||||
|
||||
setOutputUrl(url.toString());
|
||||
// url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
|
||||
// gh-pages needs the hash to be between the base URL and the search params
|
||||
setOutputUrl(url.toString().replace("?", "#/?"));
|
||||
}
|
||||
|
||||
// Function to copy URL to clipboard
|
||||
@@ -55,7 +55,7 @@ export default function Generator() {
|
||||
<div className="generator">
|
||||
{/* Header */}
|
||||
<div className="headline">
|
||||
<h1>TS5-OBS-Overlay Generator</h1>
|
||||
<h1>TeamSpeak-OBS-Overlay Generator</h1>
|
||||
<h4>by DerTyp7</h4>
|
||||
</div>
|
||||
|
||||
@@ -64,7 +64,9 @@ export default function Generator() {
|
||||
<p>1. Customize your settings</p>
|
||||
<p>2. Copy the generated URL</p>
|
||||
<p>3. Paste the URL into the BrowserSource URL field in OBS</p>
|
||||
<a href="#">Click here for detailed instructions</a>
|
||||
<a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">
|
||||
Click here for detailed instructions
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Output Section */}
|
||||
@@ -100,18 +102,34 @@ export default function Generator() {
|
||||
<input type="checkbox" checked={hideNonTalking} />
|
||||
<label>Hide non talking clients</label>
|
||||
</div>
|
||||
|
||||
{/* Alignment Option */}
|
||||
<div className="option" onClick={() => setAlignRight(!alignRight)}>
|
||||
<input type="checkbox" checked={alignRight} />
|
||||
<label>Align Right</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
{/* Client Limit Option */}
|
||||
<div className="option">
|
||||
<input type="number" value={clientLimit} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))} />
|
||||
<input
|
||||
type="number"
|
||||
value={clientLimit}
|
||||
min={0}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))}
|
||||
/>
|
||||
<label>Client Limit</label>
|
||||
</div>
|
||||
|
||||
{/* RemoteApp-Port Option */}
|
||||
<div className="option">
|
||||
<input type="number" value={remoteAppPort} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))} />
|
||||
<input
|
||||
type="number"
|
||||
value={remoteAppPort}
|
||||
min={0}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))}
|
||||
/>
|
||||
<label>RemoteApp-Port</label>
|
||||
</div>
|
||||
</section>
|
||||
@@ -120,7 +138,13 @@ export default function Generator() {
|
||||
|
||||
{/* Preview */}
|
||||
<div className="preview">
|
||||
<Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
|
||||
<Viewer
|
||||
remoteAppPort={remoteAppPort}
|
||||
showChannelName={showChannelName}
|
||||
hideNonTalking={hideNonTalking}
|
||||
clientLimit={clientLimit}
|
||||
alignRight={alignRight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
import "@styles/Viewer.scss";
|
||||
import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
|
||||
import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
|
||||
|
||||
export default function Viewer({
|
||||
remoteAppPort = 5899,
|
||||
showChannelName = false,
|
||||
hideNonTalking = false,
|
||||
clientLimit = 0,
|
||||
alignRight = false,
|
||||
}: {
|
||||
remoteAppPort?: number;
|
||||
showChannelName?: boolean;
|
||||
hideNonTalking?: boolean;
|
||||
clientLimit?: number;
|
||||
alignRight?: boolean;
|
||||
}) {
|
||||
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
|
||||
remoteAppPort: remoteAppPort,
|
||||
auth: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "2.0.3",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A OBS overlay for TS5 by DerTyp7",
|
||||
version: "2.2.0",
|
||||
name: "TeamSpeak OBS Overlay",
|
||||
description: "A OBS overlay for TeamSpeak by DerTyp7",
|
||||
},
|
||||
logging: true,
|
||||
});
|
||||
@@ -30,8 +32,8 @@ export default function Viewer({
|
||||
}) as IClient[];
|
||||
|
||||
return (
|
||||
<div className="viewer">
|
||||
{showChannelName ? (
|
||||
<div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
|
||||
{showChannelName && currentChannel ? (
|
||||
<div className="channelNameContainer">
|
||||
<h1>{currentChannel?.properties.name}</h1>
|
||||
</div>
|
||||
@@ -44,13 +46,19 @@ export default function Viewer({
|
||||
|
||||
if (client) {
|
||||
//* Non-talking client
|
||||
if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
|
||||
if (
|
||||
hideNonTalking &&
|
||||
(client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
//* Normal client
|
||||
return (
|
||||
<div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
|
||||
<div
|
||||
className={`client ${alignRight ? "client--align-right" : ""}`}
|
||||
key={`${client.id}-${client.channel?.connection.id}`}
|
||||
>
|
||||
{client.properties.outputHardware == false ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<title>muted_hardware_output</title>
|
||||
@@ -85,7 +93,16 @@ export default function Viewer({
|
||||
d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
|
||||
fill="#d8d8d8"
|
||||
/>
|
||||
<rect x="-5.93" y="61.89" width="139.87" height="14.02" rx="2.87" ry="2.87" transform="translate(-29.97 65.43) rotate(-45)" fill="#c9070a" />
|
||||
<rect
|
||||
x="-5.93"
|
||||
y="61.89"
|
||||
width="139.87"
|
||||
height="14.02"
|
||||
rx="2.87"
|
||||
ry="2.87"
|
||||
transform="translate(-29.97 65.43) rotate(-45)"
|
||||
fill="#c9070a"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
) : client.properties.outputMuted ? (
|
||||
@@ -146,6 +163,24 @@ export default function Viewer({
|
||||
return <div key={Math.random()}></div>;
|
||||
}
|
||||
})}
|
||||
{currentChannel == null ? (
|
||||
<>
|
||||
<h4>Overlay couldn't connect to the client:</h4>
|
||||
<br />
|
||||
<br />
|
||||
<h5>1. Make sure to accept the overlay in your TeamSpeak-Client via the notifications</h5>
|
||||
<br />
|
||||
<h5>2. Enable remote apps inside the the TeamSpeak-Settings</h5>
|
||||
<br />
|
||||
<h5>3. Make sure to match the configuration port with the port in the TeamSpeak remote app settings</h5>
|
||||
<br />
|
||||
<h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5>
|
||||
<br />
|
||||
<h6>If non of this worked refer to the GitHub and write an issue with your problem</h6>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "@styles/index.scss";
|
||||
import { BrowserRouter, HashRouter } from "react-router-dom";
|
||||
import { HashRouter } from "react-router-dom";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<HashRouter>
|
||||
|
||||
@@ -211,6 +211,18 @@ $breakpoint-3: 600px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 500px;
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.client {
|
||||
svg {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,14 @@
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
|
||||
&--align-right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
background-color: #2f313680;
|
||||
@@ -28,20 +36,24 @@
|
||||
.client {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0 0;
|
||||
gap: 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&--align-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
// icon styles
|
||||
svg {
|
||||
width: 2.1rem;
|
||||
width: 5vw;
|
||||
aspect-ratio: 1/1;
|
||||
margin-right: 0.5rem;
|
||||
filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
|
||||
}
|
||||
|
||||
// client name styles
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
font-size: 5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,6 +41,14 @@ h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
// Common styles for heading elements
|
||||
h1,
|
||||
h2,
|
||||
|
||||
Reference in New Issue
Block a user