diff options
| author | Elijah Moore <elimoor@siue.edu> | 2022-04-21 18:03:06 -0500 |
|---|---|---|
| committer | Elijah Moore <elimoor@siue.edu> | 2022-04-21 18:03:06 -0500 |
| commit | a95a0023aad9f99e79af400db50d88866d325098 (patch) | |
| tree | 41251b18baf17d6ce38c4533641ae2555f349fec | |
| parent | e4d05606fec40603f7e60fc9b138ae536fb340d3 (diff) | |
CSS sort of fixed
| -rw-r--r-- | public/index.html | 2 | ||||
| -rw-r--r-- | src/App.css | 31 | ||||
| -rw-r--r-- | src/App.js | 7 | ||||
| -rw-r--r-- | src/Login.css | 28 | ||||
| -rw-r--r-- | src/index.js | 1 | ||||
| -rw-r--r-- | src/theme.js | 6 |
6 files changed, 54 insertions, 21 deletions
diff --git a/public/index.html b/public/index.html index 2e6fffb..d85660c 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - <title>Featherfall Containers</title> + <title>zone.cs.siue.edu</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> diff --git a/src/App.css b/src/App.css index 9ea8afa..e6ea250 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,14 @@ /* make the body background color black */ -body { +/* body { background-color: #121212; -} +} */ .terminalContainer { - height: 75%; - width: 60%; + height: 96%; + width: 84%; position: fixed; z-index: 1; - top: 10%; - left: 30%; + top: 1%; + left: 15%; color: #FFFFFF; background-color: #111; overflow-x: hidden; @@ -35,9 +35,9 @@ body { .white-content { background: #e4e4e4; } -/* .black-content { - background: #111111; -} */ +.black-content { + background: #121212; +} .toggle-slider { display: flex; @@ -45,7 +45,7 @@ body { .sidenav { height: 80%; - width: 5%; + width: 10%; position: fixed; z-index: 1; top: 5%; @@ -65,11 +65,20 @@ body { color: #f1f1f1; } +.footer { + width: 8%; + top: 95%; + right: 10%; + background-color: #FFFFFF; + border: 2px solid #BB86fc; + border-radius: 5px; +} + ul { list-style-type: none; margin: 0; padding: 0; - width: 5%; + width: 10%; position: fixed; overflow: auto; } @@ -33,8 +33,13 @@ function App() { </ThemeContext.Consumer> </InputGroup> - <TerminalManager /> </header> + <body> + <TerminalManager /> + </body> + <footer> + <div className='footer'>Featherfall Software</div> + </footer> </div> ); } diff --git a/src/Login.css b/src/Login.css index 01f11f8..13e63fb 100644 --- a/src/Login.css +++ b/src/Login.css @@ -1,7 +1,7 @@ -body { +/* body { background-color: #121212; - } -.login{ + } */ +.login { width: 30%; height: 30%; position: fixed; @@ -14,7 +14,7 @@ body { overflow: auto; } -.loginButton{ +.loginButton { background-color: #BB86fc; border: none; color: white; @@ -28,16 +28,32 @@ body { border-radius: 5px; } -.loginText{ +.loginText { color: #BB86fc; font-size: 20px; font-weight: bold; text-align: center; } -.fieldText{ +.fieldText { color: #BB86fc; font-size: 20px; font-weight: bold; text-align: center; +} + +/* .footer { + height: 5%; + width: 8%; + background-color: #FFFFFF; + border: 2px solid #BB86fc; + border-radius: 5px; + } */ +.footer { + position: absolute; + left: 0; + bottom: 5; + background-color: #FFFFFF; + border: 2px solid #BB86fc; + border-radius: 5px; }
\ No newline at end of file diff --git a/src/index.js b/src/index.js index d36c893..01f15e7 100644 --- a/src/index.js +++ b/src/index.js @@ -14,6 +14,7 @@ ReactDOM.render( </BrowserRouter> </React.StrictMode> </ThemeContextWrapper>, + document.getElementById('root') ); diff --git a/src/theme.js b/src/theme.js index 7c2b9a9..fc7cd0a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -20,11 +20,13 @@ export default function ThemeContextWrapper(props) { useEffect(() => { switch (theme) { case themes.light: - document.body.classList.add('white-content'); + document.body.classList.remove('white-content'); + document.body.classList.add('black-content'); break; case themes.dark: default: - document.body.classList.remove('white-content'); + document.body.classList.remove('black-content'); + document.body.classList.add('white-content'); break; } }, [theme]); |