diff --git a/client/src/assets/swirl.fix.svg b/client/src/assets/swirl.fix.svg new file mode 100644 index 0000000..29418ca --- /dev/null +++ b/client/src/assets/swirl.fix.svg @@ -0,0 +1,337 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/swirl.svg b/client/src/assets/swirl.svg new file mode 100644 index 0000000..cdae2a8 --- /dev/null +++ b/client/src/assets/swirl.svg @@ -0,0 +1,541 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/nav.tsx b/client/src/components/nav.tsx index 24de427..859e72d 100644 --- a/client/src/components/nav.tsx +++ b/client/src/components/nav.tsx @@ -7,6 +7,8 @@ import LogRocket from 'logrocket'; import http from './../http'; import { State } from './../store'; +import Swirl from './swirl'; + function showAdmin(user) { return user && user.email === 'ntr@mnml.gg'; } diff --git a/client/src/components/swirl.tsx b/client/src/components/swirl.tsx new file mode 100644 index 0000000..2d4a397 --- /dev/null +++ b/client/src/components/swirl.tsx @@ -0,0 +1,3 @@ +export default function Swirl() { + return
; +} diff --git a/client/src/routes/info.tsx b/client/src/routes/info.tsx index f9879aa..65efca6 100644 --- a/client/src/routes/info.tsx +++ b/client/src/routes/info.tsx @@ -1,8 +1,11 @@ import { h } from 'preact'; +import Swirl from './../components/swirl'; + const Info = () => { return (
+

Info

diff --git a/client/src/routes/login.tsx b/client/src/routes/login.tsx index dc420b6..f712487 100644 --- a/client/src/routes/login.tsx +++ b/client/src/routes/login.tsx @@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux' import http from './../http'; import { State, userState } from './../store'; +import Swirl from './../components/swirl'; const Login = ({ mode }) => { const dispatch = useDispatch() @@ -97,7 +98,8 @@ function LoginPage({ mode }) {
-
+
+

Mates Crates is a record importing service.

We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.

Based in Preston.

diff --git a/client/src/style/index.less b/client/src/style/index.less index 07b5f75..cabecd9 100644 --- a/client/src/style/index.less +++ b/client/src/style/index.less @@ -220,20 +220,42 @@ button, [type=submit] { } } + .swirl { + height: 15rem; + } + .text { + text-align: center; + } } .info { display: grid; + + grid-template-areas: + "words swirl" + "words contact"; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr; section { margin-bottom: var(--spacing); } .contact { + grid-area: contact; text-align: center; } + + .words { + grid-area: words; + } + + .swirl { + grid-area: swirl; + height: 10rem; + } } .alt-text, .alt { @@ -452,3 +474,12 @@ header { font-family: var(--secondary-font-family); text-transform: uppercase; } + +.swirl { + background-image: url("./../assets/swirl.fix.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + + margin-bottom: var(--spacing); +} \ No newline at end of file