Cleanup files, split sidebar and toolbar
This commit is contained in:
Arkadiusz Wieczorek
parent
eed5aba0ec
commit
39a7e34cb4
|
|
@ -15,6 +15,3 @@ Note: At the moment, we support Polish language because this extension generates
|
|||
3. `npm run build`
|
||||
4. The build code is located in the `lib/` directory
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { RequestCluster } from '../request-cluster';
|
||||
import { RequestCluster } from '../../request-cluster';
|
||||
import { ParsedAnswers } from './parse-answers';
|
||||
import NoInformationAtAllProblem from './problems/no-information-at-all';
|
||||
import { Problem } from './problems/problem';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { RequestCluster } from '../request-cluster';
|
||||
import { getDate } from '../util';
|
||||
import { RequestCluster } from '../../request-cluster';
|
||||
import { getDate } from '../../util';
|
||||
import deduceProblems from './deduce-problems';
|
||||
import { Explainers } from './explainers';
|
||||
import { ParsedAnswers } from './parse-answers';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { HAREntry } from '../extended-request';
|
||||
import { StolenDataEntry } from '../stolen-data-entry';
|
||||
import { getshorthost, unique } from '../util';
|
||||
import { HAREntry } from '../../extended-request';
|
||||
import { StolenDataEntry } from '../../stolen-data-entry';
|
||||
import { getshorthost, unique } from '../../util';
|
||||
|
||||
function handleNewFile(
|
||||
element: HTMLInputElement,
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { RequestCluster } from '../../request-cluster';
|
||||
import { RequestCluster } from '../../../request-cluster';
|
||||
import { ExplainerKey } from '../explainers';
|
||||
import { ParsedAnswers } from '../parse-answers';
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { RequestCluster } from '../../request-cluster';
|
||||
import { wordlist } from '../../util';
|
||||
import { RequestCluster } from '../../../request-cluster';
|
||||
import { wordlist } from '../../../util';
|
||||
import { ExplainerKey } from '../explainers';
|
||||
import { ParsedAnswers } from '../parse-answers';
|
||||
import { v } from '../verbs';
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { RequestCluster } from '../../request-cluster';
|
||||
import { RequestCluster } from '../../../request-cluster';
|
||||
import { ExplainerKey } from '../explainers';
|
||||
import { ParsedAnswers, ParsedHostAnswers } from '../parse-answers';
|
||||
import { v } from '../verbs';
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Treść maila do zgłoszenia</title>
|
||||
<link rel="stylesheet" href="/lib/report-window/report-window.css" />
|
||||
<link rel="stylesheet" href="/lib/components/report-window/report-window.css" />
|
||||
<link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
|
||||
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
|
||||
</head>
|
||||
|
|
@ -12,6 +12,6 @@
|
|||
<div id="app"></div>
|
||||
<script src="/node_modules/react/umd/react.development.js"></script>
|
||||
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
|
||||
<script src="/lib/report-window/report-window.js"></script>
|
||||
<script src="/lib/components/report-window/report-window.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../sidebar/fonts.scss';
|
||||
@import '../sidebar/colors.scss';
|
||||
@import './../../styles/colors.scss';
|
||||
// @import './../../styles/fonts';
|
||||
|
||||
html {
|
||||
font-size: 1rem;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { getMemory } from '../memory';
|
||||
import { useEmitter } from '../util';
|
||||
import { getMemory } from '../../memory';
|
||||
import { useEmitter } from '../../util';
|
||||
|
||||
import './report-window.scss';
|
||||
import Questions from './questions';
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
<div id="app"></div>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/lib/sidebar/global.css"
|
||||
href="/lib/styles/global.css"
|
||||
>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/lib/sidebar/sidebar.css"
|
||||
href="/lib/components/sidebar/sidebar.css"
|
||||
>
|
||||
<script src="/node_modules/react/umd/react.production.min.js"></script>
|
||||
<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
|
||||
<script src="/lib/sidebar/sidebar.js"></script>
|
||||
<script src="/lib/components/sidebar/sidebar.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './colors.scss';
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.sidebar {
|
||||
.header {
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
border-bottom: 1px solid $light-grey;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
|
||||
&--without-logo {
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Options from '../options';
|
||||
import Options from '../../options';
|
||||
import { StolenData } from './stolen-data';
|
||||
import { getshorthost, useEmitter } from '../util';
|
||||
import { getMemory } from '../memory';
|
||||
import { getshorthost, useEmitter } from '../../util';
|
||||
import { getMemory } from '../../memory';
|
||||
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
|
||||
|
||||
async function getCurrentTab() {
|
||||
|
|
@ -14,14 +14,8 @@ async function getCurrentTab() {
|
|||
return tab;
|
||||
}
|
||||
|
||||
function setDomainsNumber(counter: number) {
|
||||
browser.browserAction.setBadgeText({ text: counter.toString() });
|
||||
browser.browserAction.setTitle({
|
||||
title: `Rentgen - ${counter !== 1 ? counter + ' podmiotów' : counter + ' podmiot'} `,
|
||||
});
|
||||
}
|
||||
|
||||
import './global.scss';
|
||||
import './../../styles/global.scss';
|
||||
import './sidebar.scss';
|
||||
|
||||
const Sidebar = () => {
|
||||
|
|
@ -61,6 +55,7 @@ const Sidebar = () => {
|
|||
}
|
||||
setOrigin(url.origin);
|
||||
};
|
||||
|
||||
browser.tabs.onUpdated.addListener(listener);
|
||||
listener();
|
||||
return () => {
|
||||
|
|
@ -74,7 +69,6 @@ const Sidebar = () => {
|
|||
return setMarksOccurrence(true);
|
||||
}
|
||||
}
|
||||
setDomainsNumber(Object.values(getMemory().getClustersForOrigin(origin)).length);
|
||||
|
||||
return setMarksOccurrence(false);
|
||||
}, [eventCounts['*'], origin]);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './colors.scss';
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.stolen-data-cluster-container {
|
||||
.domains-container {
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import { getMemory } from '../memory';
|
||||
import { StolenDataEntry } from '../stolen-data-entry';
|
||||
import { getMemory } from '../../memory';
|
||||
import { StolenDataEntry } from '../../stolen-data-entry';
|
||||
|
||||
import { maskString, useEmitter } from '../util';
|
||||
import { maskString, useEmitter } from '../../util';
|
||||
|
||||
import './stolen-data-cluster.scss';
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import './colors.scss';
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.stolen-data-container {
|
||||
padding-top: .5rem;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { getMemory } from '../memory';
|
||||
import { RequestCluster } from '../request-cluster';
|
||||
import { getMemory } from '../../memory';
|
||||
import { RequestCluster } from '../../request-cluster';
|
||||
|
||||
import StolenDataCluster from './stolen-data-cluster';
|
||||
|
||||
27
components/toolbar/toolbar.html
Normal file
27
components/toolbar/toolbar.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="toolbar"></div>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/lib/styles/global.css"
|
||||
>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/lib/components/toolbar/toolbar.css"
|
||||
>
|
||||
<script src="/node_modules/react/umd/react.production.min.js"></script>
|
||||
<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
|
||||
<script src="/lib/components/toolbar/toolbar.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
117
components/toolbar/toolbar.scss
Normal file
117
components/toolbar/toolbar.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
@import '../../styles/colors.scss';
|
||||
|
||||
.toolbar {
|
||||
padding: 0 .5rem;
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 6.67rem 1fr 1.25rem;
|
||||
align-items: center;
|
||||
max-height: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
border-bottom: 1px solid $light-grey;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
|
||||
&--without-logo {
|
||||
grid-template-columns: 1fr 1.25rem;
|
||||
}
|
||||
|
||||
.webpage-metadata {
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-wrap: nowrap;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
color: #000;
|
||||
|
||||
&--without-logo {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&--hyperlink {
|
||||
font-weight: 400;
|
||||
color: $ultra-black-color;
|
||||
max-height: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid $light-grey;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $ultra-black-color;
|
||||
padding: 0.25rem 0rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
line-height: 1.25rem;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
svg path {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
color: $disabled-grey;
|
||||
svg path {
|
||||
fill: $disabled-grey;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
background-color: $pale-yellow;
|
||||
border-left: 4px solid $contrast-yellow;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% - 2rem) 2rem;
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
justify-content: flex-end;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $ultra-black-color;
|
||||
line-height: 1.25rem;
|
||||
background: transparent;
|
||||
padding: 0.5rem 0.5rem;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
204
components/toolbar/toolbar.tsx
Normal file
204
components/toolbar/toolbar.tsx
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useEmitter } from '../../util';
|
||||
import { getMemory } from '../../memory';
|
||||
browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
|
||||
|
||||
async function getCurrentTab() {
|
||||
const [tab] = await browser.tabs.query({
|
||||
active: true,
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
});
|
||||
return tab;
|
||||
}
|
||||
|
||||
import './../../styles/global.scss';
|
||||
import './toolbar.scss';
|
||||
|
||||
const Toolbar = () => {
|
||||
const [origin, setOrigin] = React.useState<string | null>(null);
|
||||
const [minValueLength, setMinValueLength] = React.useState<number | null>(
|
||||
localStorage.getItem('minValueLength') === null
|
||||
? 7
|
||||
: (localStorage.getItem('minValueLength') as unknown as number)
|
||||
);
|
||||
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
|
||||
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
|
||||
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
|
||||
const [eventCounts, setEventCounts] = useEmitter(getMemory());
|
||||
const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
|
||||
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
|
||||
localStorage.getItem('warningDataDialogAck') === null
|
||||
? true
|
||||
: localStorage.getItem('warningDataDialogAck') == 'true'
|
||||
? true
|
||||
: false
|
||||
);
|
||||
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
|
||||
localStorage.getItem('logoVisibility') === null
|
||||
? false
|
||||
: localStorage.getItem('logoVisibility') == 'true'
|
||||
? true
|
||||
: false
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const listener = async () => {
|
||||
console.log('tab change!');
|
||||
const tab = await getCurrentTab();
|
||||
const url = new URL(tab.url);
|
||||
if (url.origin.startsWith('moz-extension')) {
|
||||
return;
|
||||
}
|
||||
setOrigin(url.origin);
|
||||
};
|
||||
|
||||
browser.tabs.onUpdated.addListener(listener);
|
||||
listener();
|
||||
return () => {
|
||||
browser.tabs.onUpdated.removeListener(listener);
|
||||
};
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
|
||||
if (cluster.hasMarks()) {
|
||||
return setMarksOccurrence(true);
|
||||
}
|
||||
}
|
||||
|
||||
return setMarksOccurrence(false);
|
||||
}, [eventCounts['*'], origin]);
|
||||
|
||||
return (
|
||||
<div className="toolbar">
|
||||
<header className={logoVisibility ? 'header' : 'header header--without-logo'}>
|
||||
<img
|
||||
src="../assets/logo-internet-czas-dzialac.svg"
|
||||
height={40}
|
||||
style={!logoVisibility ? { display: 'none' } : null}
|
||||
></img>
|
||||
<div
|
||||
className={
|
||||
logoVisibility
|
||||
? 'webpage-metadata'
|
||||
: 'webpage-metadata webpage-metadata--without-logo'
|
||||
}
|
||||
>
|
||||
{origin ? (
|
||||
<>
|
||||
<span>Analiza strony</span>
|
||||
<span className="webpage-metadata--hyperlink">{origin}</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Przejdź do wybranej strony internetowej</span>
|
||||
)}
|
||||
</div>
|
||||
{stolenDataView ? (
|
||||
<a href="https://internet-czas-dzialac.pl">
|
||||
<img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
|
||||
</a>
|
||||
) : (
|
||||
<button onClick={() => setStolenDataView(true)}>
|
||||
<img src="/assets/icons/short_left.svg" width="20" height="20" />
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{stolenDataView ? (
|
||||
<nav>
|
||||
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||
<img src="/assets/icons/settings.svg" width="20" height="20" />
|
||||
<span>Ustawienia</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
getMemory().removeRequestsFor(origin);
|
||||
getMemory().emit('change', false, origin, 'clicked trash');
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
>
|
||||
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
|
||||
<span>Wyczyść historię wtyczki</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
getMemory().removeCookiesFor(origin);
|
||||
getMemory().emit('change', false, origin, 'clicked clear cookies');
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
>
|
||||
<img src="/assets/icons/cookie.svg" width="20" height="20" />
|
||||
<span>Wyczyść ciasteczka</span>
|
||||
</button>
|
||||
<button
|
||||
disabled={!marksOccurrence}
|
||||
title={
|
||||
marksOccurrence
|
||||
? 'Kliknij, aby wygenerować wiadomość'
|
||||
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
|
||||
}
|
||||
onClick={() => {
|
||||
const params = [
|
||||
'height=' + screen.height,
|
||||
'width=' + screen.width,
|
||||
'fullscreen=yes',
|
||||
].join(',');
|
||||
window.open(
|
||||
`/report-window/report-window.html?origin=${origin}`,
|
||||
'new_window',
|
||||
params
|
||||
);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20 20H4C2.89543 20 2 19.1046 2 18V5.913C2.04661 4.84255 2.92853 3.99899 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
|
||||
fill="#2E3A59"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Utwórz wiadomość dla administratora witryny</span>
|
||||
</button>
|
||||
</nav>
|
||||
) : null}
|
||||
|
||||
<section>
|
||||
{stolenDataView ? (
|
||||
<>
|
||||
{warningDataDialogAck ? (
|
||||
<section className="warning-container">
|
||||
<span>
|
||||
<strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
|
||||
informacja jest daną osobową. Niektóre z podanych domen mogą
|
||||
należeć do właściciela strony i nie reprezentować podmiotów
|
||||
trzecich.
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
setWarningDataDialogAck(false);
|
||||
localStorage.setItem(
|
||||
'warningDataDialogAck',
|
||||
false as unknown as string
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src="/assets/icons/close_big.svg" width="16" height="16" />
|
||||
</button>
|
||||
</section>
|
||||
) : null}
|
||||
<div>stolen data</div>
|
||||
</>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));
|
||||
|
|
@ -44,9 +44,10 @@ let skipReactImports = {
|
|||
esbuild
|
||||
.build({
|
||||
entryPoints: [
|
||||
'sidebar/sidebar.tsx',
|
||||
'components/toolbar/toolbar.tsx',
|
||||
'components/sidebar/sidebar.tsx',
|
||||
'test.ts',
|
||||
'report-window/report-window.tsx',
|
||||
'components/report-window/report-window.tsx',
|
||||
'background.ts',
|
||||
],
|
||||
bundle: true,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
"browser_action": {
|
||||
"default_icon": "assets/icon-addon.svg",
|
||||
"default_title": "Rentgen",
|
||||
"default_popup": "sidebar/sidebar.html"
|
||||
"default_popup": "components/toolbar/toolbar.html"
|
||||
},
|
||||
"icons": {
|
||||
"16": "assets/icon-addon.svg",
|
||||
|
|
|
|||
14
memory.ts
14
memory.ts
|
|
@ -3,6 +3,14 @@ import { getshorthost, makeThrottle } from './util';
|
|||
import { EventEmitter } from 'events';
|
||||
import { RequestCluster } from './request-cluster';
|
||||
|
||||
function setDomainsNumber(counter: number, tabId: number) {
|
||||
browser.browserAction.setBadgeText({ text: counter.toString(), tabId });
|
||||
browser.browserAction.setTitle({
|
||||
title: `Rentgen - liczba wykrytych podmiotów: ${counter}`,
|
||||
tabId,
|
||||
});
|
||||
}
|
||||
|
||||
export default class Memory extends EventEmitter {
|
||||
origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
|
||||
private throttle = makeThrottle(100);
|
||||
|
|
@ -21,6 +29,12 @@ export default class Memory extends EventEmitter {
|
|||
}
|
||||
this.origin_to_history[request.origin][shorthost].add(request);
|
||||
this.emit('change', false, shorthost, 'registered request(shorthost emit)');
|
||||
|
||||
console.log(this.getClustersForOrigin(request.origin));
|
||||
setDomainsNumber(
|
||||
Object.values(this.getClustersForOrigin(request.origin)).length,
|
||||
request.tabId
|
||||
);
|
||||
}
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import './sidebar/colors.scss';
|
||||
@import './styles/colors.scss';
|
||||
|
||||
.options-container {
|
||||
padding-top: 0.5rem;
|
||||
|
|
|
|||
5769
package-lock.json
generated
5769
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 1023 KiB |
BIN
screenshot2.png
BIN
screenshot2.png
Binary file not shown.
|
Before Width: | Height: | Size: 275 KiB |
BIN
screenshot3.png
BIN
screenshot3.png
Binary file not shown.
|
Before Width: | Height: | Size: 265 KiB |
|
|
@ -1,49 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code VF';
|
||||
src: url('./../assets/fonts/fira-code/woff2/FiraCode-VF.woff2')
|
||||
format('woff2-variations'),
|
||||
url('./../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
|
||||
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
|
||||
font-weight: 300 700;
|
||||
font-style: normal;
|
||||
}
|
||||
48
styles/fonts.scss
Normal file
48
styles/fonts.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-Medium.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-SemiBold.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-Bold.woff2') format('woff2'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code VF';
|
||||
src: url('../assets/fonts/fira-code/woff2/FiraCode-VF.woff2') format('woff2-variations'),
|
||||
url('../assets/fonts/fira-code/woff/FiraCode-VF.woff') format('woff-variations');
|
||||
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
|
||||
font-weight: 300 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -11,7 +11,9 @@
|
|||
}
|
||||
|
||||
body {
|
||||
min-width: 24rem;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
Loading…
Reference in New Issue
Block a user