diff --git a/simmadome/src/img/github.png b/simmadome/src/img/github.png new file mode 100644 index 0000000..73db1f6 Binary files /dev/null and b/simmadome/src/img/github.png differ diff --git a/simmadome/src/img/patreon.png b/simmadome/src/img/patreon.png new file mode 100644 index 0000000..9a521e3 Binary files /dev/null and b/simmadome/src/img/patreon.png differ diff --git a/simmadome/src/img/twitter.png b/simmadome/src/img/twitter.png new file mode 100755 index 0000000..af44ca5 Binary files /dev/null and b/simmadome/src/img/twitter.png differ diff --git a/simmadome/src/index.css b/simmadome/src/index.css index 663440d..9cf2b34 100644 --- a/simmadome/src/index.css +++ b/simmadome/src/index.css @@ -58,23 +58,51 @@ h2 { #link_div { text-align: right; position: absolute; - top: 0px; - right: 30px; + top: 1rem; + right: 2rem; + display: flex; } -#link_div > a { +.github_logo, .twitter_logo, .patreon_container { + height: 2rem; + width: 2rem; + margin-left: 0.75rem; +} + +.patreon_container { + border-radius: 1rem; + background: #FF424D; +} + +.patreon_logo { + box-sizing: border-box; + padding: 0.35rem; + height: 2rem; + width: 2rem; + position: relative; + left: 0.1rem; + bottom: 0.05rem; +} + +a { background-color: transparent; text-decoration: underline; } -#link_div > a:link, #link_div > a:visited { +a:link, a:visited { color: lightblue; } -#link_div > a:hover { +a:hover { color: white; } +#utility_links { + position: absolute; + top: 1rem; + left: 2rem; +} + img.emoji { height: 1em; width: 1em; diff --git a/simmadome/src/index.tsx b/simmadome/src/index.tsx index 4f7e32a..e6a49c9 100644 --- a/simmadome/src/index.tsx +++ b/simmadome/src/index.tsx @@ -1,12 +1,15 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import './index.css'; import GamesPage from './GamesPage'; import GamePage from './GamePage'; import CreateLeague from './CreateLeague'; import discordlogo from "./img/discord.png"; import reportWebVitals from './reportWebVitals'; +import patreonLogo from './img/patreon.png'; +import githubLogo from './img/github.png'; +import twitterLogo from './img/twitter.png'; ReactDOM.render( @@ -27,9 +30,20 @@ function Header() { return (