Skip to content

Commit 061d6ec

Browse files
jlumbrosojlumbroso
committed
feat: PennAI gradient, edit links everywhere, docs folder, staffer partial fix (tbc)
1 parent d4981e7 commit 061d6ec

21 files changed

Lines changed: 1152 additions & 2 deletions

‎assets/css/custom-edit-links.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Edit link styling */
2+
.edit-link {
3+
margin-left: 0.75rem;
4+
display: inline-block;
5+
opacity: 0.7;
6+
transition: opacity 0.2s ease, transform 0.2s ease;
7+
}
8+
9+
.edit-link:hover {
10+
opacity: 1;
11+
transform: translateY(-1px);
12+
}
13+
14+
.edit-link a {
15+
text-decoration: none;
16+
color: inherit;
17+
display: inline-flex;
18+
align-items: center;
19+
gap: 0.25rem;
20+
padding: 0.125rem;
21+
}
22+
23+
.edit-link a:hover {
24+
text-decoration: none;
25+
}
26+
27+
.edit-link svg {
28+
width: 18px;
29+
height: 18px;
30+
vertical-align: middle;
31+
}
32+
33+
/* Specific styling for list item edit links */
34+
.post-edit,
35+
.staffer-edit,
36+
.module-edit,
37+
.announcement-edit {
38+
font-size: 0.75em;
39+
vertical-align: middle;
40+
}
41+
42+
.post-edit svg,
43+
.staffer-edit svg,
44+
.module-edit svg,
45+
.announcement-edit svg {
46+
width: 20px;
47+
height: 20px;
48+
}
49+
50+
/* Adjust positioning in post titles */
51+
.gdoc-post__title .edit-link {
52+
font-weight: normal;
53+
margin-left: 1rem;
54+
}
55+
56+
/* Hide edit links on very small screens */
57+
@media (max-width: 480px) {
58+
.edit-link {
59+
display: none;
60+
}
61+
}

‎assets/css/penn-ai-mode.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/* =========================================================================
2+
Penn AI Mode Effect - Inspired by Google AI Mode Rainbow
3+
Using Penn's signature colors instead of rainbow spectrum
4+
========================================================================= */
5+
6+
/* Animation keyframes that will be used by both effects */
7+
@keyframes penn-ai-flash {
8+
0% {
9+
opacity: 0;
10+
background-position: 100% 0;
11+
transform: scaleY(1);
12+
}
13+
5% {
14+
opacity: 1;
15+
transform: scaleY(1.5);
16+
}
17+
50% {
18+
opacity: 1;
19+
background-position: 0% 0;
20+
transform: scaleY(1.2);
21+
}
22+
95% {
23+
opacity: 1;
24+
transform: scaleY(1.5);
25+
}
26+
100% {
27+
opacity: 0;
28+
background-position: -100% 0;
29+
transform: scaleY(1);
30+
}
31+
}
32+
33+
/* Continuous rotation mode (like Google's ambient state) */
34+
@keyframes penn-ai-rotate {
35+
0% {
36+
background-position: 0% 0;
37+
}
38+
100% {
39+
background-position: -300% 0;
40+
}
41+
}
42+
43+
/* Alternative: Radial expansion effect (like iOS implementation) */
44+
@keyframes penn-ai-expand {
45+
0% {
46+
opacity: 0;
47+
transform: scaleX(0) scaleY(1);
48+
}
49+
10% {
50+
opacity: 1;
51+
transform: scaleX(0.1) scaleY(1.5);
52+
}
53+
50% {
54+
opacity: 1;
55+
transform: scaleX(1) scaleY(1.2);
56+
background-position: -50% 0;
57+
}
58+
90% {
59+
opacity: 1;
60+
transform: scaleX(1) scaleY(1.5);
61+
}
62+
100% {
63+
opacity: 0;
64+
transform: scaleX(1) scaleY(1);
65+
background-position: -100% 0;
66+
}
67+
}
68+
69+
/* Circle effect around search or buttons (like Circle to Search) */
70+
.penn-ai-circle {
71+
position: relative;
72+
}
73+
74+
.penn-ai-circle::before {
75+
content: "";
76+
position: absolute;
77+
inset: -3px;
78+
border-radius: inherit;
79+
padding: 2px;
80+
background: linear-gradient(
81+
45deg,
82+
#011F5B,
83+
#019CDE,
84+
#990000,
85+
#019CDE,
86+
#011F5B
87+
);
88+
background-size: 300% 300%;
89+
-webkit-mask:
90+
linear-gradient(#fff 0 0) content-box,
91+
linear-gradient(#fff 0 0);
92+
-webkit-mask-composite: exclude;
93+
mask-composite: exclude;
94+
opacity: 0;
95+
animation: penn-circle-rotate 3s linear infinite;
96+
}
97+
98+
@keyframes penn-circle-rotate {
99+
0% {
100+
background-position: 0% 50%;
101+
opacity: 0.8;
102+
}
103+
50% {
104+
background-position: 100% 50%;
105+
opacity: 1;
106+
}
107+
100% {
108+
background-position: 0% 50%;
109+
opacity: 0.8;
110+
}
111+
}
112+
113+
.penn-ai-active .penn-ai-circle::before {
114+
opacity: 1;
115+
}
116+
117+
/* Performance optimizations */
118+
@media (prefers-reduced-motion: reduce) {
119+
main.container::before,
120+
.penn-ai-circle::before {
121+
animation: none !important;
122+
}
123+
124+
.penn-gradient-pulse main.container::before {
125+
opacity: 0.5;
126+
background-position: -50% 0;
127+
}
128+
}
129+
130+
/* =========================================================================
131+
HEADER BOTTOM BORDER FLASH: Animate the existing border
132+
========================================================================= */
133+
134+
/* Animate the header's bottom border color directly */
135+
@keyframes penn-header-border-flash {
136+
0% {
137+
border-bottom-color: #990000;
138+
}
139+
10% {
140+
border-bottom-color: #011F5B;
141+
}
142+
30% {
143+
border-bottom-color: #019CDE;
144+
}
145+
50% {
146+
border-bottom-color: #990000;
147+
}
148+
70% {
149+
border-bottom-color: #019CDE;
150+
}
151+
90% {
152+
border-bottom-color: #011F5B;
153+
}
154+
100% {
155+
border-bottom-color: #990000;
156+
}
157+
}
158+
159+
/* Apply the animation to the header - just animate the border color */
160+
.penn-gradient-flash .gdoc-header {
161+
animation: penn-header-border-flash 2s cubic-bezier(0.4, 0, 0.2, 1);
162+
}
163+
164+
/* Dark mode adjustments */
165+
:root[color-theme="dark"] main.container {
166+
border-top-color: var(--penn-electric-blue, #019CDE);
167+
}
168+
169+
:root[color-theme="dark"] main.container::before {
170+
filter: brightness(1.2);
171+
}
172+
173+
:root[color-theme="dark"] .penn-gradient-flash main.container::before,
174+
:root[color-theme="dark"] .penn-gradient-pulse main.container::before {
175+
box-shadow:
176+
0 0 15px rgba(1, 156, 222, 0.7),
177+
0 0 30px rgba(1, 156, 222, 0.4),
178+
0 0 45px rgba(153, 0, 0, 0.3);
179+
}
180+
181+
:root[color-theme="dark"] .gdoc-header::after {
182+
filter: brightness(1.2);
183+
}
184+
185+
:root[color-theme="dark"] .penn-gradient-flash .gdoc-header::after,
186+
:root[color-theme="dark"] .penn-gradient-pulse .gdoc-header::after {
187+
box-shadow:
188+
0 2px 15px rgba(1, 156, 222, 0.7),
189+
0 4px 30px rgba(1, 156, 222, 0.4),
190+
0 6px 45px rgba(153, 0, 0, 0.3);
191+
}

0 commit comments

Comments
 (0)