From f80b6fd6c7d7e6394cf1d5df4b8fe418348d629b Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Wed, 30 Jun 2021 14:34:01 +0300 Subject: Add tomi --- frontend/pages/index.tsx | 19 ++++-- frontend/public/favicon.ico | Bin 25931 -> 0 bytes frontend/public/tomi_sq.png | Bin 0 -> 158557 bytes frontend/public/vercel.svg | 4 -- frontend/styles/Home.module.css | 138 +++++++++------------------------------- 5 files changed, 45 insertions(+), 116 deletions(-) delete mode 100644 frontend/public/favicon.ico create mode 100644 frontend/public/tomi_sq.png delete mode 100644 frontend/public/vercel.svg diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 4f3f4af..27cabb7 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -1,8 +1,8 @@ import Head from "next/head"; import { ReactElement, useEffect, useState } from "react"; import { io } from "socket.io-client"; -import styles from "../styles/Home.module.css"; import * as config from "../config"; +import styles from "../styles/Home.module.css"; const socket = io(config.backendUrl); @@ -26,20 +26,31 @@ const Home = (): ReactElement => { socket.emit("increment"); }; + const rotateDeg = value !== undefined ? 10 * value : 0; + return (
tomi.science - + -
+ + {/*
value: {value}
-
+
*/}
); }; diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/frontend/public/favicon.ico and /dev/null differ diff --git a/frontend/public/tomi_sq.png b/frontend/public/tomi_sq.png new file mode 100644 index 0000000..a4541b9 Binary files /dev/null and b/frontend/public/tomi_sq.png differ diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/frontend/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/styles/Home.module.css b/frontend/styles/Home.module.css index 35454bb..1b82f36 100644 --- a/frontend/styles/Home.module.css +++ b/frontend/styles/Home.module.css @@ -1,121 +1,43 @@ .container { min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; height: 100vh; + width: 100vw; + padding: 0 0.5rem; + overflow: hidden; + position: relative; } -.main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; +.tomiBtn { + position: absolute; + transition: 300ms ease all; + outline: none; + background: none; + border: none; + cursor: pointer; + width: 80vw; + height: 80vw; + left: 50%; + top: 50%; + margin-left: -40vw; + margin-top: -40vw; } -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; +.btnInner { + position: relative; } -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; +.tomiBtn img { + max-width: 100%; + max-height: 100%; } -.title, -.description { +.counter { + position: absolute; + top: 36%; + left: 50%; + width: 100%; + margin-left: -50%; + z-index: 999; + font-size: 175%; text-align: center; } - -.description { - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - width: 45%; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} -- cgit v1.3