From cc515e6d6105f8de9bfc66889cb1640e68fd8aed Mon Sep 17 00:00:00 2001
From: martial <msimon_fr@hotmail.com>
Date: Tue, 24 Dec 2024 19:47:55 +0100
Subject: feat: sticky header

---
 style.css | 776 +++++++++++++++++++++++++++++++-------------------------------
 1 file changed, 391 insertions(+), 385 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index cafe2df..cd6ac37 100644
--- a/style.css
+++ b/style.css
@@ -1,385 +1,391 @@
-:root {
-	--lblue: rgb(20, 20, 255);
-	--dblue: rgb(157, 157, 255);
-	--ddegree: #960e29;
-	--ldegree: #dc153c;
-	--lwork: #dc15a0;
-	--dwork: #960e6d;
-	--dstudies: #93370e;
-	--lstudies: #d95115;
-}
-
-body {
-	background: linear-gradient(74deg, skyblue, pink 65%, salmon);
-	padding: 0 12vw;
-	font-size: 1.1em;
-	font-family: tinos;
-}
-
-h1, h2, h3, h4 {
-	font-family: martian;
-}
-
-header {
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-}
-
-h1::before, h1::after {
-	content: " - ";
-}
-
-section h2 {
-	font-style: italic;
-}
-
-a {
-	color: black;
-	text-decoration: none;
-}
-
-nav {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	position: relative;
-	padding: default 3vw;
-	height: 100%;
-}
-
-nav a, nav sep {
-	display: inline-block;
-}
-
-nav sep {
-	margin: auto 0;
-}
-
-.text-link:hover {
-	font-weight: bold;
-}
-
-.text-link::after {
-	content: '<';
-}
-
-.text-link::before {
-	content: '>';
-}
-
-.link-color {
-	color: var(--lblue);
-}
-
-section>span>p {
-	padding-left: 30vw;
-}
-
-@media screen and (max-width: 600px) {
-	body {
-		padding: 10px 0;
-	}
-
-	section>span>p {
-		padding-left: 10vw;
-	}
-}
-
-section:nth-of-type(odd) {
-	text-align: end;
-}
-
-section#presentation {
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: end;
-	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;
-}
-
-#id-pic:hover {
-	filter: drop-shadow(#f62c2c 0 0 50px);
-}
-
-h1, h2 {
-	transition-property: text-decoration;
-	transition-duration: 0.7s;
-	transition-timing-function: ease-out;
-}
-
-h1:hover,h2:hover {
-	text-decoration: underline;
-}
-
-#timeline {
-	margin-top: 20px;
-	position: relative;
-}
-
-#timeline::before {
-	position: absolute;
-	content: '';
-	width: 4px;
-	height: calc(15px + 100%);
-	background: #add8e6;
-	left: 14px;
-	border: 1px solid grey;
-	box-shadow: 1px 1px 1px #696969;
-	border-radius: 3px;
-}
-
-.timestamp {
-	position: relative;
-	padding: 5px 15px 5px 35px;
-	background: repeating-radial-gradient(circle farthest-corner at calc(0.5em + 8px) 50%, pink, salmon, #f04040);
-	display: inline-block;
-	width: auto;
-	border-radius: 40px;
-	border: 1px solid pink;
-	margin-bottom: 30px;
-}
-
-.timestamp span {
-	font-family: Finkheavy;
-	filter: drop-shadow(2px 2px #fff1d0);
-}
-
-.timestamp::before {
-	position: absolute;
-	content: '';
-	width: 1em;
-	height: 1em;
-	background: salmon;
-	border-radius: 100%;
-	border: 1px solid pink;
-	left: 7px;
-}
-
-.events {
-	padding-left:35px;
-	display:flex;
-	flex-direction: row;
-	justify-content: start;
-	align-items: start;
-	flex-wrap: wrap;
-	position: relative;
-	margin-bottom: 30px;
-	width: calc(100% - 35px);
-}
-
-.events::before {
-	content: '';
-	position: absolute;
-	width: 30px;
-	height: 0;
-	border: 0.8px dashed red;
-	top: 12px;
-	left: 20px;
-}
-
-.events::after {
-	content: '';
-	position: absolute;
-	width: 10px;
-	height: 10px;
-	background: #2c778f;
-	top: 7px;
-	left: 11px;
-	border: 1px solid #1e5262;
-	border-radius: 100%;
-}
-
-.events:hover::after {
-	background: #1e5262;
-	border: 1px solid #2c778f;
-}
-
-.event {
-	position: relative;
-	border-radius: 0 15px 0 15px;
-	border: 1px solid black;
-	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-	overflow: hidden;
-	padding: 0;
-	max-width: 25vw;
-	margin: 5px 10px;
-	background-color: #fff1d060;
-	box-shadow: 1px 1px black;
-}
-
-.event:hover {
-	border-right: none;
-	box-shadow: 2px 2px rgb(20, 20, 255);
-	transform: translate(-2px, -2px);
-	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;
-}
-
-.event a {
-	color: #fff1d0;
-}
-
-.event h4 {
-	margin: 0;
-	padding: 1em 0.5em;
-	padding-left: 2.5em;
-	color: #fff1d0;
-	background-color: salmon;
-	border-bottom: 1px solid black;
-}
-
-#labels {
-	position: absolute;
-	right: 0;
-	text-align: right;
-	border-radius: 15px 0 15px 0;
-	border: 1px solid black;
-	padding: 1em;
-	background-color: #fff1d060;
-	color: #fff1d0;
-}
-
-span.degree, .degree h4 {
-	background-color: var(--ddegree);
-}
-
-div.degree::before {
-	content: "";
-	position: absolute;
-	top: 1em;
-	left: 1em;
-	color: #fff1d0;
-}
-
-span.work, .work h4 {
-	background-color: var(--dwork);
-}
-
-div.work::before {
-	content: "󰌢";
-	position: absolute;
-	top: 1em;
-	left: 1em;
-	color: #fff1d0;
-}
-
-span.studies, .studies h4 {
-	background-color: var(--dstudies);
-}
-
-div.studies::before {
-	content: "";
-	position: absolute;
-	top: 1em;
-	left: 1em;
-	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 var(--lblue, rgb(20, 20, 255));
-
-	}
-	to {
-		box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255));
-	}
-}
-
-hr {
-	border: none;
-	border-top: 2px dashed #f62c2c;
-}
-
-.citation {
-    text-align: center;
-    font-weight: bold;
-    font-size: 1.3em;
-}
-
-.citation p {
-    margin: 0;
-}
-
-.author {
-    text-align: right;
-    font-weight: normal;
-    font-style: italic;
-    font-size: smaller;
-}
-
-footer {
-	font-size: small;
-	text-align: right;
-}
-
-@font-face{
-	font-family:Cousine;
-	src:url(./fonts/CousineNerdFont-Regular.ttf);
-}
-
-@font-face {
-	font-family:finkheavy;
-	src:url(./fonts/FinkHeavy.ttf);
-}
-
-@font-face {
-	font-family: tinos;
-	src: url(fonts/TinosNerdFont-Regular.ttf);
-}
-
-@font-face {
-	font-family: martian;
-	src: url(fonts/MartianMonoNerdFont-Regular.ttf);
-}
+:root {
+	--lblue: rgb(20, 20, 255);
+	--dblue: rgb(157, 157, 255);
+	--ddegree: #960e29;
+	--ldegree: #dc153c;
+	--lwork: #dc15a0;
+	--dwork: #960e6d;
+	--dstudies: #93370e;
+	--lstudies: #d95115;
+}
+
+body {
+	background: linear-gradient(74deg, skyblue, pink 65%, salmon);
+	padding: 0 12vw;
+	font-size: 1.1em;
+	font-family: tinos;
+}
+
+header {
+    position: sticky;
+    top: 5px;
+    z-index: 10;
+}
+
+h1, h2, h3, h4 {
+	font-family: martian;
+}
+
+header {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+h1::before, h1::after {
+	content: " - ";
+}
+
+section h2 {
+	font-style: italic;
+}
+
+a {
+	color: black;
+	text-decoration: none;
+}
+
+nav {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	position: relative;
+	padding: default 3vw;
+	height: 100%;
+}
+
+nav a, nav sep {
+	display: inline-block;
+}
+
+nav sep {
+	margin: auto 0;
+}
+
+.text-link:hover {
+	font-weight: bold;
+}
+
+.text-link::after {
+	content: '<';
+}
+
+.text-link::before {
+	content: '>';
+}
+
+.link-color {
+	color: var(--lblue);
+}
+
+section>span>p {
+	padding-left: 30vw;
+}
+
+@media screen and (max-width: 600px) {
+	body {
+		padding: 10px 0;
+	}
+
+	section>span>p {
+		padding-left: 10vw;
+	}
+}
+
+section:nth-of-type(odd) {
+	text-align: end;
+}
+
+section#presentation {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: end;
+	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;
+}
+
+#id-pic:hover {
+	filter: drop-shadow(#f62c2c 0 0 50px);
+}
+
+h1, h2 {
+	transition-property: text-decoration;
+	transition-duration: 0.7s;
+	transition-timing-function: ease-out;
+}
+
+h1:hover,h2:hover {
+	text-decoration: underline;
+}
+
+#timeline {
+	margin-top: 20px;
+	position: relative;
+}
+
+#timeline::before {
+	position: absolute;
+	content: '';
+	width: 4px;
+	height: calc(15px + 100%);
+	background: #add8e6;
+	left: 14px;
+	border: 1px solid grey;
+	box-shadow: 1px 1px 1px #696969;
+	border-radius: 3px;
+}
+
+.timestamp {
+	position: relative;
+	padding: 5px 15px 5px 35px;
+	background: repeating-radial-gradient(circle farthest-corner at calc(0.5em + 8px) 50%, pink, salmon, #f04040);
+	display: inline-block;
+	width: auto;
+	border-radius: 40px;
+	border: 1px solid pink;
+	margin-bottom: 30px;
+}
+
+.timestamp span {
+	font-family: Finkheavy;
+	filter: drop-shadow(2px 2px #fff1d0);
+}
+
+.timestamp::before {
+	position: absolute;
+	content: '';
+	width: 1em;
+	height: 1em;
+	background: salmon;
+	border-radius: 100%;
+	border: 1px solid pink;
+	left: 7px;
+}
+
+.events {
+	padding-left:35px;
+	display:flex;
+	flex-direction: row;
+	justify-content: start;
+	align-items: start;
+	flex-wrap: wrap;
+	position: relative;
+	margin-bottom: 30px;
+	width: calc(100% - 35px);
+}
+
+.events::before {
+	content: '';
+	position: absolute;
+	width: 30px;
+	height: 0;
+	border: 0.8px dashed red;
+	top: 12px;
+	left: 20px;
+}
+
+.events::after {
+	content: '';
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: #2c778f;
+	top: 7px;
+	left: 11px;
+	border: 1px solid #1e5262;
+	border-radius: 100%;
+}
+
+.events:hover::after {
+	background: #1e5262;
+	border: 1px solid #2c778f;
+}
+
+.event {
+	position: relative;
+	border-radius: 0 15px 0 15px;
+	border: 1px solid black;
+	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+	overflow: hidden;
+	padding: 0;
+	max-width: 25vw;
+	margin: 5px 10px;
+	background-color: #fff1d060;
+	box-shadow: 1px 1px black;
+}
+
+.event:hover {
+	border-right: none;
+	box-shadow: 2px 2px rgb(20, 20, 255);
+	transform: translate(-2px, -2px);
+	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;
+}
+
+.event a {
+	color: #fff1d0;
+}
+
+.event h4 {
+	margin: 0;
+	padding: 1em 0.5em;
+	padding-left: 2.5em;
+	color: #fff1d0;
+	background-color: salmon;
+	border-bottom: 1px solid black;
+}
+
+#labels {
+	position: absolute;
+	right: 0;
+	text-align: right;
+	border-radius: 15px 0 15px 0;
+	border: 1px solid black;
+	padding: 1em;
+	background-color: #fff1d060;
+	color: #fff1d0;
+}
+
+span.degree, .degree h4 {
+	background-color: var(--ddegree);
+}
+
+div.degree::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.work, .work h4 {
+	background-color: var(--dwork);
+}
+
+div.work::before {
+	content: "󰌢";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.studies, .studies h4 {
+	background-color: var(--dstudies);
+}
+
+div.studies::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	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 var(--lblue, rgb(20, 20, 255));
+
+	}
+	to {
+		box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255));
+	}
+}
+
+hr {
+	border: none;
+	border-top: 2px dashed #f62c2c;
+}
+
+.citation {
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.3em;
+}
+
+.citation p {
+    margin: 0;
+}
+
+.author {
+    text-align: right;
+    font-weight: normal;
+    font-style: italic;
+    font-size: smaller;
+}
+
+footer {
+	font-size: small;
+	text-align: right;
+}
+
+@font-face{
+	font-family:Cousine;
+	src:url(./fonts/CousineNerdFont-Regular.ttf);
+}
+
+@font-face {
+	font-family:finkheavy;
+	src:url(./fonts/FinkHeavy.ttf);
+}
+
+@font-face {
+	font-family: tinos;
+	src: url(fonts/TinosNerdFont-Regular.ttf);
+}
+
+@font-face {
+	font-family: martian;
+	src: url(fonts/MartianMonoNerdFont-Regular.ttf);
+}
-- 
cgit v1.2.3