example-scrollama-bootstrap-boilerplate/project.css at main · rahulbot/example-scrollama-bootstrap-boilerplate · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
 * The style rules specify elements by type and by attributes such
 * as class and ID. Each section indicates an element or elements,
 * then lists the style properties to apply. You can cross-reference
 * the rules in this file with the elements in index.html
*/

/**
 * CSS variables let you put things like brand colors and fonts in
 * one place, so you don't mistype them
 */
:root {
  --color-bg: rgb(
    255,
    255,
    255
  ); /** this is a color in red, green, and blue values (each from 0 to 255) **/
  --color-text: rgb(0, 0, 0);
  --color-primary: #0044cc;
  --color-secondary: #0088cc;
  --font-family-body: "Garamond", serif;
  --font-family-header: "Gill Sans", sans-serif;
}

/* Basic page style resets, building on the ones boostrap does */
body {
  font-family: var(--font-family-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1 {
  color: var(--color-primary);
  font-family: var(--font-family-header);
  font-size: 3.5rem;
  font-weight: bold;
}

h2 {
  font-family: var(--font-family-header);
  font-size: 2rem;
  margin-top: 1rem;
}

h3 {
  font-family: "Gill Sans", sans-serif;
  margin-top: 1rem;
  font-variant: all-small-caps;
  font-size: 2.5rem;
  font-weight: bold;
}

a,
a:hover {
  color: --color-secondary;
}

/* Header styles */
header {
  text-align: center;
  padding: 2rem;
}

header p {
  font-size: 1.5rem;
}

header small {
  font-size: 1rem;
}


/* main body, scrollytelling part styles */
article {
  position: relative;
  padding: 0;
  max-width: 50rem; /** on a wide screen don't make text boxes full-width **/
  margin: 0 auto;
}

figure {
  position: sticky; /** don't move this within the bounds of the #scrolly wrapper **/
  left: 0;
  width: 100%; /** make image fill the whole screen **/
  height: 100%;
  margin: 0;
  background-color: #471705;
  overflow: clip; /** don't let the image be scrolled horizontally **/
}

figure div.wrapper {
  /** center the image in the box **/
  display: flex;
  justify-content: center;
}

figure img {
  height: 100%; /** make the image fill the box **/
}

figcaption {
  position: relative;
  top: -2.5rem;
  color: var(--color-bg);
  background-color: rgba(255, 255, 255, 0.5); /* opacity is the 4th parameter */
  display: inline-block;
  font-size: 0.75rem;
  padding: 0 0.5rem;
}

.step {
  filter: drop-shadow(0px 0px 8px var(--color-text));
}

.step:last-child {
  margin-bottom: 0;
}

.step p {
  border-radius: 0.5rem;
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  background-color: var(--color-bg);
  margin: 0 3rem;
}

/* Footer styles */

footer {
  color: var(--color-bg);
  background-color: #0044cc;
  padding: 5rem 0 1rem 0;
  text-align: center;
  font-size: 1rem;
}

footer a {
  color: var(--color-bg);
}
footer a:hover {
  color: var(--color-bg);
}
footer a:visited {
  color: var(--color-bg);
}