proto: added a bunch of content to the skills, fiddled with the layout, and changed the colors of the box-shadows in the timeline

1 files changed, 57 insertions, 8 deletions

diff --git a/style.css b/style.css
index b122dfc..b5b125a 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,12 @@
 :root {
-	--blue: #1414FF;
+	--lblue: rgb(20, 20, 255);
+	--dblue: rgb(157, 157, 255);
+	--ddegree: #960e29;
+	--ldegree: #dc153c;
+	--lwork: #dc15a0;
+	--dwork: #960e6d;
+	--dstudies: #93370e;
+	--lstudies: #d95115;
 }
 
 body {
@@ -76,10 +83,12 @@ section#presentation {
 	display: flex;
 	flex-direction: row-reverse;
 	justify-content: end;
-	height: 50vh;
+	align-items: center;
+	min-height: 50vh;
 }
 
 #id-pic {
+	max-height: 50vh;
 	height: auto;
 	filter: drop-shadow(#ff7676 0 0 20px);
 	transition: filter 1s ease-in;
@@ -189,6 +198,21 @@ h1:hover,h2:hover {
 	animation: 1s ease-in-out alternate infinite blue-shift;
 }
 
+.degree:hover {
+	--lblue: var(--ldegree);
+	--dblue: var(--ddegree);
+}
+
+.work:hover {
+	--lblue: var(--lwork);
+	--dblue: var(--dwork);
+}
+
+.studies:hover {
+	--lblue: var(--lstudies);
+	--dblue: var(--dstudies);
+}
+
 .event p {
 	margin: 1em;
 }
@@ -210,7 +234,7 @@ h1:hover,h2:hover {
 	position: absolute;
 	right: 0;
 	text-align: right;
-	border-radius: 0 15px 0 15px;
+	border-radius: 15px 0 15px 0;
 	border: 1px solid black;
 	padding: 1em;
 	width: 10vw;
@@ -219,7 +243,7 @@ h1:hover,h2:hover {
 }
 
 span.degree, .degree h4 {
-	background-color: #960e29;
+	background-color: var(--ddegree);
 }
 
 div.degree::before {
@@ -231,7 +255,7 @@ div.degree::before {
 }
 
 span.work, .work h4 {
-	background-color: #960e6d;
+	background-color: var(--dwork);
 }
 
 div.work::before {
@@ -243,7 +267,7 @@ div.work::before {
 }
 
 span.studies, .studies h4 {
-	background-color: #93370e;
+	background-color: var(--dstudies);
 }
 
 div.studies::before {
@@ -254,13 +278,38 @@ div.studies::before {
 	color: #fff1d0;
 }
 
+.skill {
+	text-align: center;
+}
+
+.skill-cats {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.skill-cats div {
+	text-align: center;
+	width: 50%;
+}
+
+.skill-cats li {
+	width: 100%;
+	text-align: left;
+	margin: 0.25em auto;
+}
+
+h3.skill, .skill-cats h4 {
+	text-decoration: underline;
+}
+
 @keyframes blue-shift {
 	from {
-		box-shadow: 2px 2px rgb(20, 20, 255);
+		box-shadow: 2px 2px var(--lblue, rgb(20, 20, 255));
 
 	}
 	to {
-		box-shadow: 2px 2px rgb(157, 157, 255);
+		box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255));
 	}
 }