diff --git a/CNAME b/CNAME index 8aac08c..17cdaf9 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -yose.is-a.dev \ No newline at end of file +yohn-maistre.github.io diff --git a/index.d73f7ad5.css b/index.d73f7ad5.css index f227fba..3261c94 100644 --- a/index.d73f7ad5.css +++ b/index.d73f7ad5.css @@ -1 +1 @@ -*,:after,:before{box-sizing:border-box}:root{--vh:1vh;font-size:15px}html,body{height:100%}body{--color-text:#000;--color-text-alt:#fff;--color-heading-main:#000;--color-heading-main-alt:#fff;--color-heading-sub:#000;--color-menu:#fff5e0;--color-menu-hover:#d5dee1;--color-bg:#fff5e0;--color-bg-menu:#000;--color-link:#000;--color-link-alt:#fff5e0;--color-link-hover:#000;--color-link-alt-hover:#fff;--color-button-menu:#000;--color-button-menu-hover:#d5dee1;--color-button-close:#fff;--color-button-close-hover:#d5dee1;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:calc(var(--vh,1vh)*100);padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);min-height:100vh;margin:0;font-family:meno-banner,serif;overflow:auto}main{min-height:calc(var(--vh,1vh)*100);-webkit-overflow-scrolling:touch;grid-template-rows:1fr;grid-template-columns:100%;height:100%;display:grid;overflow-y:auto}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{background:var(--color-bg);width:100%;height:100%;top:0;left:0}.js .loading:after{opacity:.4;background:var(--color-link);border-radius:50%;width:60px;height:60px;margin:-30px 0 0 -30px;animation:.7s linear infinite alternate forwards loaderAnim;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid #fff}.unbutton{font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.hover-line{white-space:nowrap;display:inline-block;position:relative;overflow:hidden}.hover-line:before{content:"";transform-origin:0%;background:currentColor;width:100%;height:1px;transition:transform .3s;position:absolute;top:92%}.hover-line:hover:before{transform-origin:100%;transform:scaleX(0)}.frame{z-index:100;pointer-events:none;grid-area:1/1/2/2;grid-template-rows:auto auto 1fr auto;grid-template-columns:repeat(4,25%);grid-template-areas:"author heading heading button"". . . .""links links links links""title title title title";align-content:space-between;align-items:center;height:100%;padding:1rem 1rem .5rem;font-size:1rem;display:grid}.frame--menu-open{color:var(--color-text-alt);--color-link:var(--color-link-alt);--color-link-hover:(--color-link-hover-alt);--color-heading-main:var(--color-heading-main-alt)}.frame__title{font-size:inherit;grid-area:title;justify-self:center;margin:.5rem 0 0;font-weight:400}.frame__links{flex-wrap:wrap;grid-area:links;place-self:end center;display:flex}.frame__links a{margin:0 .5rem}.frame__author{grid-area:author;margin:0;font-size:2vw}.frame__button{grid-area:button;justify-self:end}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.frame__heading{text-align:center;white-space:nowrap;flex-direction:column;grid-area:heading;justify-self:center;margin:0;display:flex}.frame__heading-main{color:var(--color-heading-main);font-size:1.5rem;line-height:.8;display:block}.frame__heading-sub{color:var(--color-heading-sub);font-size:1rem;line-height:1}.frame--menu-open .frame__heading-sub{pointer-events:none;opacity:0}.frame a,.frame button{pointer-events:auto}.button-menu{border:1px solid var(--color-button-menu);fill:var(--color-button-menu);border-radius:50%;place-items:center;width:64px;height:64px;display:inline-grid}.button-menu svg{transition:transform .5s}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-button-menu-hover);border-color:var(--color-button-menu-hover)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content{min-height:calc(var(--vh,1vh)*100);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.content__title{text-align:center;cursor:default;margin:10vh 0 0;font-size:clamp(2rem,10vw,5rem);font-weight:200;line-height:.75}.content__title-main{will-change:opacity,transform;font-size:clamp(3rem,15vw,10rem);display:block}.content__title-sub{will-change:opacity,transform;display:block}.button-enter{margin-top:4vh;transition:transform .5s}.button-enter:hover{transform:translate(15px)rotate(-40deg)}.menu-wrap{background:var(--color-bg-menu);pointer-events:none;opacity:0;grid-area:1/1/2/2;grid-template-rows:100vh;grid-template-columns:100%;display:grid;position:relative;overflow:hidden}.menu-wrap.menu-wrap--open{pointer-events:auto;opacity:1}.overlay{z-index:1000;pointer-events:none;grid-area:1/1/2/2;width:100%;height:100%;position:relative}.menu{flex-direction:column;grid-area:1/1/2/2;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.menu__item{color:#fff;cursor:pointer;text-align:right;will-change:opacity,transform;font-size:9vw;font-weight:300;line-height:1;position:relative}.menu__item:hover .menu__item-tiny{color:#fff}.menu__item-tiny{font-size:1rem}.menu__item:nth-child(odd){margin-left:-10vw}.menu__item-text{color:var(--color-menu)}.menu__item:hover .menu__item-text{color:var(--color-menu-hover)}.tiles{opacity:.5;flex-direction:column;justify-content:center;height:150vh;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(22.5deg)}.tiles__line{animation:10s linear infinite runner;display:flex;transform:translate(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translate(-25%)}}.tiles__line-img{--tile-margin:3vw;margin:var(--tile-margin);background-position:50%;background-size:cover;border-radius:50%;flex:none;width:30vh;height:30vh}.tiles__line-img--large{border-radius:20vh;width:100vh}.button-close{stroke:var(--color-button-close);fill:none;margin:2rem;position:absolute;top:0;right:0}.button-close:focus-visible,.button-close:hover{stroke:var(--color-button-close-hover)}@media screen and (min-width:53em){.frame{grid-template-columns:390px 1fr 390px;grid-template-areas:"author heading button"". . .""title links links";font-size:1.5rem}.frame__title{place-self:end start;margin:0 3rem 0 0}.frame__links{justify-self:start;padding:0;display:flex}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}} \ No newline at end of file +*,:after,:before{box-sizing:border-box}:root{--vh:1vh;font-size:15px}html,body{height:100%}body{--color-text:#000;--color-text-alt:#fff;--color-heading-main:#000;--color-heading-main-alt:#fff;--color-heading-sub:#000;--color-menu:#fff5e0;--color-menu-hover:#d5dee1;--color-bg:#fff5e0;--color-bg-menu:#000;--color-link:#000;--color-link-alt:#fff5e0;--color-link-hover:#000;--color-link-alt-hover:#fff;--color-button-menu:#000;--color-button-menu-hover:#d5dee1;--color-button-close:#fff;--color-button-close-hover:#d5dee1;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:calc(var(--vh,1vh)*100);padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);min-height:100vh;margin:0;font-family:meno-banner,serif;overflow:auto}main{min-height:calc(var(--vh,1vh)*100);-webkit-overflow-scrolling:touch;grid-template-rows:1fr;grid-template-columns:100%;height:100%;display:grid;overflow-y:auto}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{background:var(--color-bg);width:100%;height:100%;top:0;left:0}.js .loading:after{opacity:.4;background:var(--color-link);border-radius:50%;width:60px;height:60px;margin:-30px 0 0 -30px;animation:.7s linear infinite alternate forwards loaderAnim;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid #fff}.unbutton{font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.hover-line{white-space:nowrap;display:inline-block;position:relative;overflow:hidden}.hover-line:before{content:"";transform-origin:0%;background:currentColor;width:100%;height:1px;transition:transform .3s;position:absolute;top:92%}.hover-line:hover:before{transform-origin:100%;transform:scaleX(0)}.frame{z-index:100;pointer-events:none;grid-area:1/1/2/2;grid-template-rows:auto auto 1fr auto;grid-template-columns:repeat(4,25%);grid-template-areas:"author heading heading button"". . . .""links links links links""title title title title";align-content:space-between;align-items:center;height:100%;padding:1rem 1rem .5rem;font-size:1rem;display:grid}.frame--menu-open{color:var(--color-text-alt);--color-link:var(--color-link-alt);--color-link-hover:(--color-link-hover-alt);--color-heading-main:var(--color-heading-main-alt)}.frame__title{font-size:inherit;grid-area:title;justify-self:center;margin:.5rem 0 0;font-weight:400}.frame__links{flex-wrap:wrap;grid-area:links;place-self:end center;display:flex}.frame__links a{margin:0 .5rem}.frame__author{grid-area:author;margin:0;font-size:2vw}.frame__button{grid-area:button;justify-self:end}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.frame__heading{text-align:center;white-space:nowrap;flex-direction:column;grid-area:heading;justify-self:center;margin:0;display:flex}.frame__heading-main{color:var(--color-heading-main);font-size:1.5rem;line-height:.8;display:block}.frame__heading-sub{color:var(--color-heading-sub);font-size:1rem;line-height:1}.frame--menu-open .frame__heading-sub{pointer-events:none;opacity:0}.frame a,.frame button{pointer-events:auto}.button-menu{border:1px solid var(--color-button-menu);fill:var(--color-button-menu);border-radius:50%;place-items:center;width:64px;height:64px;display:inline-grid}.button-menu svg{transition:transform .5s}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-button-menu-hover);border-color:var(--color-button-menu-hover)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content{box-sizing:border-box;min-height:calc(var(--vh,1vh)*100);flex-direction:column;grid-area:1/1/2/2;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.content__title{text-align:center;cursor:default;margin:10vh 0 0;font-size:clamp(2rem,10vw,5rem);font-weight:200;line-height:.75}.content__title-main{will-change:opacity,transform;font-size:clamp(3rem,15vw,10rem);display:block}.content__title-sub{will-change:opacity,transform;display:block}.button-enter{margin-top:4vh;transition:transform .5s}.button-enter:hover{transform:translate(15px)rotate(-40deg)}.menu-wrap{background:var(--color-bg-menu);pointer-events:none;opacity:0;grid-area:1/1/2/2;grid-template-rows:100vh;grid-template-columns:100%;display:grid;position:relative;overflow:hidden}.menu-wrap.menu-wrap--open{pointer-events:auto;opacity:1}.overlay{z-index:1000;pointer-events:none;grid-area:1/1/2/2;width:100%;height:100%;position:relative}.menu{flex-direction:column;grid-area:1/1/2/2;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.menu__item{color:#fff;cursor:pointer;text-align:right;will-change:opacity,transform;font-size:9vw;font-weight:300;line-height:1;position:relative}.menu__item:hover .menu__item-tiny{color:#fff}.menu__item-tiny{font-size:1rem}.menu__item:nth-child(odd){margin-left:-10vw}.menu__item-text{color:var(--color-menu)}.menu__item:hover .menu__item-text{color:var(--color-menu-hover)}.tiles{opacity:.5;flex-direction:column;justify-content:center;height:150vh;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(22.5deg)}.tiles__line{animation:10s linear infinite runner;display:flex;transform:translate(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translate(-25%)}}.tiles__line-img{--tile-margin:3vw;margin:var(--tile-margin);background-position:50%;background-size:cover;border-radius:50%;flex:none;width:30vh;height:30vh}.tiles__line-img--large{border-radius:20vh;width:100vh}.button-close{stroke:var(--color-button-close);fill:none;margin:2rem;position:absolute;top:0;right:0}.button-close:focus-visible,.button-close:hover{stroke:var(--color-button-close-hover)}@media screen and (min-width:53em){.frame{grid-template-columns:390px 1fr 390px;grid-template-areas:"author heading button"". . .""title links links";font-size:1.5rem}.frame__title{place-self:end start;margin:0 3rem 0 0}.frame__links{justify-self:start;padding:0;display:flex}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}} \ No newline at end of file