diff --git a/static/css/about.css b/static/css/about.css index 454fdd1..9fdfcdf 100644 --- a/static/css/about.css +++ b/static/css/about.css @@ -1,24 +1,29 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; } + font-weight: bolder; +} @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; } + font-weight: bold; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; } + font-style: italic; +} .banner { height: 30vh; background-image: url("../images/cover-image.jpg"); @@ -26,123 +31,158 @@ background-repeat: no-repeat; display: flex; justify-content: center; - position: relative; } - .banner:after { - content: ''; - width: 100%; - height: 100%; - position: absolute; - background-color: rgba(64, 62, 65, 0.6); } - .banner h3 { - text-align: center; - align-self: center; - font-size: 36px; - color: white; - z-index: 1; } + position: relative; +} +.banner:after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(64, 62, 65, 0.6); +} +.banner h3 { + text-align: center; + align-self: center; + font-size: 36px; + color: white; + z-index: 1; +} .about-content { margin: 50px auto; line-height: 1.8; letter-spacing: 0.8px; color: #808285; - border-bottom: 1px solid #f1f1f1; } + border-bottom: 1px solid #f1f1f1; +} +.about-content .inner-container { + display: flex; + justify-content: space-between; + width: 90%; + margin: 0 auto; +} +@media screen and (max-width: 1024px) { .about-content .inner-container { - display: flex; - justify-content: space-between; - width: 90%; - margin: 0 auto; } - @media screen and (max-width: 1024px) { - .about-content .inner-container { - flex-direction: column; } } - .about-content .inner-container .description { - width: 60%; - align-self: center; - display: flex; - justify-content: space-between; - flex-direction: column; } - @media screen and (max-width: 1024px) { - .about-content .inner-container .description { - width: 100%; } } - .about-content .inner-container .description p { - width: 100%; } - .about-content .inner-container .description mark { - color: #28aae2; } - .about-content .inner-container .description .heading { - font-weight: bold; - font-size: 36px; - font-family: archivo-black; - color: #403e41; } + flex-direction: column; + } +} +.about-content .inner-container .description { + width: 60%; + align-self: center; + display: flex; + justify-content: space-between; + flex-direction: column; +} +@media screen and (max-width: 1024px) { + .about-content .inner-container .description { + width: 100%; + } +} +.about-content .inner-container .description p { + width: 100%; +} +.about-content .inner-container .description mark { + color: #28aae2; +} +.about-content .inner-container .description .heading { + font-weight: bold; + font-size: 36px; + font-family: archivo-black; + color: #403e41; +} +.about-content figure { + width: 37%; + align-self: center; + display: flex; + height: 50vh; +} +@media screen and (max-width: 1024px) { .about-content figure { - width: 37%; - align-self: center; - display: flex; - height: 50vh; } - @media screen and (max-width: 1024px) { - .about-content figure { - width: 100%; } } - .about-content figure img { - width: 100%; - align-self: center; - height: 100%; - object-fit: cover; - object-position: top; } + width: 100%; + } +} +.about-content figure img { + width: 100%; + align-self: center; + height: 100%; + object-fit: cover; + object-position: top; +} +.about-content p { + width: 90%; + margin: 0 auto 0; + padding-bottom: 50px; +} +@media screen and (max-width: 1024px) { .about-content p { - width: 90%; - margin: 0 auto 0; - padding-bottom: 50px; } - @media screen and (max-width: 1024px) { - .about-content p { - margin: 0 auto; } } - .about-content .features { - width: 90%; - margin: 20px auto; } - .about-content .features h3 { - margin-bottom: 10px; } - .about-content .features p { - width: 100%; - padding: 0; } - .about-content .features ul { - margin-bottom: 20px; - margin-left: 30px; } + margin: 0 auto; + } +} +.about-content .features { + width: 90%; + margin: 20px auto; +} +.about-content .features h3 { + margin-bottom: 10px; +} +.about-content .features p { + width: 100%; + padding: 0; +} +.about-content .features ul { + margin-bottom: 20px; + margin-left: 30px; +} #our-team { width: 90%; - margin: 30px auto 100px; } - #our-team h3 { - font-size: 36px; - color: #403e41; - text-align: center; - font-family: archivo-black; } - #our-team h3 marked { - color: #28aae2; - display: inline; } - #our-team marked { - color: #28aae2; - padding: 10px 0 0; - text-align: center; - display: block; - font-weight: bold; } - #our-team .owl-team { - margin: 50px 0; } - #our-team .section-container { - margin: 0 20px; } - #our-team figure { - width: 100%; - display: block; - margin: 0 auto; } - #our-team figure img { - width: 100%; } - #our-team p { - text-align: center; - margin-top: 10px; } - #our-team .owl-team-btn { - margin: 20px auto; - text-align: center; - padding: 20px 0; } - #our-team .owl-team-btn i { - font-size: 16px; - padding: 0 10px; - color: #28aae2; - cursor: pointer; } + margin: 30px auto 100px; +} +#our-team h3 { + font-size: 36px; + color: #403e41; + text-align: center; + font-family: archivo-black; +} +#our-team h3 marked { + color: #28aae2; + display: inline; +} +#our-team marked { + color: #28aae2; + padding: 10px 0 0; + text-align: center; + display: block; + font-weight: bold; +} +#our-team .owl-team { + margin: 50px 0; +} +#our-team .section-container { + margin: 0 20px; +} +#our-team figure { + width: 100%; + display: block; + margin: 0 auto; +} +#our-team figure img { + width: 100%; +} +#our-team p { + text-align: center; + margin-top: 10px; +} +#our-team .owl-team-btn { + margin: 20px auto; + text-align: center; + padding: 20px 0; +} +#our-team .owl-team-btn i { + font-size: 16px; + padding: 0 10px; + color: #28aae2; + cursor: pointer; +} /*# sourceMappingURL=about.css.map */ diff --git a/static/css/common.css b/static/css/common.css index 8ce37ba..c3aaa1f 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -1,44 +1,55 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; } + font-weight: bolder; +} @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; } + font-weight: bold; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; } + font-style: italic; +} *, *:before, *:after { -webkit-tap-highlight-color: transparent; - box-sizing: border-box; } + box-sizing: border-box; +} * { margin: 0; padding: 0; - box-sizing: border-box; } + box-sizing: border-box; +} a { color: inherit; - text-decoration: none; } + text-decoration: none; +} html, body { - font-family: open-sans; } - html.non-scrollable, body.non-scrollable { - overflow: hidden; } + font-family: open-sans; +} +html.non-scrollable, body.non-scrollable { + overflow: hidden; +} mark { - background-color: transparent; } + background-color: transparent; +} .temp-intro, .temp-intro-home, @@ -48,76 +59,97 @@ mark { justify-content: space-between; padding: 15px 0; color: #808285; - font-size: 14px; } + font-size: 14px; +} +.temp-intro .temp-name, +.temp-intro-home .temp-name, +#footer .temp-name { + margin-left: 125px; +} +@media screen and (max-width: 1024px) { .temp-intro .temp-name, - .temp-intro-home .temp-name, - #footer .temp-name { - margin-left: 125px; } - @media screen and (max-width: 1024px) { - .temp-intro .temp-name, - .temp-intro-home .temp-name, - #footer .temp-name { - margin-left: 20px; } } - .temp-intro .temp-name mark, - .temp-intro-home .temp-name mark, - #footer .temp-name mark { - color: white; - font-weight: bold; - letter-spacing: 0.8px; } +.temp-intro-home .temp-name, +#footer .temp-name { + margin-left: 20px; + } +} +.temp-intro .temp-name mark, +.temp-intro-home .temp-name mark, +#footer .temp-name mark { + color: white; + font-weight: bold; + letter-spacing: 0.8px; +} +.temp-intro .temp-social, +.temp-intro-home .temp-social, +#footer .temp-social { + display: flex; + margin-right: 125px; +} +@media screen and (max-width: 1024px) { .temp-intro .temp-social, - .temp-intro-home .temp-social, - #footer .temp-social { - display: flex; - margin-right: 125px; } - @media screen and (max-width: 1024px) { - .temp-intro .temp-social, - .temp-intro-home .temp-social, - #footer .temp-social { - margin-right: 20px; } } - .temp-intro .temp-social li, - .temp-intro-home .temp-social li, - #footer .temp-social li { - list-style: none; - align-self: center; - padding: 0 10px; - font-size: 12px; } +.temp-intro-home .temp-social, +#footer .temp-social { + margin-right: 20px; + } +} +.temp-intro .temp-social li, +.temp-intro-home .temp-social li, +#footer .temp-social li { + list-style: none; + align-self: center; + padding: 0 10px; + font-size: 12px; +} +.temp-intro small, +.temp-intro-home small, +#footer small { + font-size: 14px; +} +@media screen and (max-width: 1024px) { .temp-intro small, - .temp-intro-home small, - #footer small { - font-size: 14px; } - @media screen and (max-width: 1024px) { - .temp-intro small, - .temp-intro-home small, - #footer small { - display: block; - text-align: center; - padding: 5px 0; } } - .temp-intro small:first-child, - .temp-intro-home small:first-child, - #footer small:first-child { - margin-left: 125px; } - @media screen and (max-width: 1024px) { - .temp-intro small:first-child, - .temp-intro-home small:first-child, - #footer small:first-child { - margin: 0; } } - .temp-intro small:last-child, - .temp-intro-home small:last-child, - #footer small:last-child { - margin-right: 125px; } - @media screen and (max-width: 1024px) { - .temp-intro small:last-child, - .temp-intro-home small:last-child, - #footer small:last-child { - margin: 0; } } - .temp-intro small mark, - .temp-intro-home small mark, - #footer small mark { - color: #d2d4d5; } +.temp-intro-home small, +#footer small { + display: block; + text-align: center; + padding: 5px 0; + } +} +.temp-intro small:first-child, +.temp-intro-home small:first-child, +#footer small:first-child { + margin-left: 125px; +} +@media screen and (max-width: 1024px) { + .temp-intro small:first-child, +.temp-intro-home small:first-child, +#footer small:first-child { + margin: 0; + } +} +.temp-intro small:last-child, +.temp-intro-home small:last-child, +#footer small:last-child { + margin-right: 125px; +} +@media screen and (max-width: 1024px) { + .temp-intro small:last-child, +.temp-intro-home small:last-child, +#footer small:last-child { + margin: 0; + } +} +.temp-intro small mark, +.temp-intro-home small mark, +#footer small mark { + color: #d2d4d5; +} @media screen and (max-width: 1024px) { #footer { - display: block; } } + display: block; + } +} #page-header { height: 20vh; @@ -127,181 +159,243 @@ mark { left: 0; background-color: white; z-index: 100; - transition: height 500ms linear; } - @media screen and (max-width: 1024px) { - #page-header { - height: 10vh; } } - #page-header.minimize { + transition: height 500ms linear; +} +@media screen and (max-width: 1024px) { + #page-header { height: 10vh; - padding: 10px 0; } + } +} +#page-header.minimize { + height: 10vh; + padding: 10px 0; +} +#page-header .inner-header { + width: 90%; + display: flex; + justify-content: space-between; + margin: 0 auto; + align-self: center; +} +@media screen and (max-width: 1024px) { #page-header .inner-header { - width: 90%; - display: flex; - justify-content: space-between; - margin: 0 auto; - align-self: center; } - @media screen and (max-width: 1024px) { - #page-header .inner-header { - width: 100%; - justify-content: none; } } + width: 100%; + justify-content: none; + } +} +#page-header .temp-brand { + display: flex; + align-self: center; + width: auto; + justify-content: center; + cursor: pointer; +} +@media screen and (max-width: 1024px) { #page-header .temp-brand { - display: flex; - align-self: center; - width: auto; - justify-content: center; - cursor: pointer; } - @media screen and (max-width: 1024px) { - #page-header .temp-brand { - justify-content: unset; - width: calc(100% -55px); } } - #page-header .temp-brand figure { - margin-right: 15px; - width: 60px; - height: 60px; } - #page-header .temp-brand figure img { - width: 100%; - height: 100%; } - #page-header .temp-brand h1 { - font-size: 20px; - align-self: center; - letter-spacing: -0.65px; - font-family: 'Archivo Black', sans-serif; } - @media screen and (max-width: 1024px) { - #page-header .temp-brand h1 { - font-size: 15px; } } - #page-header .temp-brand h1 mark { - color: #28aae2; } + justify-content: unset; + width: calc(100% -55px); + } +} +#page-header .temp-brand figure { + margin-right: 15px; + width: 60px; + height: 60px; +} +#page-header .temp-brand figure img { + width: 100%; + height: 100%; +} +#page-header .temp-brand h1 { + font-size: 20px; + align-self: center; + letter-spacing: -0.65px; + font-family: "Archivo Black", sans-serif; +} +@media screen and (max-width: 1024px) { + #page-header .temp-brand h1 { + font-size: 15px; + } +} +#page-header .temp-brand h1 mark { + color: #28aae2; +} +#page-header #desktop-navigation-menu { + width: 55%; + align-self: center; + font-size: 16px; +} +@media screen and (max-width: 1024px) { #page-header #desktop-navigation-menu { - width: 55%; - align-self: center; - font-size: 16px; } - @media screen and (max-width: 1024px) { - #page-header #desktop-navigation-menu { - display: none; } } - #page-header #desktop-navigation-menu ul { - display: flex; - justify-content: space-between; } - #page-header #desktop-navigation-menu ul li { - list-style: none; - color: #808285; } - #page-header #desktop-navigation-menu ul li.active { - color: #28aae2; } - #page-header #mobile-hamburger-menu { display: none; - position: relative; - height: 25px; } - @media screen and (max-width: 1024px) { - #page-header #mobile-hamburger-menu { - width: 45px; } } - #page-header #mobile-hamburger-menu.active .icon-line { - transform: rotate(45deg) translate(2px, 10px); } - #page-header #mobile-hamburger-menu.active .icon-line:after { - transform: rotate(-95deg) translate(20px, 2px); } - #page-header #mobile-hamburger-menu.active .icon-line:before { - opacity: 0; } - @media screen and (max-width: 1024px) { - #page-header #mobile-hamburger-menu { - display: block; - align-self: center; } } - #page-header #mobile-hamburger-menu .icon-line { - display: inline-block; - width: 35px; - height: 5px; - background-color: black; - position: absolute; - transition: transform 500ms ease; } - #page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after { - content: ''; - display: inline-block; - width: 35px; - height: 5px; - position: absolute; } - #page-header #mobile-hamburger-menu .icon-line:before { - top: 200%; - background-color: #28aae2; - transition: opacity 500ms ease; } - #page-header #mobile-hamburger-menu .icon-line:after { - top: 400%; - background-color: black; - transition: transform 500ms ease; } + } +} +#page-header #desktop-navigation-menu ul { + display: flex; + justify-content: space-between; +} +#page-header #desktop-navigation-menu ul li { + list-style: none; + color: #808285; +} +#page-header #desktop-navigation-menu ul li.active { + color: #28aae2; +} +#page-header #mobile-hamburger-menu { + display: none; + position: relative; + height: 25px; +} +@media screen and (max-width: 1024px) { + #page-header #mobile-hamburger-menu { + width: 45px; + } +} +#page-header #mobile-hamburger-menu.active .icon-line { + transform: rotate(45deg) translate(2px, 10px); +} +#page-header #mobile-hamburger-menu.active .icon-line:after { + transform: rotate(-95deg) translate(20px, 2px); +} +#page-header #mobile-hamburger-menu.active .icon-line:before { + opacity: 0; +} +@media screen and (max-width: 1024px) { + #page-header #mobile-hamburger-menu { + display: block; + align-self: center; + } +} +#page-header #mobile-hamburger-menu .icon-line { + display: inline-block; + width: 35px; + height: 5px; + background-color: black; + position: absolute; + transition: transform 500ms ease; +} +#page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after { + content: ""; + display: inline-block; + width: 35px; + height: 5px; + position: absolute; +} +#page-header #mobile-hamburger-menu .icon-line:before { + top: 200%; + background-color: #28aae2; + transition: opacity 500ms ease; +} +#page-header #mobile-hamburger-menu .icon-line:after { + top: 400%; + background-color: black; + transition: transform 500ms ease; +} #mobile-nav-menu { - display: none; } - @media screen and (max-width: 1024px) { - #mobile-nav-menu { - display: block; - height: 0; - overflow: hidden; - position: sticky; - top: 10vh; - z-index: 5; - background-color: white; - transition: height 500ms ease; } - #mobile-nav-menu.show { - height: 90vh; } - #mobile-nav-menu.show ul { - margin-top: 50px; } - #mobile-nav-menu.show li { - opacity: 1; } - #mobile-nav-menu ul li { - list-style: none; - font-size: 36px; - text-align: center; - padding: 10px 0; - opacity: 0; - transition: opacity 500ms ease; } } + display: none; +} +@media screen and (max-width: 1024px) { + #mobile-nav-menu { + display: block; + height: 0; + overflow: hidden; + position: sticky; + top: 10vh; + z-index: 5; + background-color: white; + transition: height 500ms ease; + } + #mobile-nav-menu.show { + height: 90vh; + } + #mobile-nav-menu.show ul { + margin-top: 50px; + } + #mobile-nav-menu.show li { + opacity: 1; + } + #mobile-nav-menu ul li { + list-style: none; + font-size: 36px; + text-align: center; + padding: 10px 0; + opacity: 0; + transition: opacity 500ms ease; + } +} .temp-contact-info { background-color: #fafafa; border-top: 1px solid #d2d4d5; - color: #57595b; } + color: #57595b; +} +.temp-contact-info ul { + display: flex; + width: 80%; + margin: 0 auto; +} +@media screen and (max-width: 1024px) { .temp-contact-info ul { - display: flex; - width: 80%; - margin: 0 auto; } - @media screen and (max-width: 1024px) { - .temp-contact-info ul { - width: 100%; } } - .temp-contact-info ul .owl-item img { - width: 10%; } - .temp-contact-info ul li { - list-style: none; - border-left: 2px solid #d2d4d5; - font-size: 14px; - display: flex; - justify-content: center; - width: 35%; - padding: 20px 0; } - @media screen and (max-width: 1024px) { - .temp-contact-info ul li { - width: 40%; } - .temp-contact-info ul li .contact-content { - display: none; } - .temp-contact-info ul li img { - width: 35%; } - .temp-contact-info ul li.active { - width: 100%; } - .temp-contact-info ul li.active img { - width: 10%; } - .temp-contact-info ul li.active .contact-content { - display: block; } } - .temp-contact-info ul li:last-child { - border-right: 2px solid #d2d4d5; } - .temp-contact-info ul li img { - width: 10%; - align-self: center; } - @media screen and (max-width: 1024px) { - .temp-contact-info ul li img { - width: 30%; } } - .temp-contact-info ul li .contact-content { - margin-left: 20px; - color: #808285; } - .temp-contact-info ul li .contact-content span { - display: block; } - .temp-contact-info ul li .contact-content span:last-child { - color: #28aae2; } - .temp-contact-info ul li .contact-content a { - display: block; - color: #28aae2; } + width: 100%; + } +} +.temp-contact-info ul .owl-item img { + width: 10%; +} +.temp-contact-info ul li { + list-style: none; + border-left: 2px solid #d2d4d5; + font-size: 14px; + display: flex; + justify-content: center; + width: 35%; + padding: 20px 0; +} +@media screen and (max-width: 1024px) { + .temp-contact-info ul li { + width: 40%; + } + .temp-contact-info ul li .contact-content { + display: none; + } + .temp-contact-info ul li img { + width: 35%; + } + .temp-contact-info ul li.active { + width: 100%; + } + .temp-contact-info ul li.active img { + width: 10%; + } + .temp-contact-info ul li.active .contact-content { + display: block; + } +} +.temp-contact-info ul li:last-child { + border-right: 2px solid #d2d4d5; +} +.temp-contact-info ul li img { + width: 10%; + align-self: center; +} +@media screen and (max-width: 1024px) { + .temp-contact-info ul li img { + width: 30%; + } +} +.temp-contact-info ul li .contact-content { + margin-left: 20px; + color: #808285; +} +.temp-contact-info ul li .contact-content span { + display: block; +} +.temp-contact-info ul li .contact-content span:last-child { + color: #28aae2; +} +.temp-contact-info ul li .contact-content a { + display: block; + color: #28aae2; +} /*# sourceMappingURL=common.css.map */ diff --git a/static/css/custom_fonts.css b/static/css/custom_fonts.css index ab7ce3e..9c5805a 100644 --- a/static/css/custom_fonts.css +++ b/static/css/custom_fonts.css @@ -1,23 +1,28 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; } + font-weight: bolder; +} @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; } + font-weight: bold; +} @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; } + font-style: normal; +} @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; } + font-style: italic; +} /*# sourceMappingURL=custom_fonts.css.map */ diff --git a/static/css/home.css b/static/css/home.css index 562df26..1a0d819 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -616,6 +616,7 @@ section .description p { height: 200px; padding: 10px; transition: transform 500ms ease; + overflow: auto; } .toast.hide { transform: translateY(145px); diff --git a/static/files/notice-gbm-19.pdf b/static/files/notice-gbm-19.pdf new file mode 100644 index 0000000..55726b7 Binary files /dev/null and b/static/files/notice-gbm-19.pdf differ diff --git a/static/files/report-gbm-19.pdf b/static/files/report-gbm-19.pdf new file mode 100644 index 0000000..d91e77c Binary files /dev/null and b/static/files/report-gbm-19.pdf differ diff --git a/static/scss/home.scss b/static/scss/home.scss index 7f6fa66..e40ad5c 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -662,6 +662,7 @@ section { height: 200px; padding: 10px; transition: transform 500ms ease; + overflow: auto; &.hide { transform: translateY(145px); diff --git a/templates/home.html b/templates/home.html index 1a01a3e..955d410 100644 --- a/templates/home.html +++ b/templates/home.html @@ -10,26 +10,14 @@
ANNOUNCEMENTS
Welcome to BCB
-