Skip to content

Commit 326eb6b

Browse files
CoolProgrammingUserCoolProgrammingUser
committed
added a birthday theme
1 parent 304e2db commit 326eb6b

File tree

4 files changed

+291
-12
lines changed

4 files changed

+291
-12
lines changed

‎behavior/general.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3370,6 +3370,8 @@ addEventListener("load", function () { // This waits for everything past the sc
33703370
}
33713371
if (timeIsNearby(2, 14)) {
33723372
seasonalStyle = "valentinesday.css";
3373+
} else if (timeOfYear.getMonth() == 2 && timeOfYear.getDate() == 11) {
3374+
seasonalStyle = "birthday.css";
33733375
} else if (timeIsNearby(7, 4)) {
33743376
seasonalStyle = "fourthofjuly.css";
33753377
} else if (timeIsNearby(10, 31)) {

‎formatting/birthday.css‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
body {
2+
/* background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><text y='1em' font-size='50'>&#x1f388</text></svg>"); */
3+
--pattern-color: #fff;
4+
animation: expanding-ripples .75s infinite linear, rainbow-background 5s infinite linear;
5+
}
6+
7+
main {
8+
background: rgba(255, 255, 255, .6);
9+
}
10+
11+
h1.main-title {
12+
color: black;
13+
text-shadow: 0em 0em .1em white;
14+
}
15+
h1.main-title::before {
16+
content: "\1f388 ";
17+
}
18+
h1.main-title::after {
19+
content: " \1f388";
20+
}
21+
22+
nav.top-nav {
23+
background: #00f;
24+
}
25+
nav.top-nav div.drop-down div {
26+
background: #ff0;
27+
color: black;
28+
}
29+
nav.top-nav div.drop-down>div:first-child {
30+
background: transparent;
31+
color: white;
32+
}
33+
nav.top-nav div.drop-down:hover>div:first-child, nav.top-nav div.drop-down:focus>div:first-child, nav.top-nav div.drop-down:focus-within>div:first-child {
34+
background: #0ff;
35+
color: black;
36+
}
37+
nav.top-nav>button {
38+
border-radius: 0em;
39+
background: transparent;
40+
color: black;
41+
}
42+
nav.top-nav>button::before {
43+
display: none;
44+
}
45+
nav.top-nav>button::after {
46+
display: none;
47+
}
48+
nav.hidden-left-nav {
49+
animation: rainbow-border 5s infinite linear;
50+
}
51+
52+
button:not(.hide-aside) {
53+
/* makes buttons look like a slice of cake */
54+
--icing-color: #fff;
55+
--cake-color: #ff5;
56+
position: relative;
57+
border-width: .3em .3em 0em 0em;
58+
border-radius: 0em;
59+
border-color: var(--icing-color);
60+
padding: .2em .5em .5em;
61+
background: linear-gradient(var(--cake-color), var(--cake-color) 45%, var(--icing-color) 42%, var(--icing-color) 58%, var(--cake-color) 55%);
62+
color: black;
63+
}
64+
button:not(.hide-aside)::before {
65+
/* makes the candle */
66+
content: "\1f56f\fe0f";
67+
position: absolute;
68+
left: 0em;
69+
right: 0em;
70+
bottom: 105%;
71+
font-size: .75em;
72+
}
73+
button:not(.hide-aside):active::after {
74+
/* makes the knife while active */
75+
content: "\1f52a";
76+
position: absolute;
77+
left: 0em;
78+
right: 0em;
79+
top: -.25em;
80+
font-size: 2em;
81+
}
82+
button:disabled, button[disabled] {
83+
--icing-color: #888;
84+
--cake-color: #aaa;
85+
}
86+
87+
@keyframes rainbow-background {
88+
0% {
89+
background-color: #f00;
90+
}
91+
25% {
92+
background-color: #ff0;
93+
}
94+
45% {
95+
background-color: #0f0;
96+
}
97+
60% {
98+
background-color: #0ff;
99+
}
100+
85% {
101+
background-color: #00f;
102+
}
103+
100% {
104+
background-color: #f00;
105+
}
106+
}
107+
@keyframes rainbow-border {
108+
0% {
109+
border-color: #f00;
110+
}
111+
25% {
112+
border-color: #ff0;
113+
}
114+
45% {
115+
border-color: #0f0;
116+
}
117+
60% {
118+
border-color: #0ff;
119+
}
120+
85% {
121+
border-color: #00f;
122+
}
123+
100% {
124+
border-color: #f00;
125+
}
126+
}
127+
@keyframes spinning-fan {
128+
0% {
129+
background-image: repeating-conic-gradient(transparent 0%, transparent, var(--pattern-color), transparent, transparent 10%);
130+
}
131+
10% {
132+
background-image: repeating-conic-gradient(transparent 1%, transparent, var(--pattern-color), transparent, transparent 11%);
133+
}
134+
20% {
135+
background-image: repeating-conic-gradient(transparent 2%, transparent, var(--pattern-color), transparent, transparent 12%);
136+
}
137+
30% {
138+
background-image: repeating-conic-gradient(transparent 3%, transparent, var(--pattern-color), transparent, transparent 13%);
139+
}
140+
40% {
141+
background-image: repeating-conic-gradient(transparent 4%, transparent, var(--pattern-color), transparent, transparent 14%);
142+
}
143+
50% {
144+
background-image: repeating-conic-gradient(transparent 5%, transparent, var(--pattern-color), transparent, transparent 15%);
145+
}
146+
60% {
147+
background-image: repeating-conic-gradient(transparent 6%, transparent, var(--pattern-color), transparent, transparent 16%);
148+
}
149+
70% {
150+
background-image: repeating-conic-gradient(transparent 7%, transparent, var(--pattern-color), transparent, transparent 17%);
151+
}
152+
80% {
153+
background-image: repeating-conic-gradient(transparent 8%, transparent, var(--pattern-color), transparent, transparent 18%);
154+
}
155+
90% {
156+
background-image: repeating-conic-gradient(transparent 9%, transparent, var(--pattern-color), transparent, transparent 19%);
157+
}
158+
100% {
159+
background-image: repeating-conic-gradient(transparent 0%, transparent, var(--pattern-color), transparent, transparent 10%);
160+
}
161+
}
162+
@keyframes expanding-ripples {
163+
0% {
164+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0%, transparent, var(--pattern-color), transparent, transparent 1%);
165+
}
166+
10% {
167+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.1%, transparent, var(--pattern-color), transparent, transparent 1.1%);
168+
}
169+
20% {
170+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.2%, transparent, var(--pattern-color), transparent, transparent 1.2%);
171+
}
172+
30% {
173+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.3%, transparent, var(--pattern-color), transparent, transparent 1.3%);
174+
}
175+
40% {
176+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.4%, transparent, var(--pattern-color), transparent, transparent 1.4%);
177+
}
178+
50% {
179+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.5%, transparent, var(--pattern-color), transparent, transparent 1.5%);
180+
}
181+
60% {
182+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.6%, transparent, var(--pattern-color), transparent, transparent 1.6%);
183+
}
184+
70% {
185+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.7%, transparent, var(--pattern-color), transparent, transparent 1.7%);
186+
}
187+
80% {
188+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.8%, transparent, var(--pattern-color), transparent, transparent 1.8%);
189+
}
190+
90% {
191+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0.9%, transparent, var(--pattern-color), transparent, transparent 1.9%);
192+
}
193+
100% {
194+
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0%, transparent, var(--pattern-color), transparent, transparent 1%);
195+
}
196+
}
197+
@keyframes wave-interference {
198+
0% {
199+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0%, transparent, #00f, transparent, transparent 1%), repeating-radial-gradient(circle at 75% 50%, transparent 0%, transparent, #00f, transparent, transparent 1%);
200+
}
201+
10% {
202+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.1%, transparent, #00f, transparent, transparent 1.1%), repeating-radial-gradient(circle at 75% 50%, transparent 0.1%, transparent, #00f, transparent, transparent 1.1%);
203+
}
204+
20% {
205+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.2%, transparent, #00f, transparent, transparent 1.2%), repeating-radial-gradient(circle at 75% 50%, transparent 0.2%, transparent, #00f, transparent, transparent 1.2%);
206+
}
207+
30% {
208+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.3%, transparent, #00f, transparent, transparent 1.3%), repeating-radial-gradient(circle at 75% 50%, transparent 0.3%, transparent, #00f, transparent, transparent 1.3%);
209+
}
210+
40% {
211+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.4%, transparent, #00f, transparent, transparent 1.4%), repeating-radial-gradient(circle at 75% 50%, transparent 0.4%, transparent, #00f, transparent, transparent 1.4%);
212+
}
213+
50% {
214+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.5%, transparent, #00f, transparent, transparent 1.5%), repeating-radial-gradient(circle at 75% 50%, transparent 0.5%, transparent, #00f, transparent, transparent 1.5%);
215+
}
216+
60% {
217+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.6%, transparent, #00f, transparent, transparent 1.6%), repeating-radial-gradient(circle at 75% 50%, transparent 0.6%, transparent, #00f, transparent, transparent 1.6%);
218+
}
219+
70% {
220+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.7%, transparent, #00f, transparent, transparent 1.7%), repeating-radial-gradient(circle at 75% 50%, transparent 0.7%, transparent, #00f, transparent, transparent 1.7%);
221+
}
222+
80% {
223+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.8%, transparent, #00f, transparent, transparent 1.8%), repeating-radial-gradient(circle at 75% 50%, transparent 0.8%, transparent, #00f, transparent, transparent 1.8%);
224+
}
225+
90% {
226+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0.9%, transparent, #00f, transparent, transparent 1.9%), repeating-radial-gradient(circle at 75% 50%, transparent 0.9%, transparent, #00f, transparent, transparent 1.9%);
227+
}
228+
100% {
229+
background-image: repeating-radial-gradient(circle at 25% 50%, transparent 0%, transparent, #00f, transparent, transparent 1%), repeating-radial-gradient(circle at 75% 50%, transparent 0%, transparent, #00f, transparent, transparent 1%);
230+
}
231+
}
232+
233+
@media (prefers-color-scheme: dark) {
234+
body {
235+
--pattern-color: #000;
236+
background-color: black;
237+
/* animation: expanding-ripples .75s infinite linear, rainbow-morph 5s infinite linear; */
238+
/* background-image: repeating-linear-gradient(45deg, #00f, transparent, transparent, #00f 10%), repeating-linear-gradient(-45deg, transparent, transparent, #0f0, transparent, transparent 10%); /* crosshatch pattern */
239+
}
240+
241+
main {
242+
background: rgba(0, 0, 0, .5);
243+
}
244+
245+
h1.main-title {
246+
color: white;
247+
text-shadow: 0em 0em .1em black;
248+
}
249+
250+
nav.top-nav {
251+
background: #00a;
252+
}
253+
nav.top-nav div.drop-down div {
254+
background: #aab;
255+
color: black;
256+
}
257+
nav.top-nav div.drop-down > div:first-child, nav.top-nav>button {
258+
color: white;
259+
}
260+
nav.top-nav div.drop-down:hover > div:first-child, nav.top-nav div.drop-down:focus > div:first-child, nav.top-nav div.drop-down:focus-within > div:first-child {
261+
background: #0cc;
262+
}
263+
264+
button:not(.hide-aside) {
265+
--icing-color: #421;
266+
--cake-color: #842;
267+
color: white;
268+
}
269+
button:disabled, button[disabled] {
270+
--icing-color: #888;
271+
--cake-color: #aaa;
272+
}
273+
}

‎formatting/foundation.css‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -613,17 +613,21 @@ table.labeled-list li ol, table.labeled-list li ul, .conversation li ol, .conver
613613
border-left-color: attr(data-color color);
614614
}
615615

616+
*:disabled, *[disabled] {
617+
cursor: not-allowed;
618+
}
619+
616620
input {
617621
text-align: center;
618622
}
619623
input:disabled {
620-
cursor: default;
624+
cursor: not-allowed;
621625
}
622626
input[type="text"] {
623627
cursor: text;
624628
}
625629
input[type="text"]:disabled {
626-
cursor: default;
630+
cursor: not-allowed;
627631
}
628632
input[type="checkbox"] {
629633
margin: .5em;
@@ -632,7 +636,7 @@ input[type="checkbox"] {
632636
cursor: pointer;
633637
}
634638
input[type="checkbox"]:disabled {
635-
cursor: default;
639+
cursor: not-allowed;
636640
}
637641
input[type="radio"] {
638642
margin: .5em;
@@ -641,15 +645,15 @@ input[type="radio"] {
641645
cursor: pointer;
642646
}
643647
input[type="radio"]:disabled {
644-
cursor: default;
648+
cursor: not-allowed;
645649
}
646650
input[type="range"] {
647651
width: 9.6em;
648652
height: 1.2em;
649653
cursor: pointer;
650654
}
651655
input[type="range"]:disabled {
652-
cursor: default;
656+
cursor: not-allowed;
653657
}
654658
button, input[type="button"], input[type="submit"] {
655659
margin: .5em;
@@ -666,23 +670,23 @@ button:active, input[type="button"]:active, input[type="submit"]:active {
666670
background: white;
667671
color: red;
668672
}
669-
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
673+
button:disabled, button[disabled], input[type="button"]:disabled, input[type="submit"]:disabled {
670674
border-color: #999;
671675
background: #c8c8c8;
672676
color: #999;
673-
cursor: default;
677+
cursor: not-allowed;
674678
}
675679
select {
676680
cursor: pointer;
677681
}
678682
select:disabled {
679-
cursor: default;
683+
cursor: not-allowed;
680684
}
681685
option {
682686
cursor: pointer;
683687
}
684688
option:disabled {
685-
cursor: default;
689+
cursor: not-allowed;
686690
}
687691

688692
textarea {
@@ -1150,7 +1154,7 @@ table.compact {
11501154
background: yellow;
11511155
color: black;
11521156
}
1153-
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
1157+
button:disabled, button[disabled], input[type="button"]:disabled, input[type="submit"]:disabled {
11541158
border: .15em solid #333;
11551159
background: #888;
11561160
color: #666;

‎formatting/valentinesday.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ h1.main-title {
66
color: white;
77
}
88
h1.main-title::before {
9-
content: "\2764";
9+
content: "\2764 ";
1010
}
1111
h1.main-title::after {
12-
content: "\2764";
12+
content: " \2764";
1313
}
1414

1515
nav.top-nav {

0 commit comments

Comments
 (0)