@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap'); /* general */ html, body { height: 100vh; font-family: "Inconsolata", monospace; font-size: 16px; margin: 0; padding: 0; } h1, h3, .diamond>div { font-family: "Space Grotesk"; } body { background-color: rgba(242, 206, 230, 0.33); height: 100%; margin: 0; padding: 0; background: url("../img/concrete2.jpg"); } article { display: grid; grid-template-columns: 60% 39%; } a, a:visited { color: rgb(10, 115, 147); text-decoration-color: rgba(0, 0, 0, 0.66); } a:hover { color: rgba(105, 191, 100, 1.0) } a:visited { text-decoration-color: rgba(255, 255, 255, 0.66); } h3 { margin-bottom: 0.2em; line-height: 0; font-weight: 500; } ul { list-style: none; padding: 0; } ul li { padding-bottom: 6px; } /* header */ header { display: grid; grid-template-columns: 1fr 1fr; } /* pattern helpfully generated using patternify.com */ /* gradient came together using https://cssgradient.io/ */ .diamond { background-color: rgba(137, 210, 239, 0.9); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIBl4t575T7ouAIgBApygrbRzAAAAAElFTkSuQmCC), linear-gradient(305deg, rgba(120, 185, 227, 0.9) 10%, rgba(137, 210, 239, 0.8) 50%, rgba(150, 239, 251, 0.5) 88%); border: 1px solid gray; width: 30vw; height: 30vw; overflow: hidden; font-size: 2.25vw; font-weight: normal; color: rgba(10, 30, 96, 0.9); box-shadow: 6px -6px #c4b8b8; } .diamond-one { justify-self: start; /*transform: rotate(45deg);*/ margin-left: 3.2vw; margin-top: 3.2vw; } .diamond-two { justify-self: end; transform: rotate(45deg); margin-right: 15vw; margin-top: 11.2vw; margin-left: -8vw; } .diamond>div>h1 { display: inline-block; color: rgb(42, 43, 102); font-size: 4.2vw; margin: 0; letter-spacing: 0.55vw; font-style: italic; margin-left: -1.1vw; text-shadow: 1px 1px rgb(206, 228, 237); } .diamond-one>div>h1:hover { text-shadow: 4px 4px rgb(137, 210, 239); opacity: 0.9; } .diamond>div { border-top: 1px solid white; transform: rotate(-45.1deg); min-height: 5.5vw; margin: 0vw; width: 16.5vw; line-height: 4vw; letter-spacing: 0.2vw; text-shadow: 1px 1px rgb(206, 228, 237); } .diamond>hr { transform: rotate(225deg); color: white; margin: 1vw; } .diamond>.tagline { text-align: right; font-size: 1.25vw; line-height: 1.1vw; font-style: italic; font-weight: 500; width: 9vw; padding-left: 10vw; letter-spacing: 0vw; text-shadow: 0 !important; padding-top: 1px; text-shadow: none; } .diamond>.tagline span { color: pink; visibility: hidden; } .diamond>.tagline:hover span { visibility: visible; } #archivist span, #developer span, #technologist span { position: absolute; line-height: 1vw; font-size: 1vw; font-weight: bold; color: pink; visibility: hidden; } #archivist:hover span, #developer:hover span, #technologist:hover span { visibility: visible; } /* lines */ .lines>div { transform: rotate(90deg); min-height: 5.5vw; margin: 0vw; width: 26vw; line-height: 4vw; position: relative; top: -21vw; border-top: 1px solid white; } .diamond-one .lines div:nth-child(1) { left: 25vw; } .diamond-one .lines div:nth-child(2) { left: 24vw; } .diamond-one .lines div:nth-child(3) { left: 26vw; } .diamond-two .lines div:nth-child(1) { left: 27vw; } .diamond-two .lines div:nth-child(2) { left: 29vw; } .diamond-two .lines div:nth-child(3) { left: 25vw; } .diamond-one .lines>div { animation: moveOne 18s linear; } .diamond-two .lines>div { animation: moveTwo 8s linear; } @keyframes moveOne { 0% { top: -63vw; } 86% { top: -22vw; } 100% { top: -21vw; } } @keyframes moveTwo { 0% { top: 20vw; } 86% { top: -19vw; } 100% { top: -21vw; } } /*main*/ #content { margin-top: 0.75vw; display: inline-grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; grid-gap: 0; height: 95vh; } #content section { border: 1px outset white; text-align: right; padding: 0 0.5vw 0 0.5vw; min-width: 1vw; align-content: center; } #bio { grid-column: 1/7; text-align: left !important; } #work { grid-column: 1/4; justify-content: center; } #work img { width: auto; height: 75px; filter: opacity(80%); border-radius: 50px } #pronouns { grid-column: 4/7; } #surf { grid-column: 1/3; } #see-also { grid-column: 3/7; } #pub { grid-column: 1/4; } #tools { grid-column: 4/7; } #portfolio, #art { display: inline-grid; grid-template-rows: repeat(3, 1fr) } #portfolio { grid-column: 1/3; } #art { grid-column: 3/5; } #portfolio>div, #art>div { border-bottom: 1px solid white; } #portfolio>div:nth-child(3), #art>div:nth-child(3) { border-bottom: 0; } section>div>ul { padding-left: 5px; } #community-work { grid-column: 5/7; } /* layout when small */ @media screen and (max-width: 999px) { article { display: grid; grid-template-rows: auto; grid-template-columns: 1fr; } header { grid-template-columns: 1fr; } .diamond { width: 45vw; height: 45vw; font-size: 4vw; } .diamond-one { margin-bottom: -20vw; } .diamond-one>div>h1 { font-size: 8vw; line-height: 10vw; padding-bottom: 2vw; } .diamond-two { margin-top: -16vw; } .diamond>.tagline { text-align: right; font-size: 3vw; line-height: 2.5vw; width: 20vw; padding-left: 9vw; letter-spacing: 0vw; } .diamond-one>.lines, .diamond-two>.lines { display: none; } #a, #b { animation: none; } #content { margin-top: 6.66vw; } #content section { padding-right: 2vw; } } /* boxes */ /* based on this codepen, what a beauty!: https://codepen.io/scottcaldwell/pen/gOagLar */ :root { --box-width: 55px; --box-height: 55px; --box-depth: 55px; } .box-box { display: grid; justify-items: center; padding: 0.2rem; opacity: 0.4; } .box { position: absolute; width: var(--box-depth); height: var(--box-width); transform-style: preserve-3d; } .box-box:hover { opacity: 1; } .top { width: var(--box-depth); height: var(--box-width); transform: translateZ(calc(var(--box-height) - 1px)); } .left { width: var(--box-depth); height: var(--box-height); transform: rotateX(90deg) translateZ(calc(-1 *var(--box-width))); transform-origin: top; } .right { width: var(--box-width); height: var(--box-height); transform-origin: left; transform: translateX(var(--box-depth)) rotateZ(90deg) rotateX(90deg) translateY(calc(var(--box-height)/2)) translateX(calc(var(--box-height) / -2)); } #art .box:nth-child(1) { margin-left: 2vw; margin-top: 3.5vw; transform: rotateX(45deg) rotateY(15deg) rotateZ(60deg) translateY(-20px); } #portfolio .box:nth-child(1) { margin-left: 2vw; margin-top: 3.25vw; transform: rotateX(55deg) rotateY(25deg) rotateZ(70deg) translateY(-20px); } #surf .box:nth-child(1) { margin-left: 5vw; margin-top: 6vw; transform: rotateX(55deg) rotateY(30deg) rotateZ(70deg) translateY(-20px); } #art .box__face { position: absolute; background: linear-gradient(265deg, rgba(105, 191, 100, 1.0), black), url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCc+CgogICAgPGZpbHRlciBpZD0nbicgeD0nMCcgeT0nMCc+CiAgICAgICAgICAgIDxmZVR1cmJ1bGVuY2UKICAgICAgICAgICAgICB0eXBlPSdmcmFjdGFsTm9pc2UnCiAgICAgICAgICAgICAgYmFzZUZyZXF1ZW5jeT0nMC42JwogICAgICAgICAgICAgIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz4KICAgIDwvZmlsdGVyPgoKICAgIDxyZWN0IHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyBmaWxsPScjZmZmJy8+CiAgICA8cmVjdCB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PScwLjknLz4KPC9zdmc+); background-blend-mode: color-burn; } #portfolio .box__face { position: absolute; background: linear-gradient(275deg, pink, black), url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCc+CgogICAgPGZpbHRlciBpZD0nbicgeD0nMCcgeT0nMCc+CiAgICAgICAgICAgIDxmZVR1cmJ1bGVuY2UKICAgICAgICAgICAgICB0eXBlPSdmcmFjdGFsTm9pc2UnCiAgICAgICAgICAgICAgYmFzZUZyZXF1ZW5jeT0nMC42JwogICAgICAgICAgICAgIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz4KICAgIDwvZmlsdGVyPgoKICAgIDxyZWN0IHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyBmaWxsPScjZmZmJy8+CiAgICA8cmVjdCB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PScwLjknLz4KPC9zdmc+); background-blend-mode: color-burn; } #surf .box__face { position: absolute; background: linear-gradient(255deg, #54bbe8, black), url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCc+CgogICAgPGZpbHRlciBpZD0nbicgeD0nMCcgeT0nMCc+CiAgICAgICAgICAgIDxmZVR1cmJ1bGVuY2UKICAgICAgICAgICAgICB0eXBlPSdmcmFjdGFsTm9pc2UnCiAgICAgICAgICAgICAgYmFzZUZyZXF1ZW5jeT0nMC42JwogICAgICAgICAgICAgIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz4KICAgIDwvZmlsdGVyPgoKICAgIDxyZWN0IHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyBmaWxsPScjZmZmJy8+CiAgICA8cmVjdCB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PScwLjknLz4KPC9zdmc+); background-blend-mode: color-burn; } #art .box__face:nth-child(2), #portfolio .box__face:nth-child(2), #surf .box__face:nth-child(2) { position: absolute; background: linear-gradient(255deg, #65aac8, black), url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCc+CgogICAgPGZpbHRlciBpZD0nbicgeD0nMCcgeT0nMCc+CiAgICAgICAgICAgIDxmZVR1cmJ1bGVuY2UKICAgICAgICAgICAgICB0eXBlPSdmcmFjdGFsTm9pc2UnCiAgICAgICAgICAgICAgYmFzZUZyZXF1ZW5jeT0nMC42JwogICAgICAgICAgICAgIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz4KICAgIDwvZmlsdGVyPgoKICAgIDxyZWN0IHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyBmaWxsPScjZmZmJy8+CiAgICA8cmVjdCB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PScwLjknLz4KPC9zdmc+); background-blend-mode: color-burn; } #surf .box__face, #portfolio .box__face, #art .box__face { opacity: 0.5; } #surf .box__face:hover, #portfolio .box__face:hover, #art .box__face:hover { opacity: 1; }