/* TDH.ME Version: 0.4.0 */ /* ------------------------------ Fonts ------------------------------- */ /* albert-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Albert Sans'; font-style: normal; font-weight: 400; src: url('fonts/albert-sans-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* albert-sans-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Albert Sans'; font-style: italic; font-weight: 400; src: url('fonts/albert-sans-v1-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* albert-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Albert Sans'; font-style: normal; font-weight: 700; src: url('fonts/albert-sans-v1-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* albert-sans-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Albert Sans'; font-style: italic; font-weight: 700; src: url('fonts/albert-sans-v1-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* overpass-mono-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Overpass Mono'; font-style: normal; font-weight: 400; src: url('fonts/overpass-mono-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ------------------------------ Reset ------------------------------- */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* Inherit fonts and colors */ button { all: initial; font: inherit; color: inherit; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* ------------------------------ Variables ------------------------------- */ :root { --black: #000; --white: #fff; --grey: #848484; --lightgrey: #F3F2F2; --background: #F3F2F2; --foreground: #121212; --space-default: 1.125rem; --space-large: 2.25rem; --border-radius: 2px; --font-family-sans-serif: 'Albert Sans', sans-serif; --font-family-monospace: 'Overpass Mono', monospace; --font-size-mini: 0.625rem; --font-size-tiny: 0.75rem; --font-size-small: 0.875rem; --font-size-default: 1rem; } /* prefers dark mode */ @media (prefers-color-scheme: dark) { :root { --black: #fff; --white: #000; --grey: #848484; --lightgrey: #121212; --background: #121212; --foreground: #fff; } img { opacity: 0.95; } img:hover { opacity: 1; } .social a img { filter: invert(0.5); } } /* ------------------------------ Layout ------------------------------- */ .wrapper { margin: var(--space-default); } .plate { align-items: flex-start; background: var(--white); border-radius: var(--border-radius); display: flex; box-shadow: 4.2px 1.7px 6px -5px rgba(0, 0, 0, 0.028), 14.1px 5.8px 20.1px -5px rgba(0, 0, 0, 0.042), 63px 26px 90px -5px rgba(0, 0, 0, 0.07) ; flex-direction: column; gap: var(--space-default); margin-left: auto; margin-right: auto; max-width: 100%; padding: var(--space-large); } /* First column */ .first-column { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; width: 100%; } .first-column img { border-radius: var(--border-radius); max-width: 100%; } /* Second column */ .second-column { width: 100%; } .links { border-top: 1px solid var(--foreground); display: flex; margin: var(--space-large) 0; padding-left: 0; padding-top: 18px; flex-direction: column; align-items: flex-start; gap: 1.125rem; align-self: stretch; } .links li { border-bottom: 1px solid var(--foreground); list-style: none; margin: 0; padding: 0 0 var(--space-default) 0; font-family: var(--font-family-monospace); width: 100%; } .links li span { color: var(--grey); display: block; font-size: var(--font-size-mini); line-height: var(--font-size-small); margin-bottom: 0; text-transform: uppercase; width: 100%; } .links li a { font-size: var(--font-size-small); line-height: var(--font-size-small); } .copyright { margin-bottom: 0; } @media screen and (min-width: 450px) { .plate { flex-direction: row; gap: var(--space-large); max-width: 54rem; } .first-column { max-width: 40%; } .second-column { max-width: 60%; } } @media screen and (min-width: 799px) { .wrapper { align-items: center; display: flex; margin: var(--space-large); min-height: 90vh; } .links li { display: flex; margin: 0; align-items: center; gap: 0.5625rem; align-self: stretch; } .links li span { display: block; max-width: 6rem; } } /* ------------------------------ Typography ------------------------------- */ body { background: var(--background); color: var(--foreground); } p { font-family: 'Albert Sans', sans-serif; font-size: var(--font-size-default); line-height: 135%; margin: 0 0 1.125rem 0; } small { color: var(--grey); font-size: var(--font-size-small); } code, pre { color: var(--grey); font-family: var(--font-family-monospace); } .pr, .copyright { color: var(--grey); font-size: var(--font-size-small); } .pr small { font-size: var(--font-size-mini); } /* ------------------------------ Links ------------------------------- */ a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--grey); } a:hover { color: var(--black); text-decoration-color: var(--black); } .pr a { color: var(--grey); } .link-button { display: flex; padding: 0.125rem 0.1875rem; align-items: center; gap: 0.1875rem; border-radius: var(--border-radius); background: #F3F2F2; } .link-button:hover { background: var(--foreground); color: var(--white); } /* Social */ li.social { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 0.5625rem; align-self: stretch; } .links li.social a { align-items: center; background-color: var(--lightgrey); border-radius: var(--border-radius); color: #242424; display: flex; font-family: var(--font-family-monospace); font-size: var(--font-size-small); gap: 0.1875rem; line-height: 1; padding: 3px 5px; text-decoration: none; text-transform: uppercase; } .links li.social a img { height: 0.75rem; opacity: 0.75; width: 0.75rem; } .links li.social a span { padding-top: 3px; } .links li.social a:hover { background-color: var(--white); color: var(--black); } .links li.social a:hover img { opacity: 1; rotate: 2deg; transform: scale(1.2); transition: .3s; } /* ------------------------------ Animations ------------------------------- */ /* Fade in */ .fade-in-fwd { -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } @-webkit-keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /* Swing in top fwd */ .swing-in-top-fwd { -webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @-webkit-keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } } @keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } }