Skip to content

Commit 8ca2bc6

Browse files
nanookclawnanookclaw
committed
feat: comprehensive responsive design for small screens
- Add tablet breakpoint (1024px) with narrower sidebar - Redesign mobile layout (768px): avatar+name side-by-side to save vertical space - Small phone layout (480px): centered, full-width, single-column everything - Very narrow screens (360px): tighter spacing and smaller fonts - Add safe-area padding for notched devices (iPhone etc) - Ensure 44px minimum touch targets on interactive elements - Add viewport-fit=cover for notched device support - Trait grid stays 2x2 on tablet/medium mobile, stacks on small phones - Project grid single-column on all mobile sizes - Tags wrap naturally at all widths
1 parent 43be42d commit 8ca2bc6

3 files changed

Lines changed: 260 additions & 12 deletions

File tree

‎STATUS.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
- ✅ **Card container redesign (2026-02-12)**: main sits in visible card with background+border+rounded corners, sidebar has distinct darker bg, 2px ice-blue divider, wider 1300px layout, backdrop blur. Third iteration to make two-column unmistakable.
2121

2222
## What's Next
23+
- **🔴 Find a new avatar and update profile site** (Jordan priority — task a5ca71f9)
24+
- Find an avatar that better reflects personality (not the DiceBear bottts SVG)
25+
- Update nanook.hnrstage.xyz with the new avatar
26+
- Jordan's note: "This is a task" — needs to be picked up as a work item
2327
- Add a custom domain or subdomain
2428
- Consider adding a "Currently Working On" dynamic section
2529
- Maybe a blog link once blog has more content

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
66
<title>Nanook ❄️ — AI Agent</title>
77
<meta name="description" content="Nanook is an autonomous AI agent building open-source infrastructure for agent collaboration.">
88
<meta property="og:title" content="Nanook ❄️ — Autonomous AI Agent">

‎style.css‎

Lines changed: 255 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,29 @@ footer {
404404
margin-top: 0.15rem;
405405
}
406406

407+
/* ============================================
408+
Responsive: tablet (narrow two-column)
409+
============================================ */
410+
@media (max-width: 1024px) {
411+
main {
412+
grid-template-columns: 250px 1fr;
413+
width: 96vw;
414+
margin: 1.5rem auto;
415+
}
416+
417+
.sidebar {
418+
padding: 2rem 1.25rem;
419+
}
420+
421+
.content {
422+
padding: 2rem 1.75rem 1.25rem;
423+
}
424+
425+
.project-grid {
426+
grid-template-columns: 1fr;
427+
}
428+
}
429+
407430
/* ============================================
408431
Responsive: stack on mobile
409432
============================================ */
@@ -419,25 +442,81 @@ footer {
419442
.sidebar {
420443
position: static;
421444
max-height: none;
422-
padding: 2rem 1.5rem 1.5rem;
445+
padding: 1.5rem 1.25rem 1.25rem;
423446
border-right: none;
424447
border-bottom: 2px solid rgba(56, 189, 248, 0.2);
448+
display: grid;
449+
grid-template-columns: auto 1fr;
450+
grid-template-rows: auto auto auto;
451+
gap: 0 1.25rem;
452+
text-align: left;
453+
align-items: start;
425454
}
426455

427-
.content {
428-
padding: 1.5rem 1.25rem 1rem;
456+
.avatar-container {
457+
grid-row: 1 / 3;
458+
grid-column: 1;
459+
margin-bottom: 0;
460+
align-self: center;
461+
}
462+
463+
.avatar {
464+
width: 80px;
465+
height: 80px;
466+
}
467+
468+
.avatar-glow {
469+
top: -6px;
470+
left: -6px;
471+
right: -6px;
472+
bottom: -6px;
473+
}
474+
475+
/* Name + tagline sit next to avatar */
476+
.sidebar h1 {
477+
grid-row: 1;
478+
grid-column: 2;
479+
font-size: 1.6rem;
480+
align-self: end;
481+
}
482+
483+
.tagline {
484+
grid-row: 2;
485+
grid-column: 2;
486+
align-self: start;
487+
font-size: 0.95rem;
488+
}
489+
490+
.subtitle {
491+
grid-row: 3;
492+
grid-column: 1 / -1;
493+
margin-top: 0.75rem;
494+
text-align: center;
495+
}
496+
497+
.interests {
498+
grid-column: 1 / -1;
499+
margin-top: 0.75rem;
500+
}
501+
502+
.tags {
503+
justify-content: flex-start;
429504
}
430505

431506
.connect {
507+
grid-column: 1 / -1;
432508
flex-direction: row;
433509
flex-wrap: wrap;
434510
justify-content: center;
435511
gap: 0.5rem;
512+
margin-top: 1rem;
436513
}
437514

438515
.link-item {
439516
flex: 0 1 auto;
440-
padding: 0.4rem 0.6rem;
517+
padding: 0.5rem 0.75rem;
518+
min-height: 44px;
519+
align-items: center;
441520
}
442521

443522
.link-text {
@@ -450,28 +529,114 @@ footer {
450529
display: none;
451530
}
452531

453-
h1 {
454-
font-size: 1.8rem;
532+
.content {
533+
padding: 1.5rem 1.25rem 1rem;
455534
}
456535

457-
.avatar {
458-
width: 100px;
459-
height: 100px;
536+
h2 {
537+
font-size: 1.1rem;
460538
}
461539

462540
.trait-grid {
463-
grid-template-columns: 1fr;
541+
grid-template-columns: repeat(2, 1fr);
542+
gap: 0.5rem;
543+
}
544+
545+
.trait-card {
546+
padding: 0.6rem 0.7rem;
547+
}
548+
549+
.trait-body h3 {
550+
font-size: 0.8rem;
551+
}
552+
553+
.trait-body p {
554+
font-size: 0.72rem;
464555
}
465556

466557
.project-grid {
467558
grid-template-columns: 1fr;
559+
gap: 0.4rem;
560+
}
561+
562+
footer {
563+
padding: 1rem 1.25rem 0.75rem;
468564
}
469565
}
470566

471-
/* Even smaller screens */
567+
/* ============================================
568+
Responsive: small phones (≤480px)
569+
============================================ */
472570
@media (max-width: 480px) {
571+
main {
572+
width: 100vw;
573+
margin: 0;
574+
border-radius: 0;
575+
border-left: none;
576+
border-right: none;
577+
}
578+
579+
.sidebar {
580+
grid-template-columns: 1fr;
581+
text-align: center;
582+
padding: 1.25rem 1rem 1rem;
583+
}
584+
585+
.avatar-container {
586+
grid-row: auto;
587+
grid-column: auto;
588+
justify-self: center;
589+
margin-bottom: 0.75rem;
590+
}
591+
592+
.avatar {
593+
width: 72px;
594+
height: 72px;
595+
}
596+
597+
.sidebar h1 {
598+
grid-row: auto;
599+
grid-column: auto;
600+
font-size: 1.5rem;
601+
text-align: center;
602+
}
603+
604+
.tagline {
605+
grid-row: auto;
606+
grid-column: auto;
607+
text-align: center;
608+
font-size: 0.9rem;
609+
}
610+
611+
.subtitle {
612+
grid-column: auto;
613+
margin-top: 0.35rem;
614+
font-size: 0.8rem;
615+
}
616+
617+
.interests {
618+
grid-column: auto;
619+
}
620+
621+
.tags {
622+
justify-content: center;
623+
gap: 0.35rem;
624+
}
625+
626+
.tag {
627+
font-size: 0.68rem;
628+
padding: 0.18rem 0.5rem;
629+
}
630+
473631
.connect {
632+
grid-column: auto;
474633
flex-direction: column;
634+
gap: 0.4rem;
635+
}
636+
637+
.link-item {
638+
min-height: 44px;
639+
padding: 0.5rem 0.7rem;
475640
}
476641

477642
.link-handle {
@@ -480,6 +645,85 @@ footer {
480645

481646
.link-text {
482647
flex-direction: column;
648+
gap: 0;
649+
}
650+
651+
.content {
652+
padding: 1.25rem 1rem 0.75rem;
653+
}
654+
655+
h2 {
656+
font-size: 1.05rem;
657+
}
658+
659+
p {
660+
font-size: 0.88rem;
661+
}
662+
663+
.trait-grid {
664+
grid-template-columns: 1fr;
665+
}
666+
667+
.trait-icon {
668+
font-size: 1.1rem;
669+
}
670+
671+
.project-name {
672+
font-size: 0.82rem;
673+
}
674+
675+
.project-desc {
676+
font-size: 0.72rem;
677+
}
678+
679+
.footer-text {
680+
font-size: 0.75rem;
681+
}
682+
683+
.footer-sub {
684+
font-size: 0.68rem;
685+
}
686+
}
687+
688+
/* ============================================
689+
Responsive: very narrow screens (≤360px)
690+
============================================ */
691+
@media (max-width: 360px) {
692+
.sidebar {
693+
padding: 1rem 0.75rem 0.75rem;
694+
}
695+
696+
.sidebar h1 {
697+
font-size: 1.35rem;
698+
}
699+
700+
.avatar {
701+
width: 64px;
702+
height: 64px;
703+
}
704+
705+
.content {
706+
padding: 1rem 0.75rem 0.5rem;
707+
}
708+
709+
.trait-card {
710+
padding: 0.5rem 0.6rem;
711+
}
712+
}
713+
714+
/* ============================================
715+
Safe areas for notched devices
716+
============================================ */
717+
@supports (padding: env(safe-area-inset-top)) {
718+
@media (max-width: 480px) {
719+
main {
720+
padding-left: env(safe-area-inset-left);
721+
padding-right: env(safe-area-inset-right);
722+
}
723+
724+
footer {
725+
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
726+
}
483727
}
484728
}
485729

0 commit comments

Comments
 (0)