ISSS608-TH3/ex03-style.css at main · dreytwy/ISSS608-TH3 · 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
/* --------------------------------------------------
   2  Left sidebar (Quarto id = #quarto-sidebar)
   --------------------------------------------------*/
#quarto-sidebar {
  background: #a8b9f4 !important; /* soft blue */
  width: 230px;                    /* keep navigation tidy */
}

#quarto-sidebar nav a {
  color: #ffffff !important;       /* base link colour */
}

#quarto-sidebar nav a:hover,
#quarto-sidebar nav a:focus {
  color: #ffdbf0 !important;       /* gentle hover tint */
}

#quarto-sidebar nav .active > a,
#quarto-sidebar nav a.active {
  color: #ee7bb2 !important;       /* accent for current page */
  font-weight: 600;
}


/* --------------------------------------------------
   3  Optional right‑hand information sidebar
   ↳  Include a <div id="right-sidebar"> … </div> in qmd
   --------------------------------------------------*/
#right-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 260px;
  background: #ffffff;
  border-left: 1px solid #d8d8d8;
  overflow-y: auto;
  padding: 1rem;
  z-index: 1000;                  /* sit on top of content */
}

/* --------------------------------------------------
   4  Fish animation footer (unchanged)
   --------------------------------------------------*/
.fish-footer {
  position: relative;
  height: 120px;
  overflow: hidden;
  background-color: #a8b9f4; /* Light blue water */
  margin-top: 2em;
}

.fish-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.fish {
  width: 235px;
  height: 104px;
  position: absolute;
  margin-left: -235px;
  animation: swim 20s linear infinite;
}

@keyframes swim {
  0%   { margin-left: -235px; }
  70%  { margin-left: 100%; }
  100% { margin-left: 100%; }
}

.fish circle {
  fill: #528484;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 50%, 100% { transform: translateY(0); }
  25%          { transform: translateY(-5px); }
  75%          { transform: translateY(-3px); }
}