fix events + table + svg
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
3a4581a8b9
commit
6dde3f7614
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
border-radius: calc(5000rem / 16);
|
border-radius: calc(5000rem / 16);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -6,15 +6,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.darkBg {
|
.darkBg {
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
padding: calc(20rem / 16);
|
|
||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 18px;
|
font-size: calc(18rem / 16);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -53,26 +50,14 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.darkBg > summary {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card > summary::marker {
|
.card > summary::marker {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.darkBg > summary::marker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card > summary::-webkit-details-marker {
|
.card > summary::-webkit-details-marker {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.darkBg > summary::-webkit-details-marker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropDownIcon {
|
.dropDownIcon {
|
||||||
fill: var(--primary-accent);
|
fill: var(--primary-accent);
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,8 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
|
||||||
term,
|
term,
|
||||||
slug,
|
slug,
|
||||||
}) => {
|
}) => {
|
||||||
const cardBackground = background === "dark-bg" ? styles.darkBg : styles.card;
|
const cardBackground =
|
||||||
|
background === "dark-bg" ? `${styles.darkBg} ${styles.card}` : styles.card;
|
||||||
return (
|
return (
|
||||||
<details className={cardBackground}>
|
<details className={cardBackground}>
|
||||||
<summary>
|
<summary>
|
||||||
|
|
|
@ -120,44 +120,7 @@ export function Navbar() {
|
||||||
className={styles.hamburger}
|
className={styles.hamburger}
|
||||||
onClick={() => dispatch({ type: "open", route: router.pathname })}
|
onClick={() => dispatch({ type: "open", route: router.pathname })}
|
||||||
>
|
>
|
||||||
<svg
|
<HamburgerSvg />
|
||||||
width="30"
|
|
||||||
height="23"
|
|
||||||
viewBox="0 0 30 23"
|
|
||||||
className={styles.icon}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<line
|
|
||||||
x1="28"
|
|
||||||
y1="2"
|
|
||||||
x2="2"
|
|
||||||
y2="2"
|
|
||||||
stroke="#2A2A62"
|
|
||||||
strokeWidth="4"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="28"
|
|
||||||
y1="11.375"
|
|
||||||
x2="2"
|
|
||||||
y2="11.375"
|
|
||||||
stroke="#2A2A62"
|
|
||||||
strokeWidth="4"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="28"
|
|
||||||
y1="20.75"
|
|
||||||
x2="2"
|
|
||||||
y2="20.75"
|
|
||||||
stroke="#2A2A62"
|
|
||||||
strokeWidth="4"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
|
@ -300,19 +263,7 @@ function NavItem(props: NavItemProps) {
|
||||||
}
|
}
|
||||||
onClick={() => props.onToggle(props.route)}
|
onClick={() => props.onToggle(props.route)}
|
||||||
>
|
>
|
||||||
<svg
|
<DropdownSvg />
|
||||||
width="14"
|
|
||||||
height="9"
|
|
||||||
viewBox="0 0 14 9"
|
|
||||||
fill="none"
|
|
||||||
className={styles.icon}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
|
|
||||||
fill="#2A2A62"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<ul
|
<ul
|
||||||
className={
|
className={
|
||||||
|
@ -397,3 +348,64 @@ function getMainRoute(route: string) {
|
||||||
}
|
}
|
||||||
return "/" + route.split("/")[1];
|
return "/" + route.split("/")[1];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function HamburgerSvg() {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="30"
|
||||||
|
height="23"
|
||||||
|
viewBox="0 0 30 23"
|
||||||
|
className={styles.icon}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<line
|
||||||
|
x1="28"
|
||||||
|
y1="2"
|
||||||
|
x2="2"
|
||||||
|
y2="2"
|
||||||
|
stroke="#2A2A62"
|
||||||
|
strokeWidth="4"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="28"
|
||||||
|
y1="11.375"
|
||||||
|
x2="2"
|
||||||
|
y2="11.375"
|
||||||
|
stroke="#2A2A62"
|
||||||
|
strokeWidth="4"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="28"
|
||||||
|
y1="20.75"
|
||||||
|
x2="2"
|
||||||
|
y2="20.75"
|
||||||
|
stroke="#2A2A62"
|
||||||
|
strokeWidth="4"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownSvg() {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="14"
|
||||||
|
height="9"
|
||||||
|
viewBox="0 0 14 9"
|
||||||
|
fill="none"
|
||||||
|
className={styles.icon}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
|
||||||
|
fill="#2A2A62"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr:nth-child(odd) {
|
.table tbody tr:nth-child(even) {
|
||||||
background: var(--table-section);
|
background: var(--table-section);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -47,8 +47,8 @@ body {
|
||||||
|
|
||||||
--light--button-background: #1482e3;
|
--light--button-background: #1482e3;
|
||||||
--light--footer-background: #2a2a62;
|
--light--footer-background: #2a2a62;
|
||||||
--light--card-background: #ffffff;
|
--light--card-background: #DCF6F0;
|
||||||
--light--table-header: #4ed4b2;
|
--light--table-header: #DCF6F0;
|
||||||
--light--table-section: #f7fbff;
|
--light--table-section: #f7fbff;
|
||||||
|
|
||||||
--light--blue-gradient: #1481E3;
|
--light--blue-gradient: #1481E3;
|
||||||
|
|
|
@ -96,13 +96,13 @@ export default function TermPage(props: Props) {
|
||||||
</h1>
|
</h1>
|
||||||
)}
|
)}
|
||||||
<div className={styles.miniEventCards}>
|
<div className={styles.miniEventCards}>
|
||||||
{props.pastEvents.map((event, key) => (
|
{props.pastEvents.map((event, idx) => (
|
||||||
<MiniEventCard
|
<MiniEventCard
|
||||||
{...event.metadata}
|
{...event.metadata}
|
||||||
date={new Date(event.metadata.date)}
|
date={new Date(event.metadata.date)}
|
||||||
description={<MDXRemote {...event.content} />}
|
description={<MDXRemote {...event.content} />}
|
||||||
key={event.metadata.name + event.metadata.date.toString()}
|
key={event.metadata.name + event.metadata.date.toString()}
|
||||||
background={key % 2 === 0 ? "dark-bg" : "normal-bg"}
|
background={idx % 2 === 0 ? "dark-bg" : "normal-bg"}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue