mirror of
https://github.com/open-policy-agent/opa.git
synced 2026-08-13 03:42:35 -06:00
Michael Sorens
d73cc9c22f
Correct CSS for easy local static viewing With this tweak, can just open local support.html in the browser Revise flex container for 2-up Define tile layout Add page header (with suggested text) Swap Community for Support across site Swap anchor for button Advantages: - removes JavaScript dependency; now pure HTML - more accessible; confusing to have a button act like a link Add stylized horizontal rule Fill out remaining horizontal rules Add data and images for the page The data has been normalized to allow a semi-automated fill of an HTML fragment template in the next commit. Semi-automated template for data generation in vim Fill out page from semi-autogenerated content Now take the generated content and cut-and-paste the content for each section into the support.html file. Refine layout with actual content now present Have to make the section headers readable on the two backgrounds: near the top--where the background image appears--we use white text, but in the remainder of the screen (with a white background) we use blue text. Add connection to existing newsletter sign-up Accessibilty refinements Ran axe accessibility checker (Chrome extension) and fixed: - All content in landmarks - Main landmark present - Content structured with <h1> and <h2> - Images have alternate text - Links have discernable text Add back original support blurb Improve responsive design Switch from bootstrap to CSS grid to better handle reflow into narrow screen width Move new page to community.html Reinstate original support page Correct relative addresses Add reference to new page in old page Refine responsive design On mobile, last pass reduced to one column, but the individual cards were still truncated. Fixes near bottom: action buttons and page margin Spruce up the background image a bit Per @srenatus' suggestion, keep the background image (actually, two images) stationary--with a bit of a color shift that came along for the ride! :-) Add github and twitter logo links for champions Signed-off-by: Michael Sorens <msorens@styra.com>
151 lines
2.2 KiB
CSS
151 lines
2.2 KiB
CSS
.card {
|
|
border-radius: 20px;
|
|
box-shadow: 2px 3px 6px rgba(51, 51, 51, 0.25);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card-body {
|
|
}
|
|
|
|
.card-img {
|
|
height: 4rem;
|
|
width: auto;
|
|
}
|
|
|
|
.support-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #5687e5;
|
|
}
|
|
|
|
.support-content {
|
|
height: 100%;
|
|
}
|
|
|
|
.support-card-content {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-text {
|
|
padding: 10px
|
|
}
|
|
|
|
.support-list {
|
|
margin-top: 20px;
|
|
z-index: 99;
|
|
position: relative;
|
|
}
|
|
|
|
.support-footer {
|
|
z-index: 99;
|
|
position: relative;
|
|
}
|
|
|
|
/* overrides for home.css */
|
|
|
|
#homebackground {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: -65px;
|
|
}
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
overflow: hidden;
|
|
background-color: #5687e5;
|
|
}
|
|
|
|
.bg img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.cloud-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cloud-top img {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 140px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media screen and (min-width: 350px) and (max-width: 400px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 401px) and (max-width: 450px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 451px) and (max-width: 500px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 550px) and (min-width: 501px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) and (min-width: 576px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) and (min-width: 601px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 700px) and (min-width: 651px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 750px) and (min-width: 701px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 575px) and (min-width: 551px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.bg img {
|
|
display: unset;
|
|
}
|
|
|
|
.cloud-top img {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) and (min-width: 751px) {
|
|
.bg img {
|
|
margin-top: unset;
|
|
}
|
|
}
|