Slides/style.css at main · COSC-Organization/Slides · 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
/* Global Slide Styling */
.slidev-layout {
  background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%);
  color: white;
  border-left: 0px solid transparent;
  transition: border-left 0.5s ease;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Border-left animation for active slide */
/* This targets the layout when it's the current page */
/* Note: Slidev adds classes to the container, but we can style the layout */
.slidev-page-current .slidev-layout {
  border-left: 4px solid #3b82f6;
}

/* Strobe / Pulse effect */
@keyframes strobe {
  0% { opacity: 1; text-shadow: 0 0 15px rgba(59, 130, 246, 0.9); transform: scale(1); }
  50% { opacity: 0.7; text-shadow: 0 0 5px rgba(59, 130, 246, 0.4); transform: scale(0.98); }
  100% { opacity: 1; text-shadow: 0 0 15px rgba(59, 130, 246, 0.9); transform: scale(1); }
}

.strobe-text {
  animation: strobe 2s infinite ease-in-out;
  font-weight: bold;
  color: #60a5fa;
}

.high-impact-text {
  font-size: 4rem;
  font-weight: 900;
  color: white;
  line-height: 1.2;
}

/* Drawing Underline Animation */
.draw-under {
  background-image: linear-gradient(to right, #F97316 0%, #F97316 100%);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 100%;
  transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-bottom: 2px;
}

.draw-under:hover,
.slidev-vclick-current .draw-under,
.slidev-vclick-prior .draw-under {
  background-size: 100% 3px;
}

/* High Impact Typography Helper */
.high-impact-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.underlined {
  background-image: linear-gradient(to right, #F97316 0%, #F97316 100%);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 100%;
  transition: background-size 0.8s ease-in-out;
}

/* Triggered by Slidev's 'v-after' class */
.slidev-vclick-reveal.underlined,
.slidev-vclick-current .underlined,
.slidev-vclick-prior .underlined,
.slidev-page-current .underlined {
  background-size: 100% 3px;
}

@keyframes pulse-line {
  0% { stroke-width: 2px; stroke-opacity: 0.6; }
  50% { stroke-width: 5px; stroke-opacity: 1; }
  100% { stroke-width: 2px; stroke-opacity: 0.6; }
}