Page MenuHomeSealhub
Files F969898

ordered-pictogram-tiles.css
No OneTemporary
Actions

ordered-pictogram-tiles.css
View Options

.pictogram-tiles {
max-width: var(--container-width);
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
grid-auto-rows: minmax(7rem, auto);
grid-row-gap: 1rem;
margin: 1rem auto;
padding: 0 1rem;
}
.pictogram-tiles__tile {
grid-row: span 2;
list-style: none;
}
.pictogram-tiles__tile:nth-child(even) {
grid-column: 1;
}
.pictogram-tiles__tile:nth-child(odd) {
grid-column: 2;
}
.pictogram-tiles__tile:only-child {
grid-column: 1 / span 2;
max-width: 23rem;
margin: 0 auto;
}
.pictogram-tiles__content {
padding: 2rem;
}
.pictogram-tiles__upperSection {
display: flex;
justify-content: space-between;
}
.pictogram-tiles__upperSection span {
font-family: var(--font-sans-serif);
font-weight: 800;
font-size: 1.5rem;
height: fit-content;
padding-bottom: 1rem;
position: relative;
}
.pictogram-tiles__upperSection span::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000000;
opacity: 25%;
}
.pictogram-tiles__upperSection img {
align-self: flex-start;
}
.pictogram-tiles__tile--purple a {
color: var(--white-on-darker-bg-text);
}
.pictogram-tiles__tile--white a {
color: var(--main);
}
.pictogram-tiles__lowerSection h3 {
grid-row: 1;
font-size: 1rem;
line-height: 1.25rem;
font-family: var(--font-slab-serif);
font-weight: 400;
align-self: center;
}
.pictogram-tiles__lowerSection p {
grid-row: 2;
font-family: var(--font-sans-serif);
color: var(--dove-gray);
}
.pictogram-tiles__tile--purple {
background-color: var(--main);
}
.pictogram-tiles__tile--white {
background-color: white;
box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.06);
}
.pictogram-tiles__tile--purple .pictogram-tiles__upperSection span {
color: var(--main-bg-text);
border-color: hsl(287.3, 13.1%, 50.8%);
}
.pictogram-tiles__tile--white .pictogram-tiles__upperSection span {
color: var(--main);
border-color: #e0e0e0;
}
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection h3 {
color: var(--main-bg-text);
}
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection p {
color: var(--main-bg-text-secondary);
}
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection {
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection p {
color: var(--dove-gray);
}
}
@container (max-width: 880px) {
.pictogram-tiles {
display: block;
grid-template-columns: auto;
}
.pictogram-tiles__tile {
max-width: 21rem;
margin: 0 auto;
}
.pictogram-tiles__tile:nth-child(odd) {
grid-column: auto;
}
.pictogram-tiles__tile:nth-child(even) {
grid-column: auto;
}
}
@container (max-width: 440px) {
.pictogram-tiles {
padding: 0;
}
.pictogram-tiles__content {
padding: 2rem 1rem;
}
.pictogram-tiles__tile--white {
box-shadow: none;
}
}

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 02:21 (22 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
548093
Default Alt Text
ordered-pictogram-tiles.css (2 KB)

Event Timeline