react-native-builder-bob/docs/components/Hero.module.css at b0a9c41b3bbc8f4283584f08af05a05273b1a803 · callstack/react-native-builder-bob · 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
.container {
  margin: 0 auto;
  width: calc(100% - 8 * 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: calc(var(--rp-content-padding-y) * 1.5) 0 var(--rp-content-padding-y)
    0;
}

.heroMain {
  display: flex;
  flex-direction: column;
  text-wrap: pretty;
  max-width: 30em;
}

.heroName {
  color: var(--rp-c-text-1);
  font-family: 'Alliance No.2', Arial, sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

.featureList {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  display: flex;
  gap: 32px;
  width: 100%;
  margin-top: calc(var(--rp-content-padding-y) * 2);
}

.feature {
  display: flex;
  flex: 1;
  max-width: 100%;
  position: relative;
  color: var(--rp-c-text-1);
  border: 1px dashed var(--rp-c-divider);
  border-radius: var(--rp-radius-small);
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.featureTitle {
  color: var(--rp-c-text-1);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.featureDescription {
  flex: 1;
  color: var(--rp-c-text-2);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;
}

.codeBlock {
  position: relative;
  width: 100%;
  color: var(--rp-code-block-color);
  margin: 0.5em 0;
}

.codeBlock > :global(.rp-codeblock) {
  margin: 0;
}

.codeBlock pre {
  padding: 0 1.25rem;
  padding-right: 3.5rem;
}