feat: sticky header

1 files changed, 391 insertions, 385 deletions

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);

+}