Module:Sandbox/User:Waddie96/styles.css

From Wikipedia, the free encyclopedia
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;
}