diff --git a/docs/website/static/css/community.css b/docs/website/static/css/community.css index 97b792615d..226a97ad5b 100644 --- a/docs/website/static/css/community.css +++ b/docs/website/static/css/community.css @@ -1,12 +1,12 @@ .grid-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - grid-gap: 1rem; - margin-left: 15%; - margin-right: 15%; - /* justify-items: center; do NOT use for centering cards when squeezing; changes card sizes! */ - position: relative; - z-index: 900; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 1rem; + margin-left: 15%; + margin-right: 15%; + /* justify-items: center; do NOT use for centering cards when squeezing; changes card sizes! */ + position: relative; + z-index: 900; } .card { @@ -27,7 +27,7 @@ .support-bg { width: 100%; - height: 100%; + min-height: 100%; background-color: #5687e5; background-image: url("../img/cloudAll.png"), url("../img/homebg.png"); background-attachment: fixed, scroll; @@ -47,22 +47,24 @@ text-align: left; line-height: 1.3; } + #homebackground .banner-subcontent { color: black; } #homebackground .logistics { - font-size: 20px; - font-weight: 200px; - line-height: 24px; - padding: 0px 15px 30px 15px; + font-size: 20px; + font-weight: 200px; + line-height: 24px; + padding: 0px 15px 30px 15px; } + #homebackground .logistics:last-child { - padding: 0px 15px 90px 15px; + padding: 0px 15px 90px 15px; } #homebackground .logistics .btn-primary { - padding: 10px; + padding: 10px; } .support-card-content { @@ -76,15 +78,15 @@ } .card-text .header { - font-size: 24px; - font-weight: 700; + font-size: 24px; + font-weight: 700; } .card-text .subheader { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - line-height: 1.3; - font-size: 20px; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + line-height: 1.3; + font-size: 20px; } .card-text .subheader img { @@ -151,54 +153,59 @@ /* import adapted from https://codepen.io/benknight/pen/zxxeay for "light saber" lines */ .divider { - display: flex; - z-index: 99; -} -.divider:before, .divider:after { - content: ""; - flex: 1; + display: flex; + gap: 1em; + z-index: 99; } .line { - padding-left: 15%; - padding-right: 15%; - align-items: center; - margin-left: -1em; - margin-right: -1em; - margin-top: 1.5em; - color: white; - font-weight: 700; - font-size: 28px; -} -.line:before, .line:after { - height: 1px; - margin: 0 1em; -} - -.glow:before, .glow:after { - height: 8px; - filter: blur(1px); - border-radius: 5px; + align-items: center; + margin-left: 15%; + margin-right: 15%; + margin-top: 1.5em; + color: white; + font-weight: 700; + font-size: 28px; +} + +.line:before, +.line:after { + height: 1px; } + +.glow:before, +.glow:after { + height: 8px; + filter: blur(1px); + border-radius: 5px; +} + .glow:before { - background: linear-gradient(to right, rgba(67, 58, 238, 0.721), #343a40d4); + background: linear-gradient(to right, rgba(67, 58, 238, 0.721), #343a40d4); } + .glow:after { - background: linear-gradient(to left, rgba(67, 58, 238, 0.721), #343a40d4); + background: linear-gradient(to left, rgba(67, 58, 238, 0.721), #343a40d4); } /* END import */ @media screen and (min-width: 576px) { - .grid-container { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - } + .grid-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } + + .divider:before, + .divider:after { + content: ""; + flex: 1; + } } @media screen and (min-width: 1200px) { - .grid-container { - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - } + .grid-container { + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + } } @media screen and (max-width: 767px) { @@ -209,4 +216,4 @@ .cloud-top img { display: none; } -} +} \ No newline at end of file