vt3e.cat / www
this repo has no descr,ription vt3e.cat
fork atom

fix: fix content escaping viewport

vt3e.cat f2077dd7 82c2239b

verified
+7 -325
-319
index.html
··· 1 - <!doctype html> 2 - <html lang="en"> 3 - <head> 4 - <meta charset="UTF-8" /> 5 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 - <title>Cosy Bento Portfolio</title> 7 - <style> 8 - /* --- 1. THE COSY VARIABLES --- */ 9 - :root { 10 - --bg-color: #fdfcf8; /* Warm paper white */ 11 - --text-main: #4a4a4a; /* Soft charcoal */ 12 - --text-light: #8c8c8c; /* Muted grey */ 13 - 14 - /* Card Colors - Soft Pastels */ 15 - --card-base: #f4f1ea; /* Latte */ 16 - --card-highlight: #e8e4d9; /* Darker Latte for hover */ 17 - --accent-green: #dce5de; /* Sage */ 18 - --accent-blue: #dee2e5; /* Dusty Blue */ 19 - --accent-rose: #e5dedc; /* Dusty Rose */ 20 - 21 - --font-serif: "Georgia", serif; 22 - --font-sans: system-ui, -apple-system, sans-serif; 23 - 24 - --radius: 24px; 25 - --spacing: 20px; 26 - } 27 - 28 - /* --- 2. GLOBAL STYLES --- */ 29 - * { 30 - box-sizing: border-box; 31 - margin: 0; 32 - padding: 0; 33 - } 34 - 35 - body { 36 - background-color: var(--bg-color); 37 - color: var(--text-main); 38 - font-family: var(--font-sans); 39 - display: flex; 40 - justify-content: center; 41 - align-items: center; 42 - min-height: 100vh; 43 - padding: var(--spacing); 44 - } 45 - 46 - /* --- 3. THE BENTO GRID --- */ 47 - .bento-grid { 48 - display: grid; 49 - grid-template-columns: repeat(3, 1fr); /* 3 Columns */ 50 - grid-template-rows: repeat(2, 300px); /* 2 Rows */ 51 - gap: var(--spacing); 52 - max-width: 1000px; 53 - width: 100%; 54 - } 55 - 56 - /* CARD STYLING */ 57 - .card { 58 - background-color: var(--card-base); 59 - border-radius: var(--radius); 60 - padding: 40px; 61 - position: relative; 62 - cursor: pointer; 63 - transition: 64 - transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 65 - box-shadow 0.3s ease; 66 - display: flex; 67 - flex-direction: column; 68 - justify-content: space-between; 69 - overflow: hidden; 70 - border: 1px solid rgba(0, 0, 0, 0.02); 71 - } 72 - 73 - .card:hover { 74 - transform: scale(1.02); 75 - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 76 - background-color: var(--card-highlight); 77 - } 78 - 79 - .card h2 { 80 - font-family: var(--font-serif); 81 - font-size: 1.8rem; 82 - margin-bottom: 10px; 83 - font-weight: normal; 84 - } 85 - 86 - .card p { 87 - line-height: 1.6; 88 - color: var(--text-main); 89 - } 90 - 91 - .icon { 92 - font-size: 2rem; 93 - margin-bottom: 20px; 94 - display: block; 95 - } 96 - 97 - /* --- 4. GRID PLACEMENTS (The Layout Logic) --- */ 98 - 99 - /* HOME / ABOUT: Large square (2x2) */ 100 - .area-home { 101 - grid-column: span 2; 102 - grid-row: span 1; 103 - background-color: #fff; /* Stand out slightly */ 104 - } 105 - 106 - /* PROJECTS: Tall vertical */ 107 - .area-projects { 108 - grid-column: span 1; 109 - grid-row: span 2; 110 - background-color: var(--accent-green); 111 - } 112 - 113 - /* USES: Small box */ 114 - .area-uses { 115 - grid-column: span 1; 116 - grid-row: span 1; 117 - background-color: var(--accent-blue); 118 - } 119 - 120 - /* GALLERY: Small box */ 121 - .area-gallery { 122 - grid-column: span 1; 123 - grid-row: span 1; 124 - background-color: var(--accent-rose); 125 - } 126 - 127 - /* DECORATIVE TAGS */ 128 - .tag { 129 - position: absolute; 130 - top: 20px; 131 - right: 20px; 132 - font-size: 0.8rem; 133 - text-transform: uppercase; 134 - letter-spacing: 1px; 135 - opacity: 0.5; 136 - } 137 - 138 - /* --- 5. MODAL (The Overlay) --- */ 139 - .modal-overlay { 140 - position: fixed; 141 - top: 0; 142 - left: 0; 143 - right: 0; 144 - bottom: 0; 145 - background: rgba(255, 255, 255, 0.8); 146 - backdrop-filter: blur(5px); 147 - opacity: 0; 148 - pointer-events: none; 149 - transition: opacity 0.3s ease; 150 - z-index: 100; 151 - display: flex; 152 - justify-content: center; 153 - align-items: center; 154 - } 155 - 156 - .modal-overlay.active { 157 - opacity: 1; 158 - pointer-events: all; 159 - } 160 - 161 - .modal-content { 162 - background: #fff; 163 - width: 90%; 164 - max-width: 600px; 165 - padding: 40px; 166 - border-radius: var(--radius); 167 - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); 168 - transform: translateY(20px); 169 - transition: transform 0.3s ease; 170 - max-height: 80vh; 171 - overflow-y: auto; 172 - } 173 - 174 - .modal-overlay.active .modal-content { 175 - transform: translateY(0); 176 - } 177 - 178 - .close-btn { 179 - float: right; 180 - cursor: pointer; 181 - font-size: 1.5rem; 182 - background: none; 183 - border: none; 184 - color: var(--text-light); 185 - } 186 - 187 - /* --- 6. MOBILE RESPONSIVENESS --- */ 188 - @media (max-width: 768px) { 189 - .bento-grid { 190 - grid-template-columns: 1fr; /* Stack everything */ 191 - grid-template-rows: auto; 192 - } 193 - .area-home, 194 - .area-projects, 195 - .area-uses, 196 - .area-gallery { 197 - grid-column: span 1; 198 - grid-row: span 1; 199 - min-height: 250px; 200 - } 201 - } 202 - </style> 203 - </head> 204 - <body> 205 - <!-- THE BENTO GRID --> 206 - <div class="bento-grid"> 207 - <!-- 1. HOME (About Me) --> 208 - <div class="card area-home" onclick="openModal('about')"> 209 - <span class="tag">01 · Welcome</span> 210 - <div> 211 - <span class="icon">👋</span> 212 - <h2>Hello, I'm [Name].</h2> 213 - <p> 214 - I build websites and explore digital creativity. <br /> 215 - This is my personal corner of the internet. 216 - </p> 217 - </div> 218 - <div 219 - style=" 220 - margin-top: 20px; 221 - font-size: 0.9rem; 222 - color: var(--text-light); 223 - " 224 - > 225 - &rarr; Click card to read full bio 226 - </div> 227 - </div> 228 - 229 - <!-- 2. PROJECTS (Featured Work) --> 230 - <div class="card area-projects" onclick="openModal('projects')"> 231 - <span class="tag">02 · Works</span> 232 - <div> 233 - <span class="icon">🔨</span> 234 - <h2>Projects</h2> 235 - <p> 236 - A collection of things I've built, broken, and fixed 237 - again. 238 - </p> 239 - <ul 240 - style=" 241 - margin-top: 20px; 242 - padding-left: 20px; 243 - opacity: 0.7; 244 - " 245 - > 246 - <li>Personal Site v1</li> 247 - <li>Weather App</li> 248 - <li>Obsidian Plugins</li> 249 - </ul> 250 - </div> 251 - </div> 252 - 253 - <!-- 3. USES (Tech Specs) --> 254 - <div class="card area-uses" onclick="openModal('uses')"> 255 - <span class="tag">03 · Setup</span> 256 - <div> 257 - <span class="icon">💻</span> 258 - <h2>/Uses</h2> 259 - <p>Software, hardware, and server specs.</p> 260 - </div> 261 - </div> 262 - 263 - <!-- 4. GALLERY (Photos/Art) --> 264 - <div class="card area-gallery" onclick="openModal('gallery')"> 265 - <span class="tag">04 · Visuals</span> 266 - <div> 267 - <span class="icon">📷</span> 268 - <h2>Gallery</h2> 269 - <p>Snapshots from my life.</p> 270 - </div> 271 - </div> 272 - </div> 273 - 274 - <!-- MODAL POPUP --> 275 - <div 276 - class="modal-overlay" 277 - id="modalOverlay" 278 - onclick="closeModal(event)" 279 - > 280 - <div class="modal-content"> 281 - <button class="close-btn" onclick="forceClose()">×</button> 282 - <div id="modalBody"> 283 - <!-- Content injected via JS --> 284 - </div> 285 - </div> 286 - </div> 287 - 288 - <script> 289 - // Data for the modals to simulate pages 290 - const contentData = { 291 - about: `<h1>About Me</h1><p>Here you can write your longer bio. Talk about your background, what you are currently learning, and what you do for fun.</p><br><p>This layout keeps the home page clean while allowing deep dives here.</p>`, 292 - 293 - projects: `<h1>Projects</h1><p><strong>1. This Website</strong><br>Built with vanilla HTML/CSS using a Bento Grid layout.</p><br><p><strong>2. Project Alpha</strong><br>A cool react app that does X, Y, and Z.</p>`, 294 - 295 - uses: `<h1>/Uses</h1><h3>Hardware</h3><ul><li>MacBook Pro M2</li><li>Keychron K2 Keyboard</li><li>Logitech MX Master 3</li></ul><br><h3>Software</h3><ul><li>VS Code (Catppuccin Theme)</li><li>Arc Browser</li><li>Figma</li></ul>`, 296 - 297 - gallery: `<h1>Gallery</h1><div style="background:#eee; height: 200px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color:#999;">[ Image Placeholder ]</div><br><div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;"><div style="background:#eee; height:100px; border-radius:8px;"></div><div style="background:#eee; height:100px; border-radius:8px;"></div></div>`, 298 - }; 299 - 300 - const modalOverlay = document.getElementById("modalOverlay"); 301 - const modalBody = document.getElementById("modalBody"); 302 - 303 - function openModal(type) { 304 - modalBody.innerHTML = contentData[type]; 305 - modalOverlay.classList.add("active"); 306 - } 307 - 308 - function closeModal(e) { 309 - if (e.target === modalOverlay) { 310 - modalOverlay.classList.remove("active"); 311 - } 312 - } 313 - 314 - function forceClose() { 315 - modalOverlay.classList.remove("active"); 316 - } 317 - </script> 318 - </body> 319 - </html>
+2 -1
pkgs/web/index.html
··· 3 3 <head> 4 4 <meta charset="UTF-8" /> 5 5 <link rel="icon" href="/favicon.ico" /> 6 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 7 7 <title>vt3e</title> 8 + </head> 8 9 <body> 9 10 <div id="app"></div> 10 11 <script type="module" src="/src/main.ts"></script>
+2 -3
pkgs/web/src/App.vue
··· 66 66 67 67 .app-viewport { 68 68 width: 100%; 69 - min-height: 100vh; 70 - height: 100vh; 69 + height: 100dvh; 71 70 position: relative; 72 71 display: flex; 73 72 justify-content: center; ··· 84 83 position: absolute; 85 84 top: 0; 86 85 left: 0; 87 - overflow-y: auto; 86 + overflow-y: hidden; 88 87 overflow-x: hidden; 89 88 padding: 1rem; 90 89 display: flex;
+3 -2
pkgs/web/src/components/Card/CardLayout.vue
··· 135 135 136 136 .view-container { 137 137 width: 100%; 138 + min-height: 0; 138 139 height: 100dvh; 139 140 140 141 &:active:has(.card-sheet:not(:hover)) .card-sheet { ··· 150 151 width: 100%; 151 152 max-width: 900px; 152 153 153 - max-height: calc(100dvh - 2rem); 154 154 display: flex; 155 155 flex-direction: column; 156 156 gap: 0.25rem; 157 157 outline: none; 158 + height: 100dvh; 159 + min-height: 0; 158 160 159 161 border-radius: var(--radius); 160 162 background-color: color-mix(in srgb, hsla(var(--page-accent) / 1) 100%, white); ··· 289 291 290 292 @media (max-width: 600px) { 291 293 .card-sheet { 292 - min-height: 100vh; 293 294 border: none; 294 295 --radius: 1.5rem; 295 296 }