added medieval theme

Hunter
Tuesday, August 6th, 2024 at 4:04 PM


index.html+50-12
index.html
 1  <!DOCTYPE html>
   -<html lang="en" data-theme="gak"> <!-- update to change theme -->
 2 +<html lang="en" data-theme="medieval"> <!-- update to change theme -->
 3  <head>
 4  	<meta charset="UTF-8">
 5  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 +
 7 +	<!-- favicon -->
 8  	<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪆</text></svg>">
 9 +
10 +	<!-- fonts -->
11 +	<link rel="preconnect" href="https://fonts.googleapis.com">
12 +	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 +	<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
14 +
15  	<title>todo</title>
16  	<style>
17  		:root {
   -			--snow: #ffffff;
   -			--coal: #000000;
   -			--slime: #ccff00;
   -			--grape: #7700ff;
18 +			--coconut: #ffffff;
19 +			--licorice: #000000;
20 +			--wasabi: #ccff00;
21 +			--eggplant: #7700ff;
22  
23  			--murk: #8e9918;
24  			--tadpole: #27350f;
25  			--lilypad: #6f8823;
26  			--reed: #4a5d23;
27  
28 +			--pollen: #f4a127;
29  			--loam: #5a352b;
   -			--honey: #f4a127;
30  			--chlorophyll: #5aa83b;
   -			--terracotta: #cc5638;
31 +			--terracotta: #b15c2e;
32 +
33 +			--wheat: #D2C3A3;
34 +			--earth: #4A3C31;
35 +			--pumpkin: #cb7c52;
36 +			--tobacco: #7D6C55;
37 +
38 +			--forest: #20302f;
39 +			--goat-milk:#d8d3c9;
40 +			--burl: #231f20;
41 +			--flame: #c63728;
42 +			
43 +			--mushroom: #bab496;
44 +			--blood: #3e1815;
45  		}
46  
47  		:root[data-theme="gak"] {
   -			--background: var(--snow);
   -			--text: var(--coal);
   -			--highlight: var(--slime);
   -			--accent: var(--grape);
48 +			--background: var(--coconut);
49 +			--text: var(--licorice);
50 +			--highlight: var(--wasabi);
51 +			--accent: var(--eggplant);
52  		}
53  
54  		:root[data-theme="swamp"] {

59  		}
60  
61  		:root[data-theme="sunflower"] {
   -			--background: var(--honey);
62 +			--background: var(--pollen);
63  			--text: var(--loam);
64  			--highlight: var(--chlorophyll);
65  			--accent: var(--terracotta);
66  		}
67  
68 +		:root[data-theme="harvest"] {
69 +			--background: var(--wheat);
70 +			--text: var(--earth);
71 +			--highlight: var(--pumpkin);
72 +			--accent: var(--tobacco);
73 +		}
74 +
75 +		[data-theme="medieval"] {
76 +			--background: var(--forest);
77 +			--text: var(--goat-milk);
78 +			--highlight: var(--burl);
79 +			--accent: var(--flame);
80 +			& input[type="text"] {
81 +				font-family: "MedievalSharp";
82 +			}
83 +		}
84 +
85  		@keyframes shake {
86  			0% { transform: translateX(0); }
87  			20% { transform: translateX(3px); }