.project-card { position: relative; display: flex; flex-direction: column; box-sizing: border-box; border-radius: .2em; border-left: .3em solid #048; box-shadow: 0 .1em .3em -.1em rgba(0,0,0,0.5); background: #fff; min-height: 8em; transition: box-shadow .15s ease, transform .15s ease; } .project-card:hover { box-shadow: 0.2em 0.3em 0.6em rgba(0,0,0,0.45); transform: translateY(-2px); } /* Header */ .project-header { display: flex; align-items: center; gap: .6em; padding: .6em; } .project-logo { width: 2.4em; height: 2.4em; object-fit: contain; border-radius: .2em; flex-shrink: 0; } .project-title { margin: 0; font-size: 1.05em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* Content */ .card-content { padding: 0 .6em .4em; flex-grow: 1; } .project-description { line-height: 1.3em; margin: 0; color: #333; } /* Tags */ .project-tags { margin-top: .4em; display: flex; flex-wrap: wrap; gap: .3em; } .tag { font-size: .7em; padding: .15em .45em; border-radius: .3em; background: #eef3f7; color: #345; white-space: nowrap; } /* Footer */ .project-footer { display: flex; justify-content: space-between; align-items: center; padding: .2em .5em; font-size: .75em; opacity: .7; } .project-links a { margin-left: .4em; text-decoration: none; opacity: .7; } .project-links a:hover { opacity: 1; } /* edit */ form .wide { min-width: 66%; } form .tall { min-height: calc(100vh - 28em); } @media screen and (max-width: 50rem) { form .wide { width: calc(100% - 2em); margin: 0 1em; } }