From f02c64c4432bf16efaca0ab63e9699e86b59fb66 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 10:39:42 -0500 Subject: [PATCH 1/6] Attempt to move footer styling to own scss, idea being to split some of this stuff up so it's easier to manage. --- site/assets/styles/scss/footer.scss | 66 ++++++++++++++++++++++++++++ site/assets/styles/scss/styles.scss | 67 ----------------------------- 2 files changed, 66 insertions(+), 67 deletions(-) create mode 100644 site/assets/styles/scss/footer.scss 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/styles.scss b/site/assets/styles/scss/styles.scss index 88a7771..e2803c1 100644 --- a/site/assets/styles/scss/styles.scss +++ b/site/assets/styles/scss/styles.scss @@ -24,73 +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"); From b22d96a8b9f9c9d5d43fee4b27553ad413529884 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 10:40:50 -0500 Subject: [PATCH 2/6] Include footer css in header.php, to see if this will build and import correctly. --- site/includes/header.php | 1 + 1 file changed, 1 insertion(+) diff --git a/site/includes/header.php b/site/includes/header.php index 10124fb..2cbe984 100644 --- a/site/includes/header.php +++ b/site/includes/header.php @@ -13,6 +13,7 @@ + From 3ef47ee9d96cabade9f346843d8faf73fc592511 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 10:58:05 -0500 Subject: [PATCH 3/6] Move other scss stuff over to own files. --- site/assets/styles/scss/about.scss | 53 +++ site/assets/styles/scss/dashboard.scss | 23 ++ site/assets/styles/scss/gamedata.scss | 267 ++++++++++++++ site/assets/styles/scss/getinvolved.scss | 17 + site/assets/styles/scss/hero.scss | 70 ++++ site/assets/styles/scss/styles.scss | 435 ----------------------- site/includes/header.php | 5 + 7 files changed, 435 insertions(+), 435 deletions(-) create mode 100644 site/assets/styles/scss/about.scss create mode 100644 site/assets/styles/scss/dashboard.scss create mode 100644 site/assets/styles/scss/gamedata.scss create mode 100644 site/assets/styles/scss/getinvolved.scss create mode 100644 site/assets/styles/scss/hero.scss 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..34cda5f --- /dev/null +++ b/site/assets/styles/scss/dashboard.scss @@ -0,0 +1,23 @@ +/* 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; + } +} 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 e2803c1..995e5c8 100644 --- a/site/assets/styles/scss/styles.scss +++ b/site/assets/styles/scss/styles.scss @@ -24,77 +24,6 @@ header { } } -/* 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 @@ -107,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 2cbe984..633fe2c 100644 --- a/site/includes/header.php +++ b/site/includes/header.php @@ -13,7 +13,12 @@ + + + + + From e67916efc383caefc5aeb80dcd4d87da98b8e2e0 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 12:34:23 -0500 Subject: [PATCH 4/6] Don't do auto-width for cards, and adjust height at breakpoints Auto-width fucks up the card heights, so get rid of that shit. Not sure how it actually causes the issue, best guess is it's doing something with image widths, getting biggest, and scaling the cards vertically so the widest image is full-width prior to cropping to 25% width for the card itself? Whatever the case, it was pretty fucking bad. For the breakpoint stuff, just trying to make the images less likely to fight for space with the text content at smaller screen sizes. --- site/assets/styles/scss/dashboard.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/site/assets/styles/scss/dashboard.scss b/site/assets/styles/scss/dashboard.scss index 34cda5f..328e551 100644 --- a/site/assets/styles/scss/dashboard.scss +++ b/site/assets/styles/scss/dashboard.scss @@ -7,11 +7,15 @@ padding-top: 4rem; } .card-img-top { - height: 50%; + height: 70%; object-fit: cover; - width: auto; + // medium + @media (max-width: 767.98px) { + height: 50%; + } + // x-small @media (max-width: 575.98px) { - height: 70%; + height: 30%; } } .card:hover { From 773572b511970926c98059a53415dd865b7e2ab0 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 12:53:45 -0500 Subject: [PATCH 5/6] Ok, set better heights, one for each breakpoint. --- site/assets/styles/scss/dashboard.scss | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/site/assets/styles/scss/dashboard.scss b/site/assets/styles/scss/dashboard.scss index 328e551..3e9b217 100644 --- a/site/assets/styles/scss/dashboard.scss +++ b/site/assets/styles/scss/dashboard.scss @@ -9,13 +9,25 @@ .card-img-top { height: 70%; object-fit: cover; - // medium - @media (max-width: 767.98px) { - height: 50%; + // XL + @media(max-width: 1399.98px) { + height:60% } - // x-small - @media (max-width: 575.98px) { - height: 30%; + // 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 { From a78ab20e4c48ef691450caab7de309093c41d186 Mon Sep 17 00:00:00 2001 From: Luke Swanson Date: Fri, 23 Aug 2024 13:14:36 -0500 Subject: [PATCH 6/6] Missed change to card image default height at XXL size. --- site/assets/styles/scss/dashboard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/assets/styles/scss/dashboard.scss b/site/assets/styles/scss/dashboard.scss index 3e9b217..771ac21 100644 --- a/site/assets/styles/scss/dashboard.scss +++ b/site/assets/styles/scss/dashboard.scss @@ -7,7 +7,7 @@ padding-top: 4rem; } .card-img-top { - height: 70%; + height: 65%; object-fit: cover; // XL @media(max-width: 1399.98px) {