diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 20460cc..c084be1 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -211,7 +211,6 @@ const Container: React.FC<{
border-radius: 100%;
border: 0;
background: none;
- box-shadow: 0 0 1rem 0 rgba(100, 100, 100, 0.5);
cursor: pointer;
& > svg {
@@ -308,10 +307,9 @@ const Container: React.FC<{
max-width: 62rem;
min-height: 100%;
margin: auto;
-
- & > * {
- margin-bottom: 2rem;
- }
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
`,
className,
)}
diff --git a/src/components/Exp/Content.tsx b/src/components/Exp/Content.tsx
index d26451f..d8f8ca2 100644
--- a/src/components/Exp/Content.tsx
+++ b/src/components/Exp/Content.tsx
@@ -1,9 +1,9 @@
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
import React from "react";
import { setupCursorTracking } from "../../util";
import { Experience } from "./types";
-const Circle: React.FC = () => (
+const TimelineSegment: React.FC = () => (
(
background: #333333;
left: -50vw;
position: absolute;
- top: calc(-3rem + 0.2rem / 2);
+ top: calc(-3rem + 0.3rem / 2);
+ transform: translateY(-50%);
z-index: 0;
`}>
+ className={cx(
+ "timeline-circle",
+ css`
+ width: 0.3rem;
+ height: 0.3rem;
+ background: #333333;
+ border-radius: 100%;
+ position: absolute;
+ top: -3rem;
+ left: 0;
+ z-index: 100;
+ transition: background var(--transition-time) ease-in-out;
+ `,
+ )}>
);
@@ -56,7 +60,6 @@ const btn = css`
@media (pointer: fine) {
&:hover {
background-color: var(--card-hover);
- z-index: 1000;
box-shadow: 0 0 25rem 2rem rgba(190, 190, 190, 0.1);
}
}
@@ -92,7 +95,7 @@ export const Content = ({
return (