firefox support

cssgen.py

@@ -11,8 +11,8 @@ def main():
 		l = round(t - (1/2)*b, 2)
 		l2 = round(t - (1/2)*(b+1), 2)
 
-		p0 = f'-webkit-clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l}% {b}%, {round(l-0.1, 2)}% {b}%);'
+		p0 = f'clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l}% {b}%, {round(l-0.1, 2)}% {b}%);'
-		p1 = f'-webkit-clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l2}% {b+1}%, {round(l2-0.1, 2)}% {b+1}%);'
+		p1 = f'clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l2}% {b+1}%, {round(l2-0.1, 2)}% {b+1}%);'
 		f.write(f'@keyframes s{i+1} {{\n\t0% {{ {p0} }}\n\t100% {{ {p1} }}\n}}\n\n')
 		initial.append(p0)
 
@@ -21,8 +21,8 @@ def main():
 		r = round(t + (1/2)*b, 2)
 		r2 = round(t + (1/2)*(b+1), 2)
 
-		p0 = f'-webkit-clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r}% {100-b}%, {round(r-0.1, 2)}% {100-b}%);'
+		p0 = f'clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r}% {100-b}%, {round(r-0.1, 2)}% {100-b}%);'
-		p1 = f'-webkit-clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r2}% {99-b}%, {round(r2-0.1, 2)}% {99-b}%);'
+		p1 = f'clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r2}% {99-b}%, {round(r2-0.1, 2)}% {99-b}%);'
 
 		f.write(f'@keyframes s{i+n+1} {{\n\t0% {{ {p0} }}\n\t100% {{ {p1} }}\n}}\n\n')
 		initial.append(p0)
@@ -32,8 +32,8 @@ def main():
 		l = round(t - (1/2)*b, 2)
 		l2 = round(t - (1/2)*(b+1), 2)
 
-		p0 = f'-webkit-clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l}% {b}%, {round(l-0.1, 2)}% {b}%);'
+		p0 = f'clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l}% {b}%, {round(l-0.1, 2)}% {b}%);'
-		p1 = f'-webkit-clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l2}% {b+1}%, {round(l2-0.1, 2)}% {b+1}%);'
+		p1 = f'clip-path: polygon({t}% 0, {round(t+0.1, 2)}% 0, {l2}% {b+1}%, {round(l2-0.1, 2)}% {b+1}%);'
 		
 		f.write(f'@keyframes s{i+2*n+1} {{\n\t0% {{ {p0} }}\n\t100% {{ {p1} }}\n}}\n\n')
 		initial.append(p0)
@@ -43,8 +43,8 @@ def main():
 		r = round(t + (1/2)*b, 2)
 		r2 = round(t + (1/2)*(b+1), 2)
 
-		p0 = f'-webkit-clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r}% {100-b}%, {round(r-0.1, 2)}% {100-b}%);'
+		p0 = f'clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r}% {100-b}%, {round(r-0.1, 2)}% {100-b}%);'
-		p1 = f'-webkit-clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r2}% {99-b}%, {round(r2-0.1, 2)}% {99-b}%);'
+		p1 = f'clip-path: polygon({t}% 100%, {round(t+0.1, 2)}% 100%, {r2}% {99-b}%, {round(r2-0.1, 2)}% {99-b}%);'
 
 		f.write(f'@keyframes s{i+3*n+1} {{\n\t0% {{ {p0} }}\n\t100% {{ {p1} }}\n}}\n\n')
 		initial.append(p0)

index.css

@@ -3,6 +3,7 @@ html, body {
 	margin: 0;
 	font-family: 'Quicksand', sans-serif;
 	color: white;
+	z-index: -1;
 }
 
 ::selection {
@@ -32,7 +33,7 @@ a:hover {
 	position: absolute;
 	top: 0; left: 0;
 	background-color: #121212; 
-	z-index: -1;
+	z-index: 0;
 }
 
 #bgWrap div {
@@ -43,7 +44,7 @@ a:hover {
 }
 
 #bgWrap div:nth-child(101) {
-	-webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 20% 100%);
+	clip-path: polygon(70% 0, 100% 0, 100% 100%, 20% 100%);
 	background-color: #e6e6df;
 	z-index: -1;
 }
@@ -59,6 +60,7 @@ a:hover {
 	padding: 1%;
 	grid-column: 1;
 	margin: auto;
+	z-index: 3;
 }
 
 #name h1 {
@@ -83,6 +85,7 @@ a:hover {
 	height: 50%;
 	width: 60%;
 	color: black;
+	z-index: 1;
 
 	display: grid;
 	grid-template-columns: 1fr 29fr;
@@ -155,10 +158,14 @@ input[type='radio'] {
 }
 
 .content h2 {
-	font-weight: 400;
+	font-weight: 300;
 	font-size: 100%;
 	margin: 0;
-	text-shadow: 6px 6px #b5b5b5;
+}
+
+.content h2 u {
+	text-decoration: none;
+	border-bottom: 1px solid black;
 }
 
 .content p {
@@ -176,7 +183,7 @@ input[type='radio'] {
 	}
 
 	#bgWrap div:nth-child(101) {
-		-webkit-clip-path: polygon(0 40%, 100% 30%, 100% 100%, 0 100%);
+		clip-path: polygon(0 40%, 100% 30%, 100% 100%, 0 100%);
 		background-color: #e6e6df;
 		z-index: -1;
 		display: block;

index.html

@@ -40,7 +40,7 @@
 			<label for="tab3"></label>
 
 			<div class="content">
-		    	<h2>ABOUT</h2>
+		    	<h2><u>ABOUT</u></h2>
 		    	<p>
 		    		My name is <a href="https://kjao.me/resume">Kenneth Jao</a> and I'm a developer, electrical and computer engineer, and just generally a problem solver.
 		    	</p>
@@ -55,7 +55,7 @@
 		    	</p>
 			</div>
 			<div class="content">
-				<h2>PROJECTS</h2>
+				<h2><u>PROJECTS</u></h2>
 				<p>
 					I work on many projects, most of which can be found at my <a href="https://github.com/ksjdragon/">GitHub</a>. The most significant ones are found on this website.
 				</p>
@@ -68,7 +68,7 @@
 				</p>
 			</div>
 			<div class="content">
-				<h2>OTHER</h2>
+				<h2><u>OTHER</u></h2>
 				<p>
 					Outside of developing, I also have a <a href="https://blog.kjao.me/">blog</a> where I write about puzzles or problems, things I come across, or whatever interests me.
 				</p>