feat(tasarim): üniversite sayfası "şişko ve sade" dile göre baştan, DESIGN.md know-how'ı
Üniversite sayfası (canlı referans ekran /universite/ankara-universitesi): - Program listesi: ad kesilmez/sarar, telefonda taban sıra alt satıra iner, satır butonları 44 px, tür çipi okunur boyda - Başlık bloğu lg altında ortalı (logo başlığın üstünde), kimlik hapları (Devlet/Ankara) navbar ölçüsünde, ikon + metin - Harita yanında 4 özet kartı (OzetKart): sayı solda iri, ikon sağda; 4. kart URAP Türkiye sırası + piksel sıra şeridi (PixelSira) - Akademik göstergeler (URAP + YÖK İstatistik) sayfadan "Akademik göstergeler ›" satırının açtığı alt sayfaya taşındı: kartsız, ortalı, masonry gösterge kareleri, tek ekrana sığar - Hover tek turuncu (orange-500); liste satırı adı mavi kalır - Üst çubuk başlık geçişi (NavBaslik): h1 kaydırılınca üst çubukta logo + ad belirir; bölüm sayfasında da (yalnız ad) Tasarım dili: - DESIGN.md: temel his (§1.1), hover kuralı (§2.1), yazı alt sınırları, yeni tek kaynak parçalar (§4.8–4.15), lg altı ortala (§5.2), reddedilen denemeler (§7), ölç-tahmin-etme ve tuzaklar (§9) - Denetim: gösterge karesi renk istisnası (bg-indigo-500, bg-green-600) ve site taraması için dört uyarı (minik-yazi, buyuk-harf-etiket, mavi-hover, iri-sayi-tabular) Not: universite-icerik.tsx'teki akademik göstergeler bölümü (URAP/YÖK kartları) Bilal'in commit'lenmemiş işiydi; tasarım değişiklikleriyle aynı dosyada iç içe olduğu için bu commit'e girdi. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -298,6 +298,65 @@ export function PixelCorner({ className }: { className?: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Bir sıranın yerini tek satır piksel şeridinde gösteren sessiz gösterge
|
||||
* (ör. URAP'ta 198 üniversite içinde 5.). Şerit soldan (1.) sağa
|
||||
* (sonuncu) dilimlere bölünür; sıranın düştüğü dilim hero'daki şehirler
|
||||
* gibi turuncu yanar, geri kalanı hero dokusunda durur ve imleç fırçasına
|
||||
* katılır. Dekoratiftir: anlamı yanındaki metin taşır (renk tek başına
|
||||
* anlam taşımaz), bu yüzden aria-hidden.
|
||||
*/
|
||||
export function PixelSira({
|
||||
sira,
|
||||
toplam,
|
||||
hucre = 8,
|
||||
zemin = "acik",
|
||||
className,
|
||||
}: {
|
||||
sira: number;
|
||||
toplam: number;
|
||||
hucre?: number;
|
||||
/** "koyu": renkli dolu zemin üstünde (ör. turuncu gösterge karesi) —
|
||||
* işaret beyaz yanar, doku zeminin üstünde beyaz kalır. */
|
||||
zemin?: "acik" | "koyu";
|
||||
className?: string;
|
||||
}) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
// Isı fırçası turuncuya ısıtır; turuncu zeminde görünmez, orada kapalı.
|
||||
usePixelHeat(svgRef, { radius: zemin === "koyu" ? 0 : 28 });
|
||||
const yer = Math.min(
|
||||
hucre - 1,
|
||||
Math.max(0, Math.floor(((sira - 1) / toplam) * hucre)),
|
||||
);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={`0 0 ${hucre * CELL} ${CELL}`}
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className={cn("h-3.5 w-auto shrink-0 text-primary", className)}
|
||||
>
|
||||
{Array.from({ length: hucre }, (_, i) =>
|
||||
i === yer ? (
|
||||
<rect
|
||||
key={i}
|
||||
x={i * CELL + INSET}
|
||||
y={INSET}
|
||||
width={DOT}
|
||||
height={DOT}
|
||||
rx={2}
|
||||
className={zemin === "koyu" ? "fill-white" : "fill-orange-500"}
|
||||
fillOpacity={zemin === "koyu" ? 1 : 0.85}
|
||||
/>
|
||||
) : (
|
||||
<g key={i}>{fixedPixel(i * CELL, 0, opacityFor(i, 0) + 0.1)}</g>
|
||||
),
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Bölüm başlıklarının üstünde duran piksel imzalı eyebrow rozeti. */
|
||||
export function SectionEyebrow({
|
||||
children,
|
||||
|
||||
Reference in New Issue
Block a user