/* * CONSIDERING TODAY * Version: 0.4.1 * By Thord D. Hedengren – https://tdh.me */ /* ------------------------------ 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; } /* ------------------------------ Fonts ------------------------------ */ /* newsreader-300 - 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: 'Newsreader'; font-style: normal; font-weight: 300; src: url('fonts/newsreader-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* newsreader-300italic - 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: 'Newsreader'; font-style: italic; font-weight: 300; src: url('fonts/newsreader-v19-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* instrument-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: 'Instrument Sans'; font-style: normal; font-weight: 400; src: url('../fonts/instrument-sans-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* instrument-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: 'Instrument Sans'; font-style: italic; font-weight: 400; src: url('../fonts/instrument-sans-v1-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* instrument-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: 'Instrument Sans'; font-style: normal; font-weight: 700; src: url('../fonts/instrument-sans-v1-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* instrument-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: 'Instrument Sans'; font-style: italic; font-weight: 700; src: url('../fonts/instrument-sans-v1-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ------------------------------ Variables ------------------------------ */ :root { --absolute-light: #fff; --absolute-dark: #000; --grey: #6c6c6c; --lightgrey: #bcbcbc; --foreground: #121212; --background: #ecebe7; --accent: #964206; --font-family-serif: 'Newsreader', 'New York', 'Adobe Garamond', 'Garamond', 'Times New Roman', 'Times', serif; --font-family-sans-serif: 'Instrument Sans', 'SF Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; --font-size-default: 1.15rem; --font-size-small: 0.75rem; --font-size-large: 1.35rem; --font-size-xlarge: 3rem; --line-height-default: 1.5; --line-height-small: 1.05; --space-default: 1.5rem; --space-small: 1rem; } @media screen and (min-width: 500px) { :root { --font-size-default: 1.25rem; --font-size-small: 0.875rem; --font-size-large: 1.5rem; --font-size-xlarge: 4rem; } } /* prefers dark mode */ @media (prefers-color-scheme: dark) { :root { --foreground: #ecebe7; --background: #121212; --grey: #bcbcbc; --lightgrey: #6c6c6c; --accent: #d25b05; --absolute-light: #000; --absolute-dark: #fff; } } /* ------------------------------ Typography ------------------------------ */ body { color: var(--foreground); font-family: var(--font-family-sans-serif); } h1, h2 { font-family: var(--font-family-serif); font-weight: 300; line-height: var(--line-height-small); } h1 { font-size: var(--font-size-xlarge); } h2 { color: var(--grey); margin: var(--space-default) 0; font-size: var(--font-size-large); } p { font-family: var(--font-family-sans-serif); font-size: var(--font-size-default); line-height: var(--line-height-default); margin: 0 0 var(--space-default) 0; } p.small { color: var(--grey); font-size: var(--font-size-small); } /* ------------------------------ Elements ------------------------------ */ body { background-color: var(--background); } /* --- Links --- */ a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--lightgrey); } a:hover { color: var(--absolute-dark); text-decoration: underline; } p.small a { color: var(--grey); } /* --- Forms --- */ /* ------------------------------ Layout ------------------------------ */ .wrapper { display: flex; flex-direction: column; justify-content: flex-end; margin: var(--space-default) auto; max-width: 70rem; min-height: 90vh; width: 90%; } @media screen and (min-width: 800px) { .columns { align-items: flex-end; display: flex; gap: var(--space-default); } .column:first-child { width: 60%; } .column:nth-child(2) { width: 40%; } } /* --- Header --- */ header { margin: var(--space-default) 0; } /* --- Main --- */ main {} .author { background-color: var(--absolute-light); border-radius: 2px; padding: var(--space-default); } .author-photo { float: left; margin: 0 var(--space-small) var(--space-small) 0; width: 30%; } .author-photo img { border-radius: 2px; } .author-bio p { font-size: var(--font-size-small); margin: 0 0 var(--space-small) 0; } .author-bio p:last-child { margin-bottom: 0; } .season { margin-top: var(--space-default); } .season p { color: var(--grey); font-family: var(--font-family-serif); font-weight: 300; margin: 0 auto var(--space-default) 0; } .season p span { color: var(--foreground); } @media screen and ( min-width: 500px ) { .author { display: flex; gap: var(--space-small); } .author-photo { float: none; margin: 0; width: 30%; } .author-bio { width: 70%; } } /* --- Footer --- */ footer { margin: var(--space-default) 0; } /* ------------------------------ Animations ------------------------------ */ .rotate-in-2-ccw { -webkit-animation: rotate-in-2-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: rotate-in-2-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes rotate-in-2-ccw { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotate-in-2-ccw { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } .scale-in-center { -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .scale-in-br { -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes scale-in-br { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } } @keyframes scale-in-br { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } } .fade-in { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .fade-in-1 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both; } .fade-in-2 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both; } .fade-in-3 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.9s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.9s both; } .fade-in-4 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.2s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.2s both; } .fade-in-5 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both; } .fade-in-6 { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both; } .fade-in-last { -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3s both; animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3s both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .wobble-ver-left { -webkit-animation: wobble-ver-left 0.8s 5s both; animation: wobble-ver-left 0.8s 5s both; } @-webkit-keyframes wobble-ver-left { 0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateY(-30px) rotate(-6deg); transform: translateY(-30px) rotate(-6deg); } 30% { -webkit-transform: translateY(15px) rotate(6deg); transform: translateY(15px) rotate(6deg); } 45% { -webkit-transform: translateY(-15px) rotate(-3.6deg); transform: translateY(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateY(9px) rotate(2.4deg); transform: translateY(9px) rotate(2.4deg); } 75% { -webkit-transform: translateY(-6px) rotate(-1.2deg); transform: translateY(-6px) rotate(-1.2deg); } } @keyframes wobble-ver-left { 0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateY(-30px) rotate(-6deg); transform: translateY(-30px) rotate(-6deg); } 30% { -webkit-transform: translateY(15px) rotate(6deg); transform: translateY(15px) rotate(6deg); } 45% { -webkit-transform: translateY(-15px) rotate(-3.6deg); transform: translateY(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateY(9px) rotate(2.4deg); transform: translateY(9px) rotate(2.4deg); } 75% { -webkit-transform: translateY(-6px) rotate(-1.2deg); transform: translateY(-6px) rotate(-1.2deg); } }