From a95a0023aad9f99e79af400db50d88866d325098 Mon Sep 17 00:00:00 2001 From: Elijah Moore Date: Thu, 21 Apr 2022 18:03:06 -0500 Subject: CSS sort of fixed --- public/index.html | 2 +- src/App.css | 31 ++++++++++++++++++++----------- src/App.js | 7 ++++++- src/Login.css | 28 ++++++++++++++++++++++------ src/index.js | 1 + 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`. --> - Featherfall Containers + zone.cs.siue.edu 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; } diff --git a/src/App.js b/src/App.js index d7f0f32..e26bd19 100644 --- a/src/App.js +++ b/src/App.js @@ -33,8 +33,13 @@ function App() { - + + + + ); } 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( , + 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]); -- cgit v1.2.3-70-g09d2