website: fix community page issues (open-policy-agent#4904)

* Fix inconsistent spacing in community.css * Fix background on community page so it doesn't become white when scrolling The white background happened because it was forced to a height of the viewport, but the overflowing child elements were still visible. Because its a parent element that scrolls, the background would scroll with the page causing the white background to appear. The culprit is setting `height: 100%`, which means it won't pick up the height from its child elements. If instead we set `min-height: 100%` it'll be at minimum the height of its parent (`<body>`, which along with `<html>` is set to be `100%` of the viewport width and height – this is probably not ideal) but it can still expand to fit all its child elements. There are other ways to fix this, but this is probably the minimally invasive. * Make dividers no push beyond the viewport width, and more responsive The dividers will no longer push beyond the viewport width with these changes (key culprit: the `-1em` left/right margins) and also will disappear on smaller screens so they don't become very thin. Signed-off-by: Marcus Stade <[email protected]>
anderseknert · Jul 19, 2022 · 42adc06 · 42adc06
1 parent c16710d
commit 42adc06
Showing 1 changed file with 62 additions and 55 deletions.
diff --git 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;
     }
-}
+}