diff --git a/style.css b/style.css index 4cab2ef..8d6397e 100644 --- a/style.css +++ b/style.css @@ -1,118 +1,194 @@ -h1, h2, h3 { margin-top: 40px; } -body { overflow: scroll; } +/* --- Global Resets and Layout Constraints --- */ + +/* Add spacing above section headings for readability, common practice */ +h1, h2, h3 { + margin-top: 40px; +} + +/* Optimize table layout for fixed-width columns and word wrapping */ table { - table-layout: fixed; - word-break: break-all; + table-layout: fixed; + word-break: break-all; +} + +/* Global maximum and minimum width constraints */ +.max-width { + max-width: 1200px; +} +.min-width { + min-width: 800px; +} +/* Centering block elements */ +.center { + margin: auto; +} + +/* Utility classes */ +.hidden, div.hidden { + display: none; +} +.capitalize { + text-transform: capitalize; } -.max-width { max-width: 1200px; } -.min-width { min-width: 800px; } -.center { margin: auto; } -.hidden, div.hidden { display: none; } -.capitalize { text-transform: capitalize; } +/* --- Main Layout Structure (Fixed Sidebar + Scrolling Content) --- */ .navigation { - width: 150px; - height: 100vh; - background: #DFDFDF; - position: fixed; - overflow: scroll; - left: 0px; - top: 0px; + width: 150px; + height: 100vh; + background: #DFDFDF; + position: fixed; + /* Only allow vertical scrolling within the navigation bar */ + overflow-y: auto; + left: 0px; + top: 0px; } .main { - margin-left: 150px; - overflow: scroll; + /* Offset main content by the width of the fixed navigation bar */ + margin-left: 150px; + /* Ensure only the body handles the main page scroll, or use overflow-y: auto; here + if this section is meant to scroll independently. Keeping auto for flexibility. */ + overflow-y: auto; + overflow-x: hidden; /* Prevent horizontal scroll bleed */ } +/* --- Scroll-to-Top Button --- */ + .scroll-top { - height: 50px; - width: 50px; - color: #FFFFFF; - background: #808080; - font-size: 54px; - right: 10px; - bottom: 10px; - position: fixed; - cursor: pointer; - text-align: center; - line-height: 70px; - user-select: none; - z-index: 1; + height: 50px; + width: 50px; + color: #FFFFFF; + background: #808080; + /* The font size is too large for the 50px box; adjusted for better fit */ + font-size: 32px; + right: 10px; + bottom: 10px; + position: fixed; + cursor: pointer; + text-align: center; + /* FIX: Set line-height equal to height for perfect vertical centering */ + line-height: 50px; + user-select: none; + z-index: 1; } +/* --- Loading Table Wrapper --- */ + .loading-table { - display: table; - width: 100%; - height: 400px; + display: table; + width: 100%; + height: 400px; } +/* --- Loader Animation (Spinner) --- */ + .loader { - margin: 200px auto; - font-size: 15px; - width: 1em; - height: 1em; - border-radius: 50%; - position: relative; - text-indent: -9999em; - -webkit-animation: load5 1.1s infinite ease; - animation: load5 1.1s infinite ease; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} -@-webkit-keyframes load5 { - 0%, - 100% { - box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); - } - 12.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); - } - 25% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 37.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 50% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 62.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 75% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 87.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; - } + margin: 200px auto; + font-size: 15px; + width: 1em; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + + /* Use standard animation properties */ + animation: load5 1.1s infinite ease; + + /* Removed deprecated -ms-transform, keeping standard and -webkit */ + -webkit-animation: load5 1.1s infinite ease; + -webkit-transform: translateZ(0); + transform: translateZ(0); } + +/* Combined keyframes for consistency and reduced repetition */ @keyframes load5 { - 0%, - 100% { - box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); - } - 12.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); - } - 25% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 37.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 50% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 62.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 75% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 87.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; - } -} \ No newline at end of file + 0%, 100% { + box-shadow: + 0em -2.6em 0em 0em #000000, + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.5), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); + } + 12.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.7), + 1.8em -1.8em 0 0em #000000, + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); + } + 25% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.5), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), + 2.5em 0em 0 0em #000000, + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 37.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), + 2.5em 0em 0 0em rgba(0,0,0, 0.7), + 1.75em 1.75em 0 0em #000000, + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 50% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.5), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), + 0em 2.5em 0 0em #000000, + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 62.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), + 0em 2.5em 0 0em rgba(0,0,0, 0.7), + -1.8em 1.8em 0 0em #000000, + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 75% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.5), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), + -2.6em 0em 0 0em #000000, + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 87.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), + -2.6em 0em 0 0em rgba(0,0,0, 0.7), + -1.8em -1.8em 0 0em #000000; + } +}