diff --git a/index.html b/index.html index 0059439..9334998 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,13 @@ - + - OpenShift React Test + Container React Test -
+
+ diff --git a/src/App.jsx b/src/App.jsx index a9f6c6d..59d80ff 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,11 +5,13 @@ import Home from './Home' import About from './About' import Contact from './Contact' import Footer from './Footer' +import UConnHeader from './UConnHeader'; function App() { return ( <> + } /> diff --git a/src/App.scss b/src/App.scss index 2edaeba..a3d7440 100644 --- a/src/App.scss +++ b/src/App.scss @@ -5,13 +5,6 @@ body { background-color: #aaa; } -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - width: 1200%; -} - .logo { height: 25em; padding: 1.5em; @@ -42,7 +35,6 @@ body { color: #888; } - //nav Nav { z-index: 1000; diff --git a/src/Footer.jsx b/src/Footer.jsx index 813a841..3a696d4 100644 --- a/src/Footer.jsx +++ b/src/Footer.jsx @@ -3,7 +3,7 @@ function Footer() { return ( <>
-

© 2024 Anyone

+

© 2024 Anyone

) diff --git a/src/Home.jsx b/src/Home.jsx index e180437..4288a65 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -5,19 +5,23 @@ function App() { const [count, setCount] = useState(0) return ( - <> -
- UConn Oak Logo -
-

Hello!

-
-
- +
+
+
+
+ UConn Oak Logo +
+

Hello!

+
+
+ +
+
- +
) } diff --git a/src/UConnHeader.jsx b/src/UConnHeader.jsx new file mode 100644 index 0000000..f60d5ae --- /dev/null +++ b/src/UConnHeader.jsx @@ -0,0 +1,65 @@ +import './UConnHeader.scss'; + +function UConnHeader(){ + + return ( + + + ); +} + +export default UConnHeader diff --git a/src/UConnHeader.scss b/src/UConnHeader.scss new file mode 100644 index 0000000..d641f48 --- /dev/null +++ b/src/UConnHeader.scss @@ -0,0 +1,889 @@ +#wordmark, +#university-of-connecticut, +#super-title { + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +#uconn-banner article, +#uconn-banner aside, +#uconn-banner details, +#uconn-banner figcaption, +#uconn-banner figure, +#uconn-banner footer, +#uconn-banner header, +#uconn-banner hgroup, +#uconn-banner nav, +#uconn-banner section, +#uconn-banner summary { + display: block +} + +#uconn-banner audio, +#uconn-banner canvas, +#uconn-banner video { + display: inline-block +} + +#uconn-banner audio:not([controls]) { + display: none; + height: 0 +} + +#uconn-banner [hidden], +#uconn-banner template { + display: none +} + +#uconn-banner html { + background: #fff; + color: #000; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100% +} + +#uconn-banner html, +#uconn-banner button, +#uconn-banner input, +#uconn-banner select, +#uconn-banner textarea { + font-family: sans-serif +} + +#uconn-banner body { + margin: 0 +} + +#uconn-banner a { + background: transparent +} + +#uconn-banner a:focus { + outline: thin dotted +} + +#uconn-banner a:hover, +#uconn-banner a:active { + outline: 0 +} + +#uconn-banner h1 { + font-size: 2em; + margin: 0.67em 0 +} + +#uconn-banner h2 { + font-size: 1.5em; + margin: 0.83em 0 +} + +#uconn-banner h3 { + font-size: 1.17em; + margin: 1em 0 +} + +#uconn-banner h4 { + font-size: 1em; + margin: 1.33em 0 +} + +#uconn-banner h5 { + font-size: .83em; + margin: 1.67em 0 +} + +#uconn-banner h6 { + font-size: .75em; + margin: 2.33em 0 +} + +#uconn-banner abbr[title] { + border-bottom: 1px dotted +} + +#uconn-banner b, +#uconn-banner strong { + font-weight: bold +} + +#uconn-banner dfn { + font-style: italic +} + +#uconn-banner mark { + background: #ff0; + color: #000 +} + +#uconn-banner code, +#uconn-banner kbd, +#uconn-banner pre, +#uconn-banner samp { + font-family: monospace, serif; + font-size: 1em +} + +#uconn-banner pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word +} + +#uconn-banner q { + quotes: "\201C" "\201D" "\2018" "\2019" +} + +#uconn-banner q:before, +#uconn-banner q:after { + content: ''; + content: none +} + +#uconn-banner small { + font-size: 80% +} + +#uconn-banner sub, +#uconn-banner sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +#uconn-banner sup { + top: -0.5em +} + +#uconn-banner sub { + bottom: -0.25em +} + +#uconn-banner img { + border: 0 +} + +#uconn-banner svg:not(:root) { + overflow: hidden +} + +#uconn-banner figure { + margin: 0 +} + +#uconn-banner fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em +} + +#uconn-banner legend { + border: 0; + padding: 0; + white-space: normal +} + +#uconn-banner button, +#uconn-banner input, +#uconn-banner select, +#uconn-banner textarea { + font-family: inherit; + font-size: 100%; + margin: 0; + vertical-align: baseline +} + +#uconn-banner button, +#uconn-banner input { + line-height: normal +} + +#uconn-banner button, +#uconn-banner select { + text-transform: none +} + +#uconn-banner button, +#uconn-banner html input[type="button"], +#uconn-banner input[type="reset"], +#uconn-banner input[type="submit"] { + -webkit-appearance: button; + cursor: pointer +} + +#uconn-banner button[disabled], +#uconn-banner input[disabled] { + cursor: default +} + +#uconn-banner input[type="checkbox"], +#uconn-banner input[type="radio"] { + box-sizing: border-box; + padding: 0 +} + +#uconn-banner input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box +} + +#uconn-banner input[type="search"]::-webkit-search-cancel-button, +#uconn-banner input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none +} + +#uconn-banner button::-moz-focus-inner, +#uconn-banner input::-moz-focus-inner { + border: 0; + padding: 0 +} + +#uconn-banner textarea { + overflow: auto; + vertical-align: top +} + +#uconn-banner table { + border-collapse: collapse; + border-spacing: 0 +} + +#uconn-banner a:link, +#uconn-banner a:hover, +#uconn-banner a:visited { + text-decoration: none +} + +@font-face { + font-family: "UConn"; + src: url("./assets/fonts/uconn.eot"); + src: url("./assets/fonts/uconn.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/uconn.svg#uconnregular") format("svg"), url("./assets/fonts/uconn.woff") format("woff"), url("./assets/fonts/uconn.ttf") format("truetype"); + font-weight: normal; + font-style: normal +} + +@font-face { + font-family: "Proxima Nova"; + src: url("./assets/fonts/proximanova-bold-webfont.eot"); + src: url("./assets/fonts/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/proximanova-bold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("./assets/fonts/proximanova-bold-webfont.woff") format("woff"), url("./assets/fonts/proximanova-bold-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: normal +} + +@font-face { + font-family: "Proxima Nova"; + src: url("./assets/fonts/ProximaNova-BoldIt-webfont.eot"); + src: url("./assets/fonts/ProximaNova-BoldIt-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/ProximaNova-BoldIt-webfont.svg#proxima_novabold_italic") format("svg"), url("./assets/fonts/ProximaNova-BoldIt-webfont.woff") format("woff"), url("./assets/fonts/ProximaNova-BoldIt-webfont.ttf") format("truetype"); + font-weight: bold; + font-style: italic +} + +@font-face { + font-family: "Proxima Nova"; + src: url("./assets/fonts/ProximaNova-Sbold-webfont.eot"); + src: url("./assets/fonts/ProximaNova-Sbold-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold") format("svg"), url("./assets/fonts/ProximaNova-Sbold-webfont.woff") format("woff"), url("./assets/fonts/ProximaNova-Sbold-webfont.ttf") format("truetype"); + font-weight: 500; + font-style: normal +} + +@font-face { + font-family: "Proxima Nova"; + src: url("./assets/fonts/ProximaNova-Reg-webfont.eot"); + src: url("./assets/fonts/ProximaNova-Reg-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular") format("svg"), url("./assets/fonts/ProximaNova-Reg-webfont.woff") format("woff"), url("./assets/fonts/ProximaNova-Reg-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: normal +} + +@font-face { + font-family: "Proxima Nova"; + src: url("./assets/fonts/ProximaNova-RegIt-webfont.eot"); + src: url("./assets/fonts/ProximaNova-RegIt-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic") format("svg"), url("./assets/fonts/ProximaNova-RegIt-webfont.woff") format("woff"), url("./assets/fonts/ProximaNova-RegIt-webfont.ttf") format("truetype"); + font-weight: normal; + font-style: italic +} + +#uconn-banner .banner-icon { + fill: white; + height: 100%; + pointer-events: none +} + +#uconn-banner .white .banner-icon { + fill: #000E2F +} + +#uconn-banner .row-container { + width: 100%; + margin: 0px auto; + box-sizing: border-box; + padding-top: 0.7rem; + padding-right: 1.9em !important; + padding-bottom: 0.7rem; + padding-left: 1.9em !important; +} + +@media(max-width:800px) { + #uconn-banner .row-container { + padding-left: 1em !important; + padding-right: 0.3em !important; + } +} + +#uconn-banner .row-fluid { + width: 100%; + display: table +} + +#uconn-banner .row-fluid>div { + display: table-cell; + vertical-align: inherit; + float: none +} + +@media screen and (min-width: 50em) { + #uconn-banner .row-fluid>div { + vertical-align: middle + } +} + +#home-link-container { + width: 60% +} + +#uconn-header-container { + background-color: #000E2F; + color: #fff +} + +#uconn-header-container .btn { + color: #c1e8f8 +} + +#uconn-header-container.white { + background-color: #fff +} + +#home-link { + height: 20px; + overflow: hidden +} + +#home-link:hover { + text-decoration: none; + color: #eee +} + +#home-link span { + margin: auto 0; + vertical-align: middle +} + +#site-header { + padding: 30px 0 15px 0 +} + +#site-header .row-fluid>div { + width: 50% +} + +#university-of-connecticut { + font-family: "Proxima Nova", Arial, Helvetica, sans-serif; + color: #9faab2; + font-size: 18px; + letter-spacing: .055em; + word-spacing: .02em; + font-weight: bold; + font-style: normal; + line-height: normal; + display:inline; + text-transform: uppercase; + position: absolute; + left:-20000px; + } + +#site-abbreviation { + font-family: "Proxima Nova", Arial, Helvetica, sans-serif; + color: #9faab2; + font-size: 18px; + letter-spacing: .055em; + word-spacing: .02em; + font-weight: bold; + font-style: normal; + line-height: normal; + display: none; + text-transform: uppercase; +} + +#wordmark { + color: #fff; + font-family: "UConn", Arial, Helvetica, sans-serif; + font-size: 32px; + overflow: hidden; + letter-spacing: 3px; + text-transform: uppercase; + padding: 0px 5px 0 0 +} + +#university-of-connecticut { + border-left: 2px solid #3f4760; + color: #9faab2; + padding: 1px 0 0 10px +} + +@media (min-width: 768px) { + #university-of-connecticut { + display: inline; + position: relative; + left:0px; + } +} + +/* Keeps HEALTH in the mobile banner */ +.health #university-of-connecticut { + display: inline; + position: relative; + left:0px; +} + + +#site-abbreviation { + border: 0; + display: block; + line-height: 1; + padding: 0 0 9px 0 +} + +@media screen and (min-width: 768px) { + #site-abbreviation { + display: none + } +} + +.white #wordmark, +.white #university-of-connecticut, +.white #site-abbreviation { + color: #000E2F +} + +#uconn-banner #button-container, +#uconn-banner.alternative #button-container { + text-align: right; + position: relative +} + +#uconn-banner #button-container>.icon-container { + width: 32px; + height: 32px; + display: inline-block; + margin: 0px 2px; + padding: 0px; + vertical-align: middle; + white-space: nowrap +} + +#uconn-banner #button-container .btn { + display: block; + height: 100%; + width: 100%; + font-size: 21px; + text-align: center; + padding: inherit; + text-shadow: none; + line-height: normal +} + +#uconn-banner #button-container .btn [class*="icon-"] { + line-height: 32px +} + +#uconn-banner #uconn-search:hover+div:not(.popup-container), +#uconn-banner #uconn-search:focus+div:not(.popup-container), +#uconn-banner #uconn-az:hover+div:not(.popup-container), +#uconn-banner #uconn-az:focus+div:not(.popup-container) { + background-color: #ededed; + border-top: 1px solid #ededed; + color: #000e2f; + padding: 12px 16px; + position: absolute; + top: 46px; + transition: opacity 0.3s ease-in-out; + z-index: 1000 +} + +#uconn-banner #uconn-search:hover+div:not(.popup-container):before, +#uconn-banner #uconn-search:focus+div:not(.popup-container):before, +#uconn-banner #uconn-az:hover+div:not(.popup-container):before, +#uconn-banner #uconn-az:focus+div:not(.popup-container):before { + font-family: "Proxima Nova"; + font-size: 14px; + font-weight: bold +} + +#uconn-banner #uconn-search:hover+div:not(.popup-container):after, +#uconn-banner #uconn-search:focus+div:not(.popup-container):after, +#uconn-banner #uconn-az:hover+div:not(.popup-container):after, +#uconn-banner #uconn-az:focus+div:not(.popup-container):after { + border-color: transparent #ededed transparent transparent; + border-style: solid; + border-width: 10px 8px 10px 0px; + bottom: 39px; + content: ''; + position: absolute; + transform: rotate(90deg) +} + +#uconn-banner #uconn-search, +#uconn-banner #uconn-az, +#uconn-banner.alternative #button-container #uconn-search, +#uconn-banner.alternative #button-container #uconn-az { + position: relative +} + +#uconn-banner #uconn-search:before, +#uconn-banner #uconn-az:before, +#uconn-banner.alternative #button-container #uconn-search:before, +#uconn-banner.alternative #button-container #uconn-az:before { + content: ''; + position: absolute; + left: 0; + width: 100%; + height: 2px; + box-shadow: inset 0 2px 0 0 white; + transition: opacity 0.3s ease-in-out; + opacity: 0 +} + +#uconn-banner #uconn-search:hover:before, +#uconn-banner #uconn-az:hover:before, +#uconn-banner.alternative #button-container #uconn-search:hover:before, +#uconn-banner.alternative #button-container #uconn-az:hover:before, +#uconn-banner #uconn-search:focus:before, +#uconn-banner #uconn-az:focus:before, +#uconn-banner.alternative #button-container #uconn-search:focus:before, +#uconn-banner.alternative #button-container #uconn-az:focus:before { + opacity: 1 +} + +#uconn-banner .no-css { + left: -99999px; + position: absolute +} + +#uconn-banner #button-container .icon-container>div { + opacity: 0; + visibility: hidden +} + +#uconn-banner #uconn-search:before, +#uconn-banner #uconn-az:before { + bottom: 30px +} + +#uconn-banner #uconn-search:hover+div:not(.popup-container), +#uconn-banner #uconn-search:focus+div:not(.popup-container), +#uconn-banner #uconn-az:hover+div:not(.popup-container), +#uconn-banner #uconn-az:focus+div:not(.popup-container) { + transition: opacity 0.3s ease-in-out; + opacity: 1; + visibility: visible +} + +#uconn-banner #uconn-search-tooltip { + right: -14px +} + +#uconn-banner #uconn-search-tooltip:before { + content: '' +} + +#uconn-banner #uconn-search-tooltip:after { + right: 25px +} + +#uconn-banner #uconn-az-tooltip { + right: -9px +} + +#uconn-banner #uconn-az-tooltip:before { + content: '' +} + +#uconn-banner #uconn-az-tooltip:after { + right: 22px +} + +#uconn-banner #uconn-search:hover+#uconn-search-tooltip:before, +#uconn-banner #uconn-search:focus+#uconn-search-tooltip:before, +#uconn-banner #uconn-az:hover+#uconn-search-tooltip:before, +#uconn-banner #uconn-az:focus+#uconn-search-tooltip:before { + content: 'Search UConn' +} + +#uconn-banner #uconn-search:hover+#uconn-az-tooltip:before, +#uconn-banner #uconn-search:focus+#uconn-az-tooltip:before, +#uconn-banner #uconn-az:hover+#uconn-az-tooltip:before, +#uconn-banner #uconn-az:focus+#uconn-az-tooltip:before { + content: 'UConn A to Z Index' +} + +#uconn-banner.alternative #button-container button { + background-color: #000E2F +} + +#uconn-banner.alternative #button-container .icon-container { + position: relative +} + +#uconn-banner.alternative #button-container .popup-container { + position: absolute; + right: -6px; + top: 46px +} + +#uconn-banner.alternative #button-container .icon-container>div, +#uconn-banner.alternative #button-container .icon-container div { + opacity: 1; + visibility: visible +} + +#uconn-banner.alternative #button-container #uconn-search:before, +#uconn-banner.alternative #button-container #uconn-az:before { + /*top: 30px*/ +} + +#uconn-banner.alternative #banner-mobile-button[aria-expanded="false"] .menu-toggle-open { + display: inline-block +} + +#uconn-banner.alternative #banner-mobile-button[aria-expanded="false"] .menu-toggle-close { + display: none +} + +#uconn-banner.alternative #banner-mobile-button[aria-expanded="true"] .menu-toggle-open { + display: none +} + +#uconn-banner.alternative #banner-mobile-button[aria-expanded="true"] .menu-toggle-close { + display: inline-block +} + +#uconn-banner.alternative.no-js .icon-container:focus-within div { + display: block +} + +@media screen and (min-width: 768px) { + #uconn-banner.alternative #icon-container-mobile-menu { + display: none + } +} + +#uconn-banner .white #button-container #banner-mobile-button, +#uconn-banner.alternative .white #button-container #banner-mobile-button { + background-color: #ffffff +} + +#uconn-banner .white #button-container #uconn-search, +#uconn-banner .white #button-container #uconn-az, +#uconn-banner.alternative .white #button-container #uconn-search, +#uconn-banner.alternative .white #button-container #uconn-az { + background-color: #ffffff +} + +#uconn-banner .white #button-container #uconn-search:hover:before, +#uconn-banner .white #button-container #uconn-search:focus:before, +#uconn-banner .white #button-container #uconn-az:hover:before, +#uconn-banner .white #button-container #uconn-az:focus:before, +#uconn-banner.alternative .white #button-container #uconn-search:hover:before, +#uconn-banner.alternative .white #button-container #uconn-search:focus:before, +#uconn-banner.alternative .white #button-container #uconn-az:hover:before, +#uconn-banner.alternative .white #button-container #uconn-az:focus:before { + box-shadow: inset 0 2px 0 0 #000e2f +} + +#super-title { + font-size: 13px; + margin: 0 !important; + padding: 0 +} + +#super-title a:link, +#super-title a:visited { + color: #868695; + font-family: "Proxima Nova", Arial, Helvetica, sans-serif; + font-weight: normal; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 5px +} + +#search-container { + text-align: right +} + +#search-container #button-container .btn-primary { + background: #e9e9e9 +} + +#site-search { + margin: 0px +} + +.popup-container:before { + content: ''; + background-color: transparent; + border-color: transparent #546688 transparent transparent; + border-style: solid; + border-width: 10px 8px 10px 0px; + display: block; + position: absolute; + right: 18px; + top: -14px; + transform: rotateZ(90deg) +} + +.popup-container { + background-color: #546688; + display: none; + line-height: 0 +} + +.popup-container hr { + border-top: 1px solid #6f84a9; + margin: 0 +} + +.popup-container.banner-popup-active { + display: block +} + +#a-z-popup .form-wrapper form, +#search-popup .form-wrapper form { + color: #000E2F; + position: relative +} + +#a-z-popup .form-wrapper input, +#search-popup .form-wrapper input { + border: 0; + border-radius: 0; + color: #000E2F; + font-size: 14px; + margin: 16px 20px; + padding: 8px 60px 6px 6px; + -webkit-appearance: none +} + +#a-z-popup .form-wrapper input::placeholder, +#search-popup .form-wrapper input::placeholder { + color: #000E2F; + opacity: 1 +} + +#a-z-popup .form-wrapper button, +#search-popup .form-wrapper button { + border: 0; + background-color: transparent !important; + height: 100%; + position: absolute; + right: 18px +} + +#a-z-popup .form-wrapper svg, +#search-popup .form-wrapper svg { + fill: #000E2F +} + +#a-z-popup .link-wrapper a, +#search-popup .link-wrapper a { + color: white; + display: inline-block; + position: relative; + text-align: center; + width: 100% +} + +#a-z-popup .link-wrapper a:hover, +#a-z-popup .link-wrapper a:focus, +#search-popup .link-wrapper a:hover, +#search-popup .link-wrapper a:focus { + background-color: #2e3d5b; + color: #ffffff +} + +#a-z-popup .search-link-wrapper a, +#search-popup .search-link-wrapper a { + padding: 26px 10px 26px 26px +} + +#a-z-popup .search-link-wrapper .banner-search-text, +#search-popup .search-link-wrapper .banner-search-text { + display: inline-block +} + +#a-z-popup .search-link-wrapper .banner-search-icon, +#search-popup .search-link-wrapper .banner-search-icon { + position: absolute; + right: 10px; + top: 8px +} + +#a-z-popup .az-link-wrapper a, +#search-popup .az-link-wrapper a { + padding: 26px 46px; +} + +.ie7 #uconn-banner .row-fluid>div, +.lt-ie8 #uconn-banner .row-fluid>div { + display: block; + float: left; +} + +.ie7 #button-container, +.lt-ie8 #button-container { + height: 46px !important +} + +.lt-ie9 #uconn-banner .row-fluid { + white-space: nowrap +} + +.lt-ie9 #uconn-banner .row-fluid>div { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block +} + +.lt-ie9 #button-container { + width: 40%; + padding-top: 14px +} + +.lt-ie9 #home-link-container { + line-height: 60px +} + +.health #university-of-connecticut { + letter-spacing: 4px; + color: #fff; + border-left: none; + padding-left: 3px; + display: inline; +} + +#uconn-banner.alternative #uconn-header-container.health #uconn-search:hover+#uconn-az-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-search:focus+#uconn-az-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-az:hover+#uconn-az-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-az:focus+#uconn-az-tooltip:before { + content: 'UConn Health A to Z Index' +} + +#uconn-banner.alternative #uconn-header-container.health #uconn-search:hover+#uconn-search-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-search:focus+#uconn-search-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-header-container.health #uconn-az:hover+#uconn-search-tooltip:before, +#uconn-banner.alternative #uconn-header-container.health #uconn-az:focus+#uconn-search-tooltip:before { + content: 'Search UConn Health' +} \ No newline at end of file diff --git a/src/assets/banner.js b/src/assets/banner.js new file mode 100644 index 0000000..102e768 --- /dev/null +++ b/src/assets/banner.js @@ -0,0 +1,134 @@ +(function() { + + var banner = document.querySelector('#uconn-banner') + var buttonContainer = document.querySelector('#button-container') + var bannerButtons = document.querySelectorAll('#button-container button[aria-controls]') + var buttons = Array.prototype.slice.call(bannerButtons, 0) + var mobileToggle = document.getElementById('banner-mobile-button') + + if(mobileToggle != null){ + var mobileMenuId = mobileToggle.getAttribute('aria-controls') + } + if(mobileMenuId != null){ + var mobileMenu = document.getElementById(mobileMenuId) + } + + var ucBannerMenuStateEvent = new CustomEvent('ucBannerMenuState', { + detail: { isOpen: false }, + bubbles: true + }) + + banner.classList.remove('no-js') + + buttonContainer.addEventListener('click', clickHandler) + + function clickHandler(evt) { + if (evt.target.localName !== 'button') return + + toggleButtons(evt, buttons) + + document.addEventListener('click', closeHandler) + document.addEventListener('keydown', closeHandler) + } + + function closeHandler(evt) { + var buttonContainerEvent = buttonContainer.contains(evt.target) + var mobileMenuEvent = mobileMenu != null && mobileMenu.contains(evt.target) + var isIgnorableEvent = evt.type === 'click' || evt.type === 'keydown' ? true : false + + if (evt.which === 27) { + escapeKeyPressedToClose(evt, buttons) + } + + if (isIgnorableEvent && (buttonContainerEvent || mobileMenuEvent)) { + return + } else { + clickToClose(buttons) + } + + document.removeEventListener('click', closeHandler) + document.removeEventListener('keydown', closeHandler) + } + + function toggleButtons(evt, buttons) { + buttons.forEach(function (button) { + + var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false + + if (button === evt.target && button.nextElementSibling === null) { + toggleMenu(button) + } else if (button !== evt.target && button.nextElementSibling === null) { + closeMenu(button) + } else if (button === evt.target && button.nextElementSibling && isExpanded) { + collapse(button) + removeClass(button.nextElementSibling) + } else if (button === evt.target && button.nextElementSibling) { + expand(button) + addClass(button.nextElementSibling) + } else if (button !== evt.target && button.nextElementSibling) { + collapse(button) + removeClass(button.nextElementSibling) + } + }) + } + + function escapeKeyPressedToClose(evt, buttons) { + buttons.forEach(function(button) { + if (evt.target === document.querySelector('body') && button.nextElementSibling === null) { + closeMenu(button) + } else if (evt.target === document.querySelector('body') && button.nextElementSibling) { + collapse(button) + removeClass(button.nextElementSibling) + } + }) + } + + function clickToClose(buttons) { + buttons.forEach(function (button) { + if (button.nextElementSibling === null) { + closeMenu(button) + } else { + collapse(button) + removeClass(button.nextElementSibling) + } + }) + } + + function toggleMenu(button) { + var toggleText = document.querySelector('#menu-toggle-text') + var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false + ucBannerMenuStateEvent.detail.isOpen = !isExpanded + button.dispatchEvent(ucBannerMenuStateEvent) + if (!isExpanded) { + expand(button) + toggleText.textContent = 'close' + } else { + collapse(button) + toggleText.textContent = 'open' + } + return true + } + + function closeMenu(button) { + collapse(button) + ucBannerMenuStateEvent.detail.isOpen = false + button.dispatchEvent(ucBannerMenuStateEvent) + return true + } + + function addClass(el) { + el.classList.add('banner-popup-active') + } + + function removeClass(el) { + el.classList.remove('banner-popup-active') + } + + function expand(el) { + el.setAttribute('aria-expanded', 'true') + } + + function collapse(el) { + el.setAttribute('aria-expanded', 'false') + } + })() \ No newline at end of file diff --git a/src/assets/fonts/ProximaNova-Bold-webfont.woff b/src/assets/fonts/ProximaNova-Bold-webfont.woff new file mode 100644 index 0000000..24d9510 Binary files /dev/null and b/src/assets/fonts/ProximaNova-Bold-webfont.woff differ diff --git a/src/assets/fonts/ProximaNova-BoldIt-webfont.eot b/src/assets/fonts/ProximaNova-BoldIt-webfont.eot new file mode 100644 index 0000000..98ea35e Binary files /dev/null and b/src/assets/fonts/ProximaNova-BoldIt-webfont.eot differ diff --git a/src/assets/fonts/ProximaNova-BoldIt-webfont.svg b/src/assets/fonts/ProximaNova-BoldIt-webfont.svg new file mode 100644 index 0000000..2dc1363 --- /dev/null +++ b/src/assets/fonts/ProximaNova-BoldIt-webfont.svg @@ -0,0 +1,638 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/ProximaNova-BoldIt-webfont.ttf b/src/assets/fonts/ProximaNova-BoldIt-webfont.ttf new file mode 100644 index 0000000..3bfbff7 Binary files /dev/null and b/src/assets/fonts/ProximaNova-BoldIt-webfont.ttf differ diff --git a/src/assets/fonts/ProximaNova-BoldIt-webfont.woff b/src/assets/fonts/ProximaNova-BoldIt-webfont.woff new file mode 100644 index 0000000..c0dbf81 Binary files /dev/null and b/src/assets/fonts/ProximaNova-BoldIt-webfont.woff differ diff --git a/src/assets/fonts/ProximaNova-Reg-webfont.svg b/src/assets/fonts/ProximaNova-Reg-webfont.svg new file mode 100644 index 0000000..d184356 --- /dev/null +++ b/src/assets/fonts/ProximaNova-Reg-webfont.svg @@ -0,0 +1,555 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/ProximaNova-Reg-webfont.ttf b/src/assets/fonts/ProximaNova-Reg-webfont.ttf new file mode 100644 index 0000000..8e18506 Binary files /dev/null and b/src/assets/fonts/ProximaNova-Reg-webfont.ttf differ diff --git a/src/assets/fonts/ProximaNova-Reg-webfont.woff b/src/assets/fonts/ProximaNova-Reg-webfont.woff new file mode 100644 index 0000000..b3f8f81 Binary files /dev/null and b/src/assets/fonts/ProximaNova-Reg-webfont.woff differ diff --git a/src/assets/fonts/ProximaNova-RegIt-webfont.eot b/src/assets/fonts/ProximaNova-RegIt-webfont.eot new file mode 100644 index 0000000..3aab20b Binary files /dev/null and b/src/assets/fonts/ProximaNova-RegIt-webfont.eot differ diff --git a/src/assets/fonts/ProximaNova-RegIt-webfont.svg b/src/assets/fonts/ProximaNova-RegIt-webfont.svg new file mode 100644 index 0000000..28e81f4 --- /dev/null +++ b/src/assets/fonts/ProximaNova-RegIt-webfont.svg @@ -0,0 +1,578 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/ProximaNova-RegIt-webfont.ttf b/src/assets/fonts/ProximaNova-RegIt-webfont.ttf new file mode 100644 index 0000000..c05d4c9 Binary files /dev/null and b/src/assets/fonts/ProximaNova-RegIt-webfont.ttf differ diff --git a/src/assets/fonts/ProximaNova-RegIt-webfont.woff b/src/assets/fonts/ProximaNova-RegIt-webfont.woff new file mode 100644 index 0000000..81c063f Binary files /dev/null and b/src/assets/fonts/ProximaNova-RegIt-webfont.woff differ diff --git a/src/assets/fonts/ProximaNova-Sbold-webfont.eot b/src/assets/fonts/ProximaNova-Sbold-webfont.eot new file mode 100644 index 0000000..84ed03e Binary files /dev/null and b/src/assets/fonts/ProximaNova-Sbold-webfont.eot differ diff --git a/src/assets/fonts/ProximaNova-Sbold-webfont.svg b/src/assets/fonts/ProximaNova-Sbold-webfont.svg new file mode 100644 index 0000000..2c834ab --- /dev/null +++ b/src/assets/fonts/ProximaNova-Sbold-webfont.svg @@ -0,0 +1,555 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/ProximaNova-Sbold-webfont.ttf b/src/assets/fonts/ProximaNova-Sbold-webfont.ttf new file mode 100644 index 0000000..b173d4e Binary files /dev/null and b/src/assets/fonts/ProximaNova-Sbold-webfont.ttf differ diff --git a/src/assets/fonts/ProximaNova-Sbold-webfont.woff b/src/assets/fonts/ProximaNova-Sbold-webfont.woff new file mode 100644 index 0000000..6bf44cf Binary files /dev/null and b/src/assets/fonts/ProximaNova-Sbold-webfont.woff differ diff --git a/src/assets/fonts/proximanova-bold-webfont.woff.1 b/src/assets/fonts/proximanova-bold-webfont.woff.1 new file mode 100644 index 0000000..b412f9c Binary files /dev/null and b/src/assets/fonts/proximanova-bold-webfont.woff.1 differ diff --git a/src/assets/fonts/uconn.eot b/src/assets/fonts/uconn.eot new file mode 100644 index 0000000..d6a6376 Binary files /dev/null and b/src/assets/fonts/uconn.eot differ diff --git a/src/assets/fonts/uconn.svg b/src/assets/fonts/uconn.svg new file mode 100644 index 0000000..ee64e7d --- /dev/null +++ b/src/assets/fonts/uconn.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/uconn.ttf b/src/assets/fonts/uconn.ttf new file mode 100644 index 0000000..42b96bd Binary files /dev/null and b/src/assets/fonts/uconn.ttf differ diff --git a/src/assets/fonts/uconn.woff b/src/assets/fonts/uconn.woff new file mode 100644 index 0000000..16109f5 Binary files /dev/null and b/src/assets/fonts/uconn.woff differ diff --git a/src/index.scss b/src/index.scss index ed1a3f8..e69de29 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,6 +0,0 @@ -body { - margin: 0; - display: flex; - place-items: top; - min-height: 100vh; -} \ No newline at end of file