Module:Sandbox/User:Waddie96/styles.css
Jump to navigation
Jump to search
/* https://govtnz.github.io/web-a11y-guidance/ka/accessible-ux-best-practices/colour-and-contrast/testing-colour-and-contrast.html */
@media only screen and (max-width: 639px) {
/* MOBILE device's maximum available screen width. Many older feature phones have screens much smaller than this value. Selects for screens smaller than 320px. */
.banner__title {
text-align: left;
}
}
.visually-hidden:not(:focus):not(:active) {
clip: rect(1px, 1px, 1px, 1px);
}
.skip-link .visually-hidden {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.banner {
font-family: 'Fira Sans', 'SF Pro', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
font-size: 1.8rem;
line-height: 1.5;
box-sizing: border-box;
margin: 0;
overflow-wrap: break-word;
flex-basis: 100%;
text-align: left;
color: var(--color-base, #222);
border-bottom: 1px solid var(--border-color-interactive, #72777d);
padding: 3rem 0 1.5rem;
background-color: var(--background-color-backdrop-dark, #1f1f1f);
}
.banner__inside {
text-align: left;
box-sizing: border-box;
overflow-wrap: break-word;
margin: 0 auto;
padding: 0 16px;
max-width: 73rem;
}
.banner__title-wrap {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 1.6rem;
flex-direction: row;
}
.banner__title {
order: 2;
color: #e0e0e0;
text-decoration: none;
text-align: left;
}
.banner__title,
.banner__title a:link,
.banner__title a:visited {
text-align: left;
box-sizing: border-box;
margin: 0;
overflow-wrap: break-word;
color: #e0e0e0;
text-decoration: none;
}