.home{.title { color: var(--color-headline); } .cursus { margin: var(--space-md) auto; } .cursus-title { text-align: center; background-color: transparent; text-shadow: 2px 2px 3px var(--color-card); }}.posts{.listing { display: grid; gap: var(--space-lg); } .title { background-color: transparent; text-shadow: 2px 2px 3px var(--color-card); color: var(--color-headline); margin-block-end: var(--space-xl); }}.resized{min-width:100%;min-height:250px}.card{.link { text-decoration: none; .thumbnail { position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; .img { position: absolute; width: 100%; height: 100%; border-radius: var(--radius) var(--radius) 0 0; inset: 0; object-fit: cover; transition: transform 0.2s ease-out; image-rendering: crisp-edges; } } .title { color: var(--color-headline); font-size: var(--text-xl); line-height: 1.3; margin-block-end: var(--space-sm); background-color: var(--color-card); font-weight: var(--font-weight-semibold); overflow-wrap: break-word; word-break: normal; } .text { padding: var(--space-md); color: var(--color-text); font-size: var(--text-base); padding-block-end: var(--space-lg); } .meta { margin-block: var(--space-xs) var(--space-md); font-size: var(--text-base); font-weight: var(--font-weight-light); font-style: italic; } .summary { font-weight: var(--font-weight-normal); overflow-wrap: break-word; word-break: normal; } }}@media(hover:hover){.card .link:hover{text-decoration:none}.card .link:hover .title{color:var(--color-highlight);transition:all var(--transition-duration)var(--transition-func)}.posts:where(.dark,.dark *):hover .card .link:not(:hover){transition:all var(--transition-duration)var(--transition-func);filter:grayscale(100%)blur(8px)}}.contact{--transition-contact:500ms var(--transition-func);.nojs { display: flex; align-items: baseline; gap: .5rem; } .content { min-height: 100%; border-radius: var(--radius) var(--radius) 0 0; } .title { display: flex; align-items: center; padding: var(--space-md); color: var(--color-headline); font-size: var(--text-2xl); line-height: 1.5; background-color: var(--color-card); font-weight: var(--font-weight-bold); gap: var(--space-sm); } .intro { padding: 0 var(--space-md); font-size: var(--text-up); .icon { color: var(--icon-as-bg); } svg { width: calc(var(--icon-size-ref) * 2); height: calc(var(--icon-size-ref) * 2); } p { margin: 15px 0; } } .form { position: relative; min-height: 100%; padding: var(--space-md); border-radius: 0 0 var(--radius) var(--radius); transition: var(--transition-contact); } .wrapper { margin-bottom: 25px; } .wrapper-message { margin-bottom: 15px; } .label { color: var(--color-headline); margin-block: 8px; margin-inline: .5rem; font-size: var(--text-up); } .input-wrapper { position: relative; margin-block: 10px; } .input-field { width: stretch; border-radius: var(--radius); color: var(--input-color); transition: var(--transition-contact); padding-block: 10px; padding-inline: var(--space-sm); background-color: var(--input-bg); } textarea.input-field { height: 120px; max-height: 200px; min-height: 60px; resize: vertical; } .input-field:focus { outline: 1px solid; } input[type="submit"] { padding: 5px 15px; border: 1px solid var(--color-text); border-radius: var(--radius); font-size: var(--text-lg); line-height: 1.4; opacity: .75; margin-top: var(--space-xs); cursor: pointer; background-color: var(--icon-as-bg); }}.contact-item{transition:all var(--transition-duration)var(--transition-func)}.response{position:absolute;left:var(--space-lg);width:stretch;max-height:100px;font-size:var(--text-2xl);opacity:0;transition:var(--transition-contact);transform:translateY(-50%);visibility:hidden}.response-icon{margin-inline:5px}.mhoney{visibility:hidden;max-height:3px;margin:0;padding:0}@media(hover:hover){.contact input[type=submit]:hover{opacity:1;transition:var(--transition-contact);border-color:var(--color-highlight)}}.author{--icon-size-ref:28px;display:grid;place-items:center;min-height:calc(100vh - 8rem);text-align:center;.headline { font-size: var(--text-xl); margin-block: var(--space-sm); background-color: transparent; text-shadow: 2px 2px 3px var(--color-card); } .img { margin: 0 auto; border: 1px solid var(--border-color); border-radius: 50%; background-color: var(--bg); }}.go-next{--icon-size-ref:36px;display:inline-block;border-radius:50%;color:var(--bg);background-color:var(--color-highlight);margin-block:var(--space-xl)var(--space-sm);.icon { display: block; svg { width: var(--icon-size-ref); height: var(--icon-size-ref); } }}