Redesign Demo Page

README.md

@@ -80,18 +80,18 @@ Configures what state of the toggle button should be shown to the user.
 
 ## Customize Dark Mode
 
-You can exclude elements from being inverted in dark mode using the `.nightowl-daylight` CSS class. Just add it to an element and it will show the element in the same way as the light mode. 
+You can exclude elements from being inverted in dark mode using the `.nightowl-daylight` CSS class. Just add it to an element and it will show the element in the same way as the light mode.
 
 ```html
 <div>
-  <p>I'm inverted in Dark Mode</p>
-  <p class="nightowl-daylight">I'm not inverted in Dark Mode</p>
+    <p>I'm inverted in Dark Mode</p>
+    <p class="nightowl-daylight">I'm not inverted in Dark Mode</p>
 </div>
 ```
 
 ## Contribution Guidelines
 
-Please open an issue and wait for one of the Maintainers to approve it until you open a merge request. 
+Please open an issue and wait for one of the Maintainers to approve it until you open a merge request.
 
 ## Credits
 

src/main.ts

@@ -1,3 +1,12 @@
+import './styles/global.css'
+import './styles/button.css'
+import './styles/header.css'
+import './styles/intro.css'
+import './styles/features.css'
+import './styles/statistics.css'
+import './styles/team.css'
+import './styles/contact.css'
+
 const LOCAL_STORAGE_KEY = 'nightowl-color-scheme'
 const LIGHT = 'light'
 const DARK = 'dark'

src/scripts/header.ts

@@ -0,0 +1,75 @@
+class HeaderService {
+    private headerElement = document.querySelector('body > header')!
+    private menuButton = document.querySelector('body > header button.menu')!
+    private closeButton = document.querySelector('body > header button.close')!
+    private navElement = document.querySelector('body > header nav')!
+    private navLinks = document.querySelectorAll<HTMLAnchorElement>(
+        'body > header nav a'
+    )
+
+    public init(): void {
+        this.addMenuButtonClickListener()
+        this.addNavLinksClickListener()
+        this.addWindowResizeObserver()
+        this.addDocumentScrollListener()
+
+        this.updateStickiness()
+    }
+
+    private addMenuButtonClickListener(): void {
+        this.menuButton.addEventListener('click', () => {
+            this.showMobileNav()
+        })
+
+        this.closeButton.addEventListener('click', () => {
+            this.hideMobileNav()
+        })
+    }
+
+    private showMobileNav(): void {
+        this.navElement.classList.remove('hidden')
+        this.menuButton.classList.add('hidden')
+        this.closeButton.classList.remove('hidden')
+    }
+
+    private hideMobileNav(): void {
+        this.navElement.classList.add('hidden')
+        this.menuButton.classList.remove('hidden')
+        this.closeButton.classList.add('hidden')
+    }
+
+    private addNavLinksClickListener(): void {
+        this.navLinks.forEach((navLink) => {
+            navLink.addEventListener('click', () => {
+                this.hideMobileNav()
+            })
+        })
+    }
+
+    private addWindowResizeObserver(): void {
+        const observer = new ResizeObserver(() => {
+            if (window.innerWidth >= 800) {
+                this.hideMobileNav()
+            }
+        })
+
+        observer.observe(document.body)
+    }
+
+    private addDocumentScrollListener(): void {
+        document.addEventListener('scroll', () => {
+            this.updateStickiness()
+        })
+    }
+
+    private updateStickiness(): void {
+        if (window.scrollY > 50) {
+            this.headerElement.classList.add('stuck')
+        } else if (window.scrollY === 0) {
+            this.headerElement.classList.remove('stuck')
+        }
+    }
+}
+
+const headerService = new HeaderService()
+headerService.init()

src/styles/button.css

@@ -0,0 +1,54 @@
+.button {
+    border-radius: var(--border-radius);
+
+    font-weight: 500;
+
+    text-decoration: none;
+    text-transform: uppercase;
+
+    cursor: pointer;
+
+    &.button--solid {
+        background-color: var(--color-primary);
+        color: var(--color-primary-opposite);
+
+        padding: 1em 2em;
+
+        border: none;
+
+        transition: background-color var(--animation-duration-fast) ease-in-out;
+
+        &:hover {
+            background-color: var(--color-primary-darker);
+        }
+    }
+
+    &.button--outlined {
+        background-color: transparent;
+        color: var(--color-primary);
+
+        padding: 0.5em 1em;
+
+        border: 1px solid var(--color-primary);
+
+        transition: var(--animation-duration-fast) ease-in-out;
+        transition-property: background-color, color;
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: var(--color-primary-opposite);
+        }
+    }
+
+    &.button--icon {
+        background-color: transparent;
+
+        border: none;
+
+        transition: background-color var(--animation-duration-fast) ease-in-out;
+
+        &:hover {
+            background-color: var(--color-gray-90);
+        }
+    }
+}

src/styles/contact.css

@@ -0,0 +1,84 @@
+#contact {
+    display: grid;
+    grid-template-areas: 'h2' 'p' 'visuals' 'form';
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    padding-block: 4rem;
+    padding-inline: var(--page-padding-inline);
+
+    h2 {
+        grid-area: h2;
+    }
+
+    > p {
+        grid-area: p;
+
+        margin-block-end: 1rem;
+    }
+
+    .visuals {
+        grid-area: visuals;
+
+        display: grid;
+        place-items: center;
+
+        .shape {
+            box-shadow: var(--box-shadow-normal);
+
+            overflow: hidden;
+
+            max-block-size: 25rem;
+            max-inline-size: 80%;
+            aspect-ratio: 1;
+
+            border-radius: var(--border-radius-blob);
+
+            img {
+                block-size: 100%;
+                inline-size: 100%;
+                max-inline-size: unset;
+                object-fit: cover;
+            }
+        }
+    }
+
+    form {
+        grid-area: form;
+
+        display: grid;
+        align-content: start;
+        gap: 1.5rem;
+
+        label {
+            display: grid;
+            gap: 0.25rem;
+
+            input,
+            textarea {
+                padding: 0.5rem;
+
+                border: 1px solid var(--color-gray-50);
+                border-radius: var(--border-radius);
+
+                font-size: 1.25rem;
+            }
+
+            textarea {
+                resize: vertical;
+            }
+        }
+
+        button {
+            font-size: 1.2rem;
+        }
+    }
+}
+
+@media (width >= 800px) {
+    #contact {
+        grid-template-areas: 'h2 h2' 'p p' 'visuals form';
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+}

src/styles/features.css

@@ -0,0 +1,70 @@
+#features {
+    display: grid;
+    gap: 1rem;
+
+    padding-block: 4rem;
+    padding-inline: var(--page-padding-inline);
+
+    > p {
+        margin-block-end: 1rem;
+    }
+
+    > ul {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+        gap: 2rem;
+
+        > li {
+            background-color: var(--color-gray-98);
+            box-shadow: var(--box-shadow-normal);
+
+            display: grid;
+            align-content: start;
+            justify-items: center;
+
+            padding: 1rem;
+
+            border-radius: var(--border-radius);
+
+            text-align: center;
+
+            .visual {
+                svg {
+                    block-size: 1em;
+                    inline-size: 1em;
+
+                    font-size: 4rem;
+
+                    path {
+                        fill: var(--color);
+                    }
+                }
+            }
+
+            .title {
+                color: var(--color);
+
+                margin-block-end: 1rem;
+
+                font-size: 1.5rem;
+                font-weight: 700;
+            }
+
+            &:nth-of-type(1) {
+                --color: hsl(10deg 70% 50%);
+            }
+
+            &:nth-of-type(2) {
+                --color: hsl(40deg 70% 50%);
+            }
+
+            &:nth-of-type(3) {
+                --color: hsl(90deg 70% 50%);
+            }
+
+            &:nth-of-type(4) {
+                --color: hsl(160deg 70% 50%);
+            }
+        }
+    }
+}