@font-face { font-family: 'PP Neue Montreal'; src: url('../styles/fonts/PPNeueMontreal-Regular.woff2') format('woff2'), url('../styles/fonts/PPNeueMontreal-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('../styles/fonts/PPNeueMontreal-Medium.woff2') format('woff2'), url('../styles/fonts/PPNeueMontreal-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f9f5e2; font-family: 'PP Neue Montreal', 'Helvetica Neue', sans-serif; font-size: 1rem; max-width: 56rem; margin: 0 auto; padding: 1rem 0; } .header { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; padding: 1rem; background-color: white; border: 2px solid black; } h1 { font-weight: 500; } .grid-icon { display: grid; grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(3, 10px); cursor: pointer; transition: transform 0.2s ease; width: fit-content; border: 2px solid black; } .grid-icon:hover { box-shadow: 0 0 0.25rem gold; } .color { width: 10px; height: 10px; } a { color: black; text-decoration: none; } a:hover { color: blue; } ::selection { text-shadow: 0 0 1px gold; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 1rem; transition: all 2s ease-in-out; } .grid a { display: block; text-decoration: none; } .grid a:hover { text-decoration: none; } .module { display: flex; align-items: center; justify-content: center; height: 250px; margin: 0 1rem; border: 2px solid black; filter: grayscale(0.15); transition: transform 1.5s ease, opacity 1.5s ease; opacity: 1; } .module:hover { filter: grayscale(0); box-shadow: 0 0 10px gold; cursor: pointer; color: blue; } .grid a:nth-child(odd):hover .module { transform: rotate(-2deg) scale(1.01); } .grid a:nth-child(even):hover .module { transform: rotate(2deg) scale(1.01); } @supports (display: grid) { .module { margin: 0; } } footer { position: fixed; bottom: 0; left: 0; width: 100vw; padding: 1rem; background-color: white; border-top: 2px solid black; } @media (max-width: 950px) { h1 { text-align: center; } body { padding: 0 1rem; } } .module.about::after { content: 'about me'; } .module.about:hover::after { content: 'woah woah ya little creep'; } .module.call::after { content: 'open call'; } .module.call:hover::after { content: 'beep borp bloop'; } .module.ceevee::after { content: 'ceevee'; } .module.ceevee:hover::after { content: 'some serious shenaniganry'; } .module.consumed::after { content: 'consumed.today'; } .module.consumed:hover::after { content: 'putting things in my '; } .module.online::after { content: 'particularly.online'; } .module.online:hover::after { content: 'aka my screenshot dump'; } .module.internet::after { content: 'niceinter.net'; } .module.internet:hover::after { content: 'why my site looks like this!!'; } .module.abridged::after { content: 'abridged.blog'; } .module.abridged:hover::after { content: 'microblogging 2 da max'; } .module.tomato::after { content: 'tomato.supply'; } .module.tomato:hover::after { content: 'a bit of ketchup on my stuff'; } .module.email::after { content: 'canisendyouan.email'; } .module.email:hover::after { content: 'email is not objectively bad!!'; } .module.town::after { content: 'shen.town'; } .module.town:hover::after { content: 'an old worldbuilding attempt'; } .back::after { content: 'go back'; } .back:hover::after { content: '⤾'; } .shake { animation: shake 0.4s; will-change: transform; backface-visibility: hidden; perspective: 1000px; } .grid-icon.shake, #main-grid.shake { will-change: transform; backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-2px, 2px) rotate(-1deg); } 40% { transform: translate(2px, -2px) rotate(1deg); } 60% { transform: translate(-1px, 1px) rotate(0deg); } 80% { transform: translate(1px, -1px) rotate(1deg); } 100% { transform: translate(0, 0) rotate(0deg); } }