summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css776
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);
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-14 13:22:04 +0000