Jasper Lo

/* MOBILE "SCATTERED DESKTOP" VIEW */ @media (max-width: 768px) { #jasper-desktop-container { height: auto; /* Allows the page to grow as you scroll */ min-height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding-top: 60px; /* Space for the top window */ padding-bottom: 80px; /* Space for the taskbar */ } #desktop-bg { position: fixed; /* Keeps the study photo still while you scroll windows */ filter: brightness(0.6); /* Dims background slightly for mobile readability */ } .window { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 85% !important; margin-bottom: -20px !important; /* This creates the "overlapping" paper effect */ box-shadow: 5px 5px 0 rgba(0,0,0,0.5); transition: transform 0.2s; } /* Staggering the windows randomly */ .window:nth-child(odd) { align-self: flex-start; margin-left: 5%; transform: rotate(-1deg); /* Slight organic tilt */ } .window:nth-child(even) { align-self: flex-end; margin-right: 5%; transform: rotate(1.5deg); /* Slight organic tilt */ } .window:nth-child(3n) { margin-left: 12%; transform: rotate(-0.5deg); } .window:active { z-index: 50; transform: scale(1.02) rotate(0deg); /* Pops forward when tapped */ } #taskbar { position: fixed; /* Keeps the email/clock docked at the bottom of the thumb */ bottom: 0; height: 55px; } .start-btn { height: 40px !important; width: 40px !important; } }