@charset "utf-8"; @font-face{ font-family: "DM Mono Regular"; src:url(../fonts/DM_Mono/DMMono-Regular.ttf); } @font-face{ font-family: "DM Mono Medium"; src:url(../fonts/DM_Mono/DMMono-Medium.ttf); } @font-face{ font-family: "DM Sans Regular"; src:url(../fonts/DM_Sans/DMSans_18pt-Regular.ttf); } @font-face{ font-family: "DM Sans Medium"; src:url(../fonts/DM_Sans/DDMSans_18pt-Medium.ttf); } @font-face{ font-family: "IBM Plex Mono Regular"; src:url(../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf); } @font-face{ font-family: "IBM Plex Mono Medium"; src:url(../fonts/IBM_Plex_Sans/IBMPlexMono-Medium.ttf); } @font-face{ font-family: "IBM Plex Sans Regular"; src:url(../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf); } @font-face{ font-family: "IBM Plex Sans Medium"; src:url(../fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf); } @font-face{ font-family: "Fira Code Regular"; src:url(../fonts/Fira_Code/FiraCode-Regular.ttf); } @font-face{ font-family: "Fira Code Medium"; src:url(../fonts/Fira_Code/FiraCode-Medium.ttf); } @font-face{ font-family: "Fira Sans Regular"; src:url(../fonts/Fira_Sans/FiraSans-Regular.ttf); } @font-face{ font-family: "Fira Sans Medium"; src:url(../fonts/Fira_Sans/FiraSans-Medium.ttf); } @font-face{ font-family: "PT Mono Regular"; src:url(../fonts/PT_Mono/PTMono-Regular.ttf); } @font-face{ font-family: "PT Sans Regular"; src:url(../fonts/PT_Sans/PTSans-Regular.ttf); } @font-face{ font-family: "Space Mono Regular"; src:url(../fonts/Space_Mono/SpaceMono-Regular.ttf); } @font-face{ font-family: "Space Grotesk Regular"; src:url(../fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf); } @font-face{ font-family: "Space Grotesk Medium"; src:url(../fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf); } @font-face{ font-family: "Rethink Sans Regular"; src:url(../fonts/Rethinks_Sans/RethinkSans-Regular.ttf); } @font-face{ font-family: "Rethink Sans Medium"; src:url(../fonts/Rethinks_Sans/RethinkSans-Medium.ttf); } @font-face{ font-family: "Zilla Slab Regular"; src:url(../fonts/Zilla_Slab/ZillaSlab-Regular.ttf); } @font-face{ font-family: "Zilla Slab Medium"; src:url(../fonts/Zilla_Slab/ZillaSlab-Medium.ttf); } html{ width: 100%; overflow:auto; /*不要给html元素加overflow-x:hidden;否则会出现滚动条不在边缘且fix元素把滚动条计算为文档内部尺寸的情况 From the CSS 2.2 spec for the overflow property UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. That is, overflow:hidden set on the body element, is moved to apply to the viewport instead. To avoid that happening, you can set the element to not be overflow:visible. i.e. add html { overflow:auto; } to the CSS. */ margin: 0; padding: 0; font-size: 7px; line-height: 1.3; height:100%; position: relative; font-family: sans-serif; } html.DM-Mono-Regular{ font-family: "DM Mono Regular"; } html.DM-Mono-Medium{ font-family: "DM Mono Medium"; } html.DM-Sans-Regular{ font-family: "DM Sans Regular"; } html.DM-Sans-Medium{ font-family: "DM Sans Medium"; } html.IBM-Plex-Mono-Regular{ font-family: "IBM Plex Mono Regular"; } html.IBM-Plex-Mono-Medium{ font-family: "IBM Plex Mono Medium"; } html.IBM-Plex-Sans-Regular{ font-family: "IBM Plex Sans Regular"; } html.IBM-Plex-Sans-Medium{ font-family: "IBM Plex Sans Medium"; } html.Fira-Code-Regular{ font-family: "Fira Code Regular"; } html.Fira-Code-Medium{ font-family: "Fira Code Medium"; } html.Fira-Sans-Regular{ font-family: "Fira Sans Regular"; } html.Fira-Sans-Medium{ font-family: "Fira Sans Medium"; } html.PT-Mono-Regular{ font-family: "PT Mono Regular"; } html.PT-Sans-Regular{ font-family: "PT Sans Regular"; } html.Space-Mono-Regular{ font-family: "Space Mono Regular"; } html.Space-Grotesk-Regular{ font-family: "Space Grotesk Regular"; } html.Space-Grotesk-Medium{ font-family: "Space Grotesk Medium"; } html.Rethink-Sans-Regular{ font-family: "Rethink Sans Regular"; } html.Rethink-Sans-Medium{ font-family: "Rethink Sans Medium"; } html.Zilla-Slab-Regular{ font-family: "Zilla Slab Regular"; } html.Zilla-Slab-Medium{ font-family: "Zilla Slab Medium"; } #page-margin-bottom{ margin-top:-2.6rem; width: 100%; height:2.6rem; } .title, #this-work-tags, #this-work-year, #this-work-description{ vertical-align: top; z-index: 5; } .title{ z-index: 2; position:fixed; top: 2.6rem; left: 2.6rem; text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; } #home-button{ /*border:2px solid #111111;*/ font-size: 3rem; position: fixed; left:2.6rem; bottom:2.6rem; /*box-shadow: 0 0 10px white, inset 0 0 10px white;*/ text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; z-index: 1; display: inline-block; text-decoration: underline; } #home-button:hover{ /*border:2px solid #ffffff;*/ } #info-container, #all-media{ position: relative; display: inline-block; width:50%; padding-top: 2.6rem; padding-bottom: 2.6rem; vertical-align: top; overflow-y: auto; overflow-x: hidden; height: 100vh; box-sizing: border-box; } #info-container{/* border-right: 1px #ffffff dashed;*/ } #left-border{ left: calc(50% - 1.5px); top:0; position: fixed; border-left: 1.5px dashed rgba(100,100,100,0.5); width: 0; height: 100%; /*filter: blur(1px);*/ } #info-container::-webkit-scrollbar{ width: 14px; border: 1.5px dashed rgba(100,100,100,0.5); border-radius:7px; opacity: 0.6; } #all-media::-webkit-scrollbar{ width: 14px; border: 1.5px dashed rgba(100,100,100,0.5); border-radius:7px; opacity: 0.6; } #info-container::-webkit-scrollbar-thumb{ width: 14px; border: 1.5px solid rgba(100,100,100,0.5); border-radius: 7px; opacity: 0.6; } #all-media::-webkit-scrollbar-thumb{ width: 14px; border: 1.5px solid rgba(100,100,100,0.5); border-radius: 7px; opacity: 0.6; } #info-container{ padding-left: 2.6rem; padding-right: 2.6rem; } #all-media{ padding-right: 2.6rem; padding-left: 2.6rem; } a{ color:#111111; } a:visited{ color:#111111; } a:hover{ color:white; } #this-work-tags{ /*margin-top: -1.3rem; width: calc(70% - 2.6rem); display: inline-block; margin-bottom: 2.6rem;*/ position: fixed; /*top: calc(100% - 9.1rem);*/ bottom: calc(-40.953px + 9.1rem); rotate: z -90deg; transform-origin: top left; /* margin-top: -0.975rem;*/ max-width: calc(50vh - 3.9rem); display: inline-block; /*margin-bottom: 2.6rem;*/ } #this-work-year{ position: fixed; left: calc(100% - 2.6rem); /*width: 30%;*/ width:auto; display: inline-block; margin-bottom: 2.6rem; rotate: z 90deg; transform-origin: left top; } #this-work-description{ position:relative; z-index: 2; margin-top: -7.8rem; width: 50%; margin-left: 50%; margin-bottom: 2.6rem; display: block; font-size: 2rem; white-space: pre-line; hyphens: auto; hyphenate-limit-chars:7 3 3; -ms-hyphenate-limit-lines: 1; -webkit-hyphenate-limit-lines: 1; hyphenate-limit-lines: 1; } .cloud-piece{ position: absolute; /*display: inline-block;*/ width:40px; height:40px; margin: 0; background-color:white; opacity: 0.5; /*filter: blur(10px);*/ /*transition: all ease 0.1s;*/ transform: translate3d(0, 0, 0); will-change: opacity; } #cloud-container{ overflow: hidden; filter: blur(20px); transform: translate3d(0, 0, 0); z-index: -1; /*left:-1rem; top:-1rem;*/ position: absolute; top:0; bottom:0; left:0; right:0; } body{ overflow-x: hidden; /*cursor: url("../mouse/neuro.png") 31 31, auto;*/ -webkit-text-size-adjust: none; text-size-adjust: none; font-size: 0; margin: 0; vertical-align: baseline; color:#111111; text-shadow: 0px 0px 6.6px #ffffff, 0px 0px 6.6px #ffffff, 0px 0px 6.6px #ffffff; box-sizing: border-box; width: 100%; height:100%; padding: 2.6rem; min-height: 100%; } #this-work-year{ /*font-size: 4rem;*/ font-size: 3rem; } .figure-container{ position: relative; width:100%; height:100%; margin-bottom: 2.6rem; display: flex; justify-content: center; align-items: center; } .media-container{ position: absolute; left:0; top:0; height:100%; margin-left:auto; margin-right:auto; width: 100%; /* aspect-ratio: 1 / 1;*/ display: flex; justify-content: center; align-items: center; } .media-container video{ width: auto; height: auto; margin:0 auto; } .no-crop-img{ width:100%; height:100%; object-fit: contain; } .cropped-img{ position:absolute; } .flex-container{ width: 100%; height: auto; display: flex; align-items: baseline; } #info{ margin-bottom: 2.6rem; } #lobbin-name{ display: inline; margin-right: 2.6rem; } #artist-statement{ font-size: 3rem; } #search-bar{ width:0; flex-grow: 1; height:5.2rem; border:4px solid black; display: inline-block; margin: 0; vertical-align: baseline; font-size: 4rem; position: relative; top: calc(-2rem + 1px); outline: none; } .large-tags{ /*white-space: nowrap; font-size: 4rem; border: 2px solid #111111; padding-bottom: 2px; border-radius: 4rem; padding-left: 6px; padding-right: 6px; margin-right:20px; line-height: 7.8rem; box-shadow: 0 0 10px white, inset 0 0 10px white; text-shadow: 0 0 10px white;*/ white-space: nowrap; font-size: 3rem; border: 1.5px solid #111111; padding-bottom: 1.5px; border-radius: 4rem; padding-left: 4.5px; padding-right: 4.5px; margin-right: 15px; line-height: 5.85rem; box-shadow: 0 0 10px white, inset 0 0 10px white; text-shadow: 0 0 10px white; /*position: relative; top: calc(-2rem + 4px);*/ } .tags{ white-space: nowrap; font-size: 2rem; border: 1px solid #0044cc; padding-bottom: 1px; margin-right: 10px; padding-left: 3px; padding-right: 3px; border-radius: 2rem; line-height: 3.9rem; box-shadow: 0 0 5px white, inset 0 0 10px white; text-shadow: 0 0 5px white; } .title-link{ position: relative; z-index: 5; text-shadow: 0px 0px 10px #ffffff; } h1{ font-size: 3rem; font-weight: normal; margin: 0; margin-bottom: 2.6rem; } h6{ font-size: 4rem; font-weight: normal; margin: 0; } p{ font-size: 2rem; margin:0; } p.work-types{ font-size: 0; } .work-images-container>figure:first-of-type{ margin-left: 0px; transition: margin-left 0.3s ease; } figure{ position: relative; display: inline-block; margin: 0; width: 100%; } .work-image{ position: relative; z-index: 2; margin-left: 20px; margin-top: 20px; margin-bottom: 3rem; width: calc(100% - 40px); height:calc(25vw - 2.5rem * 6 / 4 - 40px); object-fit: contain; } .img-frame{ position: relative; } .caption{ position: absolute; /*width:60%;*/ left:auto; right:auto; bottom:auto; top: auto; font-size: 12px; line-height: 18.2px; rotate: z 90deg; transform-origin: left top; } figcaption{ font-size: 12px; line-height: 17.5px; /*text-indent: 2rem;*/ position: relative; top: -2.6rem; text-align: center; } .shadow{ position: absolute; z-index: -1; top:40px; left:40px; bottom:40px; right:40px; /* width: calc(100% - 100px); height:calc(100vh - 2.5rem * 3 / 2 - 100px);*/ /*background-color: rgba(100,100,100,0.5);*/ background-color: rgba(130,130,130,0.5); filter: blur(40px); will-change: filter; /*display: none;*/ /*border-radius: 50%;*/ } .work{ display: inline-block; margin-left: 2.6rem; margin-bottom: 5.2rem; width: calc(25vw - 2.6rem * 6 / 4); height:auto; vertical-align: top; position: relative; z-index: 3; } .work-images-container{ /*transform: translate3d(0, 0, 0);*/ z-index: -1; position: relative; width: 100%; height:auto; white-space: nowrap; overflow: hidden; margin-bottom: calc(1.3rem - 20px); margin-top: -20px; } .position-adjustment{ position: absolute; top: 0%; left: 0%; width:100%; height:100%; } /*.prev-btn{ position: absolute; height:6.25rem; width:6.25rem; border-top:solid 2.5px black; border-left:solid 2.5px black; transform: rotateZ(-45deg); transform-origin: center; top:calc(50% - 3.125rem); left: 2rem; filter: drop-shadow(0 0 6.5px white); z-index: 4; }*/ /*.next-btn{ position: absolute; height:6.25rem; width:6.25rem; border-top:solid 2.5px black; border-right:solid 2.5px black; transform: rotateZ(45deg); transform-origin: center; top:calc(50% - 3.125rem); right: 2rem; filter: drop-shadow(0 0 6.5px white); z-index: 4; }*/ /*#light-box{ position: fixed; box-sizing: border-box; padding-right: 35px; top:0; left: 0; z-index: 5; margin: 2.5rem; width: calc(100% - 5rem); height: calc(100% - 5rem); display: none; }*/ /*#light-box.show{ display: block; }*/ /*#light-box-white-shadow{ z-index: -1; position: absolute; top:0px; left:0px; width: calc(100% - 0px); height:calc(100% - 0px); background-color: rgba(255,255,255,1); filter: blur(25px); }*/ /*#light-box .work-images-container{ height:calc(100% - 20.5rem); margin-bottom:0; }*/ /*#light-box figure{ height:100%; }*/ /*#light-box .work-image{ height:calc(100% - 40px); }*/ /*#light-box .shadow{ height:calc(100% - 100px); }*/ /*#light-box-close{ width: 6.25rem; height: 6.25rem; position: absolute; right:0; top:0; }*/ /*.leftward-stroke{ width:100%; height:4px; background-color: black; position: absolute; top: calc(3.125rem - 2px); left: 0; transform: rotateZ(45deg); }*/ /*.rightward-stroke{ width:100%; height:4px; background-color: black; position: absolute; top: calc(3.125rem - 2px); left: 0; transform: rotateZ(-45deg); }*/ @media all and (orientation: portrait){ /*.media-container{ width:100%;*/ /*aspect-ratio: 1 / 1;*/ /*height:100%; }*/ } @media all and (min-width: 751px){ .work .prev-btn, .work .next-btn{ display: none; } } @media all and (max-width: 1280px){ .work{ width: calc(33.33vw - 2.6rem * 5 / 3); } .work-image{ width: calc(100% - 40px); height:calc(33.33vw - 2.6rem * 5 / 3 - 40px); } .shadow{ /*width: calc(100% - 100px); height:calc(33.33vw - 2.5rem * 5 / 3 - 100px);*/ /*border-radius: 50%;*/ } } @media all and (max-width: 960px){ .work{ width: calc(50vw - 2.6rem * 4 / 2); } .work-image{ width: calc(100% - 40px); height:calc(50vw - 2.6rem * 4 / 2 - 40px); } .shadow{ /* width: calc(100% - 100px); height:calc(50vw - 2.5rem * 4 / 2 - 100px);*/ /*border-radius: 50%;*/ } } @media all and (max-width: 750px){ /*#home-button{ top:auto; bottom:2.5rem; }*/ h6{ font-size: 3rem; } p{ font-size: 2rem; } .work{ width: calc(100vw - 2.6rem * 3 / 1); } .work-image{ /*width: calc(100% - 40px); height:calc(100vw - 2.5rem * 3 / 1 - 40px);*/ } .shadow{ /* width: calc(100% - 100px); height:calc(100vw - 2.5rem * 3 / 1 - 100px);*/ /*border-radius: 50%;*/ } #info-container{ width: 100%; height:auto; } #all-media{ width: 100%; height:auto; overflow-y: visible; } #left-border{ display:none; } } @media all and (max-width: 750px) and (orientation: landscape){ h6{ font-size: 3rem; } p{ font-size: 2rem; } .work{ width: calc(100vw - 2.6rem * 3 / 1); } .work-image{ width: calc(100% - 40px); height:calc(45vw - 2.6rem * 3 / 1 - 40px); } .shadow{ /* width: calc(100% - 100px); height:calc(45vw - 2.5rem * 3 / 1 - 100px);*/ /*border-radius: 50%;*/ } } @media all and (max-width: 640px){ #this-work-description{ width: 75%; margin-left: 25%; } } @media (pointer:coarse){ a:hover{ color:currentColor; } }