diff --git a/assets/css/style.min.css b/assets/css/style.min.css index 63a1a40..cfbc3ce 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:'Gloria Hallelujah';src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: 'Nunito', Verdana, sans-serif;--title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1.2rem;--small-text-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.6rem;--h4-font-size: 1.4rem;--content-max-width: 140rem;--text-max-width: 70rem;--icon-size: 2.5rem;--header-vertical-padding: 2rem;--header-horizontal-padding: 2rem;--header-height: calc((var(--header-vertical-padding) * 2) + var(--h1-font-size));--footer-vertical-padding: 2rem;--footer-horizontal-padding: 2rem;--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));--generic-section-vertical-padding: 2rem;--generic-section-horizontal-padding: 1rem;--home-section-min-height: calc(100vh - var(--header-height) - var(--footer-height));--home-nav-gap: 1rem;--home-nav-item-size: 2rem;--home-nav-item-translation: 0;--home-nav-image-max-height: calc(100vh - var(--header-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-height));--black: #000;--jet: #333333;--white: #fff}@media screen and (min-width: 48rem){:root{--icon-size: 3rem;--header-horizontal-padding: 4rem;--footer-horizontal-padding: 4rem;--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size));--generic-section-horizontal-padding: 2rem}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@-webkit-keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}@keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3,h4{color:var(--black)}h1{font-family:var(--title-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--title-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:2rem 0 0 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:1rem 0}h4{font-family:var(--text-font-family);font-size:var(--h4-font-size);line-height:var(--h4-font-size);margin:1rem 0}p{text-align:justify}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:'header' auto 'main' 1fr 'footer' auto / 1fr}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}header{height:var(--header-height);padding:var(--header-vertical-padding) var(--header-horizontal-padding)}.header-bar{max-width:var(--content-max-width);margin:auto}.header-bar__logo{width:max-content}.header-bar__logo-link{text-decoration:none}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--2-items .home__nav-item-2{grid-area:bottom;place-self:start center}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--4-items .home__nav-item-2{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--4-items .home__nav-item-3{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--4-items .home__nav-item-4{grid-area:bottom;place-self:start center}.home__nav--5-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--5-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--5-items .home__nav-item-5{grid-area:bottom;place-self:start center}.home__nav--6-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--6-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--6-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--6-items .home__nav-item-6{grid-area:bottom;place-self:start center}.home__nav--7-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--7-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--7-items .home__nav-item-5{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-6{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-7{grid-area:bottom;place-self:start center}.home__nav--8-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--8-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--8-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--8-items .home__nav-item-6{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-7{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-8{grid-area:bottom;place-self:start center}.home__nav-link{color:var(--black);text-decoration:none;-webkit-animation:fade-in 1s ease-out;animation:fade-in 1s ease-in-out}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}footer{height:var(--footer-height);padding:var(--footer-vertical-padding) var(--footer-horizontal-padding)}.footer-bar{max-width:var(--content-max-width);margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--icon-size);height:var(--icon-size)}.footer-bar__social a svg{fill:var(--jet);width:100%;height:100%;-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover svg,.footer-bar__social a:focus svg,.footer-bar__social a:active svg{fill:var(--black)}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__copyright{font-size:var(--small-text-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}} +@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:'Nunito';src:url(../fonts/nunito/Nunito-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:'Gloria Hallelujah';src:url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--text-font-family: 'Nunito', Verdana, sans-serif;--title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;--regular-font-weight: 400;--medium-font-weight: 500;--semi-bold-font-weight: 600;--bold-font-weight: 700;--text-font-size: 1rem;--small-text-font-size: 0.8rem;--h1-font-size: 1.8rem;--h2-font-size: 1.4rem;--h3-font-size: 1.4rem;--h4-font-size: 1.2rem;--content-max-width: 140rem;--text-max-width: 70rem;--icon-size: 2.5rem;--header-bar-vertical-padding: 2rem;--header-bar-horizontal-padding: 2rem;--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));--footer-bar-vertical-padding: 1rem;--footer-bar-horizontal-padding: 2rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));--generic-section-vertical-padding: 2rem;--generic-section-horizontal-padding: 1rem;--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));--home-nav-gap: 1rem;--home-nav-item-size: 2rem;--home-nav-item-translation: 0;--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));--black: #000;--jet: #333333;--white: #fff}@media screen and (min-width: 48rem){:root{--text-font-size: 1.2rem;--small-text-font-size: 1rem;--h1-font-size: 2rem;--h2-font-size: 1.6rem;--h3-font-size: 1.6rem;--h4-font-size: 1.4rem;--icon-size: 3rem;--header-bar-horizontal-padding: 4rem;--footer-bar-vertical-padding: 2rem;--footer-bar-horizontal-padding: 4rem;--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));--generic-section-horizontal-padding: 2rem}}@-webkit-keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@keyframes wave-up{0%{top:0}60%{top:-0.5rem}100%{top:0}}@-webkit-keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}@keyframes wave-down{0%{bottom:0}60%{bottom:-0.5rem}100%{bottom:0}}body{font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-font-size);color:var(--jet);background-color:var(--white)}h1,h2,h3,h4{color:var(--black)}h1{font-family:var(--title-font-family);font-size:var(--h1-font-size);line-height:var(--h1-font-size)}h2{font-family:var(--title-font-family);font-size:var(--h2-font-size);line-height:var(--h2-font-size);margin:2rem 0 0 0}h3{font-family:var(--text-font-family);font-size:var(--h3-font-size);line-height:var(--h3-font-size);margin:1rem 0}h4{font-family:var(--text-font-family);font-size:var(--h4-font-size);line-height:var(--h4-font-size);margin:1rem 0}p{text-align:justify}a{color:var(--jet);text-decoration:underline;-webkit-transition:color 200ms ease-in-out;-o-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}a:hover,a:focus,a:active{color:var(--black)}body{min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;grid:'header' auto 'main' 1fr 'footer' auto / 1fr}header{grid-area:header}main{grid-area:main}footer{grid-area:footer}.header-bar{max-width:var(--content-max-width);height:var(--header-bar-height);margin:auto;padding:var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding)}.header-bar__logo{width:max-content}.header-bar__logo-link{text-decoration:none}.home-section{max-width:var(--content-max-width);min-height:var(--home-section-min-height);margin:auto;padding:var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home__nav{height:100%;display:-ms-grid;display:grid;grid:"top-left top top-right" var(--home-nav-item-size) "left center right" auto "bottom-left bottom bottom-right" var(--home-nav-item-size)/var(--home-nav-item-size) auto var(--home-nav-item-size);place-content:center center;gap:var(--home-nav-gap);line-height:0}.home__nav-image{grid-area:center}.home__nav-image img{min-width:12rem;min-height:12rem;max-height:var(--home-nav-image-max-height)}.home__nav--2-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--2-items .home__nav-item-2{grid-area:bottom;place-self:start center}.home__nav--3-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--3-items .home__nav-item-3{grid-area:bottom;place-self:start center}.home__nav--4-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--4-items .home__nav-item-2{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--4-items .home__nav-item-3{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--4-items .home__nav-item-4{grid-area:bottom;place-self:start center}.home__nav--5-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--5-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--5-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--5-items .home__nav-item-5{grid-area:bottom;place-self:start center}.home__nav--6-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--6-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--6-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--6-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--6-items .home__nav-item-6{grid-area:bottom;place-self:start center}.home__nav--7-items .home__nav-item-1{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-2{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--7-items .home__nav-item-3{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--7-items .home__nav-item-4{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--7-items .home__nav-item-5{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-6{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--7-items .home__nav-item-7{grid-area:bottom;place-self:start center}.home__nav--8-items .home__nav-item-1{grid-area:top;place-self:end center}.home__nav--8-items .home__nav-item-2{grid-area:top-left;place-self:end end;-webkit-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(-45deg) translateY(var(--home-nav-item-translation));transform:rotate(-45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-3{grid-area:top-right;place-self:end start;-webkit-transform:rotate(45deg) translateY(var(--home-nav-item-translation));-ms-transform:rotate(45deg) translateY(var(--home-nav-item-translation));transform:rotate(45deg) translateY(var(--home-nav-item-translation))}.home__nav--8-items .home__nav-item-4{grid-area:left;place-self:center end;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.home__nav--8-items .home__nav-item-5{grid-area:right;place-self:center start;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.home__nav--8-items .home__nav-item-6{grid-area:bottom-left;place-self:start end;-webkit-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-7{grid-area:bottom-right;place-self:start start;-webkit-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));-ms-transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1));transform:rotate(-45deg) translateY(calc(var(--home-nav-item-translation) * -1))}.home__nav--8-items .home__nav-item-8{grid-area:bottom;place-self:start center}.home__nav-link{color:var(--black);text-decoration:none;opacity:0;-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}.home__nav-link div{opacity:0;-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}.home__nav-link--visible{opacity:1}.home__nav-link--visible div{opacity:1}.home__nav-letter--wave-up{-webkit-animation:wave-up 600ms ease-out;animation:wave-up 600ms ease-in-out}.home__nav-letter--wave-down{-webkit-animation:wave-down 600ms ease-out;animation:wave-down 600ms ease-in-out}.footer-bar{max-width:var(--content-max-width);height:var(--footer-bar-height);margin:auto;padding:var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-bar__social a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--icon-size);height:var(--icon-size)}.footer-bar__social a svg{fill:var(--jet);width:100%;height:100%;-webkit-transition:fill 200ms ease-in-out;-o-transition:fill 200ms ease-in-out;transition:fill 200ms ease-in-out}.footer-bar__social a:hover svg,.footer-bar__social a:focus svg,.footer-bar__social a:active svg{fill:var(--black)}.footer-bar__social a+a{margin:0 0 0 1rem}.footer-bar__copyright{font-size:var(--small-text-font-size);margin:1rem 0 0 0}@media screen and (min-width: 48rem){.footer-bar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.footer-bar__social{order:2}.footer-bar__copyright{order:1;margin:0}} diff --git a/assets/css/style.scss b/assets/css/style.scss index 446b7ef..f68f907 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -83,31 +83,31 @@ --medium-font-weight: 500; --semi-bold-font-weight: 600; --bold-font-weight: 700; - --text-font-size: 1.2rem; - --small-text-font-size: 1rem; - --h1-font-size: 2rem; - --h2-font-size: 1.6rem; - --h3-font-size: 1.6rem; - --h4-font-size: 1.4rem; + --text-font-size: 1rem; + --small-text-font-size: 0.8rem; + --h1-font-size: 1.8rem; + --h2-font-size: 1.4rem; + --h3-font-size: 1.4rem; + --h4-font-size: 1.2rem; // Dimensions --content-max-width: 140rem; --text-max-width: 70rem; --icon-size: 2.5rem; - --header-vertical-padding: 2rem; - --header-horizontal-padding: 2rem; - --header-height: calc((var(--header-vertical-padding) * 2) + var(--h1-font-size)); - --footer-vertical-padding: 2rem; - --footer-horizontal-padding: 2rem; - --footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size)); + --header-bar-vertical-padding: 2rem; + --header-bar-horizontal-padding: 2rem; + --header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size)); + --footer-bar-vertical-padding: 1rem; + --footer-bar-horizontal-padding: 2rem; + --footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size)); --generic-section-vertical-padding: 2rem; --generic-section-horizontal-padding: 1rem; - --home-section-min-height: calc(100vh - var(--header-height) - var(--footer-height)); + --home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height)); --home-nav-gap: 1rem; --home-nav-item-size: 2rem; --home-nav-item-translation: 0; - --home-nav-image-max-height: calc(100vh - var(--header-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-height)); + --home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height)); // Colors @@ -125,12 +125,22 @@ $desktop-media-query: 62rem; :root { + // Fonts + + --text-font-size: 1.2rem; + --small-text-font-size: 1rem; + --h1-font-size: 2rem; + --h2-font-size: 1.6rem; + --h3-font-size: 1.6rem; + --h4-font-size: 1.4rem; + // Dimensions --icon-size: 3rem; - --header-horizontal-padding: 4rem; - --footer-horizontal-padding: 4rem; - --footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size)); + --header-bar-horizontal-padding: 4rem; + --footer-bar-vertical-padding: 2rem; + --footer-bar-horizontal-padding: 4rem; + --footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size)); --generic-section-horizontal-padding: 2rem; } } @@ -139,24 +149,6 @@ $desktop-media-query: 62rem; // ANIMATIONS // =========================================================================== -@-webkit-keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - @-webkit-keyframes wave-up { 0% { top: 0; @@ -304,16 +296,13 @@ footer { // HEADER // =========================================================================== -header { - height: var(--header-height); - padding: var(--header-vertical-padding) var(--header-horizontal-padding); -} - // Header bar .header-bar { max-width: var(--content-max-width); + height: var(--header-bar-height); margin: auto; + padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding); } .header-bar__logo { @@ -725,8 +714,25 @@ header { .home__nav-link { color: var(--black); text-decoration: none; - -webkit-animation: fade-in 1s ease-out; - animation: fade-in 1s ease-in-out; + opacity: 0; + -webkit-transition: opacity 1s ease-in-out; + -o-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; + + div { + opacity: 0; + -webkit-transition: opacity 1s ease-in-out; + -o-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; + } +} + +.home__nav-link--visible { + opacity: 1; + + div { + opacity: 1; + } } .home__nav-letter--wave-up { @@ -743,16 +749,13 @@ header { // FOOTER // =========================================================================== -footer { - height: var(--footer-height); - padding: var(--footer-vertical-padding) var(--footer-horizontal-padding); -} - // Footer bar .footer-bar { max-width: var(--content-max-width); + height: var(--footer-bar-height); margin: auto; + padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding); display: -webkit-box; display: -ms-flexbox; display: flex; diff --git a/assets/js/app.js b/assets/js/app.js index 538cba9..a91d74e 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -82,7 +82,7 @@ function setNavItemTranslationProperty() { // Set navigation grid display depending on number of links function setNavGridDisplay() { - if (navLinks) { + if (navEl && navLinks) { if (navLinks.length === 2) { navEl.classList.add('home__nav--2-items'); } else if (navLinks.length === 3) { @@ -98,6 +98,9 @@ function setNavGridDisplay() { } else if (navLinks.length === 8) { navEl.classList.add('home__nav--8-items'); } + for (let i = 0; i < navLinks.length; i++) { + navLinks[i].classList.add('home__nav-link--visible'); + } } }