]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | .resource { |
2 | display: flex; | |
3 | border-radius: var(--border-radius); | |
4 | border: 1px solid var(--divider-color); | |
5 | background-color: var(--lightest-background-color); | |
6 | align-items: stretch; | |
7 | overflow: hidden; | |
8 | margin-bottom: .5rem; | |
9 | margin-block-end: .5rem; | |
10 | ||
11 | position: relative; | |
12 | transition: all .2s linear; | |
13 | ||
14 | &:hover { | |
15 | background-color: var(--lighter-background-color); | |
16 | } | |
17 | ||
18 | } | |
19 | ||
20 | .resource__image { | |
21 | flex: 1 0 5.5rem; | |
22 | max-width: 5.5rem; | |
23 | overflow: hidden; | |
24 | padding: .25rem; | |
25 | ||
26 | img { | |
27 | display: block; | |
28 | height: 100%; | |
29 | width: 100%; | |
30 | // object-fit: cover; | |
31 | object-fit: contain; | |
32 | } | |
33 | } | |
34 | ||
35 | .resource__content { | |
36 | flex: 4; | |
37 | padding: .75rem; | |
38 | align-self: center; | |
39 | } | |
40 | ||
41 | ||
42 | .resource__title { // a | |
43 | text-decoration: none; | |
44 | color: var(--headings-color); | |
45 | font-weight: 500; | |
46 | margin-bottom: .125rem; | |
47 | ||
48 | &::after { | |
49 | content: ""; | |
50 | position: absolute; | |
51 | left: 0; | |
52 | offset-inline-start: 0; | |
53 | top: 0; | |
54 | block-inline-start: 0; | |
55 | width: 100%; | |
56 | height: 100%; | |
57 | } | |
58 | } | |
59 | ||
60 | .resource__domain, | |
61 | .resource__domain a { | |
62 | text-decoration: none; | |
63 | color: var(--body-text-color); | |
64 | font-size: .875rem; | |
65 | } | |
66 | ||
67 | .resource__icon { | |
68 | color: var(--headings-color); | |
69 | margin: 1rem; | |
70 | align-self: center; | |
71 | } |