diff --git a/site/assets/styles/scss/about.scss b/site/assets/styles/scss/about.scss new file mode 100644 index 0000000..343f0a4 --- /dev/null +++ b/site/assets/styles/scss/about.scss @@ -0,0 +1,53 @@ +/* About */ +#about { + .container-fluid { + padding-left: 7vw; + padding-right: 7vw; + padding-top: 4rem; + } + .about-robot{ + text-align: center; + img{ + width: 65%; + } + } + .about-data{ + text-align: center; + img{ + width: 90%; + } + } + .top-buffer{ + margin-top: 26px; + } + .blue-grad { + background: no-repeat linear-gradient(137deg, #41F9EC, #44CAFC); + > div { + border: 1px solid #89F1DB; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + > p { + max-width: 20rem; + } + } + } + .img-fluid-box { + max-width: 75%; + height: auto; + } + hr { color: #C2CCDA; border-top: 6px solid; border-radius: .625rem !important; } + h3 { + font-size: 1.875rem; + } + .staff-photo { + width: 100%; + max-width: 330px; + height: auto; + margin-top: 6rem; + @media (max-width: 575.98px) { + margin-top: 4rem; + } + } +} diff --git a/site/assets/styles/scss/dashboard.scss b/site/assets/styles/scss/dashboard.scss new file mode 100644 index 0000000..771ac21 --- /dev/null +++ b/site/assets/styles/scss/dashboard.scss @@ -0,0 +1,39 @@ +/* Dashboard */ +#dashboard { + line-height: 1.5; + .container-fluid { + padding-left: 7vw; + padding-right: 7vw; + padding-top: 4rem; + } + .card-img-top { + height: 65%; + object-fit: cover; + // XL + @media(max-width: 1399.98px) { + height:60% + } + // LG + @media(max-width: 1199.98px) { + height:55% + } + // MD + @media(max-width: 991.98px) { + height:50% + } + // SM + @media(max-width: 767.98px) { + height:50% + } + // XS + @media(max-width: 575.98px) { + height:65% + } + } + .card:hover { + transform: scale(1.05); + } + .top-buffer{ + margin-top: 26px; + } +} diff --git a/site/assets/styles/scss/footer.scss b/site/assets/styles/scss/footer.scss new file mode 100644 index 0000000..3c10858 --- /dev/null +++ b/site/assets/styles/scss/footer.scss @@ -0,0 +1,66 @@ +footer { + background-color: #f5f7fa; + width: 100%; + color: var(--bs-body-color); + + .ogd-logo { + max-width: 367px; + width: 100%; + } + .fd-logo-wrapper{ + + a{ + text-decoration: none; + color: inherit; + padding: .35rem; + display: inline-block; + } + + font-size: 1.5rem; + vertical-align: middle; + + em{ + vertical-align: middle; + } + } + .uw-logo-wrapper{ + a{ + display: inline-block; + padding: .35rem; + } + } + .border-end{ + border-top-right-radius: .625rem !important; + border-bottom-right-radius: .625rem !important; + border-right-color: #DAE2EB !important; + border-right-width: 5px !important; + } + .vr-wrapper{ + text-align: center; + margin-left: -17px; + margin-right: -17px; + @media(max-width: 767.98px){ + display: none; + } + } + .vr{ + width: 5px; + color: #DAE2EB; + height: 100%; + border-radius: .625rem !important; + } + .btn-signup{ + background-color: var(--bs-body-color); + color: white; + font-weight: normal; + font-size: 12px; + + &:hover, &:focus { + color: var(--bs-body-color); + background-color: white; + border: 1px solid var(--bs-body-color); + font-size: 12px; + font-weight: normal; + } + } +} \ No newline at end of file diff --git a/site/assets/styles/scss/gamedata.scss b/site/assets/styles/scss/gamedata.scss new file mode 100644 index 0000000..c357ebb --- /dev/null +++ b/site/assets/styles/scss/gamedata.scss @@ -0,0 +1,267 @@ +/* Game Data page */ +#gamedata { + hr { color: #DAE2EB; border-top: 5px solid; border-radius: .625rem !important; } + &.container-fluid { + padding-left: 6vw; + padding-right: 6vw; + padding-top: 5rem; + } + .button-bar { + .btn { + border-width: 0; + &:not(:last-of-type) { + border-right-color: var(--bs-gray-300); + border-radius: 0; + border-width: 0 2px; + } + } + } + .stats { + padding: 1.5rem 4rem 1.5rem 1.5rem; + } + .card { + height: auto; + } + .month-nav-wrapper{ + @media (min-width: 576px){ + width: fit-content; + } + .btn { + width: 8rem; + } + } + #stats{ + font-weight: 600; + font-size: 1.2rem; + padding: .355rem; + + @media(max-width: 575.98px) { + margin-right: .08rem; + } + } + #pipelines { + + .pipelines-wrapper{ + background: #F6F7FA; + border-radius: .625rem !important; + width: fit-content; + + .pipelines-container{ + + padding-top: 18px; + padding-bottom: 36px; + margin-left: 18px; + margin-right: 25px; + + h3{ + margin-bottom: 0; + } + + .pipeline-segments-wrapper{ + + background: #F6F7FA linear-gradient(#D5E5EA, #D5E5EA) no-repeat 22px/30px 85%; + + .btn-pipeline-segment { + border-radius: var(--bs-btn-border-radius); + min-height: 73px; + min-width: 230px; + padding-left: 18px; + background-color: white; + color: var(--bs-body-color); + font-size: 24px; + font-weight: normal; + text-align: left; + &:hover, &:focus { + transform: scale(1.10); + border-color: #3E3498; + } + &.btn-outline-secondary{ + text-decoration: none; + text-transform: none; + border-width: 1px; + } + span{ + padding-left: 15px; + padding-right: 15px; + } + &:disabled{ + opacity: 1; + border-color: rgb(0,0,0,0); + } + + img{ + height: 43px; + width: 34px; + } + + &:disabled img{ + opacity: .4; + } + + &:disabled span{ + color: rgba(0,0,0,.4); + } + + &:active img.btn-pipeline-segment-image{ + display: none !important; + } + + &:active img.btn-pipeline-segment-image-active{ + display: inline !important; + } + } + + .btn-pipeline-transition { + border-radius: var(--bs-btn-border-radius); + height: 34px; + min-width: 148px; + margin-left: 10px; + padding-left: 16px; + background-color: white; + color: var(--bs-body-color); + font-size: 18px; + font-style: italic; + text-align: left; + font-weight: normal; + padding: 0; + + span{ + padding-left: 6px; + padding-right: 6px; + } + + img{ + height: 21px; + width: 17px; + margin-left: 1rem; + } + + &.btn-outline-secondary{ + text-transform: none; + text-decoration: none; + border-width: 1px; + } + + &:hover, &:focus { + transform: scale(1.10); + border-color: #3E3498; + } + + &:disabled{ + opacity: 1; + border-color: rgb(0,0,0,0); + img{ + opacity: .4; + } + span{ + color: rgba(0,0,0,.4); + } + } + + } + + } + + } + + } + + } + + #pipeline-target{ + img { + width: 91px; + height: 114px; + } + h3{ + display: inline; + } + + .pipeline-target-block a{ + text-align: left; + width: auto; + i{ + margin-left: .5rem; + } + } + .btn-group-vertical>.btn~.btn{ + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; + } + .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){ + border-bottom-left-radius: .25rem; + border-bottom-right-radius: .25rem; + } + } + .scrollbar { + --scrollbar-foreground: #4D459E; + --scrollbar-background: #D7D4F1; + overflow-x: scroll; + scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); + scrollbar-width: thin; + padding-bottom: 0.5rem; + &::-webkit-scrollbar { + width: 15px; + height: 15px; + } + &::-webkit-scrollbar-thumb { /* Foreground */ + background-color: var(--scrollbar-foreground); + border-radius: 7.5px; + } + &::-webkit-scrollbar-track { /* Background */ + background: no-repeat linear-gradient(to bottom, white 20%, var(--scrollbar-background) 20%, var(--scrollbar-background) 80%, white 80%); + } + } + canvas { + position: absolute; + top: 0; + left: 0; + } + #chart { + width: auto; + } + #chartYAxis { + background-color: white; + left: -1px; + } + + #templates{ + .btn-outline-secondary{ + border-width: 1px; + width: auto; + text-decoration: none; + text-transform: none; + color: var(--bs-body-color); + + &:hover{ + border-color: #3E3498; + color: rgba(0,0,0,.4); + opacity: .7; + } + } + .btn-group-vertical>.btn~.btn{ + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; + } + .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){ + border-bottom-left-radius: .25rem; + border-bottom-right-radius: .25rem; + } + } + + #publications { + a { + color: var(--bs-secondary); + font-weight: 700; + } + a:hover { + opacity: .7; + } + } + +} +.pipeline-pop { + position: absolute; + top: 20px; + right: 20px; +} diff --git a/site/assets/styles/scss/getinvolved.scss b/site/assets/styles/scss/getinvolved.scss new file mode 100644 index 0000000..3108d92 --- /dev/null +++ b/site/assets/styles/scss/getinvolved.scss @@ -0,0 +1,17 @@ +/* Get Involved */ +#getinvolved { + .container-fluid { + padding-left: 7vw; + padding-right: 7vw; + padding-top: 4rem; + } + #envelope { + margin-top: -1rem; + } + @media (min-width: 576px) { + .img-col { + flex: 0 0 auto; + width: 25%; + } + } +} diff --git a/site/assets/styles/scss/hero.scss b/site/assets/styles/scss/hero.scss new file mode 100644 index 0000000..013e058 --- /dev/null +++ b/site/assets/styles/scss/hero.scss @@ -0,0 +1,70 @@ +/* Hero class */ +.hero { + background-image: url("../images/hero-artwork.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: right, top, bottom; + background-size: auto 90%, auto 380px, auto 380px; + background-blend-mode: normal, lighten, lighten; + min-height: 70vh; + line-height: 1.5; + p { + font-family: var(--bs-font-monospace); + &.lead { + font-size: 1.5rem; + } + } + .btn { + --bs-btn-padding-x: 1.5rem; + } + @media (max-width: 575.98px) { + background-position: top, top, bottom; + p.lead { + font-size: 1.25rem; + } + } + @media (max-width: 991.98px) { + background-size: 100vw, auto 380px, auto 380px; + } +} + +/* Hero class for about page */ +.hero-about { + background-image: linear-gradient(to right, var(--bs-dark) 50%, transparent), url("../images/about-page-hero.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; + background-position: left, right, top, bottom; + background-size: 80% 100%, auto 90%, auto 380px, auto 380px; + background-blend-mode: normal, normal, lighten, lighten; + min-height: 70vh; + line-height: 1.5; + p { + font-family: var(--bs-font-monospace); + &.lead { + font-size: 1.5rem; + } + } + @media (max-width: 575.98px) { + background-position: left, top, top, bottom; + background-size: 0, 100vw, auto 380px, auto 380px; + p.lead { + font-size: 1.25rem; + } + } +} + +/* Hero class for Get Involved page */ +.hero-involved { + background-image: linear-gradient(to right, var(--bs-dark) 50%, transparent), url("../images/hero-get-involved.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; + background-position: left, right, top, bottom; + background-size: 80% 100%, auto 100%, auto 380px, auto 380px; + background-blend-mode: normal, normal, lighten, lighten; + min-height: 70vh; + line-height: 1.5; + @media (max-width: 575.98px) { + background-position: left, top, top, bottom; + background-size: 0, 100vw, auto 380px, auto 380px; + p.lead { + font-size: 1.25rem; + } + } +} diff --git a/site/assets/styles/scss/styles.scss b/site/assets/styles/scss/styles.scss index 88a7771..995e5c8 100644 --- a/site/assets/styles/scss/styles.scss +++ b/site/assets/styles/scss/styles.scss @@ -24,144 +24,6 @@ header { } } -footer { - background-color: #f5f7fa; - width: 100%; - color: var(--bs-body-color); - - .ogd-logo { - max-width: 367px; - width: 100%; - } - .fd-logo-wrapper{ - - a{ - text-decoration: none; - color: inherit; - padding: .35rem; - display: inline-block; - } - - font-size: 1.5rem; - vertical-align: middle; - - em{ - vertical-align: middle; - } - } - .uw-logo-wrapper{ - a{ - display: inline-block; - padding: .35rem; - } - } - .border-end{ - border-top-right-radius: .625rem !important; - border-bottom-right-radius: .625rem !important; - border-right-color: #DAE2EB !important; - border-right-width: 5px !important; - } - .vr-wrapper{ - text-align: center; - margin-left: -17px; - margin-right: -17px; - @media(max-width: 767.98px){ - display: none; - } - } - .vr{ - width: 5px; - color: #DAE2EB; - height: 100%; - border-radius: .625rem !important; - } - .btn-signup{ - background-color: var(--bs-body-color); - color: white; - font-weight: normal; - font-size: 12px; - - &:hover, &:focus { - color: var(--bs-body-color); - background-color: white; - border: 1px solid var(--bs-body-color); - font-size: 12px; - font-weight: normal; - } - } -} - -/* Hero class */ -.hero { - background-image: url("../images/hero-artwork.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); - background-repeat: no-repeat, no-repeat, no-repeat; - background-position: right, top, bottom; - background-size: auto 90%, auto 380px, auto 380px; - background-blend-mode: normal, lighten, lighten; - min-height: 70vh; - line-height: 1.5; - p { - font-family: var(--bs-font-monospace); - &.lead { - font-size: 1.5rem; - } - } - .btn { - --bs-btn-padding-x: 1.5rem; - } - @media (max-width: 575.98px) { - background-position: top, top, bottom; - p.lead { - font-size: 1.25rem; - } - } - @media (max-width: 991.98px) { - background-size: 100vw, auto 380px, auto 380px; - } -} - -/* Hero class for about page */ -.hero-about { - background-image: linear-gradient(to right, var(--bs-dark) 50%, transparent), url("../images/about-page-hero.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); - background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; - background-position: left, right, top, bottom; - background-size: 80% 100%, auto 90%, auto 380px, auto 380px; - background-blend-mode: normal, normal, lighten, lighten; - min-height: 70vh; - line-height: 1.5; - p { - font-family: var(--bs-font-monospace); - &.lead { - font-size: 1.5rem; - } - } - @media (max-width: 575.98px) { - background-position: left, top, top, bottom; - background-size: 0, 100vw, auto 380px, auto 380px; - p.lead { - font-size: 1.25rem; - } - } -} - -/* Hero class for Get Involved page */ -.hero-involved { - background-image: linear-gradient(to right, var(--bs-dark) 50%, transparent), url("../images/hero-get-involved.png"), url("../images/grid-top.jpg"), url("../images/grid-bottom.jpg"); - background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; - background-position: left, right, top, bottom; - background-size: 80% 100%, auto 100%, auto 380px, auto 380px; - background-blend-mode: normal, normal, lighten, lighten; - min-height: 70vh; - line-height: 1.5; - @media (max-width: 575.98px) { - background-position: left, top, top, bottom; - background-size: 0, 100vw, auto 380px, auto 380px; - p.lead { - font-size: 1.25rem; - } - } -} - /* Buttons */ .btn i.bi::before { font-weight: 700 !important; // bold any button icons @@ -174,367 +36,3 @@ img.rounded { img.avatar { width: 33px; } - -/* Game Data page */ -#gamedata { - hr { color: #DAE2EB; border-top: 5px solid; border-radius: .625rem !important; } - &.container-fluid { - padding-left: 6vw; - padding-right: 6vw; - padding-top: 5rem; - } - .button-bar { - .btn { - border-width: 0; - &:not(:last-of-type) { - border-right-color: var(--bs-gray-300); - border-radius: 0; - border-width: 0 2px; - } - } - } - .stats { - padding: 1.5rem 4rem 1.5rem 1.5rem; - } - .card { - height: auto; - } - .month-nav-wrapper{ - @media (min-width: 576px){ - width: fit-content; - } - .btn { - width: 8rem; - } - } - #stats{ - font-weight: 600; - font-size: 1.2rem; - padding: .355rem; - - @media(max-width: 575.98px) { - margin-right: .08rem; - } - } - #pipelines { - - .pipelines-wrapper{ - background: #F6F7FA; - border-radius: .625rem !important; - width: fit-content; - - .pipelines-container{ - - padding-top: 18px; - padding-bottom: 36px; - margin-left: 18px; - margin-right: 25px; - - h3{ - margin-bottom: 0; - } - - .pipeline-segments-wrapper{ - - background: #F6F7FA linear-gradient(#D5E5EA, #D5E5EA) no-repeat 22px/30px 85%; - - .btn-pipeline-segment { - border-radius: var(--bs-btn-border-radius); - min-height: 73px; - min-width: 230px; - padding-left: 18px; - background-color: white; - color: var(--bs-body-color); - font-size: 24px; - font-weight: normal; - text-align: left; - &:hover, &:focus { - transform: scale(1.10); - border-color: #3E3498; - } - &.btn-outline-secondary{ - text-decoration: none; - text-transform: none; - border-width: 1px; - } - span{ - padding-left: 15px; - padding-right: 15px; - } - &:disabled{ - opacity: 1; - border-color: rgb(0,0,0,0); - } - - img{ - height: 43px; - width: 34px; - } - - &:disabled img{ - opacity: .4; - } - - &:disabled span{ - color: rgba(0,0,0,.4); - } - - &:active img.btn-pipeline-segment-image{ - display: none !important; - } - - &:active img.btn-pipeline-segment-image-active{ - display: inline !important; - } - } - - .btn-pipeline-transition { - border-radius: var(--bs-btn-border-radius); - height: 34px; - min-width: 148px; - margin-left: 10px; - padding-left: 16px; - background-color: white; - color: var(--bs-body-color); - font-size: 18px; - font-style: italic; - text-align: left; - font-weight: normal; - padding: 0; - - span{ - padding-left: 6px; - padding-right: 6px; - } - - img{ - height: 21px; - width: 17px; - margin-left: 1rem; - } - - &.btn-outline-secondary{ - text-transform: none; - text-decoration: none; - border-width: 1px; - } - - &:hover, &:focus { - transform: scale(1.10); - border-color: #3E3498; - } - - &:disabled{ - opacity: 1; - border-color: rgb(0,0,0,0); - img{ - opacity: .4; - } - span{ - color: rgba(0,0,0,.4); - } - } - - } - - } - - } - - } - - } - - #pipeline-target{ - img { - width: 91px; - height: 114px; - } - h3{ - display: inline; - } - - .pipeline-target-block a{ - text-align: left; - width: auto; - i{ - margin-left: .5rem; - } - } - .btn-group-vertical>.btn~.btn{ - border-top-left-radius: .25rem; - border-top-right-radius: .25rem; - } - .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){ - border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; - } - } - .scrollbar { - --scrollbar-foreground: #4D459E; - --scrollbar-background: #D7D4F1; - overflow-x: scroll; - scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); - scrollbar-width: thin; - padding-bottom: 0.5rem; - &::-webkit-scrollbar { - width: 15px; - height: 15px; - } - &::-webkit-scrollbar-thumb { /* Foreground */ - background-color: var(--scrollbar-foreground); - border-radius: 7.5px; - } - &::-webkit-scrollbar-track { /* Background */ - background: no-repeat linear-gradient(to bottom, white 20%, var(--scrollbar-background) 20%, var(--scrollbar-background) 80%, white 80%); - } - } - canvas { - position: absolute; - top: 0; - left: 0; - } - #chart { - width: auto; - } - #chartYAxis { - background-color: white; - left: -1px; - } - - #templates{ - .btn-outline-secondary{ - border-width: 1px; - width: auto; - text-decoration: none; - text-transform: none; - color: var(--bs-body-color); - - &:hover{ - border-color: #3E3498; - color: rgba(0,0,0,.4); - opacity: .7; - } - } - .btn-group-vertical>.btn~.btn{ - border-top-left-radius: .25rem; - border-top-right-radius: .25rem; - } - .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){ - border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; - } - } - - #publications { - a { - color: var(--bs-secondary); - font-weight: 700; - } - a:hover { - opacity: .7; - } - } - -} -.pipeline-pop { - position: absolute; - top: 20px; - right: 20px; -} - -/* Dashboard */ -#dashboard { - line-height: 1.5; - .container-fluid { - padding-left: 7vw; - padding-right: 7vw; - padding-top: 4rem; - } - .card-img-top { - height: 50%; - object-fit: cover; - width: auto; - @media (max-width: 575.98px) { - height: 70%; - } - } - .card:hover { - transform: scale(1.05); - } - .top-buffer{ - margin-top: 26px; - } -} - -/* About */ -#about { - .container-fluid { - padding-left: 7vw; - padding-right: 7vw; - padding-top: 4rem; - } - .about-robot{ - text-align: center; - img{ - width: 65%; - } - } - .about-data{ - text-align: center; - img{ - width: 90%; - } - } - .top-buffer{ - margin-top: 26px; - } - .blue-grad { - background: no-repeat linear-gradient(137deg, #41F9EC, #44CAFC); - > div { - border: 1px solid #89F1DB; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - > p { - max-width: 20rem; - } - } - } - .img-fluid-box { - max-width: 75%; - height: auto; - } - hr { color: #C2CCDA; border-top: 6px solid; border-radius: .625rem !important; } - h3 { - font-size: 1.875rem; - } - .staff-photo { - width: 100%; - max-width: 330px; - height: auto; - margin-top: 6rem; - @media (max-width: 575.98px) { - margin-top: 4rem; - } - } -} - -/* Get Involved */ -#getinvolved { - .container-fluid { - padding-left: 7vw; - padding-right: 7vw; - padding-top: 4rem; - } - #envelope { - margin-top: -1rem; - } - @media (min-width: 576px) { - .img-col { - flex: 0 0 auto; - width: 25%; - } - } -} \ No newline at end of file diff --git a/site/includes/header.php b/site/includes/header.php index 10124fb..633fe2c 100644 --- a/site/includes/header.php +++ b/site/includes/header.php @@ -13,6 +13,12 @@ + + + + + +