diff --git a/myhpi/search/templates/search/search_result.html b/myhpi/search/templates/search/search_result.html index a5641f2f..738184b2 100644 --- a/myhpi/search/templates/search/search_result.html +++ b/myhpi/search/templates/search/search_result.html @@ -9,7 +9,7 @@
{{ result.title }}
{{ result.specific.date|date:"SHORT_DATE_FORMAT" }} - + {% if result.search_description %} {{ result.search_description }} {% else %} diff --git a/myhpi/static/img/myHPI-Logo-white.svg b/myhpi/static/img/myHPI-Logo-white.svg new file mode 100644 index 00000000..f8a26e0e --- /dev/null +++ b/myhpi/static/img/myHPI-Logo-white.svg @@ -0,0 +1,87 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/myhpi/static/scss/footer.scss b/myhpi/static/scss/footer.scss index d21ca4c1..19a03b87 100644 --- a/myhpi/static/scss/footer.scss +++ b/myhpi/static/scss/footer.scss @@ -1,5 +1,5 @@ .footer-myhpi { - background-color: var(--bs-gray-700); + background-color: var(--bs-gray-800); .page-content { padding-top: 1.5rem; diff --git a/myhpi/static/scss/myHPI.scss b/myhpi/static/scss/myHPI.scss index 6f71feeb..f05af9cd 100644 --- a/myhpi/static/scss/myHPI.scss +++ b/myhpi/static/scss/myHPI.scss @@ -5,20 +5,25 @@ $primary: #F5631E; $secondary: #F5631E; $body-bg: #F5F5F5; +$body-color-dark: white; +$body-color: black; + +$gray-100: #e9e9e9; +$gray-200: #EEE; +$gray-300: #DDD; +$gray-400: #CCC; +$gray-500: #BBB; +$gray-600: #999; +$gray-700: #777; +$gray-800: #555; +$gray-900: #333; // 3. Include remainder of required Bootstrap stylesheets @import "./bootstrap/variables"; @import "./bootstrap/mixins"; +@import "./bootstrap/maps"; -$custom-colors: ( - "gray-700": $gray-700, - "text-muted": $text-muted, - "border": #EEE, - "border-dark": #B2B2B2, - "body-bg-light": #FBFBFB, - "body-bg-overlay": #EEE -); -$colors: map-merge($colors, $custom-colors); +$color-mode-type: media-query; @import "./bootstrap/root"; @@ -62,10 +67,24 @@ $colors: map-merge($colors, $custom-colors); // 6. Add additional custom code here + + :root { + --bs-body-bg-overlay: var(--bs-gray-200); --bs-p-2: 0.5rem; --bs-p-4: 1rem; --myhpi-round-border: 2px; + --content-bg: white; + --bs-border-dark: var(--bs-gray-500); +} + +@include color-mode(dark) { + :root { + --bs-body-bg-overlay: var(--bs-gray-700); + --bs-breadcrumb-divider-color: var(--bs-gray-500); + --content-bg: var(--bs-dark-bg); + --bs-border-dark: var(--bs-gray-600); + } } a { @@ -121,7 +140,7 @@ p { a, a:hover { - color: var(--bs-text-muted); + color: var(--bs-body-color); text-decoration: none; } @@ -186,6 +205,10 @@ h1.side-panel-title::after { padding: 0; margin: -0.5rem -0.8rem; + .search-preview { + color: var(--bs-body-color); + } + .search-result { h5 { hyphens: auto; @@ -200,13 +223,13 @@ h1.side-panel-title::after { &:hover, &:focus-visible { - border-color: var(--bs-border); - background-color: var(--bs-body-bg-light); + border-color: var(--bs-border-dark); + background-color: var(--bs-light-bg-subtle); } &:active { border-color: var(--bs-border-dark); - background-color: var(--bs-body-bg-overlay); + background-color: var(--bs-light-bg-overlay); } } } @@ -328,3 +351,7 @@ img { padding: 3px; } } + +#page { + background-color: var(--content-bg) +} diff --git a/myhpi/static/scss/navbar.scss b/myhpi/static/scss/navbar.scss index d781f33e..bacb66ec 100644 --- a/myhpi/static/scss/navbar.scss +++ b/myhpi/static/scss/navbar.scss @@ -1,6 +1,8 @@ :root { --logo-width: 6.5rem; --logo-margin: 1rem; + --bs-nav-link-padding-x: 1rem; + --bs-nav-link-padding-y: 0.5rem; } .navbar-myhpi { @@ -20,13 +22,13 @@ .nav-link, .nav-link:focus { - color: var(--bs-gray-700); + color: var(--text-muted); } .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-expanded=true] { - color: var(--bs-dark); + color: var(--test-muted); } .nav-item-container { @@ -86,7 +88,7 @@ } .navbar-bottom { - background-color: var(--bs-body-bg-light); + background-color: var(--bs-light-bg-subtle); .nav-item-container { padding-left: var(--bs-p-4); @@ -107,13 +109,13 @@ .nav-link { transition: all 0.25s; border-radius: var(--myhpi-round-border); - border: solid 2px var(--bs-body-bg-light); + border: solid 2px transparent; } .nav-link:hover, .nav-link:focus-visible, .nav-link:active { - border-color: var(--bs-body-bg-overlay); + border-color: var(--bs-border-dark); background-color: var(--bs-body-bg-overlay); } @@ -213,4 +215,4 @@ transform: rotateZ(180deg) !important; } } -} \ No newline at end of file +} diff --git a/myhpi/templates/base.html b/myhpi/templates/base.html index 89e93ea5..7854e544 100644 --- a/myhpi/templates/base.html +++ b/myhpi/templates/base.html @@ -39,11 +39,15 @@ {% wagtailuserbar %} -
+
{% for message in messages %} diff --git a/tools/install_bootstrap.py b/tools/install_bootstrap.py index b4b62100..9e332207 100644 --- a/tools/install_bootstrap.py +++ b/tools/install_bootstrap.py @@ -8,7 +8,7 @@ TEMP_DIRECTORY = "tmp" ZIP_FILENAME = "bootstrap.zip" -VERSION = "5.0.2" +VERSION = "5.3.3" logger = logging.getLogger("myhpi_install_bootstrap")