From 1dce318611e0681a30481083581846acea774b72 Mon Sep 17 00:00:00 2001 From: Derek Holloway Date: Wed, 16 Jul 2025 17:52:26 -0700 Subject: [PATCH] Create Base Page --- src/Client/src/app/app.css | 269 +++++++------------------ src/Client/src/app/app.html | 92 +++------ src/Client/src/index.html | 22 +- src/Client/src/styles.css | 214 +------------------- src/Server/wwwroot/img/logo.png | Bin 165427 -> 5430 bytes src/Server/wwwroot/img/mistox-logo.png | Bin 0 -> 165427 bytes 6 files changed, 128 insertions(+), 469 deletions(-) create mode 100644 src/Server/wwwroot/img/mistox-logo.png diff --git a/src/Client/src/app/app.css b/src/Client/src/app/app.css index f1af6a0..9813ec3 100644 --- a/src/Client/src/app/app.css +++ b/src/Client/src/app/app.css @@ -1,200 +1,87 @@ -.navbar-toggler { - background-color: var(--Mistox-Dark); - color: var(--Mistox-White); - width: 100%; - height: 40px; - border: none; - font-size: 20px; - transition-duration: 0.5s; -} - - .navbar-toggler:hover { - background-color: #410a04; - } - -.top-row { - background-color: var(--Mistox-Offset); - height: 200px; -} - -.bottom-row { - height: calc(100% - 200px); - background: linear-gradient(0deg, var(--Mistox-Dark), var(--Mistox-Offset) ); -} - -.navbar-brand img { - width: 200px; - height: 200px; - padding: 0 25px; -} - -.oi { - width: 2rem; - font-size: 1.1rem; - color: var(--Mistox-White); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; - text-decoration: none; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item a { - color: var(--Mistox-White); - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - transition-duration: 0.5s; - text-decoration: none; - padding-left: 20px; - } - -.nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: var(--Mistox-White); -} - -.nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: var(--Mistox-White); -} - -.nav-login { - position: relative; - bottom: 10px; - left: 10px; - width: calc(100% - 20px); - padding-top: 10px; -} - -.collapse { - display: none; -} - -.nav-login-button { - display: inline-block; - width: calc(50% - 2.5px); - background-color: transparent; - border-radius: 5px; - border-color: transparent; - color: var(--Mistox-White); - transition-duration: 0.5s; - padding: 5px 0; - padding-top: 9px; - text-align: center; - text-decoration: none; - font-size: 15; -} - - .nav-login-button:hover { - background-color: #FFFFFF50; - } - -article{ - padding: 0 !important; -} - -.page { - position: relative; +.top-bar { display: flex; - flex-direction: column; - background-color: var(--Mistox-Black); + width: 100%; + height: 200px; + background: linear-gradient(0deg,#99999988, #000000FF); + backdrop-filter: blur(2px); } -body{ - background-color: var(--Mistox-Black); +.top-bar-logo { + width: 180px; + height: 180px; + margin: 10px } -main { - flex: 1; - background-color: var(--Mistox-Black); +.top-bar-buttons { + display: flex; + width: calc(50% - 110px); + height: 180px; + margin: 10px; +} + +.flex-right { + justify-content: end; +} + +.nav-button { + height: 15px; + width: 150px; + border-radius: 5px; + margin: 20px; + text-align: center; + padding: 15px 0; + transition: 0.5s; + background-color: #00000000; + border: 1px solid var(--Mistox-White); + color: var(--Mistox-White); + text-decoration: none; +} + + .nav-button:hover { + background-color: var(--Mistox-Black); + } + +.content { + width: 100%; + min-height: calc(100vh - 400px); +} + +.bottom-bar { + display: flex; + width: 100%; + height: 200px; + background: linear-gradient(180deg,#99999988, #000000FF); + backdrop-filter: blur(2px); +} + +.nav-button-bottom { + height: 15px; + width: 150px; + border-radius: 5px; + text-align: center; + padding: 5px 0; + transition: 0.5s; + background-color: #00000000; + text-decoration: none; +} + + .nav-button:hover { + color: var(--Mistox-Bright); + } + +.bottom-bar-logo { + width: 80px; + height: 80px; + padding: 0 50px; + padding-top: 100px; +} + +.bottom-bar-float { + align-items: end; color: var(--Mistox-White); } -.sidebar { - border-right: var(--Mistox-Background) 2px solid; -} - -@media (max-width: 640.98px) { - .top-row:not(.auth) { - display: none; - } - - .top-row.auth { - justify-content: space-between; - } - - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - min-width: 250px; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { - flex: 1; - text-align: right; - width: 0; - } - - .navbar-toggler { - display: none; - } - - .collapse { - /* Never collapse the sidebar for wide screens */ - display: block !important; - } - - .nav-login { - position: absolute; - } - -} - -@media (max-width: 640px){ - - .navbar-brand img { - position: relative !important; - padding-left: calc(50% - 80px) !important; - height: 160px; - width: 160px; - } - - .top-gradient { - background: linear-gradient(0deg, var(--Mistox-Dark), var(--Mistox-Offset) ); - } - - .bottom-row { - background: var(--Mistox-Medium); - } - +.bottom-bar-padding { + color: var(--Mistox-White); + margin: 20px; } \ No newline at end of file diff --git a/src/Client/src/app/app.html b/src/Client/src/app/app.html index 7834107..818b487 100644 --- a/src/Client/src/app/app.html +++ b/src/Client/src/app/app.html @@ -1,63 +1,35 @@ - -
- -