nerdslab.github.io/style.css at main · nerdslab/nerdslab.github.io · 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

body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
header { background: #f4f4f4; padding: 20px; text-align: center; }
header img { display: block; margin: 0 auto; }
nav a { margin: 0 15px; text-decoration: none; color: #333; }
main { padding: 20px; }
footer { text-align: center; padding: 10px; background: #eee; position: fixed; width: 100%; bottom: 0; }

body > header,
.hero > header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(255, 255, 255, 1);
  border-bottom-color: #ddd;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  backdrop-filter: saturate(140%) blur(0);
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease;
}

.hero > header {
  position: fixed;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}

body > header.is-scrolled,
.hero > header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(221, 221, 221, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(140%) blur(10px);
}