swift-org-website/assets/stylesheets/elements/_grid.scss at 5f0c2e49a1e5fd80940d6d21e2f6628c468ee0bb · swiftlang/swift-org-website · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
.grid-level-0 {
  list-style: none;
  display: grid;
  gap: 1rem;
  padding: 0;
}

.grid-level-1 {
  background-color: var(--color-fill-secondary);
  border: 1px solid var(--color-fill-tertiary);
  border-radius: var(--border-radius);

  padding: 1rem;
  display: flex;
  flex-direction: column;

  @media (prefers-contrast: more) {
    background-color: transparent;
    border: 1px solid var(--color-text);
  }

  // FIXME: no inset from container
  .hero {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-fill-tertiary);
    margin-bottom: 1rem;
  }

  // Card Title
  h3 {
    line-height: 1.4;
    font-size: 1.4rem;
    padding-top: 0;
  }

  // Card Caption
  h4 {
    font-size: 0.8rem;
    color: var(--color-secondary-label);
    border: none;
    padding: 0.5rem 0 0.125rem;
  }

  p {
    flex-grow: 1;
    color: var(--color-secondary-label);
    margin-bottom: 0;
  }

  // avoid extra space between a caption and button needed by install page
  h4 + .cta-secondary {
    margin-top: 0rem;
  }
}

// Used by Packages page.
.grid-level-1.selectable {
  h3 {
    color: var(--color-link);
  }

  a {
    text-decoration: none;
  }

  &:hover {
    background-color: var(--color-fill-tertiary);
    border: 1px solid var(--color-fill-quaternary);

    @media (prefers-contrast: more) {
      background-color: var(--color-text);
      p {
        color: var(--color-fill);
      }
    }
  }
}

// Button typically embedded in a grid-level-1
a.cta-secondary, [class^="language-"] button {
  background-color: var(--color-fill-tertiary);
  border: 1px solid var(--color-fill-quaternary);
  border-radius: var(--border-radius);


  color: var(--color-text);
  text-decoration: none;

  display: block;
  margin-top: 1rem;
  padding: 0.5rem 0;
  text-align: center;

  @media (prefers-contrast: more) {
    background-color: transparent;
    border: 1px solid var(--color-text);
  }

  &:hover {
    color: var(--color-link);
    background-color: var(--color-fill-quaternary);

    text-decoration: none;

    @media (prefers-contrast: more) {
      background-color: var(--color-text);
      color: var(--color-fill);
    }
  }

  &.external:after {
    content: " ↗";
  }
}

div.highlight {
  position: relative;

  &:hover button {
    display: block;
  }
}

[class^="language-"] button {
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  margin: 0;
  display: none;
}