feat: refine portfolio content, contact, and supporting media
This commit is contained in:
219
src/styles/refinements.css
Normal file
219
src/styles/refinements.css
Normal file
@@ -0,0 +1,219 @@
|
||||
/* Contact follows the same compact reading card as the rest of the journey. */
|
||||
#contact {
|
||||
position: relative;
|
||||
}
|
||||
#contact > h2 {
|
||||
padding-inline-end: 110px;
|
||||
}
|
||||
.contact-avatar {
|
||||
position: absolute;
|
||||
inset-block-start: 76px;
|
||||
inset-inline-end: clamp(28px, 4vw, 58px);
|
||||
inline-size: 88px;
|
||||
block-size: 96px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 5px 12px rgb(0 0 0 / 20%));
|
||||
}
|
||||
.contact-destination__copy {
|
||||
font-size: clamp(23px, 1.95vw, 29px);
|
||||
line-height: 1.3;
|
||||
max-inline-size: 34ch;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
.contact-email {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
column-gap: 12px;
|
||||
}
|
||||
.contact-email__action {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
.contact-email .contact-link {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-email__preview {
|
||||
position: absolute;
|
||||
inset-inline-start: 116px;
|
||||
white-space: nowrap;
|
||||
font-size: 0.84rem;
|
||||
color: var(--text);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-24px);
|
||||
transition: opacity 200ms ease, transform 260ms ease, visibility 260ms;
|
||||
}
|
||||
@media (hover: hover) and (min-width: 768px) {
|
||||
.contact-email__action:is(:hover, :focus-within) .contact-email__preview {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.contact-email__details {
|
||||
display: contents;
|
||||
}
|
||||
.contact-email__details > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-block-size: 44px;
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
list-style: none;
|
||||
}
|
||||
.contact-email__details > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.contact-email__details:not([open]) > .contact-email__disclosure {
|
||||
display: none;
|
||||
}
|
||||
.contact-email__disclosure {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px 14px;
|
||||
padding-block-start: 8px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.contact-email__address {
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
.contact-email__copy {
|
||||
min-block-size: 44px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-email__status {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.contact-email[data-enhanced='false'] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.contact-email[data-enhanced='false'] .contact-email__action {
|
||||
display: none;
|
||||
}
|
||||
.contact-email[data-enhanced='false'] summary {
|
||||
inline-size: fit-content;
|
||||
padding-inline: 20px;
|
||||
border-radius: 8px;
|
||||
background: var(--cyan);
|
||||
color: #201031;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
.portfolio-section .contact-social > li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.contact-social {
|
||||
align-items: center;
|
||||
gap: 12px 20px;
|
||||
margin-block-end: 0;
|
||||
padding-block-start: 16px !important;
|
||||
}
|
||||
.contact-social-link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-card .project-media-gallery {
|
||||
margin-block: 20px;
|
||||
}
|
||||
.project-card .project-media {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.project-media--video video {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
block-size: auto;
|
||||
}
|
||||
.video-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.project-media--video[data-enhanced='false'] .video-controls {
|
||||
display: none;
|
||||
}
|
||||
.video-controls > p {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.video-fallback {
|
||||
display: block;
|
||||
margin-block-start: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.contact-avatar {
|
||||
inset-block-start: 48px;
|
||||
inline-size: 64px;
|
||||
block-size: 70px;
|
||||
}
|
||||
#contact > h2 {
|
||||
padding-inline-end: 76px;
|
||||
}
|
||||
.contact-email__preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#contact > h2 {
|
||||
padding-inline-end: 76px;
|
||||
}
|
||||
.contact-avatar {
|
||||
inset-block-start: 32px;
|
||||
inset-inline-end: 22px;
|
||||
inline-size: 64px;
|
||||
block-size: 70px;
|
||||
}
|
||||
.contact-destination__copy {
|
||||
font-size: 22px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.contact-social {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-height: 559px) {
|
||||
.contact-avatar {
|
||||
inset-block-start: 42px;
|
||||
inset-inline-end: 24px;
|
||||
inline-size: 64px;
|
||||
block-size: 70px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.contact-email__preview {
|
||||
transition: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.contact-avatar {
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inline-size: 60px;
|
||||
block-size: 65px;
|
||||
}
|
||||
.contact-email__preview,
|
||||
.contact-email__copy,
|
||||
.contact-email__status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user