1 line
8.5 KiB
CSS
1 line
8.5 KiB
CSS
:root{--ivory:#fefdfc;--ivory-shade:#ecebea;--sand:#f7f4ef;--sand-shade:#b9b7b3;--charcoal:#181818;--charcoal-shade:#2a2a2a;--forest:#053f0a;--forest-shade:#f6fff6;--clay:#fa3812;--clay-shade:#ffefec;--sea:#1253fa;--sea-shade:#f0f8ff;--grey-700:#565656;--grey-600:#747474;--grey-500:#a3a3a3;--grey-400:#d1d1d1}:root .theme-light{--theme-bg:#fefdfc;--theme-fg:#181818;--theme-layout:#f7f4ef;--theme-grey:#747474;--theme-shade:#ecebea;--theme-contrast:#fa3812}:root .theme-dark{--theme-bg:#181818;--theme-fg:#fefdfc;--theme-layout:#f7f4ef;--theme-grey:#a3a3a3;--theme-shade:#2a2a2a;--theme-contrast:#fa3812}:root{--ease-in-quad:cubic-bezier(.55, .085, .68, .53);--ease-in-cubic:cubic-bezier(.55, .055, .675, .19);--ease-in-quart:cubic-bezier(.895, .03, .685, .22);--ease-in-quint:cubic-bezier(.755, .05, .855, .06);--ease-in-expo:cubic-bezier(.95, .05, .795, .035);--ease-in-circ:cubic-bezier(.6, .04, .98, .335);--ease-out-quad:cubic-bezier(.25, .46, .45, .94);--ease-out-cubic:cubic-bezier(.215, .61, .355, 1);--ease-out-quart:cubic-bezier(.165, .84, .44, 1);--ease-out-quint:cubic-bezier(.23, 1, .32, 1);--ease-out-expo:cubic-bezier(.19, 1, .22, 1);--ease-out-circ:cubic-bezier(.075, .82, .165, 1);--ease-in-out-quad:cubic-bezier(.455, .03, .515, .955);--ease-in-out-cubic:cubic-bezier(.645, .045, .355, 1);--ease-in-out-quart:cubic-bezier(.77, 0, .175, 1);--ease-in-out-quint:cubic-bezier(.86, 0, .07, 1);--ease-in-out-expo:cubic-bezier(1, 0, 0, 1);--ease-in-out-circ:cubic-bezier(.785, .135, .15, .86)}:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,:before,:after{box-sizing:border-box}a,button{cursor:revert}img{max-block-size:100%;max-inline-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}: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}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}@font-face{font-family:Instrument Serif;font-style:italic;font-weight:400;src:url(/drops/image-melody/assets/instrument-serif-italic-Cnq-0GR0.woff2)format("woff2"),url(/drops/image-melody/assets/instrument-serif-italic-CpREEq8K.woff)format("woff")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:400;src:url(/drops/image-melody/assets/hanken-grotesk-BB3emo1n.woff2)format("woff2"),url(/drops/image-melody/assets/hanken-grotesk-NweiADIQ.woff)format("woff")}@font-face{font-family:Hanken Grotesk;font-style:italic;font-weight:400;src:url(/drops/image-melody/assets/hanken-grotesk-italic-jl8TIPSn.woff2)format("woff2"),url(/drops/image-melody/assets/hanken-grotesk-italic-C_HjJa0S.woff)format("woff")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:600;src:url(/drops/image-melody/assets/hanken-grotesk-semibold-TK-BXOrb.woff2)format("woff2"),url(/drops/image-melody/assets/hanken-grotesk-semibold-vPR5A_Tb.woff)format("woff")}@font-face{font-family:Iosevka Charon Mono;font-style:normal;font-weight:700;src:url(/drops/image-melody/assets/iosevka-charon-mono-bold-1nweGISG.woff2)format("woff2"),url(/drops/image-melody/assets/iosevka-charon-mono-bold-DN5oOlAE.woff)format("woff")}:root{--font-serif:"Instrument Serif", serif;--font-sans:"Hanken Grotesk", sans-serif;--font-mono:"Iosevka Charon Mono", monospace;--layout-column-count:12;--layout-column-gap:20px;--layout-margin:20px;--layout-width:calc(100vw - (2 * var(--layout-margin)));--layout-column-width:calc(( var(--layout-width) - ((var(--layout-column-count) - 1) * var(--layout-column-gap)) ) / var(--layout-column-count))}.layout-block,.layout-grid{padding-left:var(--layout-margin);padding-right:var(--layout-margin);width:100%}.layout-grid{grid-template-columns:repeat(var(--layout-column-count), minmax(0, 1fr));grid-gap:var(--layout-column-gap);display:grid}html,html *{scrollbar-width:none!important;-ms-overflow-style:none!important}html::-webkit-scrollbar{width:0!important;height:0!important}html ::-webkit-scrollbar{width:0!important;height:0!important}:root{font-family:var(--font-sans), Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;background:var(--ivory);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;margin:0}.h1,h1{font-family:var(--font-serif);font-size:max(8vw,128px);font-style:italic;font-weight:400;line-height:1}.h2,h2{font-family:var(--font-serif);font-size:max(4vw,64px);font-style:italic;font-weight:400;line-height:1}.h3,h3{font-family:var(--font-serif);font-size:max(3vw,48px);font-style:italic;font-weight:400;line-height:1}.h4,h4{font-family:var(--font-serif);font-size:max(2vw,32px);font-style:italic;font-weight:400;line-height:1}.p,p,a,li{font-family:var(--font-sans);font-size:max(1vw,16px);font-weight:400;line-height:1.25}.label,label,button,pre{font-family:var(--font-mono);text-transform:uppercase;font-size:max(.875vw,14px);font-weight:700;line-height:1}.bold{font-weight:700}#app{min-height:100vh}button{cursor:pointer}::selection{color:var(--theme-bg);background:var(--theme-fg)}::selection{color:var(--theme-bg);background:var(--theme-fg)}.btn{--t-duration:.35s;--t-ease:var(--ease-out-quad);background:var(--theme-contrast);color:var(--ivory);cursor:pointer;transition:color var(--t-duration) var(--t-ease);border-radius:max(.5vw,8px);align-items:center;padding:max(.375vw,6px) max(1vw,16px);display:inline-flex;position:relative;overflow:hidden}.btn .leading-icon{opacity:0;width:max(.625vw,10px);height:1em;transition:transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease);align-items:center;display:flex;position:absolute;transform:translate(-100%)}.btn .text{width:100%;transition:transform var(--t-duration) var(--t-ease);display:block;position:relative;overflow:hidden}.btn .text span{transition:transform var(--t-duration) var(--t-ease);font-family:var(--font-mono);text-transform:uppercase;font-size:max(.875vw,14px);font-weight:700;line-height:1;display:inline-block}.btn .text span:first-child{color:var(--ivory)}.btn .text span:last-child{color:var(--ivory);position:absolute;bottom:0;left:0;right:0;transform:translateY(105%)}.btn .arrow{transition:transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease)}.btn .arrow:not(:only-child){margin-left:.5em}.btn .loading{align-items:center;width:max(.625vw,10px);height:1em;display:flex}.btn .loading svg{width:100%;height:auto}.btn:before{content:"";background:var(--theme-contrast);clip-path:inset(100% 0 0);transition:clip-path var(--t-duration) var(--t-ease);display:block;position:absolute;inset:-2px}.btn:hover,.btn.active,.btn.router-link-active{color:var(--ivory)}.btn:hover:before,.btn.active:before,.btn.router-link-active:before{clip-path:inset(0)}.btn:hover .text span:first-child,.btn.active .text span:first-child,.btn.router-link-active .text span:first-child{transform:translateY(-105%)}.btn:hover .text span:last-child,.btn.active .text span:last-child,.btn.router-link-active .text span:last-child{transform:none}.btn:hover.text-icon .leading-icon,.btn.active.text-icon .leading-icon,.btn.router-link-active.text-icon .leading-icon{opacity:1;transform:none}.btn:hover.text-icon .text,.btn.active.text-icon .text,.btn.router-link-active.text-icon .text{transform:translate(1.5em)}.btn:hover.text-icon .arrow,.btn.active.text-icon .arrow,.btn.router-link-active.text-icon .arrow{opacity:0;transform:translate(100%)}.btn:disabled,.btn.disabled{opacity:.16;pointer-events:none}.image-melody{flex-direction:column;justify-content:center;align-items:center;gap:max(3.125vw,50px);height:100vh;display:flex}.image-melody .drop-zone{background:var(--theme-layout);cursor:pointer;border-radius:max(.625vw,10px);justify-content:center;align-items:center;width:max(31.25vw,500px);height:max(31.25vw,500px);display:flex}.image-melody .drop-zone.active{opacity:.7}.image-melody .images{border-radius:max(.625vw,10px);grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.image-melody .images canvas{background:var(--theme-layout);width:max(31.25vw,500px);height:max(31.25vw,500px)}.image-melody .images canvas:first-child{border-right:1px solid var(--theme-grey)}.image-melody .audio{text-align:center;width:max(18.75vw,300px)}.image-melody .audio .controls{justify-content:center;gap:max(.5vw,8px);display:flex}.image-melody .audio .reset{margin-top:max(1vw,16px);text-decoration:underline}main.drop{background:var(--theme-bg);color:var(--theme-fg);height:100vh}
|