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 @@ - - Brand Guidelines | Polyfen + + Brand Guidelines | Polyfen + + + + - - - + - + + + + - - - - - -
- - -
-
- Folder Illustration -

Brand Guidelines

-

The Polyfen Group LLC
Est. 2018

-
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
-
-
+

+ + +
+
+ Folder Illustration +

Brand Guidelines

+
+
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+
+
- + + \ No newline at end of file diff --git a/business/index.php b/business/index.php index 2612692..ef508ce 100644 --- a/business/index.php +++ b/business/index.php @@ -1,103 +1,105 @@ - - Business Plan | Polyfen + + Business Plan | Polyfen + + + + - - - + - + + + + - - - - - -
- +
+
+ Folder Illustration +

Business Plan

+
+
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+
+
+ + -
-
- Folder Illustration -

Business Plan

-

The Polyfen Group LLC
Est. 2018

-
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
-
-
- + \ No newline at end of file diff --git a/includes/common-app-calling.php b/includes/common-app-calling.php index 4ab28ad..d5d761f 100644 --- a/includes/common-app-calling.php +++ b/includes/common-app-calling.php @@ -1,34 +1,6 @@ - - - - - - - - + + - - - - - - - diff --git a/includes/family-of-brands.php b/includes/family-of-brands.php index 7e529c0..1f3794b 100644 --- a/includes/family-of-brands.php +++ b/includes/family-of-brands.php @@ -5,18 +5,13 @@ Polyfen screenshot -

- Polyfen -

+ Polyfen

Creative & software boutique empowering US businesses with design, marketing, and engineering services since 2018.

- polyfen.com + polyfen.com
-

- Polyatlas -

+ Poly Atlas
@@ -25,15 +20,12 @@ class="web-icon" alt="">polyfen.com

Open-source step-by-step guide to the Branding process, including practical tips, case studies, template files, and many other useful resources.

- polyatlas.wiki + polyatlas.wiki
-

- Polycookies -

- + Poly Cookies +
Polycookies screenshot @@ -41,15 +33,12 @@ class="web-icon" alt="">polyfen.com

Open-source solution to privacy policy implementing a cookie consent banner with Google Tag Manager.

- polycookies.com + polycookies.com
-

- polyqwerty -

- + Poly Qwerty +
Polyqwerty screenshot @@ -57,14 +46,11 @@ class="web-icon" alt="">polyfen.com

Your keyboard's assistant. Click on a character to copy it. Easily find the right emoji, punctuation signs, and other symbols.

- polyqwerty.com + polyqwerty.com
-

- polykit -

+ Polykit
@@ -75,15 +61,12 @@ class="web-icon" alt="">polyfen.com User Interfaces with CSS code for developers and Figma library for designers.

- polykit.xyz + polykit.xyz
-
+
-
-

- polyforum -

+
+ Poly Forum
@@ -92,15 +75,12 @@ class="web-icon" alt="">polykit.xyz

// Work in Progress //

TBD

- polyforum.org + polyforum.org
-
-
-

- polypress -

- +
+
+ Poly Press +
Polipress screenshot @@ -108,6 +88,5 @@ class="web-icon" alt="">polykit.xyz

// Work in Progress //

TBD

- polypress.xyz + polypress.xyz
\ No newline at end of file diff --git a/includes/head.php b/includes/head.php index feb5d1b..5e0391c 100644 --- a/includes/head.php +++ b/includes/head.php @@ -4,32 +4,15 @@ - - - - - - + + + + + + - - - - + + diff --git a/includes/hello-nav.php b/includes/hello-nav.php index cf92086..e0d41ee 100644 --- a/includes/hello-nav.php +++ b/includes/hello-nav.php @@ -1,11 +1,11 @@ -