From 3a0db1b89055ba420f0dcbe79e0ee1528d2b7beb Mon Sep 17 00:00:00 2001 From: yohn-maistre Date: Fri, 25 Oct 2024 09:05:22 +0900 Subject: [PATCH] add menu state --- dist/index.d046a61c.css | 20 +++++++------------- dist/index.d046a61c.css.map | 2 +- src/css/base.css | 30 ++++++++++++++++-------------- 3 files changed, 24 insertions(+), 28 deletions(-) diff --git a/dist/index.d046a61c.css b/dist/index.d046a61c.css index 58f98e5..da792f6 100644 --- a/dist/index.d046a61c.css +++ b/dist/index.d046a61c.css @@ -7,10 +7,8 @@ font-size: 15px; } -html { - margin: 0; - padding: 0; - overflow: hidden; +html, body { + height: 100%; } body { @@ -35,12 +33,12 @@ body { background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - height: calc(var(--vh, 1vh) * 100); + min-height: calc(var(--vh, 1vh) * 100); min-height: 100vh; margin: 0; padding: 0; font-family: meno-banner, serif; - overflow: hidden; + overflow: auto; } main { @@ -145,12 +143,6 @@ a:focus-visible { transform: scaleX(0); } -main { - grid-template-rows: 100vh; - grid-template-columns: 100%; - display: grid; -} - .frame { z-index: 100; pointer-events: none; @@ -272,6 +264,7 @@ main { } .content { + box-sizing: border-box; flex-direction: column; grid-area: 1 / 1 / 2 / 2; justify-content: center; @@ -279,7 +272,7 @@ main { width: 100%; height: 100%; display: flex; - position: relative; + position: absolute; } .content__title { @@ -320,6 +313,7 @@ main { grid-template-columns: 100%; display: grid; position: relative; + overflow: hidden; } .menu-wrap.menu-wrap--open { diff --git a/dist/index.d046a61c.css.map b/dist/index.d046a61c.css.map index c104727..37acd6c 100644 --- a/dist/index.d046a61c.css.map +++ b/dist/index.d046a61c.css.map @@ -1 +1 @@ -{"mappings":"AAAA;;;;AAMA;;;;;AAKA;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;;;AASA;;;;;;AAOA;;;;;;;;AAQA;;;;;;;;;;;;AAaA;;;;;;;AAOA;;;;;;AAMA;;;;;AAMA;;;;;AAOA;;;;AAMA;;;;;AAQA;;;;;;;;;AASA;;;;AAIA;;;;;;;AAOA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;AAOA;;;;;;;;AAQA;;;;;;;AAQA;;;;AAIA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;;;;;;AAUA;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;AAKA;;;;;;;;;;AAUA;;;;AAIA;;;;;AAMA;;;;AAIA;;;;;AAKA;;;;;;;;;;;AAWA;;;;;;;;;AASA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;AASA;;;;;;;;;;AAUA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;AASA;;;;AAKA;EACC;;;;;;;;EAOA;;;;;EAKA;;;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA","sources":["src/css/base.css"],"sourcesContent":["*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 15px;\r\n\t--vh: 1vh;\r\n}\r\n\r\nhtml {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n overflow: hidden;\r\n}\r\n\r\nbody {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t--color-text: #000;\r\n\t--color-text-alt: #fff;\r\n\t--color-heading-main: #000;\r\n\t--color-heading-main-alt: #fff;\r\n\t--color-heading-sub: #000;\r\n\t--color-menu: #fff5e0;\r\n\t--color-menu-hover: #d5dee1;\r\n\t--color-bg: #fff5e0;\r\n\t--color-bg-menu: #000;\r\n\t--color-link: #000;\r\n\t--color-link-alt: #fff5e0;\r\n\t--color-link-hover: #000;\r\n\t--color-link-alt-hover: #fff;\r\n\t--color-button-menu: #000;\r\n\t--color-button-menu-hover: #d5dee1;\r\n\t--color-button-close: #fff;\r\n\t--color-button-close-hover: #d5dee1;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\tfont-family: meno-banner, serif;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\toverflow: hidden;\r\n\tmin-height: 100vh;\r\n\theight: calc(var(--vh, 1vh) * 100);\r\n}\r\n\r\nmain {\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: 1fr; /* Use 1fr to allow content to adjust */\r\n height: 100%;\r\n\tmin-height: calc(var(--vh, 1vh) * 100);\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before,\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n}\r\n\r\n.js .loading::before {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: var(--color-bg);\r\n}\r\n\r\n.js .loading::after {\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n\tmargin: -30px 0 0 -30px;\r\n\tborder-radius: 50%;\r\n\topacity: 0.4;\r\n\tbackground: var(--color-link);\r\n\tanimation: loaderAnim 0.7s linear infinite alternate forwards;\r\n\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(0.5,0.5,1);\r\n\t}\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-link);\r\n\toutline: none;\r\n}\r\n\r\na:hover {\r\n\tcolor: var(--color-link-hover);\r\n\toutline: none;\r\n}\r\n\r\n/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */\r\na:focus {\r\n\t/* Provide a fallback style for browsers\r\n\t that don't support :focus-visible */\r\n\toutline: none;\r\n\tbackground: lightgrey;\r\n}\r\n\r\na:focus:not(:focus-visible) {\r\n\t/* Remove the focus indicator on mouse-focus for browsers\r\n\t that do support :focus-visible */\r\n\tbackground: transparent;\r\n}\r\n\r\na:focus-visible {\r\n\t/* Draw a very noticeable focus style for\r\n\t keyboard-focus on browsers that do support\r\n\t :focus-visible */\r\n\toutline: 2px solid #fff;\r\n\tbackground: transparent;\r\n}\r\n\r\n.unbutton {\r\n\tbackground: none;\r\n\tborder: 0;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont: inherit;\r\n\tcursor: pointer;\r\n}\r\n\r\n.unbutton:focus {\r\n\toutline: none;\r\n}\r\n\r\n.hover-line {\r\n\twhite-space: nowrap;\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.hover-line::before {\r\n\tcontent: '';\r\n\theight: 1px;\r\n\twidth: 100%;\r\n\tbackground: currentColor;\r\n\tposition: absolute;\r\n\ttop: 92%;\r\n\ttransition: transform 0.3s;\r\n\ttransform-origin: 0% 50%;\r\n}\r\n\r\n.hover-line:hover::before {\r\n\ttransform: scaleX(0);\r\n\ttransform-origin: 100% 50%;\r\n}\r\n\r\nmain {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 100%;\r\n\tgrid-template-rows: 100vh;\r\n}\r\n\r\n.frame {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tz-index: 100;\r\n\tdisplay: grid;\r\n\talign-content: space-between;\r\n\talign-items: center;\r\n\theight: 100%;\r\n\tpadding: 1rem 1rem 0.5rem 1rem;\r\n\tpointer-events: none;\r\n\tfont-size: 1rem;\r\n\tgrid-template-columns: repeat(4,25%);\r\n\tgrid-template-rows: auto auto 1fr auto;\r\n\tgrid-template-areas: 'author heading heading button'\r\n\t\t\t\t\t\t'... ... ... ...'\r\n\t\t\t\t\t\t'links links links links'\r\n\t\t\t\t\t\t'title title title title';\t\r\n}\r\n\r\n.frame--menu-open {\r\n\tcolor: var(--color-text-alt);\r\n\t--color-link: var(--color-link-alt);\r\n\t--color-link-hover: (--color-link-hover-alt);\r\n\t--color-heading-main: var(--color-heading-main-alt);\r\n}\r\n\r\n.frame__title {\r\n\tgrid-area: title;\r\n\tfont-size: inherit;\r\n\tfont-weight: normal;\r\n\tmargin: 0.5rem 0 0;\r\n\tjustify-self: center;\r\n}\r\n\r\n.frame__links {\r\n\tgrid-area: links;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-self: center;\r\n\talign-self: end;\r\n}\r\n\r\n.frame__links a {\r\n\tmargin: 0 0.5rem;\r\n}\r\n\r\n.frame__author {\r\n\tmargin: 0;\r\n\tgrid-area: author;\r\n\tfont-size: 2vw;\r\n}\r\n\r\n.frame__button {\r\n\tjustify-self: end;\r\n\tgrid-area: button;\r\n}\r\n\r\n.frame--menu-open .frame__author {\r\n\topacity: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n.frame__heading {\r\n\tgrid-area: heading;\r\n\ttext-align: center;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\twhite-space: nowrap;\r\n\tjustify-self: center;\r\n}\r\n\r\n.frame__heading-main {\r\n\tline-height: 0.8;\r\n\tdisplay: block;\r\n\tfont-size: 1.5rem;\r\n\tcolor: var(--color-heading-main);\r\n}\r\n\r\n.frame__heading-sub {\r\n\tfont-size: 1rem;\r\n\tline-height: 1;\r\n\tcolor: var(--color-heading-sub);\r\n}\r\n\r\n.frame--menu-open .frame__heading-sub {\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n}\r\n\r\n.frame a,\r\n.frame button {\r\n\tpointer-events: auto;\r\n}\r\n\r\n.button-menu {\r\n\twidth: 64px;\r\n\theight: 64px;\r\n\tborder-radius: 50%;\r\n\tdisplay: inline-grid;\r\n\tplace-items: center;\r\n\tborder: 1px solid var(--color-button-menu);\r\n\tfill: var(--color-button-menu);\r\n}\r\n\r\n.button-menu svg {\r\n\ttransition: transform 0.5s ease;\r\n}\r\n\r\n.button-menu:focus-visible,\r\n.button-menu:hover {\r\n\tfill: var(--color-button-menu-hover);\r\n\tborder-color: var(--color-button-menu-hover);\r\n}\r\n\r\n.button-menu:hover svg {\r\n\ttransform: scale(1.1);\r\n}\r\n\r\n.frame--menu-open .button-menu {\r\n\topacity: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n.content {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\twidth: 100%;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\theight: 100%;\r\n\tjustify-content: center;\r\n}\r\n\r\n.content__title {\r\n\tfont-weight: 200;\r\n\ttext-align: center;\r\n\tfont-size: clamp(2rem, 10vw, 5rem);\r\n\tline-height: 0.75;\r\n\tcursor: default;\r\n\tmargin: 10vh 0 0 0;\r\n}\r\n\r\n.content__title-main {\r\n\tfont-size: clamp(3rem, 15vw, 10rem);\r\n display: block;\r\n will-change: opacity, transform;\r\n}\r\n\r\n.content__title-sub {\r\n\tdisplay: block;\r\n\twill-change: opacity, transform;\r\n}\r\n\r\n.button-enter {\r\n\tmargin-top: 4vh;\r\n\ttransition: transform 0.5s ease;\r\n}\r\n\r\n.button-enter:hover {\r\n transform: translateX(15px) rotate(-40deg);\r\n}\r\n\r\n.menu-wrap {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 100%;\r\n\tgrid-template-rows: 100vh;\r\n\tposition: relative;\r\n\tbackground: var(--color-bg-menu);\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n}\r\n\r\n.menu-wrap.menu-wrap--open {\r\n\tpointer-events: auto;\r\n\topacity: 1;\r\n}\r\n\r\n.overlay {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tposition: relative;\r\n\tz-index: 1000;\r\n\tpointer-events: none;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.menu {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\theight: 100%;\r\n}\r\n\r\n.menu__item {\r\n\tfont-size: 9vw;\r\n\tcolor: #fff;\r\n\tcursor: pointer;\r\n\tline-height: 1;\r\n\tfont-weight: 300;\r\n text-align: right;\r\n position: relative;\r\n will-change: opacity, transform;\r\n}\r\n\r\n.menu__item:hover .menu__item-tiny {\r\n\tcolor: #fff;\r\n}\r\n\r\n.menu__item-tiny {\r\n\tfont-size: 1rem;\r\n}\r\n\r\n.menu__item:nth-child(odd) {\r\n\tmargin-left: -10vw;\r\n}\r\n\r\n.menu__item-text {\r\n\tcolor: var(--color-menu);\r\n}\r\n\r\n.menu__item:hover .menu__item-text {\r\n\tcolor: var(--color-menu-hover);\r\n}\r\n\r\n.tiles {\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\theight: 150vh;\r\n\tdisplay: flex;\r\n\topacity: 0.5;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\ttransform: translate3d(-50%,-50%, 0) rotate(22.5deg);\r\n}\r\n\r\n.tiles__line {\r\n\tdisplay: flex;\r\n\ttransform: translateX(25%);\r\n\tanimation: runner 10s linear infinite;\r\n}\r\n\r\n.tiles__line:nth-child(2) {\r\n\tanimation-duration: 16s;\r\n}\r\n\r\n.tiles__line:nth-child(3) {\r\n\tanimation-duration: 22s;\r\n}\r\n\r\n@keyframes runner {\r\n\tto {\r\n\t\ttransform: translateX(-25%);\r\n\t}\r\n}\r\n\r\n.tiles__line-img {\r\n\t--tile-margin: 3vw;\r\n\tflex: none;\r\n\twidth: 30vh;\r\n\theight: 30vh;\r\n\tmargin: var(--tile-margin);\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n\tborder-radius: 50%;\r\n}\r\n\r\n.tiles__line-img--large {\r\n\twidth: 100vh;\r\n\tborder-radius: 20vh;\r\n}\r\n\r\n.button-close {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tmargin: 2rem;\r\n\tstroke: var(--color-button-close);\r\n\tfill: none;\r\n}\r\n\r\n.button-close:focus-visible,\r\n.button-close:hover {\r\n\tstroke: var(--color-button-close-hover);\r\n}\r\n\r\n@media screen and (min-width: 53em) {\r\n\t.frame {\r\n\t\tgrid-template-columns: 390px 1fr 390px;\r\n\t\tgrid-template-areas: 'author heading button'\r\n\t\t\t\t\t\t\t'... ... ...'\r\n\t\t\t\t\t\t\t'title links links';\t\r\n\t\tfont-size: 1.5rem;\r\n\t}\r\n\t.frame__title {\r\n\t\tjustify-self: start;\r\n\t\talign-self: end;\r\n\t\tmargin: 0 3rem 0 0;\r\n\t}\r\n\t.frame__links {\r\n\t\tdisplay: flex;\r\n\t\tjustify-self: start;\r\n\t\tpadding: 0;\r\n\t}\r\n\t.frame__links a:not(:last-child) {\r\n\t\tmargin-right: 0.5rem;\r\n\t}\r\n\t.frame__heading-main {\r\n\t\tfont-size: 2.15rem;\r\n\t}\r\n\t.frame__heading-sub {\r\n\t\tfont-size: 1rem;\r\n\t}\r\n\t.menu__item-tiny {\r\n\t\tfont-size: 2rem;\r\n\t}\r\n}\r\n"],"names":[],"version":3,"file":"index.d046a61c.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file +{"mappings":"AAAA;;;;AAMA;;;;;AAKA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;;;AASA;;;;;;AAOA;;;;;;;;AAQA;;;;;;;;;;;;AAaA;;;;;;;AAOA;;;;;;AAMA;;;;;AAMA;;;;;AAOA;;;;AAMA;;;;;AAQA;;;;;;;;;AASA;;;;AAIA;;;;;;;AAOA;;;;;;;;;;;AAWA;;;;;AAYA;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;AAOA;;;;;;;;AAQA;;;;;;;AAQA;;;;AAIA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;;;;;;AAUA;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;AAKA;;;;;;;;;;AAUA;;;;AAIA;;;;;AAMA;;;;AAIA;;;;;AAKA;;;;;;;;;;;;AAaA;;;;;;;;;AASA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;AAKA;;;;;;;;;AASA;;;;;;;;;;AAUA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;AASA;;;;AAKA;EACC;;;;;;;;EAOA;;;;;EAKA;;;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA","sources":["src/css/base.css"],"sourcesContent":["*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 15px;\r\n\t--vh: 1vh;\r\n}\r\n\r\nhtml, body {\r\n\theight: 100%;\r\n}\r\n\r\nbody {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t--color-text: #000;\r\n\t--color-text-alt: #fff;\r\n\t--color-heading-main: #000;\r\n\t--color-heading-main-alt: #fff;\r\n\t--color-heading-sub: #000;\r\n\t--color-menu: #fff5e0;\r\n\t--color-menu-hover: #d5dee1;\r\n\t--color-bg: #fff5e0;\r\n\t--color-bg-menu: #000;\r\n\t--color-link: #000;\r\n\t--color-link-alt: #fff5e0;\r\n\t--color-link-hover: #000;\r\n\t--color-link-alt-hover: #fff;\r\n\t--color-button-menu: #000;\r\n\t--color-button-menu-hover: #d5dee1;\r\n\t--color-button-close: #fff;\r\n\t--color-button-close-hover: #d5dee1;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\tfont-family: meno-banner, serif;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\toverflow: auto;\r\n\tmin-height: 100vh;\r\n\tmin-height: calc(var(--vh, 1vh) * 100);\r\n}\r\n\r\nmain {\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: 1fr; /* Use 1fr to allow content to adjust */\r\n height: 100%;\r\n\tmin-height: calc(var(--vh, 1vh) * 100);\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before,\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n}\r\n\r\n.js .loading::before {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: var(--color-bg);\r\n}\r\n\r\n.js .loading::after {\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n\tmargin: -30px 0 0 -30px;\r\n\tborder-radius: 50%;\r\n\topacity: 0.4;\r\n\tbackground: var(--color-link);\r\n\tanimation: loaderAnim 0.7s linear infinite alternate forwards;\r\n\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(0.5,0.5,1);\r\n\t}\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-link);\r\n\toutline: none;\r\n}\r\n\r\na:hover {\r\n\tcolor: var(--color-link-hover);\r\n\toutline: none;\r\n}\r\n\r\n/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */\r\na:focus {\r\n\t/* Provide a fallback style for browsers\r\n\t that don't support :focus-visible */\r\n\toutline: none;\r\n\tbackground: lightgrey;\r\n}\r\n\r\na:focus:not(:focus-visible) {\r\n\t/* Remove the focus indicator on mouse-focus for browsers\r\n\t that do support :focus-visible */\r\n\tbackground: transparent;\r\n}\r\n\r\na:focus-visible {\r\n\t/* Draw a very noticeable focus style for\r\n\t keyboard-focus on browsers that do support\r\n\t :focus-visible */\r\n\toutline: 2px solid #fff;\r\n\tbackground: transparent;\r\n}\r\n\r\n.unbutton {\r\n\tbackground: none;\r\n\tborder: 0;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont: inherit;\r\n\tcursor: pointer;\r\n}\r\n\r\n.unbutton:focus {\r\n\toutline: none;\r\n}\r\n\r\n.hover-line {\r\n\twhite-space: nowrap;\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.hover-line::before {\r\n\tcontent: '';\r\n\theight: 1px;\r\n\twidth: 100%;\r\n\tbackground: currentColor;\r\n\tposition: absolute;\r\n\ttop: 92%;\r\n\ttransition: transform 0.3s;\r\n\ttransform-origin: 0% 50%;\r\n}\r\n\r\n.hover-line:hover::before {\r\n\ttransform: scaleX(0);\r\n\ttransform-origin: 100% 50%;\r\n}\r\n\r\n/* main {\r\n height: 100vh;\r\n height: calc(var(--vh, 1vh) * 100);\r\n overflow: hidden;\r\n position: relative;\r\n} */\r\n\r\n.frame {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tz-index: 100;\r\n\tdisplay: grid;\r\n\talign-content: space-between;\r\n\talign-items: center;\r\n\theight: 100%;\r\n\tpadding: 1rem 1rem 0.5rem 1rem;\r\n\tpointer-events: none;\r\n\tfont-size: 1rem;\r\n\tgrid-template-columns: repeat(4,25%);\r\n\tgrid-template-rows: auto auto 1fr auto;\r\n\tgrid-template-areas: 'author heading heading button'\r\n\t\t\t\t\t\t'... ... ... ...'\r\n\t\t\t\t\t\t'links links links links'\r\n\t\t\t\t\t\t'title title title title';\t\r\n}\r\n\r\n.frame--menu-open {\r\n\tcolor: var(--color-text-alt);\r\n\t--color-link: var(--color-link-alt);\r\n\t--color-link-hover: (--color-link-hover-alt);\r\n\t--color-heading-main: var(--color-heading-main-alt);\r\n}\r\n\r\n.frame__title {\r\n\tgrid-area: title;\r\n\tfont-size: inherit;\r\n\tfont-weight: normal;\r\n\tmargin: 0.5rem 0 0;\r\n\tjustify-self: center;\r\n}\r\n\r\n.frame__links {\r\n\tgrid-area: links;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-self: center;\r\n\talign-self: end;\r\n}\r\n\r\n.frame__links a {\r\n\tmargin: 0 0.5rem;\r\n}\r\n\r\n.frame__author {\r\n\tmargin: 0;\r\n\tgrid-area: author;\r\n\tfont-size: 2vw;\r\n}\r\n\r\n.frame__button {\r\n\tjustify-self: end;\r\n\tgrid-area: button;\r\n}\r\n\r\n.frame--menu-open .frame__author {\r\n\topacity: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n.frame__heading {\r\n\tgrid-area: heading;\r\n\ttext-align: center;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\twhite-space: nowrap;\r\n\tjustify-self: center;\r\n}\r\n\r\n.frame__heading-main {\r\n\tline-height: 0.8;\r\n\tdisplay: block;\r\n\tfont-size: 1.5rem;\r\n\tcolor: var(--color-heading-main);\r\n}\r\n\r\n.frame__heading-sub {\r\n\tfont-size: 1rem;\r\n\tline-height: 1;\r\n\tcolor: var(--color-heading-sub);\r\n}\r\n\r\n.frame--menu-open .frame__heading-sub {\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n}\r\n\r\n.frame a,\r\n.frame button {\r\n\tpointer-events: auto;\r\n}\r\n\r\n.button-menu {\r\n\twidth: 64px;\r\n\theight: 64px;\r\n\tborder-radius: 50%;\r\n\tdisplay: inline-grid;\r\n\tplace-items: center;\r\n\tborder: 1px solid var(--color-button-menu);\r\n\tfill: var(--color-button-menu);\r\n}\r\n\r\n.button-menu svg {\r\n\ttransition: transform 0.5s ease;\r\n}\r\n\r\n.button-menu:focus-visible,\r\n.button-menu:hover {\r\n\tfill: var(--color-button-menu-hover);\r\n\tborder-color: var(--color-button-menu-hover);\r\n}\r\n\r\n.button-menu:hover svg {\r\n\ttransform: scale(1.1);\r\n}\r\n\r\n.frame--menu-open .button-menu {\r\n\topacity: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n.content {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: flex;\r\n\twidth: 100%;\r\n\tposition: absolute;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tbox-sizing: border-box;\r\n\theight: 100%;\r\n /* min-height: calc(var(--vh, 1vh) * 100); */\r\n}\r\n\r\n.content__title {\r\n\tfont-weight: 200;\r\n\ttext-align: center;\r\n\tfont-size: clamp(2rem, 10vw, 5rem);\r\n\tline-height: 0.75;\r\n\tcursor: default;\r\n\tmargin: 10vh 0 0 0;\r\n}\r\n\r\n.content__title-main {\r\n\tfont-size: clamp(3rem, 15vw, 10rem);\r\n display: block;\r\n will-change: opacity, transform;\r\n}\r\n\r\n.content__title-sub {\r\n\tdisplay: block;\r\n\twill-change: opacity, transform;\r\n}\r\n\r\n.button-enter {\r\n\tmargin-top: 4vh;\r\n\ttransition: transform 0.5s ease;\r\n}\r\n\r\n.button-enter:hover {\r\n transform: translateX(15px) rotate(-40deg);\r\n}\r\n\r\n.menu-wrap {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 100%;\r\n\tgrid-template-rows: 100vh;\r\n\tposition: relative;\r\n\tbackground: var(--color-bg-menu);\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n\toverflow: hidden;\r\n}\r\n\r\n.menu-wrap.menu-wrap--open {\r\n\tpointer-events: auto;\r\n\topacity: 1;\r\n}\r\n\r\n.overlay {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tposition: relative;\r\n\tz-index: 1000;\r\n\tpointer-events: none;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.menu {\r\n\tgrid-area: 1 / 1 / 2 / 2;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\theight: 100%;\r\n}\r\n\r\n.menu__item {\r\n\tfont-size: 9vw;\r\n\tcolor: #fff;\r\n\tcursor: pointer;\r\n\tline-height: 1;\r\n\tfont-weight: 300;\r\n text-align: right;\r\n position: relative;\r\n will-change: opacity, transform;\r\n}\r\n\r\n.menu__item:hover .menu__item-tiny {\r\n\tcolor: #fff;\r\n}\r\n\r\n.menu__item-tiny {\r\n\tfont-size: 1rem;\r\n}\r\n\r\n.menu__item:nth-child(odd) {\r\n\tmargin-left: -10vw;\r\n}\r\n\r\n.menu__item-text {\r\n\tcolor: var(--color-menu);\r\n}\r\n\r\n.menu__item:hover .menu__item-text {\r\n\tcolor: var(--color-menu-hover);\r\n}\r\n\r\n.tiles {\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\theight: 150vh;\r\n\tdisplay: flex;\r\n\topacity: 0.5;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\ttransform: translate3d(-50%,-50%, 0) rotate(22.5deg);\r\n}\r\n\r\n.tiles__line {\r\n\tdisplay: flex;\r\n\ttransform: translateX(25%);\r\n\tanimation: runner 10s linear infinite;\r\n}\r\n\r\n.tiles__line:nth-child(2) {\r\n\tanimation-duration: 16s;\r\n}\r\n\r\n.tiles__line:nth-child(3) {\r\n\tanimation-duration: 22s;\r\n}\r\n\r\n@keyframes runner {\r\n\tto {\r\n\t\ttransform: translateX(-25%);\r\n\t}\r\n}\r\n\r\n.tiles__line-img {\r\n\t--tile-margin: 3vw;\r\n\tflex: none;\r\n\twidth: 30vh;\r\n\theight: 30vh;\r\n\tmargin: var(--tile-margin);\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n\tborder-radius: 50%;\r\n}\r\n\r\n.tiles__line-img--large {\r\n\twidth: 100vh;\r\n\tborder-radius: 20vh;\r\n}\r\n\r\n.button-close {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tmargin: 2rem;\r\n\tstroke: var(--color-button-close);\r\n\tfill: none;\r\n}\r\n\r\n.button-close:focus-visible,\r\n.button-close:hover {\r\n\tstroke: var(--color-button-close-hover);\r\n}\r\n\r\n@media screen and (min-width: 53em) {\r\n\t.frame {\r\n\t\tgrid-template-columns: 390px 1fr 390px;\r\n\t\tgrid-template-areas: 'author heading button'\r\n\t\t\t\t\t\t\t'... ... ...'\r\n\t\t\t\t\t\t\t'title links links';\t\r\n\t\tfont-size: 1.5rem;\r\n\t}\r\n\t.frame__title {\r\n\t\tjustify-self: start;\r\n\t\talign-self: end;\r\n\t\tmargin: 0 3rem 0 0;\r\n\t}\r\n\t.frame__links {\r\n\t\tdisplay: flex;\r\n\t\tjustify-self: start;\r\n\t\tpadding: 0;\r\n\t}\r\n\t.frame__links a:not(:last-child) {\r\n\t\tmargin-right: 0.5rem;\r\n\t}\r\n\t.frame__heading-main {\r\n\t\tfont-size: 2.15rem;\r\n\t}\r\n\t.frame__heading-sub {\r\n\t\tfont-size: 1rem;\r\n\t}\r\n\t.menu__item-tiny {\r\n\t\tfont-size: 2rem;\r\n\t}\r\n}\r\n"],"names":[],"version":3,"file":"index.d046a61c.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/src/css/base.css b/src/css/base.css index b7f29c7..9d4dfe8 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -9,10 +9,8 @@ --vh: 1vh; } -html { - margin: 0; - padding: 0; - overflow: hidden; +html, body { + height: 100%; } body { @@ -40,9 +38,9 @@ body { font-family: meno-banner, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - overflow: hidden; + overflow: auto; min-height: 100vh; - height: calc(var(--vh, 1vh) * 100); + min-height: calc(var(--vh, 1vh) * 100); } main { @@ -158,11 +156,12 @@ a:focus-visible { transform-origin: 100% 50%; } -main { - display: grid; - grid-template-columns: 100%; - grid-template-rows: 100vh; -} +/* main { + height: 100vh; + height: calc(var(--vh, 1vh) * 100); + overflow: hidden; + position: relative; +} */ .frame { grid-area: 1 / 1 / 2 / 2; @@ -290,12 +289,14 @@ main { .content { grid-area: 1 / 1 / 2 / 2; display: flex; - flex-direction: column; width: 100%; - position: relative; + position: absolute; + flex-direction: column; align-items: center; - height: 100%; justify-content: center; + box-sizing: border-box; + height: 100%; + /* min-height: calc(var(--vh, 1vh) * 100); */ } .content__title { @@ -336,6 +337,7 @@ main { background: var(--color-bg-menu); pointer-events: none; opacity: 0; + overflow: hidden; } .menu-wrap.menu-wrap--open {