diff --git a/PyBay/assets/js/countdown-timer.js b/PyBay/assets/js/countdown-timer.js index 550d9a3..f04812e 100644 --- a/PyBay/assets/js/countdown-timer.js +++ b/PyBay/assets/js/countdown-timer.js @@ -58,4 +58,4 @@ customElements.define('countdown-timer', CountdownTimer); // Optional: export for test or bundling purposes -export default CountdownTimer; \ No newline at end of file +export default CountdownTimer; diff --git a/PyBay/templates/layout.html b/PyBay/templates/layout.html index 732e56e..91dc3ad 100644 --- a/PyBay/templates/layout.html +++ b/PyBay/templates/layout.html @@ -33,14 +33,13 @@ - - + + + + - - + @@ -108,14 +107,11 @@ } /* Custom Nav Link Styles */ - .navbar-custom { - background-color: #4B8BBE; /* Python blue */ - } .nav-link { - color: #00749E; /* Python yellow */ + color: #FCD582; /* Python yellow */ font-weight: bold; - text-decoration: underline #00749E; + text-decoration: underline #FCD582; text-decoration-thickness: 3px; text-underline-offset: 10px; text-decoration-style: wavy; @@ -123,12 +119,12 @@ transition: text-decoration-color 1000ms; } .nav-link:hover { - color: #00749E; + color: #FCD582; text-decoration-color: #ff914d; border-radius: 5px; } .nav-link:active { - color: #00749E; + color: #FCD582; text-decoration-color: #ff914d; border-radius: 5px; @@ -254,52 +250,87 @@ clip-path: polygon(20% 0%, 0% 20%, 11% 52%, 0% 80%, 20% 100%, 49% 86%, 80% 100%, 100% 80%, 87% 50%, 100% 20%, 80% 0%, 45% 8%); } } + /* Match dropdown to navbar color and theme */ +.dropdown-menu { + background-color: #00749E; /* same golden yellow, slightly more opaque */ + border: none; + border-radius: 0; + box-shadow: none; + padding: 0.5rem 0; + font-weight: bold; +} + +/* Style the dropdown items to match nav-link styling */ +.dropdown-item { + color: rgba(252, 213, 130, 0.95) ; /* Python blue text */ + padding: 0.5rem 1.25rem; + text-decoration: underline #00749E; + text-decoration-thickness: 2px; + text-underline-offset: 6px; + text-decoration-style: wavy; + background-color: transparent; + transition: text-decoration-color 0.3s ease; +} + +.dropdown-item:hover, +.dropdown-item:focus { + background-color: rgba(255, 145, 77, 0.2); /* a soft orange glow */ + text-decoration-color: #ff914d; +} + +.dropdown-item:active { + background-color: rgba(255, 145, 77, 0.3); +} + -
-
- +
+
- - -
{% block outerbody %}
@@ -336,13 +367,9 @@ - - + - + + \ No newline at end of file diff --git a/PyBay/webpack/images/waves.png b/PyBay/webpack/images/waves.png new file mode 100644 index 0000000..f937cdd Binary files /dev/null and b/PyBay/webpack/images/waves.png differ diff --git a/PyBay/webpack/images/waves.svg b/PyBay/webpack/images/waves.svg new file mode 100644 index 0000000..e78375a --- /dev/null +++ b/PyBay/webpack/images/waves.svg @@ -0,0 +1,3 @@ + + + diff --git a/PyBay/webpack/js/main.js b/PyBay/webpack/js/main.js index eb7f995..d8749f2 100644 --- a/PyBay/webpack/js/main.js +++ b/PyBay/webpack/js/main.js @@ -1,5 +1,3 @@ // @ts-check -import "bootstrap"; - import '../../assets/js/countdown-timer.js'; \ No newline at end of file diff --git a/PyBay/webpack/scss/main.scss b/PyBay/webpack/scss/main.scss index c52bbd2..a909782 100644 --- a/PyBay/webpack/scss/main.scss +++ b/PyBay/webpack/scss/main.scss @@ -32,7 +32,7 @@ $code-bg: #f8eff3; body { padding: 0; - background: lighten($gray, 20) url(../images/mesh.png); + // background: lighten($gray, 20) url(../images/mesh.png); background-size: 256px 256px; } @@ -707,7 +707,7 @@ div.showcase { display: block; padding: 10px; margin: 15px 0; - background: lighten($gray, 20) url(../images/mesh.png); + // background: lighten($gray, 20) url(../images/mesh.png); background-size: 256px 256px; text-decoration: none; border-radius: 3px; @@ -1062,13 +1062,14 @@ iframe[src*="player.vimeo.com"]{ } .navbar-brand { - padding: 0px; /* firefox bug fix */ + padding: 8px; /* firefox bug fix */ } .navbar-brand>img { height: auto; /* height: 100% was causing logo image distortion on Safari and mobile devices */ - padding: 15px; /* firefox bug fix */ + padding: 8px; /* firefox bug fix */ width: auto; max-width: 240px; + max-height: 120px; } .icon-bar { @@ -1105,3 +1106,30 @@ countdown-timer .label { font-size: 0.8rem; color: #666; } +header.navbar-custom { + background: linear-gradient(135deg, #4BBEDC, hsl(195, 100%, 28%)) !important; + background-blend-mode: overlay; + background-size: cover; + background-repeat: no-repeat; + background-position: bottom; + z-index: 1055; + position: relative; + img { + background: url('../images/waves.png') repeat-x; + animation: wave-scroll 5s linear infinite; + background-size: cover; + width: 100%; + border-radius: 5px; + box-shadow: 0 0 6px fade-out($gray, 0.8); + } + @keyframes wave-scroll { + from { + background-position-x: 0; + } + to { + background-position-x: 1000px; + } +} +} + +// background-image: url(../images/waves.png), ; \ No newline at end of file