/*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *: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; } /* 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; } /* BROWSERS */ /* Works on Firefox */ * { scrollbar-width: thin; scrollbar-color: #000 transparent; } /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0px; border: none; } /* ================= VARIABLES ================= */ :root { --margin: 1rem; } /* ================= BASICS ================= */ body { position: fixed; width: 100vw; height: 100vh; } button { cursor: pointer; } @media screen and (min-width: 640px) { a:hover { background-color: #000; color: #fff; } } strong { font-weight: bold; } p { margin-bottom: 1.5rem; line-height: 1.3; } /* ================= FUNCTIONNALS ================= */ .display { display: block; } .hide { display: none; } .underline, .underline * { text-decoration: underline; } /* ================= TEXTS ================= */ /* FONTS */ @font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-MediumItalic.woff2") format("woff2"), url("./fonts/SuisseIntl-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl.woff2") format("woff2"), url("./fonts/SuisseIntl.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Italic.woff2") format("woff2"), url("./fonts/SuisseIntl-Italic.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: "Suisse Int'l"; src: url("./fonts/SuisseIntl-Medium.woff2") format("woff2"), url("./fonts/SuisseIntl-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } * { font-family: "Suisse Int'l", sans-serif; font-weight: normal; font-style: normal; } h1, h3, h4 { font-weight: 500; line-height: 0.8; } h4 { font-size: 1rem; line-height: 1.3rem; } h1, h2, figcaption { font-size: 2.8rem; line-height: 1; } /* ================= LAYOUT ================= */ header { position: fixed; z-index: 998; top: 0; left: 0; padding: var(--margin); display: flex; align-items: flex-start; width: 100%; overflow: hidden; } header.expanded { background-color: #fff; height: 100vh; } header footer { display: none; position: fixed; bottom: 0; padding: var(--margin) 0; width: calc(100% - (var(--margin) * 2)); } header.expanded footer { display: flex; justify-content: space-between; background-color: #fff; } header button { width: 35%; } #bio { width: 100%; font-size: 0.75rem; } #bio h4 { font-weight: normal; } #project { position: fixed; width: 100%; height: 100%; cursor: none; } #project figure { pointer-events: none; height: 100%; text-align: center; position: absolute; max-height: 85vh; max-width: 85vw; } #project_background { display: none; } .arrow { display: none; } figcaption { position: fixed; pointer-events: all; z-index: 999; bottom: 0; left: 0; padding: var(--margin); text-align: left; width: 100%; } #next { width: 100%; text-align: right; margin-bottom: 1rem; } figcaption h2 { display: inline; } /* ================= IMAGES ================= */ #project__front { pointer-events: none; position: absolute; max-width: 80vw; max-height: 80vh; } #project__background { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media screen and (max-width: 640px) { header { display: block; max-height: 100vh; overflow: auto; } header button { width: 100%; } header.expanded footer { display: block; } #bio { padding-bottom: 5rem; margin-top: 1rem; } #bio * { text-decoration-thickness: 1px; } h1, figcaption, h2 { font-size: 1.8rem; } a:not(.arrow) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } #project { cursor: auto; } #project figure { padding: 0; display: flex; justify-content: center; align-items: center; max-height: 84vh; position: static; max-width: none; } #project figure img { max-height: 79%; } #project__background { filter: blur(0px) !important; } #project__front { display: none !important; } figcaption { max-height: 6rem; padding-top: 1rem; padding-bottom: 1rem; overflow: scroll; } #next { display: none; } .arrow { display: block; position: absolute; right: 1rem; bottom: 5.5rem; font-size: 3rem; } }