diff --git a/index.html b/index.html index 949c903..0f59a2d 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,14 @@ -Portfolio - András Schmelczer \ No newline at end of file +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}#about{text-align:center;box-shadow:var(--shadow);padding:var(--normal-margin);background-color:var(--accent-color);font-size:0}#about ::selection{background-color:var(--very-light-text-color);color:var(--accent-color)}#about h1,#about .placeholder{font:400 3rem "Comfortaa",sans-serif;font-style:normal;color:var(--normal-text-color);line-height:1;transition:color var(--transition-time)}@media(max-width: 924px){#about h1,#about .placeholder{font-size:3rem;line-height:1.1}}#about .image{width:125px;height:125px;border-radius:100%;box-shadow:var(--shadow);margin:auto}#about p{font:400 1.1rem "Open Sans",sans-serif;color:var(--normal-text-color);line-height:1.8;hyphens:auto;transition:color var(--transition-time);text-align:justify}#about h1{hyphens:none}#about p,#about h1{color:var(--very-light-text-color);margin-top:var(--line-height)}@media(min-width: 925px){#about{width:var(--body-width);margin:calc(var(--normal-margin) + 190px * 1 / 3) auto 0 auto;position:relative;border-radius:var(--border-radius)}#about .image{width:190px;height:190px;position:absolute;left:0;top:0;transform:translateY(-63.3333333333px) translateX(-63.3333333333px)}#about .placeholder{width:calc(190px * 2 / 3 - var(--normal-margin));height:calc(190px * 2 / 3 - var(--normal-margin));box-sizing:content-box;float:left;margin:0 .75ex .5ex 0}#about h1{text-align:left;margin-top:0}} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}#theme-switcher{background-color:var(--accent-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;width:calc(2 * var(--icon-size));height:var(--icon-size);border-radius:1000px;box-shadow:inset 0 0 10px 2px rgba(0,0,0,.175),inset 0 0 1px rgba(0,0,0,.4)}@media(min-width: 925px){#theme-switcher{position:absolute;top:calc(-1*var(--small-margin));right:calc(-1*(50vw - var(--body-width)/2) + var(--normal-margin));transform:translateY(-100%)}}@media(max-width: 924px){#theme-switcher{position:relative;margin-top:var(--normal-margin)}}#theme-switcher:before{width:calc(0.7 * var(--icon-size));height:calc(0.7 * var(--icon-size))}#theme-switcher:after{width:calc(calc(0.7 * var(--icon-size)) * 0.8);height:calc(calc(0.7 * var(--icon-size)) * 0.8)}#theme-switcher:before,#theme-switcher:after{content:"";position:absolute;display:block;border-radius:1000px;top:50%;transform:translateY(-50%);transition:transform var(--transition-time),background-color var(--transition-time)}#theme-switcher:not(:checked):before{transform:translateY(-50%) translateX(calc(3 * calc((var(--icon-size) - calc(0.7 * var(--icon-size))) / 2) + calc(0.7 * var(--icon-size))));animation:shine 3s linear alternate infinite;background-color:var(--sun-color)}@keyframes shine{from{filter:brightness(1.01);box-shadow:0 0 4px 2px var(--sun-color)}to{filter:brightness(1.1);box-shadow:0 0 15px 2px var(--sun-color)}}#theme-switcher:not(:checked):after{background-color:rgba(0,0,0,0);transform:translateY(-50%) translateX(calc(var(--icon-size) * 2 - calc(0.7 * var(--icon-size))))}#theme-switcher:checked:before{background-color:var(--normal-text-color);transform:translateY(-50%) translateX(calc((var(--icon-size) - calc(0.7 * var(--icon-size))) / 2))}#theme-switcher:checked:after{background-color:var(--accent-color);transform:translateY(-50%) translateX(calc(calc((var(--icon-size) - calc(0.7 * var(--icon-size))) / 2) + calc(0.7 * var(--icon-size)) * 0.33))} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}#image-viewer{display:flex;align-items:center;justify-content:center;backdrop-filter:blur(var(--blur-radius));-webkit-backdrop-filter:blur(var(--blur-radius));visibility:hidden;position:fixed;left:0;top:0;width:100%;height:100%}@supports not ((backdrop-filter: blur(var(--blur-radius))) or (-webkit-backdrop-filter: blur(var(--blur-radius)))){#image-viewer{background-color:var(--card-color)}}#image-viewer img{width:auto;height:auto}@media(min-width: 925px){#image-viewer img{max-width:80vw;max-height:80vh}}@media(max-width: 924px){#image-viewer img{max-width:95vw;max-height:80vh}}#image-viewer #cancel{display:block;box-sizing:content-box;cursor:pointer;text-decoration:none;width:calc(var(--large-icon-size) + var(--normal-margin)*2);height:calc(var(--large-icon-size) + var(--normal-margin)*2);position:absolute;right:0;top:0}#image-viewer #cancel:hover svg{transform:translateX(-50%) translateY(-50%) scale(1.15)}#image-viewer #cancel svg{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--large-icon-size);height:var(--large-icon-size);transition:transform var(--transition-time);transform-origin:center center}#image-viewer #cancel svg{stroke:var(--normal-text-color)} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}main{height:100%;overflow-x:hidden;overflow-y:scroll;perspective:5px;background:rgba(0,0,0,.005)}@media(hover: hover){main::-webkit-scrollbar-track,main::-webkit-scrollbar{background-color:rgba(0,0,0,0);width:12px}main::-webkit-scrollbar-thumb{background-color:var(--accent-color);border-radius:var(--border-radius)}} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}.timeline-element{display:flex;width:var(--body-width);margin:auto}.timeline-element .line-container{position:relative}.timeline-element .line-container .line{height:calc(33% - var(--icon-size) / 2)}.timeline-element .line-container .line:before{height:calc(100% - 33% - var(--icon-size) / 2)}.timeline-element .line-container .line:after{top:calc(33% - var(--icon-size) / 2)}.timeline-element .line-container .date{top:calc(33% - 0.5ch)}.timeline-element .line-container .line{border-left:var(--line-width) solid var(--accent-color)}.timeline-element .line-container .line:before,.timeline-element .line-container .line:after{content:"";position:absolute}.timeline-element .line-container .line:before{left:0;bottom:0;border-left:var(--line-width) solid var(--accent-color)}.timeline-element .line-container .line:after{width:var(--icon-size);height:var(--icon-size);border-radius:1000px;border:var(--line-width) solid var(--accent-color);left:calc((var(--line-width) - var(--icon-size))/2)}.timeline-element .line-container .date{font:400 1rem "Open Sans",sans-serif;color:var(--special-text-color);font-style:italic;transition:color var(--transition-time);position:absolute;transform-origin:left center;transform:rotate(30deg) translateX(calc(var(--icon-size) / 2 + 6px)) translateY(-10%);padding-right:var(--normal-margin)}@media(min-width: 925px){.timeline-element .line-container{min-width:160px}.timeline-element:not(:first-of-type) .card{margin-top:var(--large-margin)}}@media(max-width: 924px){.timeline-element{flex-direction:column;align-items:center}.timeline-element .line-container{height:150px;min-width:64%}.timeline-element .line-container .line{height:calc(50% - var(--icon-size) / 2)}.timeline-element .line-container .line:before{height:calc(100% - 50% - var(--icon-size) / 2)}.timeline-element .line-container .line:after{top:calc(50% - var(--icon-size) / 2)}.timeline-element .line-container .date{top:calc(50% - 0.5ch)}.timeline-element .line-container .date{transform:translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%)}}.timeline-element .card{box-shadow:var(--shadow);border-radius:var(--border-radius);z-index:1;background-color:var(--blurred-card-color);transition:background-color var(--transition-time);backdrop-filter:blur(var(--blur-radius));-webkit-backdrop-filter:blur(var(--blur-radius))}@supports not ((backdrop-filter: blur(var(--blur-radius))) or (-webkit-backdrop-filter: blur(var(--blur-radius)))){.timeline-element .card{background-color:var(--card-color)}}.timeline-element .card .image,.timeline-element .card video,.timeline-element .card iframe{border-radius:var(--border-radius) var(--border-radius) 0 0}.timeline-element .card .lower>*{padding:0 var(--normal-margin);margin-top:var(--small-margin)}.timeline-element .card .lower h2{text-align:center;margin-bottom:-10px}.timeline-element .card .lower h2>a{font:400 1.75rem "Comfortaa",sans-serif;color:var(--normal-text-color);font-style:normal;hyphens:auto;transition:color var(--transition-time);text-decoration:none;position:relative}.timeline-element .card .lower h2>a:before{content:"#";position:absolute;left:-0.5ch;top:0;opacity:0;transform:translateX(-100%);transition:opacity var(--transition-time)}.timeline-element .card .lower h2>a:hover:before{opacity:.5}.timeline-element .card .lower .description,.timeline-element .card .lower .info-button{text-align:center}.timeline-element .card .lower .more{overflow:hidden;margin:0;height:0;transition:height var(--transition-time)}.timeline-element .card .lower .more>p{margin-top:var(--line-height)}.timeline-element .card .lower .buttons{display:flex;justify-content:center;border-top:1px solid var(--normal-text-color);transition:border-color var(--transition-time);margin:0;padding:0;margin-top:var(--small-margin)}.timeline-element .card .lower .buttons .info-button{display:block;box-sizing:content-box;cursor:pointer;text-decoration:none;font:400 1.1rem "Open Sans",sans-serif;color:var(--normal-text-color);line-height:1.8;hyphens:auto;transition:color var(--transition-time)}.timeline-element .card .lower .buttons .info-button:hover svg{transform:translateX(-50%) translateY(-50%) scale(1.15)}.timeline-element .card .lower .buttons .info-button svg{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--icon-size);height:var(--icon-size);transition:transform var(--transition-time);transform-origin:center center}.timeline-element .card .lower .buttons .info-button .svgContainer{position:relative;margin:auto;width:var(--icon-size);height:var(--icon-size)}.timeline-element .card .lower .buttons .info-button .svgContainer svg{stroke:var(--normal-text-color);transition:stroke var(--transition-time)}.timeline-element .card .lower .buttons .info-button p{font:400 1.1rem "Open Sans",sans-serif;color:var(--normal-text-color);line-height:1.8;hyphens:auto;transition:color var(--transition-time);padding-bottom:var(--small-margin);font-size:.9rem;font-style:italic;padding:0 8px var(--small-margin) 8px}.timeline-element .card .lower .buttons>*{flex:1;padding-top:var(--small-margin)}.timeline-element .card .lower .buttons>*:not(:last-child){border-right:1px solid var(--normal-text-color);transition:border-color var(--transition-time)} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}@media(min-width: 925px){#timeline>:first-child{margin-top:var(--large-margin)}} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}.video-container .loading{width:var(--large-icon-size);height:var(--large-icon-size);position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);visibility:hidden}.video-container .loading>svg{width:var(--large-icon-size);height:var(--large-icon-size);position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.video-container video{z-index:1;visibility:hidden}.video-container .start-button{z-index:1}.video-container.loaded .loading{visibility:visible}.video-container.fully-loaded video{visibility:visible} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}.image-anchor{display:block;box-sizing:content-box;cursor:pointer;text-decoration:none}.image-anchor:hover svg{transform:translateX(-50%) translateY(-50%) scale(1.15)}.image-anchor svg{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--icon-size);height:var(--icon-size);transition:transform var(--transition-time);transform-origin:center center}.image-anchor .svgContainer{position:relative;margin:auto;width:var(--icon-size);height:var(--icon-size)}.image-anchor .svgContainer svg{stroke:var(--normal-text-color);transition:stroke var(--transition-time)}.image-anchor p{font:400 1.1rem "Open Sans",sans-serif;color:var(--normal-text-color);line-height:1.8;hyphens:auto;transition:color var(--transition-time);padding-bottom:var(--small-margin);font-size:.9rem;font-style:italic;padding:0 8px 8px 8px;text-align:center} +html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}.preview{position:relative}.preview .overlay{width:100%;height:100%;position:absolute;left:0;top:0}.preview .overlay iframe{position:absolute;left:0}.preview .overlay .loading{width:var(--large-icon-size);height:var(--large-icon-size);position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);visibility:hidden}.preview .overlay .loading>svg{width:var(--large-icon-size);height:var(--large-icon-size);position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.preview .overlay iframe{width:100%;height:100%;border:none}.preview .overlay iframe:fullscreen{border-radius:0}.preview.loaded .figure-container,.preview.loaded .start-button{visibility:hidden}.preview.loaded .loading{visibility:visible} +@font-face{font-family:"Comfortaa";font-style:normal;font-weight:400;font-display:swap;src:local(""),url(04d2b9164d14183439c9.woff2) format("woff2"),url(29092020a644373fd0c0.woff) format("woff")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:local(""),url(a1535f451fb7bb98f526.woff2) format("woff2"),url(7958f4e4a2bb8025ef86.woff) format("woff")}html[animations=off],html[animations=off] *,html[animations=off] *::before,html[animations=off] *::after{transition:none !important;animation:none !important}:root{--transition-time: 150ms;--line-width: 3px;--line-height: 18px;--accent-color: #b7455e;--sun-color: #f7f78c;--very-light-text-color: #ffffff;--background: #ffffff;--normal-text-color: #31343f;--card-color: #ffffff;--blurred-card-color: transparent;--blur-radius: 16px;--special-text-color: var(--accent-color)}@media(min-width: 925px){:root{--border-radius: 15px;--large-margin: 70px;--normal-margin: 45px;--small-margin: 25px;--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);--inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);--icon-size: 45px;--large-icon-size: 60px;--body-width: 765px}}@media(max-width: 924px){:root{--border-radius: 10px;--large-margin: 60px;--normal-margin: 30px;--small-margin: 15px;--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.125);--inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);--icon-size: 35px;--large-icon-size: 55px;--body-width: 90%}}html[theme=dark]{--background: #242638;--normal-text-color: #ffffff;--card-color: #263551;--blurred-card-color: #26355155;--blur-radius: 24px;--special-text-color: #ffffff;--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.25), inset 0 0 1px rgba(0, 0, 0, 0.4)}*,*::before,*::after{margin:0;box-sizing:border-box}@media(prefers-reduced-motion){*,*::before,*::after{transition:none !important;animation:none !important}}html{height:100%}@media(max-width: 924px){html{font-size:.8rem}}@media print{html{font-size:.7rem}}body{background-color:var(--background);transition:background-color linear var(--transition-time);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);height:100%}@media print{body{height:auto}}p{font:400 1.1rem "Open Sans",sans-serif;color:var(--normal-text-color);line-height:1.8;hyphens:auto;transition:color var(--transition-time)}noscript{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.start-button{display:block;box-sizing:content-box;cursor:pointer;text-decoration:none;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:calc(var(--large-icon-size) + var(--normal-margin)*2);height:calc(var(--large-icon-size) + var(--normal-margin)*2);transform:translate3d(-50%, -50%, 0.00001px)}.start-button:hover svg{transform:translateX(-50%) translateY(-50%) scale(1.15)}.start-button svg{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--large-icon-size);height:var(--large-icon-size);transition:transform var(--transition-time);transform-origin:center center}.start-button:hover svg{box-shadow:var(--shadow)}.start-button svg{border-radius:10000px;backdrop-filter:blur(var(--blur-radius));-webkit-backdrop-filter:blur(var(--blur-radius));transition:transform var(--transition-time),box-shadow var(--transition-time)}@supports not ((backdrop-filter: blur(var(--blur-radius))) or (-webkit-backdrop-filter: blur(var(--blur-radius)))){.start-button svg{background-color:var(--card-color)}}.start-button.inverted svg{fill:var(--accent-color)}.figure-container{font-size:0;box-shadow:var(--inset-shadow);border-radius:var(--border-radius) var(--border-radius) 0 0;pointer-events:none;position:relative}.figure-container *{pointer-events:auto}.figure-container .image,.figure-container video,.figure-container iframe{z-index:-1;position:absolute;top:0;left:0;height:100%;width:100%}video,iframe{transform:translate3d(0, 0, 0.00001px)}.image,video,iframe{user-select:none}:focus{outline:none}:focus:not(:hover){outline:var(--accent-color) solid 2px}::selection{background-color:var(--accent-color);color:var(--very-light-text-color)} + \ No newline at end of file