Skip to content

Commit

Permalink
style: update formula text colors for light/dark modes and run pretti…
Browse files Browse the repository at this point in the history 
…er format
  • Loading branch information
@ligsnf
ligsnf committed Dec 26, 2024
1 parent bcddbb8 commit 562db7f
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 42 deletions.
30 changes: 13 additions & 17 deletions src/components/hamburger-menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,31 @@
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { Button } from '@/components/ui/button';
import { Menu, X } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Link } from '@tanstack/react-router'
import { useState } from 'react'
} from '@/components/ui/dropdown-menu';
import { Link } from '@tanstack/react-router';
import { useState } from 'react';

type MenuItem = {
name: string
to: string
}
name: string;
to: string;
};

interface HamburgerMenuProps {
items: MenuItem[]
items: MenuItem[];
}

export function HamburgerMenu({ items }: HamburgerMenuProps) {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);

return (
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
{isOpen ? (
<X strokeWidth={3} />
) : (
<Menu />
)}
{isOpen ? <X strokeWidth={3} /> : <Menu />}
<span className="sr-only">Toggle navigation menu</span>
</Button>
</DropdownMenuTrigger>
Expand All @@ -46,5 +42,5 @@ export function HamburgerMenu({ items }: HamburgerMenuProps) {
))}
</DropdownMenuContent>
</DropdownMenu>
)
}
);
}
12 changes: 8 additions & 4 deletions src/components/site-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ function SiteLogo() {
}

export function SiteHeader() {
const isMobile = useBreakpoint('mobile')
const isDesktop = !isMobile
const isMobile = useBreakpoint('mobile');
const isDesktop = !isMobile;

return (
<header className="sticky top-0 z-50 border-b bg-background">
Expand Down Expand Up @@ -65,7 +65,11 @@ export function SiteHeader() {
<nav className="flex items-center gap-1">
{isDesktop && (
<Button asChild variant="outline" size="icon">
<a href={siteConfig.links.github} target="_blank" rel="noreferrer">
<a
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
>
<Icons.gitHub className="h-4 w-4" />
<span className="sr-only">GitHub</span>
</a>
Expand All @@ -76,5 +80,5 @@ export function SiteHeader() {
</div>
</div>
</header>
)
);
}
61 changes: 40 additions & 21 deletions src/routes/about.lazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,11 @@ function About() {
<h3 className="text-xl font-medium mb-2">GPA Formula</h3>
<div className="bg-muted p-4 rounded-md">
<p className="font-mono text-sm">
GPA = Σ(<code className="text-[#6f64a9]">g</code> &times;{' '}
<code className="text-[#6f64a9]">c</code>) ÷ Σ
<code className="text-[#6f64a9]">c</code>
GPA = Σ(
<code className="text-[#005c22] dark:text-[#00e654]">g</code>{' '}
&times;{' '}
<code className="text-[#005c22] dark:text-[#00e654]">c</code>) ÷
Σ<code className="text-[#005c22] dark:text-[#00e654]">c</code>
</p>
</div>
</div>
Expand All @@ -56,20 +58,33 @@ function About() {
{/* <div className="sm:hidden font-mono text-sm">
<p>WAM = </p>
<p className="pl-4">(</p>
<p className="pl-8">Σ(<code className="text-[#6f64a9]">m₁</code> &times; <code className="text-[#6f64a9]">c₁</code> &times; 0.5) +</p>
<p className="pl-8">Σ(<code className="text-[#6f64a9]">m₂</code> &times; <code className="text-[#6f64a9]">c₂</code> &times; 1.0)</p>
<p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">m₁</code> &times; <code className="text-[#005c22] dark:text-[#00e654]">c₁</code> &times; 0.5) +</p>
<p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">m₂</code> &times; <code className="text-[#005c22] dark:text-[#00e654]">c₂</code> &times; 1.0)</p>
<p className="pl-4">) ÷ (</p>
<p className="pl-8">Σ(<code className="text-[#6f64a9]">c₁</code> &times; 0.5) +</p>
<p className="pl-8">Σ(<code className="text-[#6f64a9]">c₂</code> &times; 1.0)</p>
<p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">c₁</code> &times; 0.5) +</p>
<p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">c₂</code> &times; 1.0)</p>
<p className="pl-4">)</p>
</div> */}
<p className="font-mono text-sm">
WAM = (Σ(<code className="text-[#6f64a9]">m₁</code> &times;{' '}
<code className="text-[#6f64a9]">c₁</code> &times; 0.5) + Σ(
<code className="text-[#6f64a9]">m₂</code> &times;{' '}
<code className="text-[#6f64a9]">c₂</code> &times; 1.0)) ÷ (Σ(
<code className="text-[#6f64a9]">c₁</code> &times; 0.5) + Σ(
<code className="text-[#6f64a9]">c₂</code> &times; 1.0))
WAM = (Σ(
<code className="text-[#005c22] dark:text-[#00e654]">m₁</code>{' '}
&times;{' '}
<code className="text-[#005c22] dark:text-[#00e654]">c₁</code>{' '}
&times; 0.5) + Σ(
<code className="text-[#005c22] dark:text-[#00e654]">
m₂
</code>{' '}
&times;{' '}
<code className="text-[#005c22] dark:text-[#00e654]">c₂</code>{' '}
&times; 1.0)) ÷ (Σ(
<code className="text-[#005c22] dark:text-[#00e654]">
c₁
</code>{' '}
&times; 0.5) + Σ(
<code className="text-[#005c22] dark:text-[#00e654]">
c₂
</code>{' '}
&times; 1.0))
</p>
</div>
</div>
Expand All @@ -79,24 +94,28 @@ function About() {
<div className="bg-muted p-4 rounded-md">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
<p>
<code className="text-[#6f64a9]">g</code> = grade value
<code className="text-[#005c22] dark:text-[#00e654]">g</code>{' '}
= grade value
</p>
<p>
<code className="text-[#6f64a9]">c</code> = credit points
<code className="text-[#005c22] dark:text-[#00e654]">c</code>{' '}
= credit points
</p>
<p>
<code className="text-[#6f64a9]">m₁</code> = first year mark
<code className="text-[#005c22] dark:text-[#00e654]">m₁</code>{' '}
= first year mark
</p>
<p>
<code className="text-[#6f64a9]">c₁</code> = first year credit
points
<code className="text-[#005c22] dark:text-[#00e654]">c₁</code>{' '}
= first year credit points
</p>
<p>
<code className="text-[#6f64a9]">m₂</code> = later year mark
<code className="text-[#005c22] dark:text-[#00e654]">m₂</code>{' '}
= later year mark
</p>
<p>
<code className="text-[#6f64a9]">c₂</code> = later year credit
points
<code className="text-[#005c22] dark:text-[#00e654]">c₂</code>{' '}
= later year credit points
</p>
</div>
</div>
Expand Down

0 comments on commit 562db7f

Please sign in to comment.