From 8249f248ccc5d9baff6c8ae4dcafe981aadd8d72 Mon Sep 17 00:00:00 2001 From: Lewis Hunt Date: Sun, 5 May 2024 20:56:20 +0100 Subject: [PATCH] Updates --- assets/{index-Dpm0dFvX.css => index-BzB-q56p.css} | 2 +- assets/{index-Cuuh70f6.js => index-CEY4G_iS.js} | 0 index.html | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename assets/{index-Dpm0dFvX.css => index-BzB-q56p.css} (66%) rename assets/{index-Cuuh70f6.js => index-CEY4G_iS.js} (100%) diff --git a/assets/index-Dpm0dFvX.css b/assets/index-BzB-q56p.css similarity index 66% rename from assets/index-Dpm0dFvX.css rename to assets/index-BzB-q56p.css index 7517c52..8e49d33 100644 --- a/assets/index-Dpm0dFvX.css +++ b/assets/index-BzB-q56p.css @@ -1 +1 @@ -.divz-item{display:block;position:absolute;width:100%;height:100%;background:transparent;-webkit-user-select:none;user-select:none;opacity:.2;transition:opacity .4s}.divz-item.selected{opacity:.9}.divz-item.selected.expanded{opacity:1}.divz-item.dark-mode>*{border:.5px solid rgba(250,250,250,.1)}.divz-item>*{position:absolute;margin:0;display:flex;justify-content:center;align-items:center;width:45%;height:45%;top:50%;left:50%;transform:translate(-50%,-50%) scale(.44);backface-visibility:hidden;transition:transform .3s;border-radius:20px;background-color:#0a0a0a33;background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden;object-fit:cover}.divz-item>* img,.divz-item>* video{height:100%;width:100%;object-fit:cover}.divz-item.expanded>*{transform:translate(-50%,-50%) scale(.88)}.divz-button{position:absolute;display:flex;align-items:center;padding:10px;border-radius:50%;border-style:solid;border-width:2px;border-color:#0a0a0a4d;background-color:#fafafa80;bottom:25px;width:25px;height:25px;cursor:pointer}.divz-button.left-align{left:30px}.divz-button.right-align{right:30px}.divz-button svg{fill:#0a0a0aa6;z-index:20;width:100%;height:100%;transform:scale(.8)}@media (hover: hover){.divz-button:hover svg{fill:#0a0a0ae6}}.divz-button.dark-mode{border-color:#fafafa4d;background-color:#0a0a0a99}.divz-button.dark-mode svg{fill:#fafafa99}.divz-button.dark-mode:hover svg{fill:#fafafacc}@media (max-height: 480px){.divz-button{bottom:10px;transform:scale(.8)}}.divz-nav-buttons-viewport,.divz-nav-buttons{height:150px;position:absolute;color:#000}.divz-nav-buttons-viewport{perspective:150px;top:calc(100% - 120px);left:50%}@media (max-height: 480px){.divz-nav-buttons-viewport{top:calc(100% - 100px);transform:scale(.65)}}.divz-nav-buttons{transform:rotateX(45deg) translate(-50%,-40%);display:flex;align-items:center;justify-content:space-between;flex-direction:column;border-style:solid;border-width:2px;border-color:#0a0a0a4d;background-color:#fafafa80;border-radius:12px;width:90px;padding:10px 5px 0;z-index:2;gap:10px;transition:transform .3s}.divz-nav-buttons.expanded{transform:rotateX(45deg) translate(-50%,130%)}.divz-nav-buttons.dark-mode{border-color:#fafafa4d;background-color:#0a0a0a80}.divz-nav-buttons.dark-mode .divz-nav-button,.divz-nav-buttons.dark-mode .divz-nav-label{color:#fafafa;opacity:.6}.divz-nav-buttons .divz-nav-label{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;height:100%;width:200%;align-items:center;justify-content:center;font-size:22px;font-weight:400;opacity:1;font-family:Arial,Helvetica,sans-serif}.divz-nav-buttons .divz-nav-button{display:flex;justify-content:center;align-items:center;width:80%;font-size:50px;opacity:.5;color:#0a0a0a;-webkit-user-select:none;user-select:none;transform:scaleX(1.3)}.divz-nav-buttons .divz-nav-button.disabled{opacity:.15;pointer-events:none}.divz-nav-buttons .divz-nav-button:not(.disabled):hover{opacity:.8;cursor:pointer}body{overflow:hidden;padding:0;margin:0}.divz{position:absolute;width:100%;height:100%;overflow:hidden}.divz-viewport{width:100%;height:100%;left:0;perspective:800px;perspective-origin:center}.divz-list{width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(500px)}.app{font-family:Courier New,Courier,monospace;height:100vh}.app.dark-mode{background:#000}.app.dark-mode .app-header *{color:#fffffff2}.app-header{position:absolute;box-sizing:border-box;top:0;width:100%;padding:20px;display:flex;flex-direction:column;align-items:center;border-radius:6px}.app-header div,.app-header h1,.app-header small,.app-header a{text-align:center;color:#000;-webkit-user-select:none;user-select:none;z-index:1;pointer-events:none}.app-header .demo-list{position:absolute;top:15px;left:20px;display:flex;gap:15px;line-height:1.2;font-size:16px}.app-header .demo-list a{text-decoration:underline;cursor:pointer;pointer-events:all}.app-header .demo-list a.active{font-weight:800;pointer-events:none}.app-header .github{position:absolute;top:15px;right:20px;font-size:16px;pointer-events:all}.app-header h1{font-size:42px;margin-top:18px;margin-bottom:0}.app-header h1 a{text-decoration:none}.app-header small{line-height:normal}@media (max-width: 480px){.app-header{padding:33px}.app-header h1{font-size:36px;line-height:normal}}@media (max-height: 480px){.app-header{padding:10px}.app-header small{display:none}.app-header h1{font-size:36px;margin-top:5px}}.divz.demo1{color:#fafafacc}.divz.demo1 .divz-item>*{font-size:50px}.divz.demo4 .divz-item>*{border:none;border-radius:10px;width:auto;align-items:flex-end;justify-content:end}.divz.demo4 .divz-item>* img{height:100%;width:auto}@media (orientation: portrait){.divz.demo4 .divz-item>*{transform:translate(-50%,-50%) scale(.35)}}.divz.demo4 .divz-item.selected figcaption{display:flex;animation:fade-in-full .5s .5s forwards}@media (max-height: 480px){.divz.demo4 .divz-item.selected figcaption{margin:5px;transform:translate(25%,20%) scale(.5)}}.divz.demo4 .divz-item.expanded>* figcaption{transform:translate(25%,20%) scale(.5)}@media (orientation: portrait){.divz.demo4 .divz-item.expanded>*{transform:translate(-50%,-50%) scale(.85)}.divz.demo4 .divz-item.expanded>* figcaption{transform:translate(50%,25%) scale(.5)}}.divz figcaption{display:none;opacity:0;position:absolute;padding:10px;margin:10px;background-color:#c8c8c826;color:#fff;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:5px;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;transition:transform .3s,opacity .3s}.divz figcaption div{-webkit-user-select:none;user-select:none;pointer-events:none}.divz figcaption div:first-child{font-size:50px;line-height:1;font-family:monospace}@media (max-height: 480px){.divz figcaption div:first-child{font-size:30px}}.divz figcaption div:last-child{font-size:12px}@media (max-height: 480px){.divz figcaption div:last-child{font-size:10px}}img.background{position:fixed;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;filter:blur(60px);opacity:0;animation:fade-in .3s forwards;backface-visibility:hidden;transform:translateZ(0) scale(1.2) rotate(0)}img.background.demo4{filter:none;transform:none;animation:fade-in-full .3s forwards}video.background{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;animation:fade-in 2s .2s forwards}@keyframes fade-in{0%{opacity:0}to{opacity:.5}}@keyframes fade-in-full{0%{opacity:0}to{opacity:1}}@keyframes fade-out-full{0%{opacity:1}to{opacity:0}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%} +.divz-item{display:block;position:absolute;width:100%;height:100%;background:transparent;-webkit-user-select:none;user-select:none;opacity:.2;transition:opacity .4s}.divz-item.selected{opacity:.9}.divz-item.selected.expanded{opacity:1}.divz-item.dark-mode>*{border:.5px solid rgba(250,250,250,.1)}.divz-item>*{position:absolute;margin:0;display:flex;justify-content:center;align-items:center;width:45%;height:45%;top:50%;left:50%;transform:translate(-50%,-50%) scale(.44);backface-visibility:hidden;transition:transform .3s;border-radius:20px;background-color:#0a0a0a33;background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden;object-fit:cover}.divz-item>* img,.divz-item>* video{height:100%;width:100%;object-fit:cover}.divz-item.expanded>*{transform:translate(-50%,-50%) scale(.88)}.divz-button{position:absolute;display:flex;align-items:center;padding:10px;border-radius:50%;border-style:solid;border-width:2px;border-color:#0a0a0a4d;background-color:#fafafa80;bottom:25px;width:25px;height:25px;cursor:pointer}.divz-button.left-align{left:30px}.divz-button.right-align{right:30px}.divz-button svg{fill:#0a0a0aa6;z-index:20;width:100%;height:100%;transform:scale(.8)}@media (hover: hover){.divz-button:hover svg{fill:#0a0a0ae6}}.divz-button.dark-mode{border-color:#fafafa4d;background-color:#0a0a0a99}.divz-button.dark-mode svg{fill:#fafafa99}.divz-button.dark-mode:hover svg{fill:#fafafacc}@media (max-height: 480px){.divz-button{bottom:10px;transform:scale(.8)}}.divz-nav-buttons-viewport,.divz-nav-buttons{height:150px;position:absolute;color:#000}.divz-nav-buttons-viewport{perspective:150px;top:calc(100% - 120px);left:50%}@media (max-height: 480px){.divz-nav-buttons-viewport{top:calc(100% - 100px);transform:scale(.65)}}.divz-nav-buttons{transform:rotateX(45deg) translate(-50%,-40%);display:flex;align-items:center;justify-content:space-between;flex-direction:column;border-style:solid;border-width:2px;border-color:#0a0a0a4d;background-color:#fafafa80;border-radius:12px;width:90px;padding:10px 5px 0;z-index:2;gap:10px;transition:transform .3s}.divz-nav-buttons.expanded{transform:rotateX(45deg) translate(-50%,130%)}.divz-nav-buttons.dark-mode{border-color:#fafafa4d;background-color:#0a0a0a80}.divz-nav-buttons.dark-mode .divz-nav-button,.divz-nav-buttons.dark-mode .divz-nav-label{color:#fafafa;opacity:.6}.divz-nav-buttons .divz-nav-label{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;height:100%;width:200%;align-items:center;justify-content:center;font-size:22px;font-weight:400;opacity:1;font-family:Arial,Helvetica,sans-serif}.divz-nav-buttons .divz-nav-button{display:flex;justify-content:center;align-items:center;width:80%;font-size:50px;opacity:.5;color:#0a0a0a;-webkit-user-select:none;user-select:none;transform:scaleX(1.3)}.divz-nav-buttons .divz-nav-button.disabled{opacity:.15;pointer-events:none}.divz-nav-buttons .divz-nav-button:not(.disabled):hover{opacity:.8;cursor:pointer}body{overflow:hidden;padding:0;margin:0}.divz{position:absolute;width:100%;height:100%;overflow:hidden}.divz-viewport{width:100%;height:100%;left:0;perspective:800px;perspective-origin:center}.divz-list{width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(500px)}.app{font-family:Courier New,Courier,monospace;height:100vh}.app.dark-mode{background:#000}.app.dark-mode .app-header *{color:#fffffff2}.app-header{position:absolute;box-sizing:border-box;top:0;width:100%;padding:20px;display:flex;flex-direction:column;align-items:center;border-radius:6px}.app-header div,.app-header h1,.app-header small,.app-header a{text-align:center;color:#000;-webkit-user-select:none;user-select:none;z-index:1;pointer-events:none}.app-header .demo-list{position:absolute;top:15px;left:20px;display:flex;gap:15px;line-height:1.2;font-size:16px}.app-header .demo-list a{text-decoration:underline;cursor:pointer;pointer-events:all}.app-header .demo-list a.active{font-weight:800;pointer-events:none}.app-header .github{position:absolute;top:15px;right:20px;font-size:16px;pointer-events:all}.app-header h1{font-size:42px;margin-top:18px;margin-bottom:0}.app-header h1 a{text-decoration:none}.app-header small{line-height:normal}@media (max-width: 480px){.app-header{padding:33px}.app-header h1{font-size:36px;line-height:normal}}@media (max-height: 480px){.app-header{padding:10px}.app-header small{display:none}.app-header h1{font-size:36px;margin-top:5px}}.divz.demo1{color:#fafafacc}.divz.demo1 .divz-item>*{font-size:50px}.divz.demo4 .divz-item>*{border-radius:10px;width:auto;align-items:flex-end;justify-content:end}.divz.demo4 .divz-item>* img{height:100%;width:auto}@media (orientation: portrait){.divz.demo4 .divz-item>*{transform:translate(-50%,-50%) scale(.35)}}.divz.demo4 .divz-item.selected figcaption{display:flex;animation:fade-in-full .5s .5s forwards}@media (max-height: 480px){.divz.demo4 .divz-item.selected figcaption{margin:5px;transform:translate(25%,20%) scale(.5)}}.divz.demo4 .divz-item.expanded>*{transform:translate(-50%,-50%) scale(.8)}.divz.demo4 .divz-item.expanded>* figcaption{transform:translate(25%,25%) scale(.5)}@media (orientation: portrait){.divz.demo4 .divz-item.expanded>*{transform:translate(-50%,-50%) scale(.85)}.divz.demo4 .divz-item.expanded>* figcaption{transform:translate(50%,25%) scale(.5)}}.divz figcaption{display:none;opacity:0;position:absolute;padding:10px;margin:10px;background-color:#c8c8c826;color:#fff;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:5px;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;transition:transform .3s,opacity .3s}.divz figcaption div{-webkit-user-select:none;user-select:none;pointer-events:none}.divz figcaption div:first-child{font-size:50px;line-height:1;font-family:monospace}@media (max-height: 480px){.divz figcaption div:first-child{font-size:30px}}.divz figcaption div:last-child{font-size:12px}@media (max-height: 480px){.divz figcaption div:last-child{font-size:10px}}img.background{position:fixed;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;filter:blur(60px);opacity:0;animation:fade-in .3s forwards;backface-visibility:hidden;transform:translateZ(0) scale(1.2) rotate(0)}img.background.demo4{filter:none;transform:none;animation:fade-in-full .3s forwards}video.background{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;animation:fade-in 2s .2s forwards}@keyframes fade-in{0%{opacity:0}to{opacity:.5}}@keyframes fade-in-full{0%{opacity:0}to{opacity:1}}@keyframes fade-out-full{0%{opacity:1}to{opacity:0}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%} diff --git a/assets/index-Cuuh70f6.js b/assets/index-CEY4G_iS.js similarity index 100% rename from assets/index-Cuuh70f6.js rename to assets/index-CEY4G_iS.js diff --git a/index.html b/index.html index 6313609..1e65eb3 100644 --- a/index.html +++ b/index.html @@ -53,8 +53,8 @@ property="og:description" content="Divz is a free open-source React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis" /> - - + +