dark theme icons & refactor minieventcard
This commit is contained in:
parent
b26e587bb2
commit
4d84ff9b61
|
@ -22,7 +22,7 @@ export function Footer() {
|
|||
<Button
|
||||
size="small"
|
||||
onClick={() =>
|
||||
themeContext?.theme.name == "dark"
|
||||
themeContext?.theme.name === "dark"
|
||||
? themeContext?.setTheme("light")
|
||||
: themeContext?.setTheme("dark")
|
||||
}
|
||||
|
|
|
@ -10,6 +10,21 @@
|
|||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.darkBg {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: calc(20rem / 16);
|
||||
background-color: var(--sectioning-light);
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.darkBg:nth-child(odd) h1,
|
||||
.darkBg:nth-child(odd) h2,
|
||||
.darkBg:nth-child(odd) h3,
|
||||
.darkBg:nth-child(odd) h4 {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
font-size: calc(18rem / 16);
|
||||
|
@ -25,7 +40,7 @@
|
|||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
.card:nth-child(odd) .info {
|
||||
.darkBg .info {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
|
@ -39,7 +54,7 @@
|
|||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.card:nth-child(odd) .details {
|
||||
.darkBg .details {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
|
@ -55,19 +70,31 @@
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.darkBg > summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.card > summary::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.darkBg > summary::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.darkBg > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropDownIcon {
|
||||
fill: var(--primary-accent);
|
||||
}
|
||||
|
||||
.card:nth-child(odd) .dropDownIcon {
|
||||
.darkBg .dropDownIcon {
|
||||
fill: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
|
@ -81,13 +108,6 @@
|
|||
color: var(--mini-event-card-text);
|
||||
}
|
||||
|
||||
.card:nth-child(odd) h1,
|
||||
.card:nth-child(odd) h2,
|
||||
.card:nth-child(odd) h3,
|
||||
.card:nth-child(odd) h4 {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.details {
|
||||
bottom: 0;
|
||||
|
|
|
@ -11,6 +11,7 @@ interface Props {
|
|||
online: boolean;
|
||||
location: string;
|
||||
date: Date;
|
||||
background: string;
|
||||
}
|
||||
|
||||
export const MiniEventCard: React.FC<Props> = ({
|
||||
|
@ -20,9 +21,11 @@ export const MiniEventCard: React.FC<Props> = ({
|
|||
location,
|
||||
date,
|
||||
online,
|
||||
background,
|
||||
}) => {
|
||||
const cardBackground = background === "dark-bg" ? styles.darkBg : styles.card;
|
||||
return (
|
||||
<details className={styles.card}>
|
||||
<details className={cardBackground}>
|
||||
<summary>
|
||||
<div onClick={(event) => event.preventDefault()}>
|
||||
<h2 className={styles.name}>
|
||||
|
|
|
@ -219,6 +219,14 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon line {
|
||||
stroke: var(--icon);
|
||||
}
|
||||
|
||||
.icon path {
|
||||
fill: var(--icon);
|
||||
}
|
||||
|
||||
.navMobileBackground {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
|
|
|
@ -120,7 +120,44 @@ export function Navbar() {
|
|||
className={styles.hamburger}
|
||||
onClick={() => dispatch({ type: "open", route: router.pathname })}
|
||||
>
|
||||
<Image src="/images/hamburger.svg" alt="Menu" />
|
||||
<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>
|
||||
</button>
|
||||
<div
|
||||
className={
|
||||
|
@ -263,7 +300,19 @@ function NavItem(props: NavItemProps) {
|
|||
}
|
||||
onClick={() => props.onToggle(props.route)}
|
||||
>
|
||||
<Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
|
||||
<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>
|
||||
</button>
|
||||
<ul
|
||||
className={
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
.table tbody tr:nth-child(odd) {
|
||||
background: var(--primary-accent-lightest);
|
||||
background: var(--table-section);
|
||||
}
|
||||
|
||||
.table th {
|
||||
|
|
|
@ -50,12 +50,15 @@ export const PALETTE_NAMES = [
|
|||
"--input-placeholder-text",
|
||||
"--input-text",
|
||||
|
||||
"--icon",
|
||||
|
||||
"--code-background",
|
||||
"--button-background",
|
||||
"--footer-background",
|
||||
"--card-background",
|
||||
"--sectioning-light",
|
||||
"--table-header",
|
||||
"--table-section",
|
||||
|
||||
"--navbar-page-overlay",
|
||||
|
||||
|
|
|
@ -41,6 +41,8 @@ body {
|
|||
--input-placeholder-text: #bbbbbb;
|
||||
--input-text: #6b6b6b;
|
||||
|
||||
--icon: #2A2A62;
|
||||
|
||||
--code-background: #f0f0f0;
|
||||
|
||||
--button-background: #1482e3;
|
||||
|
@ -48,6 +50,7 @@ body {
|
|||
--card-background: #ffffff;
|
||||
--sectioning-light: #dcf6f0;
|
||||
--table-header: #4ed4b2;
|
||||
--table-section: #f7fbff;
|
||||
|
||||
--blue-gradient: #1481E3;
|
||||
--border: #2a2a62;
|
||||
|
@ -75,7 +78,8 @@ input {
|
|||
--primary-accent: #5CAFF9;
|
||||
--primary-accent-soft: #5cb0f9;
|
||||
--primary-accent-light: #252542;
|
||||
--primary-accent-lightest: #525284;
|
||||
--primary-accent-lightest: #464671;
|
||||
--primary-accent-lighter: #171729;
|
||||
|
||||
--secondary-accent: #4ed3b2;
|
||||
--secondary-accent-light: #525284;
|
||||
|
@ -103,6 +107,8 @@ input {
|
|||
--input-placeholder-text: #bbbbbb;
|
||||
--input-text: #6b6b6b;
|
||||
|
||||
--icon: white;
|
||||
|
||||
--primary-title: #5CAFF9;
|
||||
--primary-subtitle: #C5C5F0;
|
||||
--secondary-subtitle: #ABABF2;
|
||||
|
@ -114,6 +120,7 @@ input {
|
|||
--card-background: #3A3A61;
|
||||
--sectioning-light: rgba(82, 82, 132, 0.2);
|
||||
--table-header: #252542;
|
||||
--table-section: #202037;
|
||||
|
||||
--blue-gradient: #5CAFF9;
|
||||
--border: #2A2A62;
|
||||
|
|
|
@ -95,12 +95,13 @@ export default function TermPage(props: Props) {
|
|||
</h1>
|
||||
)}
|
||||
<div className={styles.miniEventCards}>
|
||||
{props.pastEvents.map(({ content, metadata }) => (
|
||||
{props.pastEvents.map((event, key) => (
|
||||
<MiniEventCard
|
||||
{...metadata}
|
||||
date={new Date(metadata.date)}
|
||||
description={<MDXRemote {...content} />}
|
||||
key={metadata.name + metadata.date.toString()}
|
||||
{...event.metadata}
|
||||
date={new Date(event.metadata.date)}
|
||||
description={<MDXRemote {...event.content} />}
|
||||
key={event.metadata.name + event.metadata.date.toString()}
|
||||
background={key % 2 === 0 ? "dark-bg" : "normal-bg"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue