feat(publications,standardization,ui): harmonize typography, active category border, and 5 representative highlights
- Refine Publications overview & category detail pages with clean typography and spacing - Add active border line (border-2 border-cobalt-dark) on active CategoryNav card - Replace 10 highlights with 5 designated representative publications - Add Patent subtitle '(IoT Architecture & Protocols, etc ...)' - Update Footer link label from 'College of IT Engineering' to 'CITE' - Clean up Standardization & Lectures page header kickers and spacing
This commit is contained in:
@@ -6,56 +6,45 @@ export default function LecturesPage() {
|
||||
const olderSemesters = semesters.slice(3);
|
||||
|
||||
return (
|
||||
<div className="container-content space-y-12 md:space-y-16 pt-10 md:pt-16 pb-16 md:pb-24">
|
||||
{/* Header */}
|
||||
<section className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-px w-8 bg-cobalt-dark"></span>
|
||||
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
||||
Academic Courses
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
|
||||
강의 이력
|
||||
<div className="container-content py-8 sm:py-12 space-y-10 sm:space-y-14">
|
||||
{/* Page Header */}
|
||||
<section>
|
||||
<h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
|
||||
LECTURES
|
||||
</h1>
|
||||
<p className="text-ink-mute text-base max-w-2xl">
|
||||
2016년 가을학기부터 2026년 봄학기까지 개설된 네트워크 및 소프트웨어 분야 약 20개 학기의 학부/대학원 강의 목록입니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Recent 3 Semesters */}
|
||||
<section className="space-y-6 pt-6 md:pt-10 border-t border-line">
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
|
||||
Recent Courses ({recentSemesters.length} Semesters)
|
||||
</div>
|
||||
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
|
||||
최근 개설 강의
|
||||
</h2>
|
||||
</div>
|
||||
<section className="space-y-6 pt-6 md:pt-8 border-t border-line">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
|
||||
Recent Courses
|
||||
</h2>
|
||||
<span className="font-mono text-xs text-ink-mute hidden sm:inline">
|
||||
Latest 3 Semesters
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-6">
|
||||
{recentSemesters.map((sem, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-paper p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between"
|
||||
className="bg-paper p-5 sm:p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between shadow-sm"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center border-b border-line pb-2">
|
||||
<span className="font-serif text-xl font-normal text-ink">
|
||||
<div className="flex justify-between items-center border-b border-line pb-2.5">
|
||||
<span className="font-serif text-lg sm:text-xl font-normal text-ink">
|
||||
{sem.term} {sem.year}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-vermillion-dark font-bold">
|
||||
<span className="font-mono text-[0.7rem] uppercase tracking-wider text-vermillion-dark font-bold px-2 py-0.5 rounded bg-vermillion-dark/10">
|
||||
Latest
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 pt-1">
|
||||
<ul className="space-y-2.5 pt-1">
|
||||
{sem.courses.map((c, cIdx) => (
|
||||
<li key={cIdx} className="space-y-0.5">
|
||||
<div className="font-serif text-base text-ink">
|
||||
<div className="font-serif text-sm sm:text-base text-ink leading-snug">
|
||||
{c.en}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute">
|
||||
@@ -66,8 +55,9 @@ export default function LecturesPage() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-line/60 font-mono text-xs text-ink-mute">
|
||||
Course Count: {sem.courses.length}
|
||||
<div className="pt-3 border-t border-line/60 font-mono text-xs text-ink-mute flex justify-between items-center">
|
||||
<span>Total Offerings</span>
|
||||
<span className="font-semibold text-ink">{sem.courses.length} Courses</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -75,30 +65,30 @@ export default function LecturesPage() {
|
||||
</section>
|
||||
|
||||
{/* Older Semesters (Native <details>/<summary> progressive disclosure) */}
|
||||
<section className="space-y-6 pt-6 border-t border-line">
|
||||
<details className="group border border-line rounded-lg bg-paper p-6 transition-all duration-200">
|
||||
<section className="space-y-6 pt-6 md:pt-8 border-t border-line">
|
||||
<details className="group border border-line rounded-lg bg-paper p-5 sm:p-6 transition-all duration-200">
|
||||
<summary className="flex justify-between items-center cursor-pointer list-none select-none">
|
||||
<div className="space-y-1">
|
||||
<span className="font-serif text-xl font-normal text-ink">
|
||||
이전 전체 강의 이력 ({olderSemesters.length}개 학기) 열람하기
|
||||
<span className="font-serif text-lg sm:text-xl font-normal text-ink">
|
||||
Browse all semesters
|
||||
</span>
|
||||
<p className="text-xs text-ink-mute font-mono">
|
||||
2016 Fall ~ 2024 Spring 학기별 개설 교과목 이력
|
||||
Course history from 2016 Fall to 2024 Spring
|
||||
</p>
|
||||
</div>
|
||||
<span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3 py-1.5 rounded group-open:bg-vermillion-dark group-open:text-white dark:group-open:text-ivory transition-colors">
|
||||
<span className="group-open:hidden">전체 보기 ▾</span>
|
||||
<span className="hidden group-open:inline">접기 ▴</span>
|
||||
<span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3.5 py-1.5 rounded group-open:bg-vermillion-dark group-open:text-white dark:group-open:text-ivory transition-colors">
|
||||
<span className="group-open:hidden">Open ▾</span>
|
||||
<span className="hidden group-open:inline">Close ▴</span>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
|
||||
{olderSemesters.map((sem, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-ivory p-5 rounded border border-line space-y-3"
|
||||
className="bg-ivory p-5 rounded-lg border border-line space-y-3 shadow-sm hover:border-cobalt-dark/40 transition-colors"
|
||||
>
|
||||
<div className="font-serif text-lg font-normal text-ink border-b border-line pb-1.5 flex justify-between">
|
||||
<div className="font-serif text-base sm:text-lg font-normal text-ink border-b border-line pb-2 flex justify-between items-center">
|
||||
<span>
|
||||
{sem.term} {sem.year}
|
||||
</span>
|
||||
@@ -110,7 +100,7 @@ export default function LecturesPage() {
|
||||
<ul className="space-y-2">
|
||||
{sem.courses.map((c, cIdx) => (
|
||||
<li key={cIdx} className="space-y-0.5">
|
||||
<div className="font-serif text-sm text-ink">
|
||||
<div className="font-serif text-sm text-ink leading-snug">
|
||||
{c.en}
|
||||
</div>
|
||||
<div className="font-mono text-[0.7rem] text-ink-mute">
|
||||
|
||||
Reference in New Issue
Block a user