http/src/css/hcard.uppcss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

.h-card div:has(img) {
  width: 6rem;
  height: 6rem;
  margin-inline: auto;
}

.h-card img {
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  filter: contrast(1.25);
}

.h-card div:has(img)::after {
  /* Colour overlay */
  background-color: var(--colour-primary-80);
  opacity: 0.3;

  /* Same size and shape as the img */
  border-radius: 1rem;
  width: 6rem;
  height: 6rem;

  /* Positioned on top of the img */
  display: block;
  position: relative;
  top: -6rem;

  /* A content value is needed to get the ::after to render */
  content: '';
}

@media (min-width: 36rem) {
  .h-card {
    grid-column: media-start / content-end;
    display: grid;
    grid-template-columns: subgrid; /** Subgrid of main column layout */
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      'empty heading'
      'photo text';
    column-gap: var(--spacing-block-sm);
  }

  .h-card div:has(img) {
    grid-area: photo;
    margin-block-start: var(--spacing-block-sm);
  }

  .h-card header {
    grid-area: heading;
  }

  .h-card__text {
    grid-area: text;
  }
}