diff --git a/app/scripts.js b/app/scripts.js new file mode 100644 index 0000000..91c1420 --- /dev/null +++ b/app/scripts.js @@ -0,0 +1,32 @@ +const header = document.querySelector('header'); + + + +document.addEventListener("DOMContentLoaded", function () { + let header = document.querySelector('header'); + if (header) { + let body = document.querySelector("body"); + + window.addEventListener("scroll", function () { + let scroll = window.scrollY; + + if (window.innerWidth > 768) { + if (scroll >= 60) { + header.classList.add("header-position-fixed"); + } else { + header.classList.remove("header-position-fixed"); + } + } + + if (scroll >= 60) { + header.style.top = '0px'; + } else { + if (body.classList.contains("landing-page")) { + header.style.top = '0px'; + } else { + header.style.top = `${hellobarHeight + 0}px`; + } + } + }); + } +}); \ No newline at end of file diff --git a/app/styles-new.css b/app/styles-new.css new file mode 100644 index 0000000..6eedfd3 --- /dev/null +++ b/app/styles-new.css @@ -0,0 +1,184 @@ +header { + display: flex; + flex-direction: column; + position: relative; + grid-column: 1/2; + grid-row: 1/2; +} + +/* HOME START */ + +.home header { + position: absolute; + top: 60px; + display: flex; + padding: 20px; + grid-area: header; + flex-direction: column; + z-index: 900; +} + +.home header img { + width: 150px; + height: auto; +} + +.home img#tpg-wordmark { + top: 23px; + position: absolute; +} + +@media (min-width: 768px) { + .home header { + position: fixed; + top: 60px; + } +} + +.home-cover { + background: white; + padding-top: 220px; + padding-left: 20px; + padding-bottom: 40px; +} + +.home-cover h1 { + margin-bottom: 1rem; +} + +@media (min-width: 768px) { +.home-cover { + padding-top: 40px; + padding-left: 220px; +} + +.home-cover h1 { + max-width: 900px; + margin-left: 0; +} + +.home-cover p { + max-width: 490px; +} +} + +/* +@media screen and (min-width: 1441px) { + .home-cover { + width: 100%; + padding-left: 0; + } + .home-cover h1, .home-cover p { + text-align: center; + margin-left: auto; + margin-right: auto; + } +} + */ + +.sub-brands { + margin-top: 80px; +} + +.sub-brand { + display: grid; + grid-template-areas: + 'logos' + 'screens' + 'texts' + 'links'; + gap: 2rem 3rem; +} + +.sub-brand p { + margin-bottom: -1.5rem; +} + +@media (min-width: 768px) { + .sub-brand { + grid-template-areas: + 'screens logos' + 'screens texts' + 'screens links'; + justify-content: start; + } +} + +a.screen { + width: unset; +} + +.sub-brand .screen { + grid-area: screens; +} + +@media (min-width: 768px) { + .sub-brand .screen { + margin-top: unset; + aspect-ratio: 4 / 3; + width: 100%; + width: 299px; + } +} + +a.screen figure { + border-radius: 6px 6px 4px 4px; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition: .2s ease-in-out; + transition: .2s ease-in-out; +} + +img.window-frame { + min-width: calc(100%); +} + + +.polyfen a span { + background: #ecf0f3 url(../imgs/sub-brands/polyfen-logo.svg) no-repeat left top; +} + +.polyatlas a span { + background: #ecf0f3 url(../imgs/sub-brands/poly-atlas-logo.svg) no-repeat left top; +} + +.polycookies a span { + background: #ecf0f3 url(../imgs/sub-brands/poly-cookies-logo.svg) no-repeat left top; +} + +.polyforum a span { + background: #ecf0f3 url(../imgs/sub-brands/poly-forum-logo.svg) no-repeat left top; +} + +.polyqwerty a span { + background: #ecf0f3 url(../imgs/sub-brands/poly-qwerty-logo.svg) no-repeat left top; +} + +.polykit a span { + background: #ecf0f3 url(../imgs/sub-brands/polykit-logo.svg) no-repeat left top; +} + +.polypress a span { + background: #ecf0f3 url(../imgs/sub-brands/polypress-logo.svg) no-repeat left top; +} + +/* HOME END */ + +.gradient-text { + background: linear-gradient(45deg,#722FFF,#4b00ae,#d12b94,#722FFF,#4b00ae); + background: -webkit-linear-gradient(45deg,#722FFF,#4b00ae,#d12b94,#722FFF,#4b00ae); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + background-size: 300% !important; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: animated_text 4s ease-in-out infinite; + -moz-animation: animated_text 4s ease-in-out infinite; + -webkit-animation: animated_text 4s ease-in-out infinite; +} + +@keyframes animated_text { +0% { background-position: 0px 50%; } +50% { background-position: 100% 50%; } +100% { background-position: 0px 50%; }} \ No newline at end of file diff --git a/brand/index.php b/brand/index.php index e22fcae..ce5606c 100644 --- a/brand/index.php +++ b/brand/index.php @@ -1,165 +1,158 @@ -
-