gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: responsive design for dev-env device hero on large screens

Browse Source 
- Scale monitor, desk, keyboard, Mac mini proportionally at 1024/1280/1536px
- Increase terminal window, logos, and font sizes on larger viewports
- Scale bezel, stand, screen inset for consistent proportions

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
gbanyan
2026-02-14 08:19:39 +08:00
parent a09b7505be
commit 1077c76366
1 changed files with 262 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
styles/globals.css
View File

@@ -73,6 +73,24 @@
min-height: 320px;
}
@media (min-width: 1024px) {
.dev-env-device-hero {
min-height: 400px;
}
}
@media (min-width: 1280px) {
.dev-env-device-hero {
min-height: 460px;
}
}
@media (min-width: 1536px) {
.dev-env-device-hero {
min-height: 520px;
}
}
.dev-env-device-scene {
display: flex;
flex-direction: column;
@@ -93,6 +111,34 @@
margin-top: 40px;
}
/* Large screen: scale up proportionally */
@media (min-width: 1024px) {
.dev-env-monitor {
width: min(420px, 32vw);
}
.dev-env-monitor + .dev-env-desk {
margin-top: 48px;
}
}
@media (min-width: 1280px) {
.dev-env-monitor {
width: min(480px, 28vw);
}
.dev-env-monitor + .dev-env-desk {
margin-top: 56px;
}
}
@media (min-width: 1536px) {
.dev-env-monitor {
width: min(540px, 26vw);
}
.dev-env-monitor + .dev-env-desk {
margin-top: 64px;
}
}
.dev-env-bezel {
position: absolute;
inset: 0;
@@ -105,6 +151,27 @@
-2px -2px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 1024px) {
.dev-env-bezel {
border-radius: 14px;
padding: 10px;
}
}
@media (min-width: 1280px) {
.dev-env-bezel {
border-radius: 16px;
padding: 12px;
}
}
@media (min-width: 1536px) {
.dev-env-bezel {
border-radius: 18px;
padding: 14px;
}
}
.dark .dev-env-bezel {
background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
}
@@ -118,6 +185,27 @@
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
@media (min-width: 1024px) {
.dev-env-screen {
inset: 10px;
border-radius: 8px;
}
}
@media (min-width: 1280px) {
.dev-env-screen {
inset: 12px;
border-radius: 9px;
}
}
@media (min-width: 1536px) {
.dev-env-screen {
inset: 14px;
border-radius: 10px;
}
}
.dark .dev-env-screen {
background: linear-gradient(165deg, #1a1d21 0%, #15181c 50%, #1c1f24 100%);
}
@@ -202,6 +290,27 @@
flex-direction: column;
}
@media (min-width: 1024px) {
.dev-env-window {
margin: 14px 20px;
min-height: 90px;
}
}
@media (min-width: 1280px) {
.dev-env-window {
margin: 16px 24px;
min-height: 100px;
}
}
@media (min-width: 1536px) {
.dev-env-window {
margin: 18px 28px;
min-height: 110px;
}
}
.dark .dev-env-window {
background: rgba(30, 30, 30, 0.98);
border-color: rgba(255, 255, 255, 0.06);
@@ -257,6 +366,30 @@
flex-direction: column;
}
@media (min-width: 1024px) {
.dev-env-window-content {
padding: 12px 18px;
font-size: 10px;
min-height: 58px;
}
}
@media (min-width: 1280px) {
.dev-env-window-content {
padding: 14px 20px;
font-size: 11px;
min-height: 64px;
}
}
@media (min-width: 1536px) {
.dev-env-window-content {
padding: 16px 24px;
font-size: 12px;
min-height: 72px;
}
}
.dev-env-terminal-prompt {
margin-bottom: 8px;
white-space: nowrap;
@@ -284,10 +417,33 @@
}
.dev-env-logo-svg svg {
width: 36px;
height: 36px;
flex-shrink: 0;
display: block;
}
@media (min-width: 1024px) {
.dev-env-logo-svg svg {
width: 42px;
height: 42px;
}
}
@media (min-width: 1280px) {
.dev-env-logo-svg svg {
width: 48px;
height: 48px;
}
}
@media (min-width: 1536px) {
.dev-env-logo-svg svg {
width: 54px;
height: 54px;
}
}
.dev-env-svg-arch {
color: #1793d1;
}
@@ -347,6 +503,33 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
.dev-env-stand {
width: 72px;
height: 28px;
bottom: -14px;
border-radius: 14px 14px 0 0;
}
}
@media (min-width: 1280px) {
.dev-env-stand {
width: 84px;
height: 32px;
bottom: -16px;
border-radius: 16px 16px 0 0;
}
}
@media (min-width: 1536px) {
.dev-env-stand {
width: 96px;
height: 36px;
bottom: -18px;
border-radius: 18px 18px 0 0;
}
}
.dark .dev-env-stand {
background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
@@ -354,7 +537,7 @@
.dev-env-desk {
position: relative;
width: min(360px, 90vw);
width: min(380px, 92vw);
height: 56px;
margin: 0 auto;
padding: 0 12px;
@@ -367,6 +550,33 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
@media (min-width: 1024px) {
.dev-env-desk {
width: min(460px, 34vw);
height: 66px;
padding: 0 16px;
gap: 16px;
}
}
@media (min-width: 1280px) {
.dev-env-desk {
width: min(520px, 30vw);
height: 76px;
padding: 0 20px;
gap: 20px;
}
}
@media (min-width: 1536px) {
.dev-env-desk {
width: min(600px, 28vw);
height: 86px;
padding: 0 24px;
gap: 24px;
}
}
.dark .dev-env-desk {
background: linear-gradient(180deg, #3d3d3d 0%, #2a2a2a 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -381,6 +591,27 @@
justify-content: center;
}
@media (min-width: 1024px) {
.dev-env-keyboard {
width: 130px;
height: 42px;
}
}
@media (min-width: 1280px) {
.dev-env-keyboard {
width: 150px;
height: 48px;
}
}
@media (min-width: 1536px) {
.dev-env-keyboard {
width: 170px;
height: 54px;
}
}
.dev-env-keyboard-body {
width: 100%;
padding: 4px 6px;
@@ -462,6 +693,36 @@
height: 44px;
}
@media (min-width: 1024px) {
.dev-env-macmini {
height: 52px;
}
.dev-env-macmini-top {
width: 76px;
height: 76px;
}
}
@media (min-width: 1280px) {
.dev-env-macmini {
height: 60px;
}
.dev-env-macmini-top {
width: 88px;
height: 88px;
}
}
@media (min-width: 1536px) {
.dev-env-macmini {
height: 68px;
}
.dev-env-macmini-top {
width: 100px;
height: 100px;
}
}
.dev-env-macmini-top {
width: 64px;
height: 64px;