+ )
+};
+
+export default MyDraggableComponent;
diff --git a/src/components/homePage.jsx b/src/components/homePage.jsx
new file mode 100644
index 0000000..47825f4
--- /dev/null
+++ b/src/components/homePage.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/main.css'; // Import CSS/LESS file directly
+
+const Home = () => {
+ return (
+
+
+
+
+
About SheetBuilder
+
SheetBuilder is a web application that allows users to build and share custom character sheets for any RPG out there, using a simple Drag n Drop system
+
+
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/sheets.jsx b/src/components/sheets.jsx
new file mode 100644
index 0000000..551bd45
--- /dev/null
+++ b/src/components/sheets.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/main.css'; // Import CSS/LESS file directly
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import LabelInput from './draggables/labelInput.jsx';
+
+
+const Home = () => {
+ return (
+
+
+
+
+
+
Create your own
+
+
+
+
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
index d563c0f..7be53bc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './styles/reset.css';
+import './styles/main.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);
\ No newline at end of file
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..0591834
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,25 @@
+
+
+.page {
+ padding-block: 100px;
+ width: clamp(600px, 33%, 900px);
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+
+ font-family: 'Open Sans';
+
+ .nav {
+ display: flex;
+ justify-content: space-evenly;
+ column-gap: 20px;
+
+ .navButton {
+ text-decoration: unset;
+ background: coral;
+ color: rgb(123, 45, 17);
+ padding: .7em 1em;
+ border-radius: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..f650724
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,75 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+ list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+ scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
+ margin: unset;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+ text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ max-width: 100%;
+ display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
\ No newline at end of file