67 lines
1.3 KiB
CSS
67 lines
1.3 KiB
CSS
.event {
|
||
margin-bottom: var(--space-2);
|
||
padding: var(--space-4);
|
||
width: 100%;
|
||
max-width: var(--block-text-wide-width);
|
||
align-items: center;
|
||
border: 4px solid var(--grey-light);
|
||
background: var(--white);
|
||
text-decoration: none;
|
||
}
|
||
.event--bold {
|
||
border-color: var(--black);
|
||
}
|
||
.event__date {
|
||
font-family: var(--text);
|
||
font-weight: var(--text-bold);
|
||
line-height: 1;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
.event__date::after {
|
||
content: " – ";
|
||
}
|
||
.event__time {
|
||
font-family: var(--text);
|
||
font-weight: var(--text-semi-bold);
|
||
color: var(--green);
|
||
}
|
||
.event__title {
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
.event__description {
|
||
font-weight: var(--text-semi-bold);
|
||
margin-bottom: 0;
|
||
color: var(--grey);
|
||
}
|
||
.event__arrow {
|
||
display: none;
|
||
}
|
||
@media (min-width: 600px) {
|
||
.event {
|
||
padding: var(--space-4) var(--space-5);
|
||
}
|
||
.event__date {
|
||
display: block;
|
||
font-size: 1.6rem;
|
||
}
|
||
.event__date::after {
|
||
content: initial;
|
||
}
|
||
.event__title {
|
||
transform: translateY(0.1em);
|
||
margin-bottom: 0;
|
||
}
|
||
.event__arrow {
|
||
display: block;
|
||
transform: scale(1.5);
|
||
}
|
||
[data-whatintent="keyboard"] .event:focus {
|
||
color: var(--white);
|
||
background: var(--black);
|
||
outline: 0;
|
||
}
|
||
[data-whatintent="keyboard"] .event:focus .event__arrow path {
|
||
stroke: white;
|
||
}
|
||
}
|