.site-footer { background: white; color: #535353; hr {display: none;} .container { position: relative; padding: 1em; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 2rem; @media (min-width: 38rem) { display: grid; grid-template-columns: 18rem 1fr; } } .h-card { font-family: monospace; border-radius: 1em; overflow: hidden; display: flex; flex-flow: column; max-width: 18rem; .banner { background-image: url('/images/sunset.jpg'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; aspect-ratio: 2/1; padding: 2rem; } img { border-radius: 100em; width: 50%; aspect-ratio: 1; background: rgba(0,0,0,0.5); } background: white; dl { dt, dd {width: max-content;} padding: 1rem; dt {font-weight: 700; margin-bottom: 0.25em} dd {margin-bottom: 0.5em; max-width: 100%;} } box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); } .external-links { margin: 0 auto; display: grid; grid-template-columns: repeat(6,1fr); gap: 1em; margin-top: 2rem; a { width: 2em; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; text-decoration: none; color: inherit; } i {font-size: 1.6em;} } .git-lastcommit { display: grid; grid-template-areas: "time hash" "subj subj"; grid-template-columns: 1fr auto; time { grid-area: time; } p { grid-area: subj; } a { grid-area: hash; display: flex; justify-content: center; align-items: center; background: #ddd; padding: 0.25rem; border-radius: 0.25rem; font-family: monospace; } } }